@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
61 lines • 4.88 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState, memo, Fragment } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { DateTime } from 'luxon';
import { useTranslation } from 'react-i18next';
import SelectIcon from '../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 = memo(({ defaultDate, onChange, disabled = false }) => {
const { t, i18n } = useTranslation();
const [date, setDate] = useState(!defaultDate
? DateTime.now()
: typeof defaultDate === 'string'
? DateTime.fromISO(defaultDate)
: DateTime.fromJSDate(defaultDate));
useEffect(() => {
onChange(date);
}, [date, onChange]);
return (_jsxs("div", { className: "memori--date-selector", children: [_jsx("div", { className: "memori--date-selector__select", children: _jsxs(Listbox, { value: date, onChange: value => {
setDate(value);
}, disabled: disabled, name: "day", children: [_jsxs(Listbox.Label, { className: "memori--date-selector__select-label", children: [t('day'), ":"] }), _jsxs(Listbox.Button, { "aria-label": t('day'), className: "memori--date-selector__select-button", children: [_jsx("span", { className: "memori--date-selector__select--value", children: date.day }), _jsx("span", { className: "memori--date-selector__select--icon", children: _jsx(SelectIcon, {}) })] }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "memori--date-selector__select-options", children: [...Array(31).keys()].map(day => (_jsx(Listbox.Option, { value: date.set({ day: day + 1 }), className: "memori--date-selector__select-option", children: day + 1 }, day))) }) })] }) }), _jsx("div", { className: "memori--date-selector__select", children: _jsxs(Listbox, { value: date, onChange: value => {
setDate(value);
}, disabled: disabled, name: "month", children: [_jsxs(Listbox.Label, { className: "memori--date-selector__select-label", children: [t('month'), ":"] }), _jsxs(Listbox.Button, { "aria-label": t('month'), className: "memori--date-selector__select-button", children: [_jsx("span", { className: "memori--date-selector__select--value", children: months[i18n.language === 'it' ? 'it' : 'en'][date.month - 1] }), _jsx("span", { className: "memori--date-selector__select--icon", children: _jsx(SelectIcon, {}) })] }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "memori--date-selector__select-options", children: months[i18n.language === 'it' ? 'it' : 'en'].map(month => (_jsx(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))) }) })] }) }), _jsx("div", { className: "memori--date-selector__select", children: _jsxs(Listbox, { value: date, onChange: value => {
setDate(value);
}, disabled: disabled, name: "year", children: [_jsxs(Listbox.Label, { className: "memori--date-selector__select-label", children: [t('year'), ":"] }), _jsxs(Listbox.Button, { "aria-label": t('year'), className: "memori--date-selector__select-button", children: [_jsx("span", { className: "memori--date-selector__select--value", children: date.year }), _jsx("span", { className: "memori--date-selector__select--icon", children: _jsx(SelectIcon, {}) })] }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "memori--date-selector__select-options", children: [...Array(DateTime.now().year - 1899).keys()]
.sort((a, b) => b - a)
.map(year => (_jsx(Listbox.Option, { value: date.set({ year: year + 1900 }), className: "memori--date-selector__select-option", children: year + 1900 }, year))) }) })] }) })] }));
});
DateSelector.displayName = 'DateSelector';
export default DateSelector;
//# sourceMappingURL=DateSelector.js.map