@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
64 lines • 5.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("@headlessui/react");
const luxon_1 = require("luxon");
const react_i18next_1 = require("react-i18next");
const SelectIcon_1 = tslib_1.__importDefault(require("../icons/SelectIcon"));
const months = {
en: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
it: [
'Gennaio',
'Febbraio',
'Marzo',
'Aprile',
'Maggio',
'Giugno',
'Luglio',
'Agosto',
'Settembre',
'Ottobre',
'Novembre',
'Dicembre',
],
};
const DateSelector = (0, react_1.memo)(({ defaultDate, onChange, disabled = false }) => {
const { t, i18n } = (0, react_i18next_1.useTranslation)();
const [date, setDate] = (0, react_1.useState)(!defaultDate
? luxon_1.DateTime.now()
: typeof defaultDate === 'string'
? luxon_1.DateTime.fromISO(defaultDate)
: luxon_1.DateTime.fromJSDate(defaultDate));
(0, react_1.useEffect)(() => {
onChange(date);
}, [date, onChange]);
return ((0, jsx_runtime_1.jsxs)("div", { className: "memori--date-selector", children: [(0, jsx_runtime_1.jsx)("div", { className: "memori--date-selector__select", children: (0, jsx_runtime_1.jsxs)(react_2.Listbox, { value: date, onChange: value => {
setDate(value);
}, disabled: disabled, name: "day", children: [(0, jsx_runtime_1.jsxs)(react_2.Listbox.Label, { className: "memori--date-selector__select-label", children: [t('day'), ":"] }), (0, jsx_runtime_1.jsxs)(react_2.Listbox.Button, { "aria-label": t('day'), className: "memori--date-selector__select-button", children: [(0, jsx_runtime_1.jsx)("span", { className: "memori--date-selector__select--value", children: date.day }), (0, jsx_runtime_1.jsx)("span", { className: "memori--date-selector__select--icon", children: (0, jsx_runtime_1.jsx)(SelectIcon_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { as: react_1.Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.Listbox.Options, { className: "memori--date-selector__select-options", children: [...Array(31).keys()].map(day => ((0, jsx_runtime_1.jsx)(react_2.Listbox.Option, { value: date.set({ day: day + 1 }), className: "memori--date-selector__select-option", children: day + 1 }, day))) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "memori--date-selector__select", children: (0, jsx_runtime_1.jsxs)(react_2.Listbox, { value: date, onChange: value => {
setDate(value);
}, disabled: disabled, name: "month", children: [(0, jsx_runtime_1.jsxs)(react_2.Listbox.Label, { className: "memori--date-selector__select-label", children: [t('month'), ":"] }), (0, jsx_runtime_1.jsxs)(react_2.Listbox.Button, { "aria-label": t('month'), className: "memori--date-selector__select-button", children: [(0, jsx_runtime_1.jsx)("span", { className: "memori--date-selector__select--value", children: months[i18n.language === 'it' ? 'it' : 'en'][date.month - 1] }), (0, jsx_runtime_1.jsx)("span", { className: "memori--date-selector__select--icon", children: (0, jsx_runtime_1.jsx)(SelectIcon_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { as: react_1.Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.Listbox.Options, { className: "memori--date-selector__select-options", children: months[i18n.language === 'it' ? 'it' : 'en'].map(month => ((0, jsx_runtime_1.jsx)(react_2.Listbox.Option, { className: "memori--date-selector__select-option", value: date.set({
month: months[i18n.language === 'it' ? 'it' : 'en'].findIndex(m => m === month) + 1,
}), children: month }, month))) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "memori--date-selector__select", children: (0, jsx_runtime_1.jsxs)(react_2.Listbox, { value: date, onChange: value => {
setDate(value);
}, disabled: disabled, name: "year", children: [(0, jsx_runtime_1.jsxs)(react_2.Listbox.Label, { className: "memori--date-selector__select-label", children: [t('year'), ":"] }), (0, jsx_runtime_1.jsxs)(react_2.Listbox.Button, { "aria-label": t('year'), className: "memori--date-selector__select-button", children: [(0, jsx_runtime_1.jsx)("span", { className: "memori--date-selector__select--value", children: date.year }), (0, jsx_runtime_1.jsx)("span", { className: "memori--date-selector__select--icon", children: (0, jsx_runtime_1.jsx)(SelectIcon_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(react_2.Transition, { as: react_1.Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: (0, jsx_runtime_1.jsx)(react_2.Listbox.Options, { className: "memori--date-selector__select-options", children: [...Array(luxon_1.DateTime.now().year - 1899).keys()]
.sort((a, b) => b - a)
.map(year => ((0, jsx_runtime_1.jsx)(react_2.Listbox.Option, { value: date.set({ year: year + 1900 }), className: "memori--date-selector__select-option", children: year + 1900 }, year))) }) })] }) })] }));
});
DateSelector.displayName = 'DateSelector';
exports.default = DateSelector;
//# sourceMappingURL=DateSelector.js.map