@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
434 lines (433 loc) • 18.3 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _DatePickerProvider = _interopRequireDefault(require("./DatePickerProvider.js"));
var _DatePickerRange = _interopRequireDefault(require("./DatePickerRange.js"));
var _DatePickerInput = _interopRequireDefault(require("./DatePickerInput.js"));
var _DatePickerAddon = _interopRequireDefault(require("./DatePickerAddon.js"));
var _DatePickerFooter = _interopRequireDefault(require("./DatePickerFooter.js"));
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _index = require("../../shared/index.js");
var _Popover = _interopRequireDefault(require("../popover/Popover.js"));
var _DateFormatUtils = require("../date-format/DateFormatUtils.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _AlignmentHelper;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = {
hideNavigation: false,
hideDays: false,
onlyMonth: false,
hideLastWeek: false,
disableAutofocus: false,
enableKeyboardNav: false,
showInput: false,
inline: false,
resetDate: true,
range: false,
link: false,
sync: true,
statusState: 'error',
open: false,
noAnimation: false,
direction: 'auto',
skipPortal: false,
yearNavigation: false,
labelDirection: 'vertical'
};
function DatePicker(externalProps) {
var _externalProps$maskOr, _externalProps$maskPl;
const props = {
...defaultProps,
...externalProps
};
const {
preventClose,
onClose,
onOpen,
onSubmit,
onCancel,
onReset,
noAnimation,
showInput,
inline,
alignPicker,
showSubmitButton,
showCancelButton,
range,
hideDays,
hideNavigation,
open: openProp,
endDate: endDateProp
} = props;
const [open, setOpen] = (0, _react.useState)(inline ? true : openProp);
const [hidden, setHidden] = (0, _react.useState)(inline ? false : !open);
const [dates, setDates] = (0, _react.useState)({});
const context = (0, _react.useContext)(_Context.default);
const blurDelay = 201;
const id = (0, _useId.default)(props.id);
const shellRef = (0, _react.useRef)(undefined);
const submitButtonRef = (0, _react.useRef)(undefined);
const getReturnObject = (0, _react.useRef)(undefined);
const hideTimeout = (0, _react.useRef)(undefined);
const calendarContainerRef = (0, _react.useRef)(null);
const translation = (0, _index.useTranslation)().DatePicker;
const focusCalendarTable = (0, _react.useCallback)(() => {
var _calendarContainerRef;
return (_calendarContainerRef = calendarContainerRef.current) === null || _calendarContainerRef === void 0 ? void 0 : _calendarContainerRef.querySelector('table');
}, []);
if (endDateProp && !range) {
(0, _componentHelper.warn)(`The DatePicker got a "endDate". You have to set range={true} as well!.`);
}
const hidePicker = (0, _react.useCallback)(args => {
if (preventClose) {
return;
}
setOpen(false);
hideTimeout.current = setTimeout(() => {
setHidden(true);
onClose === null || onClose === void 0 || onClose({
...getReturnObject.current(args)
});
if (args !== null && args !== void 0 && args['focusOnClose']) {
try {
var _submitButtonRef$curr;
(_submitButtonRef$curr = submitButtonRef.current) === null || _submitButtonRef$curr === void 0 || _submitButtonRef$curr.focus({
preventScroll: true
});
} catch (e) {
(0, _componentHelper.warn)(e);
}
}
}, noAnimation ? 1 : blurDelay);
}, [noAnimation, preventClose, onClose]);
const showPicker = (0, _react.useCallback)(event => {
if (hideTimeout.current) {
clearTimeout(hideTimeout.current);
}
setOpen(true);
setHidden(false);
onOpen === null || onOpen === void 0 || onOpen({
...getReturnObject.current(event)
});
}, [onOpen]);
(0, _react.useEffect)(() => {
if (openProp && !inline) {
showPicker();
}
}, [openProp, showPicker, inline]);
const onPickerChange = (0, _react.useCallback)(({
hidePicker: shouldHidePicker = true,
...args
}) => {
if (shouldHidePicker && !showSubmitButton && !showCancelButton) {
hidePicker({
focusOnClose: true
});
}
setDates({
startDate: args.startDate,
endDate: args.endDate
});
}, [hidePicker, showSubmitButton, showCancelButton]);
const onSubmitHandler = (0, _react.useCallback)(event => {
if (open) {
hidePicker(event);
onSubmit === null || onSubmit === void 0 || onSubmit({
...getReturnObject.current({
event
})
});
} else {
showPicker(event);
}
}, [open, hidePicker, showPicker, onSubmit]);
const onCancelHandler = (0, _react.useCallback)(event => {
hidePicker();
onCancel === null || onCancel === void 0 || onCancel({
...getReturnObject.current(event)
});
}, [hidePicker, onCancel]);
const onResetHandler = (0, _react.useCallback)(event => {
hidePicker();
onReset === null || onReset === void 0 || onReset({
...getReturnObject.current(event)
});
}, [hidePicker, onReset]);
const togglePicker = (0, _react.useCallback)(args => {
!open ? showPicker(args) : hidePicker(args);
}, [open, showPicker, hidePicker]);
const extendedProps = (0, _componentHelper.extendPropsWithContext)(props, defaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, context.getTranslation(props).DatePicker, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context.DatePicker);
const {
label,
title,
labelDirection,
labelSrOnly,
onlyMonth,
hideLastWeek,
disableAutofocus,
firstDay,
resetDate,
link,
sync,
inputElement,
addonElement,
shortcuts,
disabled,
stretch,
skeleton,
size,
status,
statusState,
statusProps,
statusNoAnimation,
globalStatus,
suffix,
maskOrder,
maskPlaceholder,
submitButtonText,
cancelButtonText,
resetButtonText,
showResetButton,
className,
tooltip,
skipPortal,
labelAlignment,
_omitInputShellClass,
...restProps
} = extendedProps;
const resolvedMaskOrder = (_externalProps$maskOr = externalProps.maskOrder) !== null && _externalProps$maskOr !== void 0 ? _externalProps$maskOr : context.locale === 'en-US' ? 'mm/dd/yyyy' : maskOrder;
const resolvedMaskPlaceholder = (_externalProps$maskPl = externalProps.maskPlaceholder) !== null && _externalProps$maskPl !== void 0 ? _externalProps$maskPl : context.locale === 'en-US' ? 'mm/dd/yyyy' : maskPlaceholder;
const attributes = (0, _react.useMemo)(() => filterOutNonAttributes(restProps), [restProps]);
const showStatus = (0, _componentHelper.getStatusState)(status);
const pickerParams = {};
if (showStatus || suffix) {
pickerParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(pickerParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
}
const submitParams = {
['aria-expanded']: open,
ref: submitButtonRef,
tabIndex: extendedProps.tabIndex,
tooltip
};
const selectedDateTitle = (0, _react.useMemo)(() => {
const {
selectedDate,
selectedDateRange
} = translation;
const {
startDate,
endDate
} = dates;
if (!startDate) {
return '';
}
const options = {
locale: context.locale,
options: {
dateStyle: 'full'
}
};
return range && endDate ? selectedDateRange.replace(/%s/, (0, _DateFormatUtils.formatDateRange)({
startDate,
endDate
}, options)) : selectedDate.replace(/%s/, (0, _DateFormatUtils.formatDate)(startDate, options));
}, [range, translation, dates, context.locale]);
const mainParams = (0, _SpacingUtils.applySpacing)(props, {
className: (0, _clsx.default)("dnb-date-picker dnb-form-component", className, status && `dnb-date-picker__status--${statusState}`, labelDirection && `dnb-date-picker--${labelDirection}`, open && 'dnb-date-picker--open', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', inline && 'dnb-date-picker--inline', label && labelAlignment === 'right' && 'dnb-date-picker__input--label-alignment-right', stretch && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`),
lang: context.locale
});
const containerClassNames = (0, _clsx.default)('dnb-date-picker__container', ((inline ? false : range) || showSubmitButton || showCancelButton || showResetButton) && 'dnb-date-picker__container--show-footer', open ? 'dnb-date-picker__container--open' : 'dnb-date-picker__container--closed', hidden && 'dnb-date-picker__container--hidden', showInput && 'dnb-date-picker__container--show-input', size && `dnb-date-picker--${size}`);
const remainingDOMProps = (0, _componentHelper.validateDOMAttributes)(props, attributes);
const remainingSubmitProps = (0, _componentHelper.validateDOMAttributes)(null, submitParams);
const remainingPickerProps = (0, _componentHelper.validateDOMAttributes)(null, (0, _SkeletonHelper.skeletonDOMAttributes)(pickerParams, skeleton, context));
return (0, _jsxRuntime.jsx)(_DatePickerProvider.default, {
...props,
open: open,
attributes: remainingDOMProps,
setReturnObject: fn => getReturnObject.current = fn,
hidePicker: hidePicker,
children: (0, _jsxRuntime.jsxs)("span", {
...mainParams,
children: [label && (0, _jsxRuntime.jsx)(_FormLabel.default, {
id: id + '-label',
forId: id,
text: label,
labelDirection: labelDirection,
srOnly: labelSrOnly,
disabled: disabled,
skeleton: skeleton
}), (0, _jsxRuntime.jsxs)("span", {
className: "dnb-date-picker__inner",
ref: shellRef,
...remainingPickerProps,
children: [_AlignmentHelper || (_AlignmentHelper = (0, _jsxRuntime.jsx)(_AlignmentHelper2.default, {})), (0, _jsxRuntime.jsx)(_FormStatus.default, {
show: showStatus,
id: id + '-form-status',
globalStatus: globalStatus,
label: String(label),
textId: id + '-status',
widthSelector: id + '-shell',
text: status,
state: statusState,
noAnimation: statusNoAnimation,
skeleton: skeleton,
...statusProps
}), (0, _jsxRuntime.jsxs)("span", {
className: "dnb-date-picker__row",
children: [inline ? (0, _jsxRuntime.jsxs)("span", {
className: containerClassNames,
ref: calendarContainerRef,
children: [(0, _jsxRuntime.jsx)(_DatePickerRange.default, {
id: id,
firstDayOfWeek: firstDay,
resetDate: resetDate,
isRange: range,
isLink: link,
isSync: sync,
hideDays: hideDays,
hideNavigation: hideNavigation,
onlyMonth: onlyMonth,
hideNextMonthWeek: hideLastWeek,
onPickerChange: onPickerChange,
locale: context.locale
}), (addonElement || shortcuts) && (0, _jsxRuntime.jsx)(_DatePickerAddon.default, {
renderElement: addonElement,
shortcuts: shortcuts
}), (0, _jsxRuntime.jsx)(_DatePickerFooter.default, {
isRange: inline ? false : range,
onSubmit: onSubmitHandler,
onCancel: onCancelHandler,
onReset: onResetHandler,
submitButtonText: submitButtonText,
cancelButtonText: cancelButtonText,
resetButtonText: resetButtonText
})]
}) : (0, _jsxRuntime.jsxs)("span", {
className: "dnb-date-picker__shell",
id: `${id}-shell`,
children: [(0, _jsxRuntime.jsx)(_DatePickerInput.default, {
id: id,
title: title,
disabled: disabled,
stretch: stretch,
skeleton: skeleton,
maskOrder: resolvedMaskOrder,
maskPlaceholder: resolvedMaskPlaceholder,
isRange: range,
showInput: showInput,
selectedDateTitle: selectedDateTitle,
inputElement: inputElement,
open: open,
hidden: hidden,
size: size,
status: status ? 'error' : null,
statusState: statusState,
lang: context.locale,
_omitInputShellClass: _omitInputShellClass,
...attributes,
submitAttributes: remainingSubmitProps,
onSubmit: togglePicker,
...statusProps
}), (0, _jsxRuntime.jsx)(_Popover.default, {
open: open,
targetElement: {
verticalRef: submitButtonRef,
horizontalRef: shellRef
},
noAnimation: noAnimation,
skipPortal: skipPortal,
keepInDOM: !hidden,
focusOnOpen: !disableAutofocus,
focusOnOpenElement: focusCalendarTable,
alignOnTarget: alignPicker === 'right' || stretch ? 'right' : 'left',
horizontalOffset: showInput ? 8 : -8,
placement: props.direction === 'auto' ? 'bottom' : props.direction,
onOpenChange: isOpen => !isOpen && hidePicker(),
hideCloseButton: true,
hideOutline: true,
preventClose: preventClose,
triggerOffset: 0,
arrowEdgeOffset: 4,
noInnerSpace: true,
noMaxWidth: true,
portalRootClass: "dnb-date-picker__portal",
arrowPosition: alignPicker === 'right' ? 'right' : 'left',
arrowPositionSelector: `#${id}`,
children: (0, _jsxRuntime.jsxs)("span", {
className: containerClassNames,
ref: calendarContainerRef,
children: [(0, _jsxRuntime.jsx)(_DatePickerRange.default, {
id: id,
firstDayOfWeek: firstDay,
resetDate: resetDate,
isRange: range,
isLink: link,
isSync: sync,
hideDays: hideDays,
hideNavigation: hideNavigation,
onlyMonth: onlyMonth,
hideNextMonthWeek: hideLastWeek,
onPickerChange: onPickerChange,
locale: context.locale
}), (addonElement || shortcuts) && (0, _jsxRuntime.jsx)(_DatePickerAddon.default, {
renderElement: addonElement,
shortcuts: shortcuts
}), (0, _jsxRuntime.jsx)(_DatePickerFooter.default, {
isRange: inline ? false : range,
onSubmit: onSubmitHandler,
onCancel: onCancelHandler,
onReset: onResetHandler,
submitButtonText: submitButtonText,
cancelButtonText: cancelButtonText,
resetButtonText: resetButtonText
})]
})
})]
}), suffix && (0, _jsxRuntime.jsx)(_Suffix.default, {
className: "dnb-date-picker__suffix",
id: id + '-suffix',
context: props,
children: suffix
})]
})]
}), (0, _jsxRuntime.jsx)("p", {
className: "dnb-sr-only",
"aria-live": "assertive",
children: selectedDateTitle
})]
})
});
}
const NonAttributes = ['locale', 'id', 'day', 'month', 'year', 'date', 'start', 'end', 'startDate', 'endDate', 'minDate', 'maxDate', 'hidden', 'stretch', 'enableKeyboardNav', 'hideNavigation', 'returnFormat', 'dateFormat', 'hideDays', 'open', 'direction', 'range', 'showInput', 'inline', 'noAnimation', 'onDaysRender', 'onOpen', 'onType', 'onClose', 'showSubmitButton', 'showCancelButton', 'selectedDate', 'selectedMonth', 'selectedYear', 'nextMonth', 'nextYear', 'openPickerText', 'placeholderCharacters', 'prevMonth', 'prevYear', 'endMonth', 'startMonth', 'alignPicker', 'preventClose', 'selectedDateRange', 'yearNavigation'];
function filterOutNonAttributes(props) {
return Object.keys(props).reduce((attributes, key) => {
if (!NonAttributes.includes(key)) {
attributes[key] = props[key];
}
return attributes;
}, {});
}
(0, _withComponentMarkers.default)(DatePicker, {
_formElement: true,
_supportsSpacingProps: true
});
var _default = exports.default = DatePicker;
//# sourceMappingURL=DatePicker.js.map