ContributorsLast modified on: Feb 8, 2017
siddharthlatestmetagroverweb-flow

SingleList

Image to be displayed

A SingleList sensor component creates a radio select list UI widget. It is used for filtering results based on the current selection from a list of items.

Example uses:

  • select a category from a list of categories for filtering e-commerce search results.
  • filtering restaurants by a cuisine choice.

Usage

<SingleList
  componentId="CitySensor"
  appbaseField="group.group_city.raw"
  title="Cities"
  size={100}
  sortBy="count"
  defaultSelected="London"
  showCount={true}
  showSearch={true}
  searchPlaceholder="Search City"
/>

Props

  • componentId String
    unique id of the sensor, can be referenced in an actuator’s actuate prop.
  • appbaseField String
    data field to be mapped with the component’s UI view. The list items are filtered by a database query on this field.
  • title String [optional]
    title of the component to be shown in the UI.
  • size Number [optional]
    control how many items to display in the List. Defaults to 100.
  • sortBy String [optional]
    sort the list items by one of count, asc, desc. Defaults to count, which sorts the list by the frequency of count value, most first.
  • defaultSelected string [optional]
    pre-selects an item from the list.
  • showCount Boolean [optional]
    show count value of the number of occurences besides a list item. Defaults to true.
  • showSearch Boolean [optional]
    whether to show a searchbox to filter the list items locally. Defaults to true.
  • searchPlaceholder String [optional]
    placeholder to be displayed in the searchbox, only applicable when the showSearch prop is set to true. When applicable, the default placeholder value is set to “Search”.

CSS Styles API

All reactivebase components are rbc namespaced.

Annotated image

<div class="rbc col s12 col-xs-12 card thumbnail rbc-search-active rbc-title-active rbc-placeholder-active rbc-singlelist">
  <h4 class="rbc-title col s12 col-xs-12">Cities</h4>
  <div class="rbc-search-container col s12 col-xs-12">
    <input type="text" class="rbc-input col s12 col-xs-12 form-control" value="" placeholder="Search City">
  </div>
  <div class="rbc-list-container col s12 col-xs-12">
    <div class="rbc-list-item row">
      <input type="radio" class="rbc-radio-item" value="London">
      <label class="rbc-label">London <span class="rbc-count">(211)</span></label>
    </div>
  </div>
</div>
  • SingleList component’s class name is rbc-singlelist. Additionally, depending on the presence / absence of the title prop, a rbc-title-active or rbc-title-inactive class is respectively applied. Similarly for search and searchPlaceholder props, classnames of rbc-search-active, rbc-search-inactive, rbc-placeholder-active, rbc-placeholder-active are applied.
  • the title element has a class name of rbc-title.
  • the search element has a class name of rbc-search-container.
  • the radio inputs are encapsulated inside a rbc-list-container class with each element having class name of rbc-list-item.
  • the input radio element has a class name of rbc-radio-item.
  • the label element has a class name of rbc-label.
  • the element containing count inside the label has a class name of rbc-count.

Examples

  1. List with all the default props

  2. List with custom sort and a default selection

  3. List with show search set to true

  4. List with a dependency on another sensor

  5. Playground (with all knob actions)