@dnb/eufemia/components/filter/FilterDate.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useContext, useMemo } from 'react';
import DatePicker from "../date-picker/DatePicker.js";
import { FilterContext, FilterItemContext } from "./FilterContext.js";
import FilterItem from "./FilterItem.js";
import SharedContext from "../../shared/Context.js";
import useMedia from "../../shared/useMedia.js";
import formatDateRange from "./utils/formatDateRange.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function FilterDate({
  label: labelProp,
  filterKey = 'date',
  defaultOpen,
  ...rest
}) {
  var _ref, _currentValue$from, _ref2, _currentValue$to;
  const context = useContext(FilterContext);
  const sharedContext = useContext(SharedContext);
  const {
    dateLabel
  } = sharedContext.getTranslation({}).Filter;
  const label = labelProp !== null && labelProp !== void 0 ? labelProp : dateLabel;
  if (!context) {
    throw new Error('Filter.Date must be used inside a Filter.Root.');
  }
  const {
    removeFilter,
    setFilter,
    getFilter
  } = context;
  const currentValue = getFilter(filterKey)?.value;
  const locale = sharedContext.locale;
  const itemContext = useContext(FilterItemContext);
  const handleChange = useCallback(({
    startDate,
    endDate
  }) => {
    if (!startDate && !endDate) {
      if (itemContext) {
        setFilter(filterKey, undefined);
      } else {
        removeFilter(filterKey);
      }
      return;
    }
    setFilter(filterKey, {
      value: {
        from: startDate,
        to: endDate
      },
      label: formatDateRange(startDate, endDate, locale),
      categoryLabel: label
    });
  }, [itemContext, removeFilter, setFilter, filterKey, label, locale]);
  const sharedProps = {
    range: true,
    ...rest,
    label,
    labelSrOnly: true,
    startDate: (_ref = (_currentValue$from = currentValue?.from) !== null && _currentValue$from !== void 0 ? _currentValue$from : rest.startDate) !== null && _ref !== void 0 ? _ref : null,
    endDate: (_ref2 = (_currentValue$to = currentValue?.to) !== null && _currentValue$to !== void 0 ? _currentValue$to : rest.endDate) !== null && _ref2 !== void 0 ? _ref2 : null,
    onChange: handleChange
  };
  const {
    isSmall
  } = useMedia();
  const description = useMemo(() => formatDateRange(currentValue?.from, currentValue?.to, locale), [currentValue, locale]);
  const datePickerProps = {
    rangeSingleCalendar: true,
    ...sharedProps,
    triggerProps: {
      text: label,
      variant: 'tertiary',
      iconPosition: 'left',
      ...rest.triggerProps
    }
  };
  if (itemContext) {
    return _jsx(FilterItem, {
      label: label,
      filterKey: filterKey,
      defaultOpen: defaultOpen,
      children: isSmall ? _jsxs(_Fragment, {
        children: [_jsx(DatePicker, {
          ...datePickerProps,
          triggerProps: undefined
        }), description]
      }) : _jsx(DatePicker, {
        showInput: true,
        inline: true,
        ...datePickerProps
      })
    });
  }
  return _jsx(DatePicker, {
    ...datePickerProps
  });
}
export default FilterDate;
//# sourceMappingURL=FilterDate.js.map