@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
243 lines (242 loc) • 8.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../../../../components/flex/utils.js");
var _index = require("../../hooks/index.js");
var _classnames = _interopRequireDefault(require("classnames"));
var _index2 = _interopRequireDefault(require("../../FieldBlock/index.js"));
var _index3 = require("../../../../components/input-masked/index.js");
var _index4 = require("../../../../shared/index.js");
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation.js"));
var _index5 = require("../../utils/index.js");
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 }; }
function Expiry(props = {}) {
const {
label: expiryLabel,
errorRequired
} = (0, _useTranslation.default)().Expiry;
const {
DatePicker: {
placeholderCharacters: placeholders,
month: monthLabel,
year: yearLabel
}
} = (0, _index4.useTranslation)();
const expiryValidator = (0, _react.useCallback)(value => validateMonthAndYear(value, placeholders), [placeholders]);
const {
onBlurValidator = expiryValidator,
onChangeValidator,
errorMessages: propErrorMessages,
validateInitially: validateInitiallyProp,
validateContinuously,
value: valueProp,
transformIn: transformInProp,
onStatusChange
} = props;
const errorMessages = (0, _react.useMemo)(() => ({
'Field.errorRequired': errorRequired,
...propErrorMessages
}), [errorRequired, propErrorMessages]);
const fromInput = (0, _react.useCallback)(values => {
const month = expiryValueToString(values.month, placeholders.month);
const year = expiryValueToString(values.year, placeholders.year);
if (isFieldEmpty(month, placeholders.month) && isFieldEmpty(year, placeholders.year)) {
return undefined;
}
return `${month}${year}`;
}, [placeholders.month, placeholders.year]);
const validateRequired = (0, _react.useCallback)((value, {
required,
error
}) => {
return required && !value ? error : undefined;
}, []);
const validateInitially = (0, _react.useMemo)(() => {
if (validateInitiallyProp) {
return validateInitiallyProp;
}
if (valueProp) {
return true;
}
return undefined;
}, [validateInitiallyProp, valueProp]);
const fromExternal = (0, _react.useCallback)(external => {
if (typeof external === 'string') {
const {
month,
year
} = stringToExpiryValue(external);
const monthString = expiryValueToString(month, placeholders.month);
const yearString = expiryValueToString(year, placeholders.year);
if (isFieldEmpty(monthString, placeholders.month) && isFieldEmpty(yearString, placeholders.year)) {
return undefined;
}
return `${monthString}${yearString}`;
}
return external;
}, [placeholders.month, placeholders.year]);
const transformIn = (0, _react.useCallback)(value => {
if (transformInProp) {
const external = transformInProp(value);
if (typeof external === 'string') {
return external;
}
if (external !== null && external !== void 0 && external.year && external !== null && external !== void 0 && external.month) {
return `${external.month}${external.year}`;
}
}
return value;
}, [transformInProp]);
const provideAdditionalArgs = (0, _react.useCallback)(value => {
let {
month,
year
} = stringToExpiryValue(value);
if (isNaN(Number(month))) {
month = undefined;
}
if (isNaN(Number(year))) {
year = undefined;
}
return {
month,
year
};
}, []);
const preparedProps = {
...props,
errorMessages,
validateInitially,
validateContinuously,
fromExternal,
transformIn,
fromInput,
provideAdditionalArgs,
validateRequired,
onBlurValidator: onBlurValidator,
onChangeValidator,
onStatusChange,
exportValidators: {
expiryValidator
}
};
const {
id,
path,
itemPath,
className,
label = expiryLabel,
hasError,
info,
warning,
disabled,
size,
value = '',
htmlAttributes,
handleFocus,
handleBlur,
handleChange,
setDisplayValue
} = (0, _index.useFieldProps)(preparedProps);
const expiry = (0, _react.useMemo)(() => stringToExpiryValue(value), [value]);
(0, _react.useMemo)(() => {
if ((path || itemPath) && expiry.month && expiry.year) {
setDisplayValue(`${expiry.month}/${expiry.year}`);
}
}, [expiry.month, expiry.year, itemPath, path, setDisplayValue]);
const status = hasError ? 'error' : warning ? 'warn' : info ? 'info' : null;
const fieldBlockProps = {
id,
forId: `${id}-input-month`,
className: (0, _classnames.default)('dnb-forms-field-expiry', className),
label,
...(0, _utils.pickSpacingProps)(props)
};
return _react.default.createElement(_index2.default, fieldBlockProps, _react.default.createElement(_index3.MultiInputMask, {
stretch: true,
id: `${id}-input`,
values: expiry,
status: status === 'error',
statusState: disabled ? 'disabled' : undefined,
disabled: disabled,
size: size,
onChange: handleChange,
onBlur: handleBlur,
onFocus: handleFocus,
delimiter: "/",
inputMode: "numeric",
inputs: [{
id: 'month',
label: monthLabel,
mask: [/[0-9]/, /[0-9]/],
placeholderCharacter: placeholders['month'],
autoComplete: 'cc-exp-month',
...htmlAttributes
}, {
id: 'year',
label: yearLabel,
mask: [/[0-9]/, /[0-9]/],
placeholderCharacter: placeholders['year'],
autoComplete: 'cc-exp-year',
...htmlAttributes
}]
}));
}
function isFieldEmpty(value, placeholder) {
return value === `${placeholder}${placeholder}`;
}
function stringToExpiryValue(value) {
const month = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.substring(0, 2) : undefined;
const year = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.substring(2, 4) : undefined;
return {
month,
year
};
}
function expiryValueToString(value, placeholder) {
if (!value) {
return `${placeholder}${placeholder}`;
}
if (value.length === 1) {
return `${value}${placeholder}`;
}
return value;
}
function validateMonthAndYear(date, placeholders) {
const {
month,
year
} = stringToExpiryValue(date);
const monthNumber = Number(month);
const messages = [];
const isMonthEmpty = !month || month.includes(placeholders.month) && !/\d/.test(month);
const isYearEmpty = !year || year.includes(placeholders.year) && !/\d/.test(year);
if (isMonthEmpty && isYearEmpty) {
return messages;
}
if (month.includes(placeholders.month) || monthNumber < 1 || monthNumber > 12) {
(0, _push.default)(messages).call(messages, new _index5.FormError('Expiry.errorMonth', {
messageValues: {
month: month
}
}));
}
if (year.includes(placeholders.year)) {
(0, _push.default)(messages).call(messages, new _index5.FormError('Expiry.errorYear', {
messageValues: {
year: year
}
}));
}
if (messages.length) {
return messages;
}
}
Expiry._supportsEufemiaSpacingProps = true;
var _default = exports.default = Expiry;
//# sourceMappingURL=Expiry.js.map