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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _DatePicker = _interopRequireDefault(require("../date-picker/DatePicker.js"));
var _FilterContext = require("./FilterContext.js");
var _FilterItem = _interopRequireDefault(require("./FilterItem.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _useMedia = _interopRequireDefault(require("../../shared/useMedia.js"));
var _formatDateRange = _interopRequireDefault(require("./utils/formatDateRange.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FilterDate({
  label: labelProp,
  filterKey = 'date',
  defaultOpen,
  ...rest
}) {
  var _ref, _currentValue$from, _ref2, _currentValue$to;
  const context = (0, _react.useContext)(_FilterContext.FilterContext);
  const sharedContext = (0, _react.useContext)(_Context.default);
  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 = (0, _react.useContext)(_FilterContext.FilterItemContext);
  const handleChange = (0, _react.useCallback)(({
    startDate,
    endDate
  }) => {
    if (!startDate && !endDate) {
      if (itemContext) {
        setFilter(filterKey, undefined);
      } else {
        removeFilter(filterKey);
      }
      return;
    }
    setFilter(filterKey, {
      value: {
        from: startDate,
        to: endDate
      },
      label: (0, _formatDateRange.default)(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
  } = (0, _useMedia.default)();
  const description = (0, _react.useMemo)(() => (0, _formatDateRange.default)(currentValue?.from, currentValue?.to, locale), [currentValue, locale]);
  const datePickerProps = {
    rangeSingleCalendar: true,
    ...sharedProps,
    triggerProps: {
      text: label,
      variant: 'tertiary',
      iconPosition: 'left',
      ...rest.triggerProps
    }
  };
  if (itemContext) {
    return (0, _jsxRuntime.jsx)(_FilterItem.default, {
      label: label,
      filterKey: filterKey,
      defaultOpen: defaultOpen,
      children: isSmall ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [(0, _jsxRuntime.jsx)(_DatePicker.default, {
          ...datePickerProps,
          triggerProps: undefined
        }), description]
      }) : (0, _jsxRuntime.jsx)(_DatePicker.default, {
        showInput: true,
        inline: true,
        ...datePickerProps
      })
    });
  }
  return (0, _jsxRuntime.jsx)(_DatePicker.default, {
    ...datePickerProps
  });
}
var _default = exports.default = FilterDate;
//# sourceMappingURL=FilterDate.js.map