@amaui/ui-react
Version:
UI for React
463 lines (462 loc) • 34.7 kB
JavaScript
"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const date_1 = require("@amaui/date");
const IconMaterialNavigateBeforeW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
const IconMaterialNavigateNextW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialNavigateNextW100"));
const IconMaterialArrowDropDownW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
const Surface_1 = __importDefault(require("../Surface"));
const Line_1 = __importDefault(require("../Line"));
const Fade_1 = __importDefault(require("../Fade"));
const IconButton_1 = __importDefault(require("../IconButton"));
const Button_1 = __importDefault(require("../Button"));
const CalendarMonth_1 = __importDefault(require("../CalendarMonth"));
const List_1 = __importDefault(require("../List"));
const ListItem_1 = __importDefault(require("../ListItem"));
const Divider_1 = __importDefault(require("../Divider"));
const Type_1 = __importDefault(require("../Type"));
const Carousel_1 = __importDefault(require("../Carousel"));
const PaginationItem_1 = __importDefault(require("../PaginationItem"));
const Buttons_1 = require("../Buttons/Buttons");
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
borderRadius: theme.methods.shape.radius.value(4, 'px'),
overflow: 'hidden'
},
size_small: {
width: '275px',
'& .amaui-ListItem-root': {
minHeight: '40px'
},
'& .amaui-ListItem-inset': {
paddingInlineStart: '44px'
}
},
size_regular: {
width: '320px',
'& .amaui-ListItem-root': {
minHeight: '50px'
},
'& .amaui-ListItem-inset': {
paddingInlineStart: '58px'
}
},
size_large: {
width: '375px',
'& .amaui-ListItem-root': {
minHeight: '60px'
},
'& .amaui-ListItem-inset': {
paddingInlineStart: '78px'
}
},
range: {
width: 'unset'
},
header: {
width: '100%',
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`
},
calendars: {
width: '100%',
padding: `0 ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1, 'px')}`
},
calendar: {
width: '100%'
},
option: {
transition: theme.methods.transitions.make('opacity'),
'&.amaui-Button-root': {
paddingInline: `${theme.methods.space.value(1, 'px')} 0`
},
'& .amaui-Button-end': {
paddingInline: `${theme.methods.space.value(1, 'px')} 0`
}
},
option_secondary: {
opacity: '0.4'
},
list: {
width: '100%',
maxHeight: '307px',
overflowY: 'auto',
'&.amaui-List-root': {
maxWidth: 'unset !important',
boxShadow: 'none'
}
},
listItem: {},
list_version_year: {
width: '100%',
maxHeight: '299px',
overflowY: 'auto',
marginTop: '8px'
},
day_version_year: {
flex: '0 1 72px',
height: '36px',
'&:hover': {
boxShadow: 'inset 0px 0px 0px 1px currentColor'
}
},
carousel: {
'&.amaui-Carousel-root': {
height: '100vh',
maxHeight: '440px',
padding: `0 ${theme.methods.space.value(1, 'px')}`
}
},
carousel_item: {
width: '100%',
marginTop: '16px',
userSelect: 'none'
},
carousel_item_label: {
paddingInlineStart: theme.methods.space.value(2, 'px')
},
arrow: {
transition: theme.methods.transitions.make('transform')
},
arrow_open: {
transform: 'rotate(-180deg)'
},
divider: {
'&.amaui-Divider-root': {
margin: '0px'
}
}
}), { name: 'amaui-Calendar' });
const Calendar = react_1.default.forwardRef((props__, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiCalendar) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props__)); }, [props__]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
const CalendarMonth = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.CalendarMonth) || CalendarMonth_1.default; }, [theme]);
const List = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.List) || List_1.default; }, [theme]);
const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const Carousel = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Carousel) || Carousel_1.default; }, [theme]);
const PaginationItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.PaginationItem) || PaginationItem_1.default; }, [theme]);
const { tonal = true, color = 'default', version = 'regular', size = 'regular', value: value_, valueDefault, onChange, calendar: calendar_, calendarDefault, onChangeCalendar, start, end, menu = 'month-year', range, now, calendars = props.range ? 2 : 1, min, max, validate, menu_month_previous_unit, menu_month_next_unit, valid: valid_, getMonths: getMonths_, getYears: getYears_, belowCalendars, disabled, IconPrevious = IconMaterialNavigateBeforeW100_1.default, IconNext = IconMaterialNavigateNextW100_1.default, IconDropDown = IconMaterialArrowDropDownW100_1.default, CalendarMonthProps, OptionButtonProps, PaginationItemsProps, renderDay, renderDayName, className } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "start", "end", "menu", "range", "now", "calendars", "min", "max", "validate", "menu_month_previous_unit", "menu_month_next_unit", "valid", "getMonths", "getYears", "belowCalendars", "disabled", "IconPrevious", "IconNext", "IconDropDown", "CalendarMonthProps", "OptionButtonProps", "PaginationItemsProps", "renderDay", "renderDayName", "className"]);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined),
month: react_1.default.useRef(undefined),
year: react_1.default.useRef(undefined),
inProgressTransition: react_1.default.useRef()
};
const [value, setValue] = react_1.default.useState(() => {
const valueResult = (valueDefault !== undefined ? valueDefault : value_) || (now && (range ? [new date_1.AmauiDate(), new date_1.AmauiDate()] : [new date_1.AmauiDate()]));
return ((0, utils_1.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
});
const [calendar, setCalendar] = react_1.default.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new date_1.AmauiDate());
const [carousel, setCarousel] = react_1.default.useState();
const [open, setOpen] = react_1.default.useState();
// Value
react_1.default.useEffect(() => {
if (value_ !== undefined && value_ !== value)
setValue((((0, utils_1.is)('array', value_) ? value_ : [value_]).filter(Boolean)));
}, [value_]);
// Calendar
react_1.default.useEffect(() => {
if (calendar_ !== undefined && calendar_ !== calendar)
setCalendar(calendar_);
}, [calendar_]);
const onUpdate = react_1.default.useCallback((valueNew) => {
// Inner update
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(!range ? valueNew[0] : valueNew);
}, [range, onChange]);
const onUpdateCalendar = react_1.default.useCallback((valueNew) => {
// Inner update
if (!props.hasOwnProperty('calendar'))
setCalendar(valueNew);
if ((0, utils_1.is)('function', onChangeCalendar))
onChangeCalendar(valueNew);
}, [onChangeCalendar]);
const onUpdateCalendarOption = react_1.default.useCallback((valueNew) => {
setOpen(null);
onUpdateCalendar(valueNew);
}, []);
const onCalendarMonthChange = react_1.default.useCallback((valueNew_) => {
const valueNew = (0, utils_1.is)('array', valueNew_) ? valueNew_ : [valueNew_];
if (valueNew !== value)
onUpdate(valueNew);
}, [value]);
const onCalendarMonthChangeCalendar = react_1.default.useCallback((valueNew) => {
onUpdateCalendar(valueNew);
}, [calendar]);
const valid = react_1.default.useCallback((...args) => {
if ((0, utils_1.is)('function', valid_))
return valid_(...args);
return true;
}, [valid_]);
const move = react_1.default.useCallback((next = true, unit = 'month') => {
if (refs.inProgressTransition.current)
return;
onUpdateCalendar((next ? date_1.add : date_1.remove)(1, unit, calendar));
}, [calendar]);
const onOpen = react_1.default.useCallback((valueUpdate = 'month') => {
const valueNew = open === valueUpdate ? null : valueUpdate;
setOpen(valueNew);
// Scroll to the value
if (valueNew)
setTimeout(() => {
var _a;
const list = (_a = refs[valueNew]) === null || _a === void 0 ? void 0 : _a.current;
if (list) {
const valueData = valueNew === 'month' ? calendar.month - 1 : calendar.year;
(0, utils_1.Try)(() => {
const element = list.querySelector(`[data-value="${valueData}"]`);
if (element)
list.scrollTo({
top: (0, utils_1.clamp)((element.offsetTop - element.parentElement.offsetTop) + (menu === 'month' ? -104 : 51), 0),
behavior: 'smooth'
});
});
}
});
}, [open, menu, calendar]);
const getMonths = (0, utils_1.is)('function', getMonths_) ? getMonths_ : react_1.default.useCallback(() => {
const valueCalendar = (0, date_1.set)(14, 'day', calendar);
const result = Array.from({ length: 12 }).map((item, index) => ({ value: (0, date_1.set)(index, 'month', valueCalendar) }));
return result;
}, [calendar]);
const getYears = (0, utils_1.is)('function', getYears_) ? getYears_ : react_1.default.useCallback(() => {
const minYear = 1970;
const length = 130;
return Array.from({ length }).map((item, index) => ({ value: (0, date_1.set)(minYear + index, 'year', calendar) }));
}, []);
const onCarouselInit = react_1.default.useCallback(() => {
// Scroll to the value
setTimeout(() => {
(0, utils_1.Try)(() => {
var _a;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
let item = rootDocument.body.querySelector('[data-month-from]');
if (item) {
item = item.parentElement.parentElement;
setCarousel({ y: item.offsetTop });
}
});
}, 140);
}, []);
// Prevent multiple moves of the calendar
// before the previous transition is done
const onTransition = react_1.default.useCallback((element, status) => {
refs.inProgressTransition.current = !['entered', 'exited', 'removed'].includes(status);
}, []);
const calendarMonthProps = Object.assign({ renderDay,
renderDayName,
disabled }, CalendarMonthProps);
const main = () => {
var _a;
switch (version) {
case 'year':
return ((0, jsx_runtime_1.jsx)(Carousel, { color: 'default', id: value[0].milliseconds + (((_a = value[1]) === null || _a === void 0 ? void 0 : _a.milliseconds) || 0) + year, value: carousel, arrows: false, progress: false, orientation: 'vertical', moveBeyondEdge: false, itemSize: 'auto', gap: 0, free: true, onInit: onCarouselInit, items: Array.from({ length: 12 }).map((item, index) => {
const calendarAmauiDate = (0, date_1.set)(index, 'month', calendar);
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.5, direction: 'column', className: (0, style_react_1.classNames)([
classes.carousel_item
]) }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', className: (0, style_react_1.classNames)([
classes.carousel_item_label
]) }, { children: [(0, date_1.format)(calendarAmauiDate, 'MMMM'), " ", (0, date_1.format)(calendarAmauiDate, 'YYYY')] })), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarAmauiDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate, outside: false, noTransition: true }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
onTransition
}, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-calendar-days'
],
calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className,
classes.calendar
]) }))] }), index));
}), ItemWrapperProps: {
style: {
width: '100%'
}
}, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-carousel'
],
classes.carousel
]) }));
default:
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', style: {
width: '100%'
} }, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-calendars'
],
classes.calendars
]) }, { children: Array.from({ length: calendars }).map((item, index) => {
const calendarAmauiDate = (0, date_1.add)(index, 'month', calendar);
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column', style: {
width: '100%'
} }, { children: [calendars > 1 && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3', style: {
paddingInlineStart: '16px'
} }, { children: (0, date_1.format)(calendarAmauiDate, 'MMMM') }))), (0, jsx_runtime_1.jsx)(CalendarMonth, Object.assign({ color: 'default', value: value, calendar: calendarAmauiDate, valid: valid, now: now, size: size, range: range, offset: index, min: min, max: max, validate: validate }, calendarMonthProps, { onChange: onCalendarMonthChange, onChangeCalendar: onCalendarMonthChangeCalendar, TransitionProps: {
onTransition
}, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-calendar-days'
],
calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className,
classes.calendar
]) }))] }), index));
}) })), belowCalendars] })));
}
};
const month = (0, date_1.format)(calendar, 'MMM');
const year = (0, date_1.format)(calendar, 'YYYY');
const optionButtonProps = Object.assign({ color: 'inherit', version: 'text' }, OptionButtonProps);
return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-root',
`amaui-Calendar-version-${version}`,
`amaui-Calendar-size-${size}`
],
className,
classes.root,
classes[`size_${size}`],
range && classes.range
]) }, other, { children: [start, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', justify: 'space-between', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-header'
],
classes.header
]) }, { children: menu === 'month-year' ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false), size: size, "aria-label": 'Previous month', disabled: open || (+year <= 1970 && month === 'Jan') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen(), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'year' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-arrow'
],
classes.arrow,
open === 'month' && classes.arrow_open
]) }) }))), "aria-label": `Select month, current ${month}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-option'
],
optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
classes.option,
open === 'year' && classes.option_secondary
]) }, { children: month })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(), size: size, "aria-label": 'Next month', disabled: open || (+year === 2099 && month === 'Dec') }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(false, 'year'), size: size, "aria-label": 'Previous year', disabled: open || +year <= 1970 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, size: size, end: ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: open !== 'month' }, { children: (0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-arrow'
],
classes.arrow,
open === 'year' && classes.arrow_open
]) }) }))), "aria-label": `Select year, current ${year}` }, optionButtonProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-option'
],
optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
classes.option,
open === 'month' && classes.option_secondary
]) }, { children: year })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => move(true, 'year'), size: size, "aria-label": 'Next year', disabled: open || +year === 2099 }, optionButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button, Object.assign({ tonal: tonal, color: 'inherit', size: size, version: 'text', onClick: () => onOpen('year'), fontSize: utils_2.iconFontSize, end: ((0, jsx_runtime_1.jsx)(IconDropDown, { size: size, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-arrow'
],
classes.arrow,
open === 'year' && classes.arrow_open
]) })) }, optionButtonProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-option'
],
optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className,
classes.option
]) }, { children: [(0, date_1.format)(calendar, 'MMMM'), " ", (0, date_1.format)(calendar, 'YYYY')] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: () => move(false, menu_month_previous_unit || 'month'), "aria-label": 'Previous month', disabled: !!(open || (+year === 1970 && month === 'Jan')) }, { children: (0, jsx_runtime_1.jsx)(IconPrevious, { size: size }) })) })), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: !open }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: tonal, color: 'inherit', size: size, onClick: () => move(true, menu_month_next_unit || 'month'), "aria-label": 'Next month', disabled: !!(open || (+year === 2099 && month === 'Dec')) }, { children: (0, jsx_runtime_1.jsx)(IconNext, { size: size }) })) }))] }))] }) })), !open && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: main() }))), open && ((0, jsx_runtime_1.jsx)(Divider, { tonal: false, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-divider'
],
classes.divider
]) })), open === 'month' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(List, Object.assign({ ref: refs.month, color: 'default', size: 'large', menu: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-list'
],
classes.list
]) }, { children: getMonths(value, calendar, props).map((item, index) => {
const amauiDate = item.value;
const selected = calendar.month === amauiDate.month;
return ((0, jsx_runtime_1.jsx)(ListItem, { onClick: () => onUpdateCalendarOption(amauiDate), primary: (0, date_1.format)(amauiDate, 'MMMM'), inset: !selected, startAlign: 'center', size: size, start: selected ? ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { in: true, add: true, simple: true, size: size })) : undefined, disabled: (!valid(amauiDate, 'month')), selected: selected, button: true, PrimaryProps: {
version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
}, "data-value": index, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-list-item'
],
classes.listItem
]) }, index));
}) })) }))), open === 'year' && ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ color: 'default' }, { children: ({ palette }) => (menu === 'month-year' ?
(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(List, Object.assign({ ref: refs.year, color: 'default', size: size, menu: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-list'
],
classes.list
]) }, { children: getYears(value, calendar, props).map((item, index) => {
const amauiDate = item.value;
const yearValue = (0, date_1.format)(amauiDate, 'YYYY');
const selected = calendar.year === amauiDate.year;
return ((0, jsx_runtime_1.jsx)(ListItem, { onClick: () => onUpdateCalendarOption(amauiDate), primary: yearValue, inset: !selected, startAlign: 'center', size: size, start: selected ? ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { in: true, add: true, simple: true, size: size })) : undefined, selected: selected, disabled: (!valid(amauiDate, 'year')), button: true, PrimaryProps: {
version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
}, "data-value": yearValue, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-list-item'
],
classes.listItem
]) }, index));
}) })) })) :
(0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: refs.year, direction: 'row', wrap: 'wrap', justify: 'space-evenly', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-list-version-year'
],
classes.list_version_year
]) }, { children: getYears(value, calendar, props).map((item, index) => {
const amauiDate = item.value;
const yearValue = (0, date_1.format)(amauiDate, 'YYYY');
const selected = calendar.year === amauiDate.year;
return ((0, jsx_runtime_1.jsx)(PaginationItem, Object.assign({ tonal: tonal, color: 'inherit', size: size, InteractionProps: {
background: false
}, TypeProps: {
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
tone: !selected ? 'primary' : undefined
}, onClick: () => onUpdateCalendarOption(amauiDate), "data-value": yearValue, disabled: (!valid(amauiDate, 'year')) }, PaginationItemsProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Calendar', theme) && [
'amaui-Calendar-day-version-year'
],
PaginationItemsProps === null || PaginationItemsProps === void 0 ? void 0 : PaginationItemsProps.className,
classes.day_version_year
]), style: Object.assign(Object.assign({}, (selected ? {
color: theme.methods.palette.color.value(undefined, 90, true, palette),
backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
} : undefined)), PaginationItemsProps === null || PaginationItemsProps === void 0 ? void 0 : PaginationItemsProps.style) }, { children: yearValue }), index));
}) })) }))) }))), end] })));
});
Calendar.displayName = 'amaui-Calendar';
exports.default = Calendar;