@navinc/base-react-components
Version:
Nav's Pattern Library
130 lines (129 loc) • 6.9 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = exports.isDateValid = exports.DatePickerWrapper = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const input_js_1 = __importDefault(require("./input.js"));
const select_js_1 = __importDefault(require("./select.js"));
const copy_js_1 = __importDefault(require("./copy.js"));
const shared_js_1 = require("./form-elements/shared.js");
const vanilla_masker_1 = __importDefault(require("vanilla-masker"));
const styled_components_1 = __importDefault(require("styled-components"));
const prop_types_1 = __importDefault(require("prop-types"));
const utils_1 = require("@navinc/utils");
exports.DatePickerWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-DatePickerWrapper", componentId: "brc-sc-1qzavad" }) `
div > ${copy_js_1.default} {
text-align: left;
}
`;
const StyledCopy = (0, styled_components_1.default)(copy_js_1.default).withConfig({ displayName: "brc-sc-StyledCopy", componentId: "brc-sc-1j3ecjf" }) `
margin-bottom: 8px;
`;
const InputWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-InputWrapper", componentId: "brc-sc-6pakgu" }) `
display: grid;
grid-gap: 12px;
grid-template-columns: ${({ fieldsToShow = [] }) => {
if (fieldsToShow.length === 3) {
return '5fr 2fr 2.5fr';
}
else if (fieldsToShow.length === 2) {
return '1fr 1fr';
}
else {
return '1fr';
}
}};
${shared_js_1.Errors} {
display: none;
}
`;
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
function isDateValid(dateIn) {
if (!dateIn || !dateIn.year || !dateIn.month || !dateIn.day)
return false;
const { year, month, day } = dateIn;
if (year.toString().length !== 4) {
return false;
}
const date = new Date(year, month - 1, day);
return date.getFullYear() === Number(year) && date.getMonth() + 1 === Number(month) && date.getDate() === Number(day);
}
exports.isDateValid = isDateValid;
const DatePicker = (_a) => {
var _b;
var { errors = [], fieldsToShow = ['day', 'month', 'year'], hasSpaceForErrors, isInvalid, label, name, onBlur, onChange = utils_1.noop, value = {} } = _a, rest = __rest(_a, ["errors", "fieldsToShow", "hasSpaceForErrors", "isInvalid", "label", "name", "onBlur", "onChange", "value"]);
const onChangeWrapper = (key, val) => {
onChange({
target: {
value: Object.assign(Object.assign({}, value), { [key]: val }),
},
});
};
const handleMonthChange = (event) => {
const monthNumber = months.indexOf(event.target.value) + 1;
const val = monthNumber < 10 ? `0${monthNumber}` : `${monthNumber}`;
onChangeWrapper('month', val);
};
const handleDayChange = (event) => {
onChangeWrapper('day', vanilla_masker_1.default.toPattern(event.target.value, '99'));
};
const handleYearChange = (event) => {
onChangeWrapper('year', vanilla_masker_1.default.toPattern(event.target.value, '9999'));
};
const isInvalidOrHasErrors = isInvalid || errors.length;
return ((0, jsx_runtime_1.jsxs)(exports.DatePickerWrapper, Object.assign({}, rest, { children: [label && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(StyledCopy, Object.assign({ light: true, size: "sm" }, { children: label })) })), (0, jsx_runtime_1.jsxs)(InputWrapper, Object.assign({ fieldsToShow: fieldsToShow }, { children: [fieldsToShow.includes('month') && ((0, jsx_runtime_1.jsx)(select_js_1.default, { "data-testid": "date_picker:month", isInvalid: isInvalidOrHasErrors, label: "Month", name: name, options: months, onBlur: onBlur, onChange: handleMonthChange, value: (_b = months[parseInt(value.month, 10) - 1]) !== null && _b !== void 0 ? _b : 0 })), fieldsToShow.includes('day') && ((0, jsx_runtime_1.jsx)(input_js_1.default, { "data-testid": "date_picker:day", isInvalid: isInvalidOrHasErrors, label: "Day", onBlur: onBlur, onChange: handleDayChange,
// chrome 73 onWheel events became passive
onWheel: (e) => {
e.preventDefault();
e.target.blur();
}, type: "number", value: value.day || '' })), fieldsToShow.includes('year') && ((0, jsx_runtime_1.jsx)(input_js_1.default, { "data-testid": "date_picker:year", isInvalid: isInvalidOrHasErrors, label: "Year", onBlur: onBlur, onChange: handleYearChange,
// chrome 73 onWheel events became passive
onWheel: (e) => {
e.preventDefault();
e.target.blur();
}, type: "number", value: value.year || '' }))] })), (0, jsx_runtime_1.jsx)(shared_js_1.Errors, Object.assign({ hasSpaceForErrors: hasSpaceForErrors, "data-testid": "date_picker:errors" }, { children: !!errors.length && errors.map((err, i) => (0, jsx_runtime_1.jsx)(shared_js_1.Err, { children: err }, `err-${i}`)) }))] })));
};
exports.DatePicker = DatePicker;
exports.DatePicker.propTypes = {
errors: prop_types_1.default.arrayOf(prop_types_1.default.string),
fieldsToShow: prop_types_1.default.arrayOf(prop_types_1.default.oneOf(['day', 'month', 'year'])),
hasSpaceForErrors: prop_types_1.default.bool,
isInvalid: prop_types_1.default.bool,
label: prop_types_1.default.string,
onBlur: prop_types_1.default.func,
onChange: prop_types_1.default.func,
value: prop_types_1.default.shape({
day: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
month: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
year: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
}),
};
const StyledDatePicker = (0, styled_components_1.default)(exports.DatePicker).withConfig({ displayName: "brc-sc-StyledDatePicker", componentId: "brc-sc-1efsmva" }) ``;
exports.default = StyledDatePicker;
//# sourceMappingURL=date-picker.js.map