export default()

in src/components/DateRange.js [70:125]
55 lines of code
3 McCabe index (conditional complexity)

export default ({name, onChange, className, criteria}) => {
  const [range, setRange] = useState(criteria);
  const id = useMemo(generate, []);
  const [focusedClassName, setFocusedClassName] = useState('');

  return (
    <div css={styles} className={classNames(focusedClassName, className)}>
      {name && (
        <label htmlFor={id}>
          <Text className='filter-heading' children={name} />
        </label>
      )}
      <div>
        <Flatpickr
          {...{id}}
          placeholder='Select range'
          value={range}
          onOpen={() => setFocusedClassName('focused')}
          onClose={() => setFocusedClassName('')}
          onChange={v => {
            setRange(v);
            onChange(v);
          }}
          options={{
            mode: 'range',
            dateFormat: 'F j, Y',
          }}
        />
        {range && (
          <>
            <div className='separation' />
            <div
              aria-hidden='true'
              className='clear css-16pqwjk-indicatorContainer'
              onClick={() => {
                setRange(null);
                onChange(null);
              }}
            >
              <svg
                height='20'
                width='20'
                viewBox='0 0 20 20'
                aria-hidden='true'
                focusable='false'
                className='css-19bqh2r'
              >
                <path d='M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z' />
              </svg>
            </div>
          </>
        )}
      </div>
    </div>
  );
};