@navinc/base-react-components
Version:
Nav's Pattern Library
46 lines • 3.38 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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDatePickerInput } from '../../use-date-picker-input/use-date-picker-input.js';
import { Select, SelectItem } from '../select/select.js';
import { baseInputVariantsConfig, PatternInput, withInputWrapper } from './index.js';
import { cn } from '../../cn.js';
import { cva } from 'class-variance-authority';
import { createProxyWithOverrides } from '@navinc/utils';
const monthSelectVariants = cva('min-w-[140px]', baseInputVariantsConfig);
const MonthSelect = (_a) => {
var { className } = _a, props = __rest(_a, ["className"]);
return (_jsxs(Select, Object.assign({ className: cn(monthSelectVariants({
disabled: props.disabled,
hasValue: !!props.value,
hasError: !!props.$error,
className,
})) }, props, { children: [_jsx(SelectItem, { value: "01", children: "January" }), _jsx(SelectItem, { value: "02", children: "February" }), _jsx(SelectItem, { value: "03", children: "March" }), _jsx(SelectItem, { value: "04", children: "April" }), _jsx(SelectItem, { value: "05", children: "May" }), _jsx(SelectItem, { value: "06", children: "June" }), _jsx(SelectItem, { value: "07", children: "July" }), _jsx(SelectItem, { value: "08", children: "August" }), _jsx(SelectItem, { value: "09", children: "September" }), _jsx(SelectItem, { value: "10", children: "October" }), _jsx(SelectItem, { value: "11", children: "November" }), _jsx(SelectItem, { value: "12", children: "December" })] })));
};
export const MonthYearPickerInput = (_a) => {
var { value, name, onBlur, onChange, className, monthProps, yearProps, disabled, $error } = _a, props = __rest(_a, ["value", "name", "onBlur", "onChange", "className", "monthProps", "yearProps", "disabled", "$error"]);
const { monthProps: monthDatePickerProps, yearProps: yearDatePickerProps } = useDatePickerInput(value, {
name,
onChange,
withDay: false,
});
const handleBlur = onBlur
? (e) => {
const updatedEvent = e;
updatedEvent.target = createProxyWithOverrides(updatedEvent.target, { name });
onBlur(updatedEvent);
}
: undefined;
return (_jsxs("div", Object.assign({ className: cn('inline-flex gap-100', className) }, props, { children: [_jsx(MonthSelect, Object.assign({ placeholder: "January" }, monthDatePickerProps, monthProps, { disabled: disabled, "$error": $error, onBlur: handleBlur })), _jsx(PatternInput, Object.assign({ pattern: "9999", placeholder: "2019" }, yearDatePickerProps, yearProps, { className: cn('w-auto', yearProps === null || yearProps === void 0 ? void 0 : yearProps.className), disabled: disabled, "$error": $error, onBlur: handleBlur }))] })));
};
export const MonthYearPickerField = withInputWrapper(MonthYearPickerInput);
//# sourceMappingURL=month-year-picker-input.js.map