@dnb/eufemia/components/date-picker/DatePickerFooter.js

DNB Eufemia Design System UI Library

"use client";

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _Fragment, _span, _span2, _span3;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useContext, useCallback } from 'react';
import Button from '../button/Button';
import DatePickerContext from './DatePickerContext';
import { convertStringToDate } from './DatePickerCalc';
import { useTranslation } from '../../shared';
function DatePickerFooter(_ref) {
  let {
    isRange,
    submitButtonText,
    cancelButtonText,
    resetButtonText,
    onSubmit,
    onCancel,
    onReset
  } = _ref;
  const {
    updateDates,
    previousDateProps,
    startDate,
    endDate,
    submittedDates,
    setSubmittedDates,
    dateFormat,
    props: contextProps
  } = useContext(DatePickerContext);
  const {
    showResetButton,
    showCancelButton,
    showSubmitButton
  } = contextProps;
  const {
    submitButtonText: submitButtonTextTranslation,
    cancelButtonText: cancelButtonTextTranslation,
    resetButtonText: resetButtonTextTranslation
  } = useTranslation().DatePicker;
  const onSubmitHandler = useCallback(args => {
    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(args);
    setSubmittedDates({
      startDate,
      endDate
    });
  }, [onSubmit, startDate, endDate, setSubmittedDates]);
  const onCancelHandler = useCallback(args => {
    if (args && args.event) {
      args.event.persist();
    }
    updateDates(submittedDates, dates => {
      onCancel === null || onCancel === void 0 ? void 0 : onCancel(_objectSpread(_objectSpread({}, args), dates));
    });
  }, [updateDates, onCancel, submittedDates]);
  const onResetHandler = useCallback(args => {
    if (args && args.event) {
      args.event.persist();
    }
    const startDate = previousDateProps.startDate ? convertStringToDate(previousDateProps.startDate, {
      dateFormat
    }) : previousDateProps.date ? convertStringToDate(previousDateProps.date, {
      dateFormat
    }) : undefined;
    const endDate = previousDateProps.endDate ? convertStringToDate(previousDateProps.endDate, {
      dateFormat
    }) : startDate;
    updateDates({
      startDate,
      endDate
    }, dates => {
      onReset === null || onReset === void 0 ? void 0 : onReset(_objectSpread(_objectSpread({}, args), dates));
    });
  }, [dateFormat, updateDates, previousDateProps, onReset]);
  if (!isRange && !showSubmitButton && !showCancelButton && !showResetButton) {
    return _Fragment || (_Fragment = React.createElement(React.Fragment, null));
  }
  return React.createElement("div", {
    className: "dnb-date-picker__footer"
  }, (isRange || showSubmitButton) && React.createElement(Button, {
    text: submitButtonText || submitButtonTextTranslation,
    onClick: onSubmitHandler,
    "data-testid": "submit"
  }) || _span || (_span = React.createElement("span", null)), React.createElement("span", null, showResetButton && React.createElement(Button, {
    text: resetButtonText || resetButtonTextTranslation,
    icon: "reset",
    icon_position: "left",
    variant: "tertiary",
    onClick: onResetHandler,
    "data-testid": "reset",
    right: "1rem"
  }) || _span2 || (_span2 = React.createElement("span", null)), (isRange || showCancelButton) && React.createElement(Button, {
    text: cancelButtonText || cancelButtonTextTranslation,
    icon: "close",
    icon_position: "left",
    variant: "tertiary",
    onClick: onCancelHandler,
    "data-testid": "cancel"
  }) || _span3 || (_span3 = React.createElement("span", null))));
}
export default DatePickerFooter;
//# sourceMappingURL=DatePickerFooter.js.map