export function FilterIcon()

in desktop/flipper-plugin/src/ui/data-table/ColumnFilter.tsx [35:205]
168 lines of code
5 McCabe index (conditional complexity)

export function FilterIcon({
  column,
  dispatch,
}: {
  column: DataTableColumn<any>;
  dispatch: DataTableDispatch;
}) {
  const [input, setInput] = useState('');
  const {filters} = column;
  const isActive = useMemo(() => filters?.some((f) => f.enabled), [filters]);

  const onAddFilter = (e: React.MouseEvent | React.KeyboardEvent) => {
    e.stopPropagation();
    dispatch({
      type: 'addColumnFilter',
      column: column.key,
      value: input,
    });
    setInput('');
  };

  const menu = (
    <Menu
      onMouseDown={(e) => {
        e.stopPropagation(); // prevents interaction accidentally with the Interactive component organizing resizng
      }}>
      <Menu.Item key="addFilter">
        <Layout.Right gap>
          <Input
            placeholder="Filter by value"
            value={input}
            onChange={(e) => {
              e.stopPropagation();
              setInput(e.target.value);
            }}
            onClick={(e) => {
              e.stopPropagation();
            }}
            onPressEnter={onAddFilter}
            disabled={false}
          />
          <Button
            onClick={onAddFilter}
            title="Add filter"
            type="ghost"
            style={{padding: '4px 8px'}}>
            <PlusCircleOutlined />
          </Button>
        </Layout.Right>
      </Menu.Item>
      <Menu.Divider />
      {filters?.length ? (
        filters?.map((filter, index) => (
          <Menu.Item key={index}>
            <Layout.Right center>
              <FilterCheckbox
                checked={filter.enabled}
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  dispatch({
                    type: 'toggleColumnFilter',
                    column: column.key,
                    index,
                  });
                }}>
                {filter.label}
              </FilterCheckbox>
              {!filter.predefined && (
                <MinusCircleOutlined
                  onClick={(e) => {
                    e.stopPropagation();
                    dispatch({
                      type: 'removeColumnFilter',
                      column: column.key,
                      index,
                    });
                  }}
                />
              )}
            </Layout.Right>
          </Menu.Item>
        ))
      ) : (
        <Menu.Item disabled key="nofilters">
          <Text type="secondary" style={{margin: 12}}>
            No active filters
          </Text>
        </Menu.Item>
      )}
      <Menu.Divider />
      <Menu.Item key="inverse">
        <Layout.Horizontal
          gap
          center
          onClick={(e) => {
            e.stopPropagation();
            e.preventDefault();
          }}>
          <Switch
            checked={!!column.inversed}
            size="small"
            onChange={(inversed) => {
              dispatch({
                type: 'setColumnFilterInverse',
                column: column.key,
                inversed,
              });
            }}
          />
          Exclude items matching filter
        </Layout.Horizontal>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item disabled key="fromselection">
        <div style={{textAlign: 'right'}}>
          <Button
            type="link"
            style={{fontWeight: 'unset'}}
            onClick={() => {
              dispatch({
                type: 'setColumnFilterFromSelection',
                column: column.key,
              });
            }}>
            From selection
          </Button>
          <Button
            type="link"
            style={{fontWeight: 'unset'}}
            onClick={() => {
              filters?.forEach((f, index) => {
                if (!f.enabled) {
                  dispatch({
                    type: 'toggleColumnFilter',
                    column: column.key,
                    index,
                  });
                }
              });
            }}>
            All
          </Button>
          <Button
            type="link"
            style={{fontWeight: 'unset'}}
            onClick={() => {
              filters?.forEach((f, index) => {
                if (f.enabled)
                  dispatch({
                    type: 'toggleColumnFilter',
                    column: column.key,
                    index,
                  });
              });
            }}>
            None
          </Button>
        </div>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={menu} trigger={['click']}>
      <FilterButton isActive={isActive}>
        <FilterOutlined />
      </FilterButton>
    </Dropdown>
  );
}