@onesy/ui-react
Version:
UI for React
726 lines (719 loc) • 28.5 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "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"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { clamp, is, isEnvironment, Try } from '@onesy/utils';
import { classNames, style, useOnesyTheme } from '@onesy/style-react';
import { OnesyDate, add, remove, format, set } from '@onesy/date';
import IconMaterialNavigateBefore from '@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100';
import IconMaterialNavigateNext from '@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100';
import IconMaterialArrowDropDown from '@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100';
import SurfaceElement from '../Surface';
import LineElement from '../Line';
import FadeElement from '../Fade';
import IconButtonElement from '../IconButton';
import ButtonElement from '../Button';
import CalendarMonthElement from '../CalendarMonth';
import ListElement from '../List';
import ListItemElement from '../ListItem';
import DividerElement from '../Divider';
import TypeElement from '../Type';
import CarouselElement from '../Carousel';
import PaginationItemElement from '../PaginationItem';
import { IconDoneAnimated } from '../Buttons/Buttons';
import { iconFontSize, staticClassName } from '../utils';
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
const useStyle = style(theme => ({
root: {
borderRadius: theme.methods.shape.radius.value(4, 'px'),
overflow: 'hidden'
},
size_small: {
width: '275px',
'& .onesy-ListItem-root': {
minHeight: '40px'
},
'& .onesy-ListItem-inset': {
paddingInlineStart: '44px'
}
},
size_regular: {
width: '320px',
'& .onesy-ListItem-root': {
minHeight: '50px'
},
'& .onesy-ListItem-inset': {
paddingInlineStart: '58px'
}
},
size_large: {
width: '375px',
'& .onesy-ListItem-root': {
minHeight: '60px'
},
'& .onesy-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'),
'&.onesy-Button-root': {
paddingInline: `${theme.methods.space.value(1, 'px')} 0`
},
'& .onesy-Button-end': {
paddingInline: `${theme.methods.space.value(1, 'px')} 0`
}
},
option_secondary: {
opacity: '0.4'
},
list: {
width: '100%',
maxHeight: '307px',
overflowY: 'auto',
'&.onesy-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: {
'&.onesy-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: {
'&.onesy-Divider-root': {
margin: '0px'
}
}
}), {
name: 'onesy-Calendar'
});
// [l('millisecond'), l('milliseconds'), l('second'), l('minute'), l('minutes'), l('hour'), l('hours'), l('day'), l('days'), l('week'), l('weeks'), l('month'), l('months'), l('year')];
// [l('January'), l('February'), l('March'), l('April'), l('May'), l('June'), l('July'), l('August'), l('September'), l('October'), l('November'), l('December')];
// [l('Jan'), l('Feb'), l('Mar'), l('Apr'), l('May'), l('Jun'), l('Jul'), l('Aug'), l('Sep'), l('Oct'), l('Nov'), l('Dec')];
// [l('Monday'), l('Tuesday'), l('Wednesday'), l('Thursday'), l('Friday'), l('Saturday'), l('Sunday'];
// ['Mon'), l('Tue'), l('Wed'), l('Thu'), l('Fri'), l('Sat'), l('Sun')];
const Calendar = props__ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendar?.props?.default), props__);
const Line = theme?.elements?.Line || LineElement;
const Surface = theme?.elements?.Surface || SurfaceElement;
const Fade = theme?.elements?.Fade || FadeElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const Button = theme?.elements?.Button || ButtonElement;
const CalendarMonth = theme?.elements?.CalendarMonth || CalendarMonthElement;
const List = theme?.elements?.List || ListElement;
const ListItem = theme?.elements?.ListItem || ListItemElement;
const Divider = theme?.elements?.Divider || DividerElement;
const Type = theme?.elements?.Type || TypeElement;
const Carousel = theme?.elements?.Carousel || CarouselElement;
const PaginationItem = theme?.elements?.PaginationItem || PaginationItemElement;
const {
ref,
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 = IconMaterialNavigateBefore,
IconNext = IconMaterialNavigateNext,
IconDropDown = IconMaterialArrowDropDown,
CalendarMonthProps,
OptionButtonProps,
PaginationItemsProps,
renderDay,
renderDayName,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(null),
month: React.useRef(null),
year: React.useRef(null),
inProgressTransition: React.useRef(null)
};
const [value, setValue] = React.useState(() => {
const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
return (is('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
});
const [calendar, setCalendar] = React.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new OnesyDate());
const [carousel, setCarousel] = React.useState();
const [open, setOpen] = React.useState();
// Value
React.useEffect(() => {
if (value_ !== undefined && value_ !== value) setValue((is('array', value_) ? value_ : [value_]).filter(Boolean));
}, [value_]);
// Calendar
React.useEffect(() => {
if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
}, [calendar_]);
const onUpdate = valueNew => {
// Inner update
if (!props.hasOwnProperty('value')) setValue(valueNew);
if (is('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
};
const onUpdateCalendar = valueNew_0 => {
// Inner update
if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_0);
if (is('function', onChangeCalendar)) onChangeCalendar(valueNew_0);
};
const onUpdateCalendarOption = valueNew_1 => {
setOpen(null);
onUpdateCalendar(valueNew_1);
};
const onCalendarMonthChange = valueNew_ => {
const valueNew_2 = is('array', valueNew_) ? valueNew_ : [valueNew_];
if (valueNew_2 !== value) onUpdate(valueNew_2);
};
const onCalendarMonthChangeCalendar = valueNew_3 => {
onUpdateCalendar(valueNew_3);
};
const valid = (...args) => {
if (is('function', valid_)) return valid_(...args);
return true;
};
const move = (next = true, unit = 'month') => {
if (refs.inProgressTransition.current) return;
onUpdateCalendar((next ? add : remove)(1, unit, calendar));
};
const onOpen = (valueUpdate = 'month') => {
const valueNew_4 = open === valueUpdate ? null : valueUpdate;
setOpen(valueNew_4);
// Scroll to the value
if (valueNew_4) setTimeout(() => {
const list = refs[valueNew_4]?.current;
if (list) {
const valueData = valueNew_4 === 'month' ? calendar.month - 1 : calendar.year;
Try(() => {
const element = list.querySelector(`[data-value="${valueData}"]`);
if (element) list.scrollTo({
top: clamp(element.offsetTop - element.parentElement.offsetTop + (menu === 'month' ? -104 : 51), 0),
behavior: 'smooth'
});
});
}
});
};
const getMonths = is('function', getMonths_) ? getMonths_ : () => {
const valueCalendar = set(14, 'day', calendar);
const result = Array.from({
length: 12
}).map((item, index) => ({
value: set(index, 'month', valueCalendar)
}));
return result;
};
const getYears = is('function', getYears_) ? getYears_ : () => {
const minYear = 1970;
const length = 130;
return Array.from({
length
}).map((item_0, index_0) => ({
value: set(minYear + index_0, 'year', calendar)
}));
};
const onCarouselInit = () => {
// Scroll to the value
setTimeout(() => {
Try(() => {
const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
let item_1 = rootDocument.body.querySelector('[data-month-from]');
if (item_1) {
item_1 = item_1.parentElement.parentElement;
setCarousel({
y: item_1.offsetTop
});
}
});
}, 140);
};
// Prevent multiple moves of the calendar
// before the previous transition is done
const onTransition = (element_0, status) => {
refs.inProgressTransition.current = !['entered', 'exited', 'removed'].includes(status);
};
const calendarMonthProps = _objectSpread({
renderDay,
renderDayName,
disabled
}, CalendarMonthProps);
const main = () => {
switch (version) {
case 'year':
return /*#__PURE__*/_jsx(Carousel, {
color: "default",
id: value[0]?.milliseconds + (value[1]?.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_3, index_2) => {
const calendarOnesyDate_0 = set(index_2, 'month', calendar);
return /*#__PURE__*/_jsxs(Line, {
gap: 1.5,
direction: "column",
className: classNames([classes.carousel_item]),
children: [/*#__PURE__*/_jsxs(Type, {
version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
className: classNames([classes.carousel_item_label]),
children: [format(calendarOnesyDate_0, 'MMMM', {
l
}), " ", format(calendarOnesyDate_0, 'YYYY', {
l
})]
}), /*#__PURE__*/_jsx(CalendarMonth, _objectSpread(_objectSpread({
color: color,
tonal: tonal,
value: value,
calendar: calendarOnesyDate_0,
valid: valid,
now: now,
size: size,
range: range,
offset: index_2,
min: min,
max: max,
validate: validate,
outside: false,
noTransition: true
}, calendarMonthProps), {}, {
onChange: onCalendarMonthChange,
onChangeCalendar: onCalendarMonthChangeCalendar,
TransitionProps: {
onTransition
},
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
}))]
}, index_2);
}),
ItemWrapperProps: {
style: {
width: '100%'
}
},
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-carousel'], classes.carousel])
});
default:
return /*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "column",
align: "center",
style: {
width: '100%'
},
children: [/*#__PURE__*/_jsx(Line, {
direction: "row",
align: "center",
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars]),
children: Array.from({
length: calendars
}).map((item_2, index_1) => {
const calendarOnesyDate = add(index_1, 'month', calendar);
return /*#__PURE__*/_jsxs(Line, {
gap: 1,
direction: "column",
style: {
width: '100%'
},
children: [calendars > 1 && /*#__PURE__*/_jsx(Type, {
version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
style: {
paddingInlineStart: '16px'
},
children: format(calendarOnesyDate, 'MMMM', {
l
})
}), /*#__PURE__*/_jsx(CalendarMonth, _objectSpread(_objectSpread({
color: color,
tonal: tonal,
value: value,
calendar: calendarOnesyDate,
valid: valid,
now: now,
size: size,
range: range,
offset: index_1,
min: min,
max: max,
validate: validate
}, calendarMonthProps), {}, {
onChange: onCalendarMonthChange,
onChangeCalendar: onCalendarMonthChangeCalendar,
TransitionProps: {
onTransition
},
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
}))]
}, index_1);
})
}), belowCalendars]
});
}
};
const month = format(calendar, 'MMM');
const year = format(calendar, 'YYYY');
const optionButtonProps = _objectSpread({
color: 'inherit',
version: 'text'
}, OptionButtonProps);
return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
ref: item_4 => {
if (ref) {
if (is('function', ref)) ref(item_4);else ref.current = item_4;
}
refs.root.current = item_4;
},
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-root', `onesy-Calendar-version-${version}`, `onesy-Calendar-size-${size}`], className, classes.root, classes[`size_${size}`], range && classes.range])
}, other), {}, {
children: [start, /*#__PURE__*/_jsx(Line, {
gap: 0.5,
direction: "row",
align: "center",
justify: "space-between",
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-header'], classes.header]),
children: menu === 'month-year' ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/_jsx(Fade, {
in: !open,
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
onClick: () => move(false),
size: size,
"aria-label": l('Previous month'),
disabled: open || +year <= 1970 && month === 'Jan'
}, optionButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconPrevious, {
size: size
})
}))
}), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
version: "text",
onClick: () => onOpen(),
fontSize: iconFontSize,
size: size,
end: /*#__PURE__*/_jsx(Fade, {
in: open !== 'year',
children: /*#__PURE__*/_jsx(IconDropDown, {
size: size,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
})
}),
"aria-label": `${l('Select month')}, ${l('current')} ${l(month)}`
}, optionButtonProps), {}, {
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'year' && classes.option_secondary]),
children: l(month)
})), /*#__PURE__*/_jsx(Fade, {
in: !open,
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
onClick: () => move(),
size: size,
"aria-label": l('Next month'),
disabled: open || +year === 2099 && month === 'Dec'
}, optionButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconNext, {
size: size
})
}))
})]
}), /*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/_jsx(Fade, {
in: !open,
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
onClick: () => move(false, 'year'),
size: size,
"aria-label": l('Previous year'),
disabled: open || +year <= 1970
}, optionButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconPrevious, {
size: size
})
}))
}), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
version: "text",
onClick: () => onOpen('year'),
fontSize: iconFontSize,
size: size,
end: /*#__PURE__*/_jsx(Fade, {
in: open !== 'month',
children: /*#__PURE__*/_jsx(IconDropDown, {
size: size,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
})
}),
"aria-label": `${l('Select year')}, ${l('current')} ${year}`
}, optionButtonProps), {}, {
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'month' && classes.option_secondary]),
children: year
})), /*#__PURE__*/_jsx(Fade, {
in: !open,
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
onClick: () => move(true, 'year'),
size: size,
"aria-label": l('Next year'),
disabled: open || +year === 2099
}, optionButtonProps), {}, {
children: /*#__PURE__*/_jsx(IconNext, {
size: size
})
}))
})]
})]
}) : /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: "inherit",
size: size,
version: "text",
onClick: () => onOpen('year'),
fontSize: iconFontSize,
end: /*#__PURE__*/_jsx(IconDropDown, {
size: size,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
})
}, optionButtonProps), {}, {
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option]),
children: [format(calendar, 'MMMM', {
l
}), " ", format(calendar, 'YYYY', {
l
})]
})), /*#__PURE__*/_jsxs(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/_jsx(Fade, {
in: !open,
children: /*#__PURE__*/_jsx(IconButton, {
tonal: tonal,
color: "inherit",
size: size,
onClick: () => move(false, menu_month_previous_unit || 'month'),
"aria-label": l('Previous month'),
disabled: !!(open || +year === 1970 && month === 'Jan'),
children: /*#__PURE__*/_jsx(IconPrevious, {
size: size
})
})
}), /*#__PURE__*/_jsx(Fade, {
in: !open,
children: /*#__PURE__*/_jsx(IconButton, {
tonal: tonal,
color: "inherit",
size: size,
onClick: () => move(true, menu_month_next_unit || 'month'),
"aria-label": l('Next month'),
disabled: !!(open || +year === 2099 && month === 'Dec'),
children: /*#__PURE__*/_jsx(IconNext, {
size: size
})
})
})]
})]
})
}), !open && /*#__PURE__*/_jsx(Fade, {
in: true,
children: main()
}), open && /*#__PURE__*/_jsx(Divider, {
tonal: false,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
}), open === 'month' && /*#__PURE__*/_jsx(Fade, {
in: true,
children: /*#__PURE__*/_jsx(List, {
ref: refs.month,
color: "default",
size: "large",
menu: true,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list]),
children: getMonths(value, calendar, props).map((item_5, index_3) => {
const onesyDate = item_5.value;
const selected = calendar.month === onesyDate.month;
return /*#__PURE__*/_jsx(ListItem, {
onClick: () => onUpdateCalendarOption(onesyDate),
primary: format(onesyDate, 'MMMM', {
l
}),
inset: !selected,
startAlign: "center",
size: size,
start: selected ? /*#__PURE__*/_jsx(IconDoneAnimated, {
in: true,
add: true,
simple: true,
size: size
}) : undefined,
disabled: !valid(onesyDate, 'month'),
selected: selected,
button: true,
PrimaryProps: {
version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
},
"data-value": index_3,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
}, index_3);
})
})
}), open === 'year' && /*#__PURE__*/_jsx(Surface, {
color: "default",
children: ({
palette
}) => menu === 'month-year' ? /*#__PURE__*/_jsx(Fade, {
in: true,
children: /*#__PURE__*/_jsx(List, {
ref: refs.year,
color: "default",
size: size,
menu: true,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list]),
children: getYears(value, calendar, props).map((item_6, index_4) => {
const onesyDate_0 = item_6.value;
const yearValue = format(onesyDate_0, 'YYYY');
const selected_0 = calendar.year === onesyDate_0.year;
return /*#__PURE__*/_jsx(ListItem, {
onClick: () => onUpdateCalendarOption(onesyDate_0),
primary: yearValue,
inset: !selected_0,
startAlign: "center",
size: size,
start: selected_0 ? /*#__PURE__*/_jsx(IconDoneAnimated, {
in: true,
add: true,
simple: true,
size: size
}) : undefined,
selected: selected_0,
disabled: !valid(onesyDate_0, 'year'),
button: true,
PrimaryProps: {
version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
},
"data-value": yearValue,
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
}, index_4);
})
})
}) : /*#__PURE__*/_jsx(Fade, {
in: true,
children: /*#__PURE__*/_jsx(Line, {
ref: refs.year,
direction: "row",
wrap: "wrap",
justify: "space-evenly",
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year]),
children: getYears(value, calendar, props).map((item_7, index_5) => {
const onesyDate_1 = item_7.value;
const yearValue_0 = format(onesyDate_1, 'YYYY');
const selected_1 = calendar.year === onesyDate_1.year;
return /*#__PURE__*/_jsx(PaginationItem, _objectSpread(_objectSpread({
tonal: tonal,
color: "inherit",
size: size,
InteractionProps: {
background: false
},
TypeProps: {
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
tone: !selected_1 ? 'primary' : undefined
},
onClick: () => onUpdateCalendarOption(onesyDate_1),
"data-value": yearValue_0,
disabled: !valid(onesyDate_1, 'year')
}, PaginationItemsProps), {}, {
className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
style: _objectSpread(_objectSpread({}, selected_1 ? {
color: theme.methods.palette.color.value(undefined, 90, true, palette),
backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
} : undefined), PaginationItemsProps?.style),
children: yearValue_0
}), index_5);
})
})
})
}), end]
}));
};
Calendar.displayName = 'onesy-Calendar';
export default Calendar;