@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
105 lines (104 loc) • 3.38 kB
JavaScript
"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";
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 => {
if (args && args.event) {
args.event.persist();
}
updateDates(submittedDates, dates => {
onCancel === null || onCancel === void 0 || onCancel({
...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 || onReset({
...args,
...dates
});
});
}, [dateFormat, updateDates, previousDateProps, onReset]);
if (!isRange && !showSubmitButton && !showCancelButton && !showResetButton) {
return 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