@navinc/base-react-components
Version:
Nav's Pattern Library
131 lines (130 loc) • 6.84 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.DatePickerInputWrapper = exports.DatePickerWrapper = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const input_js_1 = require("./input.js");
const select_js_1 = require("./select.js");
const copy_js_1 = require("./copy.js");
const shared_js_1 = require("./form-elements/shared.js");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("@navinc/utils");
exports.DatePickerWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-DatePickerWrapper", componentId: "brc-sc-102rw0x" }) `
div > ${copy_js_1.Copy} {
text-align: left;
}
`;
const StyledCopy = (0, styled_components_1.default)(copy_js_1.Copy).withConfig({ displayName: "brc-sc-StyledCopy", componentId: "brc-sc-tvzfmn" }) `
margin-bottom: 8px;
`;
exports.DatePickerInputWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-DatePickerInputWrapper", componentId: "brc-sc-16veeuh" }) `
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 = [
{ value: 'January', label: 'January' },
{ value: 'February', label: 'February' },
{ value: 'March', label: 'March' },
{ value: 'April', label: 'April' },
{ value: 'May', label: 'May' },
{ value: 'June', label: 'June' },
{ value: 'July', label: 'July' },
{ value: 'August', label: 'August' },
{ value: 'September', label: 'September' },
{ value: 'October', label: 'October' },
{ value: 'November', label: 'November' },
{ value: 'December', label: '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 yearNumber = Number(year);
const monthNumber = Number(month);
const dayNumber = Number(day);
const date = new Date(yearNumber, monthNumber - 1, dayNumber);
return date.getFullYear() === yearNumber && date.getMonth() + 1 === monthNumber && date.getDate() === dayNumber;
}
exports.isDateValid = isDateValid;
const _DatePicker = (_a) => {
var _b;
var { errors = [], fieldsToShow = ['day', 'month', 'year'], hasSpaceForErrors, isInvalid, label, name, onBlur, onChange = utils_1.noop, value = {}, enabledMonths = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
] } = _a, rest = __rest(_a, ["errors", "fieldsToShow", "hasSpaceForErrors", "isInvalid", "label", "name", "onBlur", "onChange", "value", "enabledMonths"]);
const onChangeWrapper = (key, val) => {
onChange({
target: {
value: Object.assign(Object.assign({}, value), { [key]: val }),
},
});
};
const handleMonthChange = (event) => {
const monthNumber = months.findIndex(({ value }) => value === event.target.value) + 1;
const val = monthNumber < 10 ? `0${monthNumber}` : `${monthNumber}`;
onChangeWrapper('month', val);
};
const handleDayChange = (event) => {
onChangeWrapper('day', (0, utils_1.inputPattern)(event.target, '99'));
};
const handleYearChange = (event) => {
onChangeWrapper('year', (0, utils_1.inputPattern)(event.target, '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, { light: true, size: "sm", children: label }) })), (0, jsx_runtime_1.jsxs)(exports.DatePickerInputWrapper, { fieldsToShow: fieldsToShow, children: [fieldsToShow.includes('month') && ((0, jsx_runtime_1.jsx)(select_js_1.Select, { "data-testid": "date_picker:month", isInvalid: isInvalidOrHasErrors, label: "Month", name: name, options: months.map((_a) => {
var { value } = _a, props = __rest(_a, ["value"]);
return (Object.assign({ value, disabled: !enabledMonths.includes(value) }, props));
}), onBlur: onBlur, onChange: handleMonthChange, value: (_b = months[parseInt(value.month, 10) - 1]) === null || _b === void 0 ? void 0 : _b.value })), fieldsToShow.includes('day') && ((0, jsx_runtime_1.jsx)(input_js_1.Input, { "data-testid": "date_picker:day", isInvalid: isInvalidOrHasErrors, label: "Day", name: "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.Input, { "data-testid": "date_picker:year", isInvalid: isInvalidOrHasErrors, label: "Year", name: "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, { 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 = (0, styled_components_1.default)(_DatePicker).withConfig({ displayName: "brc-sc-DatePicker", componentId: "brc-sc-9xv87p" }) ``;
//# sourceMappingURL=date-picker.js.map