FiltersBar

A module that encloses the UX abstraction to create a dynamic filters bar.

Installation

yarn add @translated/react-filters-bar

Anatomy

import {FiltersBar, FiltersPicker} from '@translated/react-filters-bar'

export function Anatomy() {
  return (
    <FiltersBar
      filtersDef={{
        fruit: (
          <UseFilter>
            {({data, setValue, setOperator, remove}) => (
              <div>
                <div>Fruit filter</div>
                <select
                  value={data.operator}
                  onChange={(e) => {
                    setOperator(e.currentTarget.value)
                  }}
                >
                  <option value="eq">is</option>
                  <option value="neq">is not</option>
                </select>
                <select
                  value={data.value}
                  onChange={(e) => {
                    setValue(e.currentTarget.value)
                  }}
                >
                  <option value="apple">Apple</option>
                  <option value="grape">Grape</option>
                  <option value="banana">Banana</option>
                  <option value="ananas">Ananas</option>
                </select>
                <button onClick={remove}>Remove</button>
              </div>
            )}
          </UseFilter>
        ),
        // ... add as many filter definitions you may need.
      }}
    >
      <FiltersBar.Filters />

      <FiltersPicker valuesMap={{fruit: 'Fruit' /* ... */}}>
        <FiltersPicker.Trigger />

        <FiltersPicker.Popover>
          <FiltersPicker.Search />
          <FiltersPicker.List>
            {(matches) => (
              <>
                {matches.map((match) => (
                  <FiltersPicker.Item key={match} value={match} />
                ))}
              </>
            )}
          </FiltersPicker.List>
        </FiltersPicker.Popover>
      </FiltersPicker>
    </FiltersBar>
  )
}

Todo

In the future the library will export more convenient primitives for defining Filters, like:

• [ ] RemoveButton
• [ ] OperatorPicker
• [ ] ChoicePicker
• [ ] SearchPicker
• [ ] DatePicker