@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
303 lines (302 loc) • 10.2 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["id", "path", "itemPath", "className", "label", "value", "hasError", "disabled", "htmlAttributes", "handleFocus", "handleBlur", "handleChange", "setDisplayValue", "range", "showCancelButton", "showResetButton", "showInput", "onReset", "minDate", "maxDate"],
_excluded2 = ["value", "isRange", "locale"];
import "core-js/modules/web.dom-collections.iterator.js";
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, { useCallback, useContext, useMemo } from 'react';
import { DatePicker } from '../../../../components';
import { useFieldProps } from '../../hooks';
import { pickSpacingProps } from '../../../../components/flex/utils';
import classnames from 'classnames';
import FieldBlock from '../../FieldBlock';
import SharedContext from '../../../../shared/Context';
import { parseISO, isValid, isBefore, isAfter } from 'date-fns';
import useTranslation from '../../hooks/useTranslation';
import { convertStringToDate, formatDate } from '../../../../components/date-picker/DatePickerCalc';
import { FormError } from '../../utils';
import startOfDay from 'date-fns/startOfDay';
import useInvalidDates from './hooks/useInvalidDates';
function DateComponent(props) {
const {
errorRequired,
label: defaultLabel
} = useTranslation().Date;
const {
locale
} = useContext(SharedContext);
const {
invalidDatesRef,
setInvalidDates
} = useInvalidDates();
const errorMessages = useMemo(() => {
return _objectSpread({
'Field.errorRequired': errorRequired,
'Field.errorPattern': errorRequired
}, props.errorMessages);
}, [props.errorMessages, errorRequired]);
const schema = useMemo(() => {
var _props$schema;
return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
type: 'string',
pattern: props.pattern
};
}, [props.schema, props.pattern]);
const validateRequired = useCallback((value, _ref) => {
let {
required,
error
} = _ref;
if (required && (!value || !isValid(parseISO(value)))) {
return error;
}
return undefined;
}, []);
const dateValidator = useCallback(value => {
const invalidDateErrors = validateDate(invalidDatesRef.current);
if (!props.minDate && !props.maxDate) {
return invalidDateErrors;
}
const dateLimitErrors = validateDateLimit({
value,
locale,
minDate: props.minDate,
maxDate: props.maxDate,
isRange: props.range
});
return [...invalidDateErrors, ...dateLimitErrors];
}, [props.maxDate, props.minDate, props.range, invalidDatesRef, locale]);
const onBlurValidator = useMemo(() => {
if (props.onBlurValidator === false) {
return undefined;
}
if (props.onBlurValidator) {
return props.onBlurValidator;
}
return dateValidator;
}, [props.onBlurValidator, dateValidator]);
const fromInput = useCallback(_ref2 => {
let {
date,
start_date,
end_date,
invalidDate,
invalidStartDate,
invalidEndDate
} = _ref2;
setInvalidDates({
invalidDate,
invalidStartDate,
invalidEndDate
});
return props.range ? `${start_date}|${end_date}` : date;
}, [props.range, setInvalidDates]);
const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
errorMessages,
schema,
fromInput,
validateRequired,
onBlurValidator,
exportValidators: {
dateValidator
},
invalidDatesRef
});
const _useFieldProps = useFieldProps(preparedProps),
{
id,
path,
itemPath,
className,
label,
value: valueProp,
hasError,
disabled,
htmlAttributes,
handleFocus,
handleBlur,
handleChange,
setDisplayValue,
range,
showCancelButton = true,
showResetButton = true,
showInput = true,
onReset,
minDate,
maxDate
} = _useFieldProps,
rest = _objectWithoutProperties(_useFieldProps, _excluded);
const datePickerProps = pickDatePickerProps(rest);
const {
value,
startDate,
endDate
} = useMemo(() => {
if (!range || !valueProp) {
return {
value: valueProp !== null && valueProp !== void 0 ? valueProp : null,
startDate: undefined,
endDate: undefined
};
}
const [startDate, endDate] = parseRangeValue(valueProp);
return {
value: undefined,
startDate,
endDate
};
}, [range, valueProp]);
useMemo(() => {
if ((path || itemPath) && valueProp) {
setDisplayValue(formatDate(valueProp, {
locale
}), undefined);
}
}, [itemPath, locale, path, setDisplayValue, valueProp]);
const fieldBlockProps = _objectSpread({
forId: id,
label: label !== null && label !== void 0 ? label : defaultLabel,
className: classnames('dnb-forms-field-string', className)
}, pickSpacingProps(props));
return React.createElement(FieldBlock, fieldBlockProps, React.createElement(DatePicker, _extends({
id: id,
date: value,
disabled: disabled,
showInput: showInput,
showCancelButton: showCancelButton,
showResetButton: showResetButton,
startDate: startDate,
endDate: endDate,
minDate: minDate,
maxDate: maxDate,
status: hasError ? 'error' : undefined,
range: range,
onChange: handleChange,
onReset: event => {
handleChange(event);
onReset === null || onReset === void 0 ? void 0 : onReset(event);
},
onFocus: handleFocus,
onBlur: handleBlur
}, datePickerProps, htmlAttributes)));
}
export function parseRangeValue(value) {
return value.split('|').map(value => /(undefined|null)/.test(value) ? null : value);
}
function validateDateLimit(_ref3) {
let {
value,
isRange,
locale
} = _ref3,
dates = _objectWithoutProperties(_ref3, _excluded2);
if (!dates.minDate && !dates.maxDate || !value) {
return [];
}
const [startDateParsed, endDateParsed] = parseRangeValue(value);
const minDate = startOfDay(convertStringToDate(dates.minDate));
const maxDate = startOfDay(convertStringToDate(dates.maxDate));
const startDate = startOfDay(convertStringToDate(startDateParsed));
const endDate = startOfDay(convertStringToDate(endDateParsed));
const isoDates = {
minDate: dates.minDate instanceof Date ? dates.minDate.toISOString() : dates.minDate,
maxDate: dates.maxDate instanceof Date ? dates.maxDate.toISOString() : dates.maxDate
};
const options = {
locale,
variant: 'long'
};
const messages = [];
if (!isRange) {
if (isBefore(startDate, minDate)) {
messages.push(new FormError('Date.errorMinDate', {
messageValues: {
date: formatDate(isoDates.minDate, options)
}
}));
}
if (isAfter(startDate, maxDate)) {
messages.push(new FormError('Date.errorMaxDate', {
messageValues: {
date: formatDate(isoDates.maxDate, options)
}
}));
}
return messages;
}
if (isBefore(startDate, minDate)) {
messages.push(new FormError('Date.errorStartDateMinDate', {
messageValues: {
date: formatDate(isoDates.minDate, options)
}
}));
}
if (isAfter(startDate, maxDate)) {
messages.push(new FormError('Date.errorStartDateMaxDate', {
messageValues: {
date: formatDate(isoDates.maxDate, options)
}
}));
}
if (isBefore(endDate, minDate)) {
messages.push(new FormError('Date.errorEndDateMinDate', {
messageValues: {
date: formatDate(isoDates.minDate, options)
}
}));
}
if (isAfter(endDate, maxDate)) {
messages.push(new FormError('Date.errorEndDateMaxDate', {
messageValues: {
date: formatDate(isoDates.maxDate, options)
}
}));
}
return messages;
}
function validateDate(_ref4) {
let {
invalidDate,
invalidStartDate,
invalidEndDate
} = _ref4;
if (invalidDate) {
return [new FormError('Date.errorInvalidDate', {
messageValues: {
date: invalidDate
}
})];
}
const errors = [];
if (invalidStartDate) {
errors.push(new FormError('Date.errorInvalidStartDate', {
messageValues: {
date: invalidStartDate
}
}));
}
if (invalidEndDate) {
errors.push(new FormError('Date.errorInvalidEndDate', {
messageValues: {
date: invalidEndDate
}
}));
}
return errors;
}
const datePickerPropKeys = ['month', 'startMonth', 'endMonth', 'minDate', 'maxDate', 'correctInvalidDate', 'maskOrder', 'maskPlaceholder', 'dateFormat', 'returnFormat', 'hideNavigation', 'hideDays', 'onlyMonth', 'hideLastWeek', 'disableAutofocus', 'showSubmitButton', 'submitButtonText', 'cancelButtonText', 'resetButtonText', 'firstDay', 'link', 'size', 'sync', 'addonElement', 'shortcuts', 'opened', 'direction', 'alignPicker', 'onDaysRender', 'showInput', 'onDaysRender', 'onType', 'onShow', 'onHide', 'onSubmit', 'onCancel', 'onReset', 'skipPortal'];
function pickDatePickerProps(props) {
const datePickerProps = Object.keys(props).reduce((datePickerProps, key) => {
if (datePickerPropKeys.includes(key)) {
datePickerProps[key] = props[key];
}
return datePickerProps;
}, {});
return datePickerProps;
}
DateComponent._supportsSpacingProps = true;
export default DateComponent;
//# sourceMappingURL=Date.js.map