@navinc/base-react-components
Version:
Nav's Pattern Library
76 lines • 3.57 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateSegmentInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const utils_1 = require("@navinc/utils");
const formik_1 = require("formik");
const date_segment_component_1 = require("./date-segment-component");
const INVALID_VALUE = '0000-00-00';
const FULL_YEAR_LENGTH = 4;
const toDateValue = (input) => {
if (!input) {
return '';
}
const parsed = (0, utils_1.parseDate)(input);
if (!(0, utils_1.isDateValid)(parsed)) {
return INVALID_VALUE;
}
return (0, utils_1.formatDate)(parsed, utils_1.DATE_FORMAT_ISO8601_DATE);
};
const toDateDisplay = (input) => {
const parsed = (0, utils_1.parseDate)(input);
if (!(0, utils_1.isDateValid)(parsed)) {
return '';
}
return (0, utils_1.formatDate)(parsed, utils_1.DATE_FORMAT_ISO8601_DATE);
};
const resolveValue = (input) => {
if (!input.length || input === '--') {
return '';
}
const [year] = input.split('-');
return year.length === FULL_YEAR_LENGTH ? toDateValue(input) : INVALID_VALUE;
};
const createDateValidator = ({ isRequired = false, requiredErrorMessage = 'Required', invalidErrorMessage = 'Please enter a valid date' } = {}) => (date) => {
if (isRequired && !date) {
return [requiredErrorMessage];
}
if (date === INVALID_VALUE) {
return [invalidErrorMessage];
}
};
const DateSegmentInput = (_a) => {
var { name, onBlur, onChange, invalidOnTouched = true, isRequired, requiredErrorMessage, invalidErrorMessage } = _a, props = __rest(_a, ["name", "onBlur", "onChange", "invalidOnTouched", "isRequired", "requiredErrorMessage", "invalidErrorMessage"]);
const memoizedValidateDate = (0, react_1.useMemo)(() => createDateValidator({ isRequired, requiredErrorMessage, invalidErrorMessage }), [isRequired, requiredErrorMessage, invalidErrorMessage]);
const [field, meta, { setValue }] = (0, formik_1.useField)({ name, validate: memoizedValidateDate });
const [rawValue, setRawValue] = (0, react_1.useState)(() => toDateDisplay(field.value));
(0, react_1.useEffect)(() => {
const converted = toDateValue(field.value);
if (converted !== field.value) {
// Ensure initial value stored in parent form is formatted correctly
setValue(converted);
}
}, [field.value, setValue]);
return ((0, jsx_runtime_1.jsx)(date_segment_component_1.DateSegmentComponent, Object.assign({ value: rawValue, onChange: (value) => {
setRawValue(value);
setValue(resolveValue(value));
onChange && onChange(value);
}, onBlur: () => {
field.onBlur({ target: { name } });
onBlur && onBlur();
}, errors: !invalidOnTouched || meta.touched ? meta.error : undefined, isInvalid: (!invalidOnTouched || meta.touched) && !!meta.error, hasSpaceForErrors: true }, props)));
};
exports.DateSegmentInput = DateSegmentInput;
//# sourceMappingURL=date-segment-input.js.map