Descrbing the filter bar

filterbar.md

Filter Bar

Allow a user to type to either

A) Filter available keys by name B) Filter available keys by validation C) Filter available values for defined lists

When I say "list", then the getItemProps goes on every list item
that the editor renders.

For everything else, the getItemProps goes on the parent div

"Items", then, is

A) In idle state, it's all keys and all list items
B) In filter-key state, its all validated keys & all list items
C) In key-selected state, it's either
  1) If a list, it's each individual item
  2) If anything else, it's the parent div wrapper

So... items is actually only important when there is a list. Otherwise we can set it to [].

interface Configuration {
  key: {
    type: 'list' | 'date' | 'input',
    label: string;
    renderLabelValues: (selectedItems) => string;
    itemToString: (item) => string;
    renderEditorComponent: ({
      inputValue,
      selectedItems,
      selectItem,
      removeItem,
      selectMultipleItems
    }) => React.ReactCHild
  }
}

interface ListConfiguration {
  type: 'list',
  label: string;
  renderLabelValues: () => string;
  itemToString: () => string;
}

interface AddItem {}
interface RemoveItem {}

interface SelectedItems {
  `key-uuid`: {}
}

<FilterBar
  validations={({
    inputValue,
    defaultKeys,
    state
  }) => {
    return validKeys
  }}
  configuration={{
  }}
  onEvent={(event) => {
    if (event.type === 'ADD_ITEM') {}
    if (event.type === 'APPLY') {}
  }}

>

Apply ---> merges the keys into a straight object