@onesy/ui-react
Version:
UI for React
737 lines (729 loc) • 34.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _date = require("@onesy/date");
var _IconMaterialNavigateBeforeW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
var _IconMaterialNavigateNextW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
var _IconMaterialArrowDropDownW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Line = _interopRequireDefault(require("../Line"));
var _Fade = _interopRequireDefault(require("../Fade"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Button = _interopRequireDefault(require("../Button"));
var _CalendarMonth = _interopRequireDefault(require("../CalendarMonth"));
var _List = _interopRequireDefault(require("../List"));
var _ListItem = _interopRequireDefault(require("../ListItem"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _Type = _interopRequireDefault(require("../Type"));
var _Carousel = _interopRequireDefault(require("../Carousel"));
var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
var _Buttons = require("../Buttons/Buttons");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
const useStyle = (0, _styleReact.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__ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCalendar) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props__);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
const Fade = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
const Button = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Button) || _Button.default;
const CalendarMonth = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.CalendarMonth) || _CalendarMonth.default;
const List = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.List) || _List.default;
const ListItem = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
const Divider = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Divider) || _Divider.default;
const Type = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Type) || _Type.default;
const Carousel = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Carousel) || _Carousel.default;
const PaginationItem = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.PaginationItem) || _PaginationItem.default;
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 = _IconMaterialNavigateBeforeW.default,
IconNext = _IconMaterialNavigateNextW.default,
IconDropDown = _IconMaterialArrowDropDownW.default,
CalendarMonthProps,
OptionButtonProps,
PaginationItemsProps,
renderDay,
renderDayName,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(null),
month: _react.default.useRef(null),
year: _react.default.useRef(null),
inProgressTransition: _react.default.useRef(null)
};
const [value, setValue] = _react.default.useState(() => {
const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new _date.OnesyDate(), new _date.OnesyDate()] : [new _date.OnesyDate()]);
return ((0, _utils.is)('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
});
const [calendar, setCalendar] = _react.default.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new _date.OnesyDate());
const [carousel, setCarousel] = _react.default.useState();
const [open, setOpen] = _react.default.useState();
// Value
_react.default.useEffect(() => {
if (value_ !== undefined && value_ !== value) setValue(((0, _utils.is)('array', value_) ? value_ : [value_]).filter(Boolean));
}, [value_]);
// Calendar
_react.default.useEffect(() => {
if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
}, [calendar_]);
const onUpdate = valueNew => {
// Inner update
if (!props.hasOwnProperty('value')) setValue(valueNew);
if ((0, _utils.is)('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
};
const onUpdateCalendar = valueNew_0 => {
// Inner update
if (!props.hasOwnProperty('calendar')) setCalendar(valueNew_0);
if ((0, _utils.is)('function', onChangeCalendar)) onChangeCalendar(valueNew_0);
};
const onUpdateCalendarOption = valueNew_1 => {
setOpen(null);
onUpdateCalendar(valueNew_1);
};
const onCalendarMonthChange = valueNew_ => {
const valueNew_2 = (0, _utils.is)('array', valueNew_) ? valueNew_ : [valueNew_];
if (valueNew_2 !== value) onUpdate(valueNew_2);
};
const onCalendarMonthChangeCalendar = valueNew_3 => {
onUpdateCalendar(valueNew_3);
};
const valid = (...args) => {
if ((0, _utils.is)('function', valid_)) return valid_(...args);
return true;
};
const move = (next = true, unit = 'month') => {
if (refs.inProgressTransition.current) return;
onUpdateCalendar((next ? _date.add : _date.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(() => {
var _refs$valueNew_;
const list = (_refs$valueNew_ = refs[valueNew_4]) === null || _refs$valueNew_ === void 0 ? void 0 : _refs$valueNew_.current;
if (list) {
const valueData = valueNew_4 === 'month' ? calendar.month - 1 : calendar.year;
(0, _utils.Try)(() => {
const element = list.querySelector(`[data-value="${valueData}"]`);
if (element) list.scrollTo({
top: (0, _utils.clamp)(element.offsetTop - element.parentElement.offsetTop + (menu === 'month' ? -104 : 51), 0),
behavior: 'smooth'
});
});
}
});
};
const getMonths = (0, _utils.is)('function', getMonths_) ? getMonths_ : () => {
const valueCalendar = (0, _date.set)(14, 'day', calendar);
const result = Array.from({
length: 12
}).map((item, index) => ({
value: (0, _date.set)(index, 'month', valueCalendar)
}));
return result;
};
const getYears = (0, _utils.is)('function', getYears_) ? getYears_ : () => {
const minYear = 1970;
const length = 130;
return Array.from({
length
}).map((item_0, index_0) => ({
value: (0, _date.set)(minYear + index_0, 'year', calendar)
}));
};
const onCarouselInit = () => {
// Scroll to the value
setTimeout(() => {
(0, _utils.Try)(() => {
var _refs$root$current;
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _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 = () => {
var _value$, _value$2;
switch (version) {
case 'year':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Carousel, {
color: "default",
id: ((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.milliseconds) + (((_value$2 = value[1]) === null || _value$2 === void 0 ? void 0 : _value$2.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 = (0, _date.set)(index_2, 'month', calendar);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
direction: "column",
className: (0, _styleReact.classNames)([classes.carousel_item]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
className: (0, _styleReact.classNames)([classes.carousel_item_label]),
children: [(0, _date.format)(calendarOnesyDate_0, 'MMMM', {
l
}), " ", (0, _date.format)(calendarOnesyDate_0, 'YYYY', {
l
})]
}), /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className, classes.calendar])
}))]
}, index_2);
}),
ItemWrapperProps: {
style: {
width: '100%'
}
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-carousel'], classes.carousel])
});
default:
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "column",
align: "center",
style: {
width: '100%'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
direction: "row",
align: "center",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars]),
children: Array.from({
length: calendars
}).map((item_2, index_1) => {
const calendarOnesyDate = (0, _date.add)(index_1, 'month', calendar);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "column",
style: {
width: '100%'
},
children: [calendars > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
style: {
paddingInlineStart: '16px'
},
children: (0, _date.format)(calendarOnesyDate, 'MMMM', {
l
})
}), /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps === null || calendarMonthProps === void 0 ? void 0 : calendarMonthProps.className, classes.calendar])
}))]
}, index_1);
})
}), belowCalendars]
});
}
};
const month = (0, _date.format)(calendar, 'MMM');
const year = (0, _date.format)(calendar, 'YYYY');
const optionButtonProps = _objectSpread({
color: 'inherit',
version: 'text'
}, OptionButtonProps);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item_4 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
}
refs.root.current = item_4;
},
className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0.5,
direction: "row",
align: "center",
justify: "space-between",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-header'], classes.header]),
children: menu === 'month-year' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: !open,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: () => move(false),
size: size,
"aria-label": l('Previous month'),
disabled: open || +year <= 1970 && month === 'Jan'
}, optionButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
size: size
})
}))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
version: "text",
onClick: () => onOpen(),
fontSize: _utils2.iconFontSize,
size: size,
end: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: open !== 'year',
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropDown, {
size: size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
})
}),
"aria-label": `${l('Select month')}, ${l('current')} ${l(month)}`
}, optionButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option, open === 'year' && classes.option_secondary]),
children: l(month)
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: !open,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: () => move(),
size: size,
"aria-label": l('Next month'),
disabled: open || +year === 2099 && month === 'Dec'
}, optionButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
size: size
})
}))
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: !open,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: () => move(false, 'year'),
size: size,
"aria-label": l('Previous year'),
disabled: open || +year <= 1970
}, optionButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
size: size
})
}))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
version: "text",
onClick: () => onOpen('year'),
fontSize: _utils2.iconFontSize,
size: size,
end: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: open !== 'month',
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropDown, {
size: size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
})
}),
"aria-label": `${l('Select year')}, ${l('current')} ${year}`
}, optionButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option, open === 'month' && classes.option_secondary]),
children: year
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: !open,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: () => move(true, 'year'),
size: size,
"aria-label": l('Next year'),
disabled: open || +year === 2099
}, optionButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
size: size
})
}))
})]
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Button, _objectSpread(_objectSpread({
tonal: tonal,
color: "inherit",
size: size,
version: "text",
onClick: () => onOpen('year'),
fontSize: _utils2.iconFontSize,
end: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDropDown, {
size: size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
})
}, optionButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps === null || optionButtonProps === void 0 ? void 0 : optionButtonProps.className, classes.option]),
children: [(0, _date.format)(calendar, 'MMMM', {
l
}), " ", (0, _date.format)(calendar, 'YYYY', {
l
})]
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: !open,
children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(IconPrevious, {
size: size
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: !open,
children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(IconNext, {
size: size
})
})
})]
})]
})
}), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
children: main()
}), open && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
tonal: false,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
}), open === 'month' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
ref: refs.month,
color: "default",
size: "large",
menu: true,
className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsx)(ListItem, {
onClick: () => onUpdateCalendarOption(onesyDate),
primary: (0, _date.format)(onesyDate, 'MMMM', {
l
}),
inset: !selected,
startAlign: "center",
size: size,
start: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
}, index_3);
})
})
}), open === 'year' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
color: "default",
children: ({
palette
}) => menu === 'month-year' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
ref: refs.year,
color: "default",
size: size,
menu: true,
className: (0, _styleReact.classNames)([(0, _utils2.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 = (0, _date.format)(onesyDate_0, 'YYYY');
const selected_0 = calendar.year === onesyDate_0.year;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
onClick: () => onUpdateCalendarOption(onesyDate_0),
primary: yearValue,
inset: !selected_0,
startAlign: "center",
size: size,
start: selected_0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
}, index_4);
})
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
ref: refs.year,
direction: "row",
wrap: "wrap",
justify: "space-evenly",
className: (0, _styleReact.classNames)([(0, _utils2.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 = (0, _date.format)(onesyDate_1, 'YYYY');
const selected_1 = calendar.year === onesyDate_1.year;
return /*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps === null || PaginationItemsProps === void 0 ? void 0 : 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 === null || PaginationItemsProps === void 0 ? void 0 : PaginationItemsProps.style),
children: yearValue_0
}), index_5);
})
})
})
}), end]
}));
};
Calendar.displayName = 'onesy-Calendar';
var _default = exports.default = Calendar;