@onesy/ui-react
Version:
UI for React
422 lines (420 loc) • 22.2 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 _IconMaterialScheduleW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialScheduleW100"));
var _IconMaterialWbSunnyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
var _IconMaterialWbTwilightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbTwilightW100"));
var _IconMaterialCounter7W = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCounter7W100"));
var _IconMaterialCalendarMonthW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCalendarMonthW100"));
var _IconMaterialDeleteW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDeleteW100"));
var _Menu = _interopRequireDefault(require("../Menu"));
var _Calendar = _interopRequireDefault(require("../Calendar"));
var _Line = _interopRequireDefault(require("../Line"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Button = _interopRequireDefault(require("../Button"));
var _ListItem = _interopRequireDefault(require("../ListItem"));
var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
var _TimePicker = _interopRequireDefault(require("../TimePicker"));
var _Type = _interopRequireDefault(require("../Type"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["value", "dateProperty", "menuOpen", "menuOpenDefault", "timeMenuOpen", "timeMenuOpenDefault", "onChange", "onRemove", "closeOnChange", "startBottom", "endBottom", "noRemove", "TimePickerProps", "children", "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: {},
weekday: {
cursor: 'pointer'
},
dayValue: {
'&:hover': {
boxShadow: 'inset 0px 0px 0px 1px currentColor'
}
},
dayValueRepeating: {
background: theme.palette.background.secondary.quaternary
},
calendar: {
boxShadow: '0px 4px 32px 0px rgba(0, 0, 0, 0.04)',
'& .onesy-Calendar-header': {
paddingTop: '0px'
},
'& .onesy-Calendar-calendars': {
paddingBottom: '4px'
}
},
calendarShortcuts: {
padding: '14px 16px 2px'
},
end: {
padding: '0 12px 12px',
'& .onesy-ListItem-root': {
minHeight: '24px !important',
padding: '0 8px',
borderRadius: theme.methods.shape.radius.value(0.5, 'px')
}
},
minorMenu: {
'& .onesy-List-root': {
width: '100%'
}
},
repeatEndMenu: {
'& .onesy-List-root': {
width: '100%'
}
},
menuMore: {
width: '100%',
padding: '12px',
borderRadius: theme.methods.shape.radius.value(0.5, 'px'),
'& .onesy-TextField-input-wrapper': {
paddingBlock: '12px',
height: '40px'
},
'& .onesy-TextField-icon-end': {
paddingBlock: '8px'
}
},
item: {
'& .onesy-ListItem-root': {
minHeight: '30px !important'
},
'&.onesy-Surface-root': {
background: 'transparent'
}
},
iconInactive: {
opacity: '0',
pointerEvents: 'none'
},
menuFooter: {
marginTop: '8px'
}
}), {
name: 'onesy-CalendarMenu'
});
const CalendarMenu = 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, _refs$time$current;
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.onesyCalendarAvailability) === 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 Menu = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
const Calendar = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Calendar) || _Calendar.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
const Button = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
const ListItem = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.ListItem) || _ListItem.default;
const PaginationItem = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.PaginationItem) || _PaginationItem.default;
const TimePicker = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.TimePicker) || _TimePicker.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 {
value,
dateProperty = 'ends_at',
menuOpen: menuOpen_,
menuOpenDefault,
timeMenuOpen: timeMenuOpen_,
timeMenuOpenDefault,
onChange: onChange_,
onRemove: onRemove_,
closeOnChange = true,
startBottom,
endBottom,
noRemove,
TimePickerProps,
children,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [menuOpen, setMenuOpen] = _react.default.useState(menuOpenDefault !== undefined ? menuOpenDefault : menuOpen_ !== undefined ? menuOpen_ : false);
const [timeMenuOpen, setTimeMenuOpen] = _react.default.useState(timeMenuOpenDefault !== undefined ? timeMenuOpenDefault : timeMenuOpen_ !== undefined ? timeMenuOpen_ : false);
const refs = {
value: _react.default.useRef(value),
dateProperty: _react.default.useRef(dateProperty),
time: _react.default.useRef(undefined),
repeat: _react.default.useRef(undefined),
repeatEnd: _react.default.useRef(undefined),
onChange: _react.default.useRef(onChange_),
repeatCount: _react.default.useRef({})
};
refs.dateProperty.current = dateProperty;
refs.value.current = value;
refs.onChange.current = onChange_;
const onChange = async (...args) => {
if ((0, _utils.is)('function', onChange_)) onChange_(...args);
};
_react.default.useEffect(() => {
if (menuOpen !== menuOpen_ && menuOpen_ !== undefined) setMenuOpen(menuOpen_);
}, [menuOpen_]);
_react.default.useEffect(() => {
if (timeMenuOpen !== timeMenuOpen_ && timeMenuOpen_ !== undefined) setTimeMenuOpen(timeMenuOpen_);
}, [timeMenuOpen_]);
const onMenuOpen = () => {
setMenuOpen(true);
};
const onMenuClose = () => {
setMenuOpen(false);
};
const onTimeMenuOpen = () => {
setTimeMenuOpen(true);
};
const onTimeMenuClose = () => {
setTimeMenuOpen(false);
};
const onChangeDate = valueNew => {
if (closeOnChange) onMenuClose();
onChange(refs.dateProperty.current, valueNew === null || valueNew === void 0 ? void 0 : valueNew.milliseconds);
};
const onChangeTime = valueNew_0 => {
onTimeMenuClose();
onChange(refs.dateProperty.current, valueNew_0 === null || valueNew_0 === void 0 ? void 0 : valueNew_0.milliseconds);
};
const onRemove = () => {
if ((0, _utils.is)('function', onRemove_)) onRemove_(value);
};
_react.default.useEffect(() => {
// reset
refs.repeatCount.current = {};
}, [(0, _utils.hash)(value)]);
const iconProps = {
size: 'regular'
};
const shortcuts = [{
name: l('Today'),
onClick: () => onChangeDate(new _date.OnesyDate()),
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialWbSunnyW.default, _objectSpread({}, iconProps))
}, {
name: l('Tomorrow'),
onClick: () => onChangeDate((0, _date.add)(1, 'day')),
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialWbTwilightW.default, _objectSpread({}, iconProps))
}, {
name: l('7 days'),
onClick: () => onChangeDate((0, _date.add)(7, 'day')),
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialCounter7W.default, _objectSpread({}, iconProps))
}, {
name: l('1 month'),
onClick: () => onChangeDate((0, _date.add)(1, 'month')),
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialCalendarMonthW.default, _objectSpread({}, iconProps))
}];
const onClear = event => {
onChange(refs.dateProperty.current, null);
};
const date = _react.default.useMemo(() => new _date.OnesyDate((value === null || value === void 0 ? void 0 : value[dateProperty]) || undefined), [value, dateProperty]);
const repeats = day => {
var _value$repeat, _value$repeat2, _value$repeat3, _value$repeat4, _value$repeat7, _value$repeat8, _value$repeat9;
if (!(value !== null && value !== void 0 && (_value$repeat = value.repeat) !== null && _value$repeat !== void 0 && _value$repeat.active)) return;
let unit = value === null || value === void 0 || (_value$repeat2 = value.repeat) === null || _value$repeat2 === void 0 ? void 0 : _value$repeat2.unit;
let valueRepeat = value === null || value === void 0 || (_value$repeat3 = value.repeat) === null || _value$repeat3 === void 0 ? void 0 : _value$repeat3.value;
if (unit === 'day') unit = 'days';
if (unit === 'week') {
unit = 'days';
valueRepeat *= 7;
}
if (unit === 'month') unit = 'months';
let difference = (0, _date.diff)(day, date, unit);
let repeating = false;
if (['day', 'week'].includes(value === null || value === void 0 || (_value$repeat4 = value.repeat) === null || _value$repeat4 === void 0 ? void 0 : _value$repeat4.unit)) {
var _value$repeat5;
if ((value === null || value === void 0 ? void 0 : value.repeat.unit) === 'week' && !!(value !== null && value !== void 0 && (_value$repeat5 = value.repeat) !== null && _value$repeat5 !== void 0 && (_value$repeat5 = _value$repeat5.weekdays) !== null && _value$repeat5 !== void 0 && _value$repeat5.length)) {
var _value$repeat6, _value$repeat$weekday;
difference = (0, _date.diff)(day, date.dayWeek === 0 ? (0, _date.add)(-1, 'week', date) : date, 'weeks');
if (day.dayWeek === 0) difference -= 1;
const modulus = difference % (value === null || value === void 0 || (_value$repeat6 = value.repeat) === null || _value$repeat6 === void 0 ? void 0 : _value$repeat6.value);
repeating = (0, _date.is)(day, 'after or same', date) && !modulus && (value === null || value === void 0 || (_value$repeat$weekday = value.repeat.weekdays) === null || _value$repeat$weekday === void 0 ? void 0 : _value$repeat$weekday.includes(day.dayWeek));
} else {
const modulus_0 = difference % valueRepeat;
repeating = (0, _date.is)(day, 'after or same', date) && !modulus_0;
}
}
if (['month'].includes(value === null || value === void 0 || (_value$repeat7 = value.repeat) === null || _value$repeat7 === void 0 ? void 0 : _value$repeat7.unit)) {
const modulus_1 = difference % valueRepeat;
const monthDate = (0, _date.add)(difference, 'month', date);
repeating = monthDate.year === day.year && monthDate.dayYear === day.dayYear && !modulus_1;
}
if (['year'].includes(value === null || value === void 0 || (_value$repeat8 = value.repeat) === null || _value$repeat8 === void 0 ? void 0 : _value$repeat8.unit)) {
const modulus_2 = difference % valueRepeat;
const yearDate = (0, _date.add)(difference, 'year', date);
repeating = (0, _date.is)(day, 'after', date) && yearDate.year === day.year && yearDate.dayYear === day.dayYear && !modulus_2;
}
if (value !== null && value !== void 0 && (_value$repeat9 = value.repeat) !== null && _value$repeat9 !== void 0 && _value$repeat9.skip_weekends && [0, 6].includes(day.dayWeek)) repeating = false;
if (repeating) {
var _value$repeat0, _value$repeat1, _value$repeat$ends;
const formatted = (0, _date.format)(day, _utils2.formats.date);
if (value !== null && value !== void 0 && (_value$repeat0 = value.repeat) !== null && _value$repeat0 !== void 0 && (_value$repeat0 = _value$repeat0.ends) !== null && _value$repeat0 !== void 0 && _value$repeat0.active) {
// date
if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'date') {
const endsDate = new _date.OnesyDate(value === null || value === void 0 ? void 0 : value.repeat.ends.value);
repeating = repeating && (day.year < endsDate.year || day.year === endsDate.year && (day.month < endsDate.month || day.month === endsDate.month && day.dayYear <= endsDate.dayYear));
}
}
if (repeating) {
if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id] = [];
if (!refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].includes(formatted)) refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id].push(formatted);
}
if (value !== null && value !== void 0 && (_value$repeat1 = value.repeat) !== null && _value$repeat1 !== void 0 && (_value$repeat1 = _value$repeat1.ends) !== null && _value$repeat1 !== void 0 && _value$repeat1.active) {
var _refs$repeatCount$cur;
const indexRepeated = (_refs$repeatCount$cur = refs.repeatCount.current[value === null || value === void 0 ? void 0 : value.id]) === null || _refs$repeatCount$cur === void 0 ? void 0 : _refs$repeatCount$cur.indexOf(formatted);
// count
if ((value === null || value === void 0 ? void 0 : value.repeat.ends.version) === 'count') repeating = repeating && (value === null || value === void 0 ? void 0 : value.repeat.ends.value) >= (indexRepeated === -1 ? 0 : indexRepeated) + 1;
}
repeating = !(value !== null && value !== void 0 && (_value$repeat$ends = value.repeat.ends) !== null && _value$repeat$ends !== void 0 && _value$repeat$ends.active) || repeating;
}
return repeating;
};
const onContextMenu = event_0 => {
event_0.stopPropagation();
};
const palette = theme.palette.color.primary;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread(_objectSpread({
open: menuOpen,
onOpen: onMenuOpen,
onClose: onMenuClose,
onContextMenu: onContextMenu,
name: /*#__PURE__*/(0, _jsxRuntime.jsx)(Calendar, {
tonal: true,
color: "themed",
calendarDefault: date,
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "center",
className: classes.calendarShortcuts,
children: shortcuts.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: item.name,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
onClick: () => {
item.onClick();
onMenuClose();
},
size: "small",
children: item.icon
})
}, index))
}),
value: value !== null && value !== void 0 && value[dateProperty] ? date : null,
onChange: onChangeDate,
onContextMenu: onContextMenu,
size: "small",
end: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.5,
fullWidth: true,
className: classes.end,
children: [startBottom, (value === null || value === void 0 ? void 0 : value[dateProperty]) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
open: timeMenuOpen,
onOpen: onTimeMenuOpen,
onClose: onTimeMenuClose,
name: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
align: "center",
fullWidth: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePicker, _objectSpread({
value: date,
onChange: onChangeTime,
clear: false,
MainProps: {
elevation: theme.palette.light ? 8 : 0
},
size: "small",
static: true
}, TimePickerProps))
}),
className: (0, _styleReact.classNames)([classes.timeMenu, 'onesy-time']),
style: {
width: (_refs$time$current = refs.time.current) === null || _refs$time$current === void 0 ? void 0 : _refs$time$current.clientWidth
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
ref: refs.time,
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialScheduleW.default, _objectSpread({}, iconProps)),
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
color: "inherit",
children: (0, _date.format)(date, 'HH:mm', {
l
})
}),
startAlign: "center",
size: "small",
button: true,
Component: "div",
className: classes.item
})
}), endBottom, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.4,
direction: "row",
align: "center",
justify: "space-between",
fullWidth: true,
className: classes.menuFooter,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
onClick: onClear,
version: "text",
size: "small",
disabled: !(value !== null && value !== void 0 && value[dateProperty]),
children: l('Clear')
}), !noRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: l('Remove'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
size: "small",
onClick: onRemove,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialDeleteW.default, _objectSpread({}, iconProps))
})
})]
})]
}),
CalendarMonthProps: {
renderDay: (dayOnesyDate, propsDay, day_0, outside) => {
const repeating_0 = repeats(dayOnesyDate);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationItem, _objectSpread(_objectSpread({
tonal: true,
color: "inherit",
size: "small",
InteractionProps: {
background: false
},
TypeProps: {
version: 'b3',
priority: !day_0.selected ? !day_0.weekend ? 'primary' : 'secondary' : undefined
},
"aria-label": (0, _date.format)(dayOnesyDate, 'DD-MM-YYYY', {
l
}),
className: (0, _styleReact.classNames)([classes.dayValue, repeating_0 && classes.dayValueRepeating]),
style: _objectSpread(_objectSpread({}, day_0.today ? {
boxShadow: `inset 0px 0px 0px 1px ${palette[40]}`
} : undefined), day_0.selected ? {
color: theme.methods.palette.color.value(undefined, 90, true, palette),
backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
} : undefined)
}, propsDay), {}, {
children: day_0.value
}));
},
noTransition: true
},
className: (0, _styleReact.classNames)(['onesy-ObjectCalendar-root', classes.calendar])
}),
ClickListenerProps: {
contextMenu: false
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarMenu', theme) && ['onesy-CalendarMenu-root'], className, classes.root])
}, other), {}, {
children: children
}));
};
CalendarMenu.displayName = 'onesy-CalendarMenu';
var _default = exports.default = CalendarMenu;