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

DNB Eufemia Design System UI Library

"use client";

var _span, _span2, _span3;
import React, { useContext, useCallback } from 'react';
import Button from "../button/Button.js";
import DatePickerContext from "./DatePickerContext.js";
import { convertStringToDate } from "./DatePickerCalc.js";
import { useTranslation } from "../../shared/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function DatePickerFooter({
  isRange,
  submitButtonText,
  cancelButtonText,
  resetButtonText,
  onSubmit,
  onCancel,
  onReset
}) {
  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 || onSubmit(args);
    setSubmittedDates({
      startDate,
      endDate
    });
  }, [onSubmit, startDate, endDate, setSubmittedDates]);
  const onCancelHandler = useCallback(args => {
    updateDates(submittedDates, dates => {
      onCancel === null || onCancel === void 0 || onCancel({
        ...args,
        ...dates
      });
    });
  }, [updateDates, onCancel, submittedDates]);
  const onResetHandler = useCallback(args => {
    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 || onReset({
        ...args,
        ...dates
      });
    });
  }, [dateFormat, updateDates, previousDateProps, onReset]);
  if (!isRange && !showSubmitButton && !showCancelButton && !showResetButton) {
    return null;
  }
  return _jsxs("div", {
    className: "dnb-date-picker__footer",
    children: [(isRange || showSubmitButton) && _jsx(Button, {
      text: submitButtonText || submitButtonTextTranslation,
      onClick: onSubmitHandler,
      "data-testid": "submit"
    }) || _span || (_span = _jsx("span", {})), _jsxs("span", {
      children: [showResetButton && _jsx(Button, {
        text: resetButtonText || resetButtonTextTranslation,
        icon: "reset",
        iconPosition: "left",
        variant: "tertiary",
        onClick: onResetHandler,
        "data-testid": "reset",
        right: "1rem"
      }) || _span2 || (_span2 = _jsx("span", {})), (isRange || showCancelButton) && _jsx(Button, {
        text: cancelButtonText || cancelButtonTextTranslation,
        icon: "close",
        iconPosition: "left",
        variant: "tertiary",
        onClick: onCancelHandler,
        "data-testid": "cancel"
      }) || _span3 || (_span3 = _jsx("span", {}))]
    })]
  });
}
export default DatePickerFooter;
//# sourceMappingURL=DatePickerFooter.js.map