@navinc/base-react-components/dist/date-picker.js

Nav's Pattern Library

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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Input from './input.js';
import Select from './select.js';
import Copy from './copy';
import { Errors, Err } from './form-elements/shared.js';
import VMasker from 'vanilla-masker';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import noop from '@navinc/utils/noop.js';
export const DatePickerWrapper = styled.div `
  div > ${Copy} {
    text-align: left;
  }
`;
const StyledCopy = styled(Copy) `
  margin-bottom: 8px;
`;
const InputWrapper = styled.div `
  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';
    }
}};

  ${Errors} {
    display: none;
  }
`;
const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
];
export function isDateValid(dateIn) {
    if (!dateIn)
        return false;
    const { year, month, day } = dateIn;
    const date = new Date(year, month - 1, day);
    return date.getFullYear() === Number(year) && date.getMonth() + 1 === Number(month) && date.getDate() === Number(day);
}
export const DatePicker = (_a) => {
    var _b;
    var { errors = [], fieldsToShow = ['day', 'month', 'year'], hasSpaceForErrors, isInvalid, label, name, onBlur, onChange = 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', VMasker.toPattern(event.target.value, '99'));
    };
    const handleYearChange = (event) => {
        onChangeWrapper('year', VMasker.toPattern(event.target.value, '9999'));
    };
    const isInvalidOrHasErrors = isInvalid || errors.length;
    return (_jsxs(DatePickerWrapper, Object.assign({}, rest, { children: [label && (_jsx("div", { children: _jsx(StyledCopy, Object.assign({ light: true, size: "sm" }, { children: label }), void 0) }, void 0)), _jsxs(InputWrapper, Object.assign({ fieldsToShow: fieldsToShow }, { children: [fieldsToShow.includes('month') && (_jsx(Select, { "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 }, void 0)), fieldsToShow.includes('day') && (_jsx(Input, { "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 || '' }, void 0)), fieldsToShow.includes('year') && (_jsx(Input, { "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 || '' }, void 0))] }), void 0), _jsx(Errors, Object.assign({ hasSpaceForErrors: hasSpaceForErrors, "data-testid": "date_picker:errors" }, { children: !!errors.length && errors.map((err, i) => _jsx(Err, { children: err }, `err-${i}`)) }), void 0)] }), void 0));
};
DatePicker.propTypes = {
    errors: PropTypes.arrayOf(PropTypes.string),
    fieldsToShow: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year'])),
    hasSpaceForErrors: PropTypes.bool,
    isInvalid: PropTypes.bool,
    label: PropTypes.string,
    onBlur: PropTypes.func,
    onChange: PropTypes.func,
    value: PropTypes.shape({
        day: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    }),
};
const StyledDatePicker = styled(DatePicker) ``;
export default StyledDatePicker;
//# sourceMappingURL=date-picker.js.map