braid-design-system
Version:
Themeable design system for the SEEK Group
182 lines (181 loc) • 6.32 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const isMobile = require("is-mobile");
const react = require("react");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
const lib_components_Dropdown_Dropdown_cjs = require("../Dropdown/Dropdown.cjs");
const lib_components_private_Field_Field_cjs = require("../private/Field/Field.cjs");
const lib_components_private_FieldGroup_FieldGroup_cjs = require("../private/FieldGroup/FieldGroup.cjs");
const lib_components_MonthPicker_MonthPicker_css_cjs = require("./MonthPicker.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const defaultMonthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
const getMonths = (monthNames) => monthNames.map((monthName, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i + 1, children: monthName }, i));
const getYears = (min, max, ascending) => [...new Array(max - min + 1)].map((_v, i) => {
const yearStr = String(ascending ? i + min : max - i);
return /* @__PURE__ */ jsxRuntime.jsx("option", { value: yearStr, children: yearStr }, yearStr);
});
const currYear = (/* @__PURE__ */ new Date()).getFullYear();
const renderNativeInput = isMobile.isMobile({ tablet: true });
const customValueToString = ({ month, year }) => month && year ? `${year}-${month < 10 ? "0" : ""}${month}` : void 0;
const stringToCustomValue = (value) => {
const [year, month] = value.split("-");
return {
month: parseInt(month, 10),
year: parseInt(year, 10)
};
};
const makeChangeHandler = (onChange, value, fieldType) => (event) => {
if (typeof onChange === "function") {
onChange(
{
month: {
year: value && value.year ? value.year : void 0,
month: parseInt(event.target.value, 10) || void 0
},
year: {
month: value && value.month ? value.month : void 0,
year: parseInt(event.target.value, 10) || void 0
},
native: stringToCustomValue(event.target.value)
}[fieldType]
);
}
};
const MonthPicker = ({
value,
onChange,
onBlur,
onFocus,
tone,
disabled,
minYear = currYear - 100,
maxYear = currYear,
ascendingYears = false,
monthLabel = "Month",
yearLabel = "Year",
tabIndex,
monthNames = defaultMonthNames,
...restProps
}) => {
assert__default.default(monthNames.length === 12, "monthNames array must contain 12 items");
const currentValue = {
month: value && value.month ? value.month : void 0,
year: value && value.year ? value.year : void 0
};
const monthRef = react.createRef();
const yearRef = react.createRef();
const blurHandler = onBlur ? (event) => {
const fireIfExternal = (element) => {
if (element !== monthRef.current && element !== yearRef.current) {
onBlur();
}
};
if (event.relatedTarget !== null) {
fireIfExternal(event.relatedTarget);
} else {
setTimeout(() => {
fireIfExternal(document.activeElement);
});
}
} : void 0;
const focusHandler = onFocus ? (event) => {
if (event.relatedTarget !== monthRef.current && event.relatedTarget !== yearRef.current) {
onFocus();
}
} : void 0;
const nativeField = /* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_Field_Field_cjs.Field,
{
tone,
disabled,
value: customValueToString(currentValue),
...restProps,
componentName: "MonthPicker",
tabIndex,
icon: void 0,
prefix: void 0,
name: void 0,
autoComplete: void 0,
secondaryMessage: null,
children: (overlays, { className, ...fieldProps }) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "input",
type: "month",
value: customValueToString(currentValue),
onChange: onChange && makeChangeHandler(onChange, value, "native"),
onBlur,
onFocus,
...fieldProps,
height: "touchable",
className: [className, lib_components_MonthPicker_MonthPicker_css_cjs.nativeInput]
}
),
overlays
] })
}
);
const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_FieldGroup_FieldGroup_cjs.FieldGroup,
{
tone,
disabled,
tabIndex,
componentName: "MonthPicker",
...restProps,
children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "xsmall", children: [
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Dropdown_Dropdown_cjs.Dropdown,
{
value: currentValue.month || "",
onChange: makeChangeHandler(onChange, value, "month"),
onBlur: blurHandler,
onFocus: focusHandler,
tone,
placeholder: monthLabel,
"aria-label": monthLabel,
...fieldGroupProps,
ref: monthRef,
children: getMonths(monthNames)
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Dropdown_Dropdown_cjs.Dropdown,
{
value: currentValue.year || "",
onChange: makeChangeHandler(onChange, value, "year"),
onBlur: blurHandler,
onFocus: focusHandler,
tone,
placeholder: yearLabel,
"aria-label": yearLabel,
...fieldGroupProps,
ref: yearRef,
children: getYears(minYear, maxYear, ascendingYears)
}
) })
] })
}
);
return renderNativeInput ? nativeField : customFieldGroup;
};
MonthPicker.displayName = "MonthPicker";
exports.MonthPicker = MonthPicker;