@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
315 lines (314 loc) • 13.2 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.parseRangeValue = parseRangeValue;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _components = require("../../../../components");
var _hooks = require("../../hooks");
var _utils = require("../../../../components/flex/utils");
var _classnames = _interopRequireDefault(require("classnames"));
var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
var _Context = _interopRequireDefault(require("../../../../shared/Context"));
var _dateFns = require("date-fns");
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation"));
var _DatePickerCalc = require("../../../../components/date-picker/DatePickerCalc");
var _utils2 = require("../../utils");
var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
var _useInvalidDates = _interopRequireDefault(require("./hooks/useInvalidDates"));
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"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function DateComponent(props) {
const {
errorRequired,
label: defaultLabel
} = (0, _useTranslation.default)().Date;
const {
locale
} = (0, _react.useContext)(_Context.default);
const {
invalidDatesRef,
setInvalidDates
} = (0, _useInvalidDates.default)();
const errorMessages = (0, _react.useMemo)(() => {
return _objectSpread({
'Field.errorRequired': errorRequired,
'Field.errorPattern': errorRequired
}, props.errorMessages);
}, [props.errorMessages, errorRequired]);
const schema = (0, _react.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 = (0, _react.useCallback)((value, _ref) => {
let {
required,
error
} = _ref;
if (required && (!value || !(0, _dateFns.isValid)((0, _dateFns.parseISO)(value)))) {
return error;
}
return undefined;
}, []);
const dateValidator = (0, _react.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 = (0, _react.useMemo)(() => {
if (props.onBlurValidator === false) {
return undefined;
}
if (props.onBlurValidator) {
return props.onBlurValidator;
}
return dateValidator;
}, [props.onBlurValidator, dateValidator]);
const fromInput = (0, _react.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 = (0, _hooks.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
} = (0, _react.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]);
(0, _react.useMemo)(() => {
if ((path || itemPath) && valueProp) {
setDisplayValue((0, _DatePickerCalc.formatDate)(valueProp, {
locale
}), undefined);
}
}, [itemPath, locale, path, setDisplayValue, valueProp]);
const fieldBlockProps = _objectSpread({
forId: id,
label: label !== null && label !== void 0 ? label : defaultLabel,
className: (0, _classnames.default)('dnb-forms-field-string', className)
}, (0, _utils.pickSpacingProps)(props));
return _react.default.createElement(_FieldBlock.default, fieldBlockProps, _react.default.createElement(_components.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)));
}
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 = (0, _startOfDay.default)((0, _DatePickerCalc.convertStringToDate)(dates.minDate));
const maxDate = (0, _startOfDay.default)((0, _DatePickerCalc.convertStringToDate)(dates.maxDate));
const startDate = (0, _startOfDay.default)((0, _DatePickerCalc.convertStringToDate)(startDateParsed));
const endDate = (0, _startOfDay.default)((0, _DatePickerCalc.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 ((0, _dateFns.isBefore)(startDate, minDate)) {
messages.push(new _utils2.FormError('Date.errorMinDate', {
messageValues: {
date: (0, _DatePickerCalc.formatDate)(isoDates.minDate, options)
}
}));
}
if ((0, _dateFns.isAfter)(startDate, maxDate)) {
messages.push(new _utils2.FormError('Date.errorMaxDate', {
messageValues: {
date: (0, _DatePickerCalc.formatDate)(isoDates.maxDate, options)
}
}));
}
return messages;
}
if ((0, _dateFns.isBefore)(startDate, minDate)) {
messages.push(new _utils2.FormError('Date.errorStartDateMinDate', {
messageValues: {
date: (0, _DatePickerCalc.formatDate)(isoDates.minDate, options)
}
}));
}
if ((0, _dateFns.isAfter)(startDate, maxDate)) {
messages.push(new _utils2.FormError('Date.errorStartDateMaxDate', {
messageValues: {
date: (0, _DatePickerCalc.formatDate)(isoDates.maxDate, options)
}
}));
}
if ((0, _dateFns.isBefore)(endDate, minDate)) {
messages.push(new _utils2.FormError('Date.errorEndDateMinDate', {
messageValues: {
date: (0, _DatePickerCalc.formatDate)(isoDates.minDate, options)
}
}));
}
if ((0, _dateFns.isAfter)(endDate, maxDate)) {
messages.push(new _utils2.FormError('Date.errorEndDateMaxDate', {
messageValues: {
date: (0, _DatePickerCalc.formatDate)(isoDates.maxDate, options)
}
}));
}
return messages;
}
function validateDate(_ref4) {
let {
invalidDate,
invalidStartDate,
invalidEndDate
} = _ref4;
if (invalidDate) {
return [new _utils2.FormError('Date.errorInvalidDate', {
messageValues: {
date: invalidDate
}
})];
}
const errors = [];
if (invalidStartDate) {
errors.push(new _utils2.FormError('Date.errorInvalidStartDate', {
messageValues: {
date: invalidStartDate
}
}));
}
if (invalidEndDate) {
errors.push(new _utils2.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;
var _default = exports.default = DateComponent;
//# sourceMappingURL=Date.js.map