react-feather#Calendar JavaScript Examples

function Filter({
  timeseries,
  setTimeseries,
  date,
  dateOnChange,
  dates,
  datesOnChange,
  maxDate,
  floating,
  filterFacilityTypes,
  setFilterFacilityTypes,
  content,
}) {
  const [facilityTypesFilterOptions, setFacilityTypesFilterOptions] =
    useState(FACILITY_TYPES);
  const [_filterFacilityTypes, _setFilterFacilityTypes] =
    useState(filterFacilityTypes);
  const [facilityTypeFilterOpen, setFacilityTypeFilterOpen] = useState(false);
  const resetFacilityTypeFilter = () => {
    setFacilityTypeFilterOpen(false);
    setFacilityTypesFilterOptions(FACILITY_TYPES);
  };

  return (
    <div
      className={clsx(
        floating ? " mt-10 flex-shrink-0 " : "mb-8 rounded-lg",
        "flex flex-col items-center justify-between px-1 py-1 dark:bg-gray-800 bg-white shadow-md sm:px-4 sm:py-2 md:flex-row"
      )}
    >
      <p className="inline-flex dark:text-gray-400">Filters</p>
      <div className="inline-grid gap-1 grid-rows-none w-full sm:grid-flow-col-dense sm:grid-rows-1 sm:place-content-end">
        {![CONTENT.COVID, CONTENT.LSG].includes(content) && (
          <div className="relative h-10 dark:bg-gray-900 bg-white rounded-lg">
            <Button
              layout="link"
              onClick={() => setFacilityTypeFilterOpen(true)}
              iconRight={ChevronDown}
              className="w-full shadow-xs"
              disabled={facilityTypeFilterOpen}
            >
              Facility Type
            </Button>
            <Dropdown
              isOpen={facilityTypeFilterOpen}
              align="right"
              onClose={() => resetFacilityTypeFilter()}
              className="z-40"
            >
              <Label className="mb-2">
                <div className="inline-grid gap-1 grid-rows-none w-full xl:grid-flow-col-dense xl:grid-rows-1 xl:place-content-end">
                  <Input
                    className="dark:bg-gray-900"
                    placeholder="Search facility types"
                    onChange={(e) => {
                      setFacilityTypesFilterOptions(
                        e.target.value
                          ? fuzzysort
                              .go(e.target.value, facilityTypesFilterOptions)
                              .map((v) => v.target)
                          : FACILITY_TYPES
                      );
                    }}
                  />
                  <Button
                    layout="link"
                    onClick={() => _setFilterFacilityTypes([])}
                    className="dark:bg-gray-900 shadow-xs"
                  >
                    Clear
                  </Button>
                  <Button
                    layout="link"
                    onClick={() => {
                      _setFilterFacilityTypes(GOVT_FACILITY_TYPES);
                    }}
                    className="whitespace-no-wrap dark:bg-gray-900 shadow-xs"
                  >
                    All Govt.
                  </Button>
                  <Button
                    layout="link"
                    onClick={() => _setFilterFacilityTypes(FACILITY_TYPES)}
                    className="dark:bg-gray-900 shadow-xs"
                  >
                    All
                  </Button>
                </div>

                <HelperText className="ml-1">
                  {`Selected ${_filterFacilityTypes.length} items`}
                </HelperText>
              </Label>

              <Card className="flex flex-col mb-2 p-2 h-64 overflow-y-auto">
                {facilityTypesFilterOptions.map((d, i) => (
                  <Label key={i} check>
                    <Input
                      onChange={() => {
                        const _t = _filterFacilityTypes.indexOf(d);
                        const _tmp = [..._filterFacilityTypes];
                        if (_t > -1) {
                          _tmp.splice(_t, 1);
                        } else {
                          _tmp.push(d);
                        }
                        _setFilterFacilityTypes(_tmp);
                      }}
                      type="checkbox"
                      checked={_filterFacilityTypes.includes(d)}
                    />
                    <span className="ml-2">{d}</span>
                  </Label>
                ))}
              </Card>
              <div className="flex justify-end space-x-2">
                <Button
                  onClick={() => setFilterFacilityTypes(_filterFacilityTypes)}
                  className="shadow-xs"
                >
                  Apply
                </Button>
                <Button
                  onClick={() => resetFacilityTypeFilter()}
                  className="shadow-xs"
                >
                  Cancel
                </Button>
              </div>
            </Dropdown>
          </div>
        )}

        <div className="flex justify-evenly dark:text-gray-700 dark:bg-gray-900 bg-white rounded-lg">
          <Button
            layout="link"
            onClick={() => setTimeseries(false)}
            className="rounded-r-none shadow-xs"
            disabled={!timeseries}
          >
            <span className="capitalize">Single</span>
          </Button>
          <Button
            layout="link"
            onClick={() => setTimeseries(true)}
            className="rounded-l-none shadow-xs"
            disabled={timeseries}
          >
            <span className="capitalize">Range</span>
          </Button>
        </div>
        {!timeseries ? (
          <DatePicker
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={false}
            calendarIcon={
              <Calendar className="dark:text-gray-400 text-gray-600" />
            }
            clearIcon={null}
            tileClassName="font-sans rounded-lg p-2"
            value={date}
            onChange={dateOnChange}
            maxDate={maxDate}
            format="dd/MM/yyyy"
            className="h-10"
          />
        ) : (
          <DateRangePicker
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus={false}
            calendarIcon={
              <Calendar className="dark:text-gray-400 text-gray-600" />
            }
            clearIcon={null}
            tileClassName="font-sans rounded-lg p-2"
            value={dates}
            onChange={datesOnChange}
            maxDate={maxDate}
            format="dd/MM/yyyy"
          />
        )}
      </div>
    </div>
  );
}