@onesy/ui-react
Version:
UI for React
731 lines (729 loc) • 32.9 kB
JavaScript
;
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 _IconMaterialEditW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEditW100"));
var _IconMaterialKeyboardArrowDownW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialKeyboardArrowDownW100"));
var _IconMaterialArrowForwardIosW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100"));
var _IconMaterialArrowBackIosNewW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100"));
var _IconMaterialDeleteW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDeleteW100"));
var _CalendarWeek = _interopRequireDefault(require("../CalendarWeek"));
var _Select = _interopRequireDefault(require("../Select"));
var _Button = _interopRequireDefault(require("../Button"));
var _Line = _interopRequireDefault(require("../Line"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _ModalHeader = _interopRequireDefault(require("../ModalHeader"));
var _ModalMain = _interopRequireDefault(require("../ModalMain"));
var _Type = _interopRequireDefault(require("../Type"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Label = _interopRequireDefault(require("../Label"));
var _Slide = _interopRequireDefault(require("../Slide"));
var _Switch = _interopRequireDefault(require("../Switch"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["name", "date", "dateDefault", "times", "events", "meta", "views", "onUpdate", "onRemove", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "startLeftModal", "endLeftModal", "startRightModal", "endRightModal", "Component", "IconEdit", "IconPrevious", "IconNext", "IconRemove", "IconClose", "WeekProps", "DayProps", "IconProps", "IconButtonProps", "className", "children"];
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: {
padding: '16px',
paddingBottom: '24px',
color: theme.methods.palette.color.value('primary', 10),
background: theme.palette.background.default.primary,
'& .onesy-Label-text': {
whiteSpace: 'nowrap'
}
},
calendar: {
padding: '12px 8px',
background: theme.palette.background.default.primary
},
aside: {
width: 'auto',
maxWidth: '100%'
},
weekDay: {
width: '47px',
height: '47px',
borderRadius: '50%'
},
today: {
background: theme.palette.color.primary[40],
color: '#fff'
},
palettePreview: {
width: '17px',
height: '17px',
boxShadow: theme.palette.light ? '0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 2px 1px -1px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.11)' : '0px 1px 1px 0px rgba(255, 255, 255, 0.21), 0px 2px 1px -1px rgba(255, 255, 255, 0.12), 0px 1px 3px 0px rgba(255, 255, 255, 0.40)',
borderRadius: '50%',
cursor: 'default',
flex: '0 0 auto',
transition: theme.methods.transitions.make('transform'),
'& > *': {
width: '100% !important',
height: 'calc(100% + 12px) !important'
},
'&:active': {
transform: 'scale(0.94)'
}
},
dayWeekSimple: {
maxWidth: 184
},
simpleTimes: {
'&.onesy-Line-direction-row': {
'& > *': {
flex: '1 1 auto'
}
},
'&.onesy-Line-direction-column': {
'& > *': {
width: '100%'
}
}
},
legend: {
padding: '2px',
alignSelf: 'center',
maxWidth: '100%',
overflow: 'auto hidden'
},
itemLegend: {
cursor: 'pointer',
userSelect: 'none',
opacity: 0.5,
transition: theme.methods.transitions.make(['opacity', 'transform']),
'&:active': {
transform: 'scale(0.94)'
}
},
itemLegendActive: {
opacity: 1
},
overflowX: {
padding: '2px 0',
overflow: 'auto hidden'
}
}), {
name: 'onesy-CalendarAvailability'
});
const CalendarAvailability = 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, _theme$elements11;
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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.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 Label = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Label) || _Label.default;
const Switch = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Switch) || _Switch.default;
const Modal = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Modal) || _Modal.default;
const ModalHeader = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ModalHeader) || _ModalHeader.default;
const ModalMain = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.ModalMain) || _ModalMain.default;
const Slide = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Slide) || _Slide.default;
const Button = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Button) || _Button.default;
const Select = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.Select) || _Select.default;
const CalendarWeek = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.CalendarWeek) || _CalendarWeek.default;
const {
name,
date: date_,
dateDefault,
times: timesProps,
events,
meta,
views: viewsProps = [{
name: l('Week'),
value: 'week'
}, {
name: l('Day'),
value: 'day'
}, {
name: l('Simple'),
value: 'simple'
}],
onUpdate,
onRemove,
onChangeDate: onChangeDateProps,
startHeader,
endHeader,
startLeft,
endLeft,
startRight,
endRight,
startLeftModal,
endLeftModal,
startRightModal,
endRightModal,
Component = Line,
IconEdit = _IconMaterialEditW.default,
IconPrevious = _IconMaterialArrowBackIosNewW.default,
IconNext = _IconMaterialArrowForwardIosW.default,
IconRemove = _IconMaterialDeleteW.default,
IconClose = _IconMaterialKeyboardArrowDownW.default,
WeekProps,
DayProps,
IconProps,
IconButtonProps,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [now, setNow] = _react.default.useState(new _date.OnesyDate());
const [date, setDate] = _react.default.useState(dateDefault || date_ || new _date.OnesyDate());
const [view, setView] = _react.default.useState('week');
const [displayTime, setDisplayTime] = _react.default.useState(true);
const [modal, setModal] = _react.default.useState();
const [statuses, setStatuses] = _react.default.useState({});
const refs = {
date: _react.default.useRef(date),
displayTime: _react.default.useRef(displayTime),
interval: _react.default.useRef(undefined),
calendar: _react.default.useRef(undefined),
days: _react.default.useRef({}),
overlaping: _react.default.useRef({}),
statuses: _react.default.useRef(statuses)
};
refs.date.current = date;
refs.displayTime.current = displayTime;
refs.statuses.current = statuses;
const times = _react.default.useMemo(() => {
if (events) {
return [{
dates: {
active: true,
values: ((0, _utils.is)('array', events) ? events : [events]).filter(Boolean)
}
}];
}
return ((0, _utils.is)('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
}, [events, timesProps]);
const onStatusToggle = (value = 'working') => {
setStatuses(previous => _objectSpread(_objectSpread({}, previous), {}, {
[value]: previous[value] === undefined ? false : !previous[value]
}));
};
const rangeShade = theme.palette.light ? 70 : 40;
_react.default.useEffect(() => {
// 1 minute
refs.interval.current = setInterval(() => {
setNow(new _date.OnesyDate());
}, 60 * 1e3);
return () => {
clearInterval(refs.interval.current);
};
}, []);
// Date
_react.default.useEffect(() => {
if (date_ !== undefined && date_ !== date) setDate(date_);
}, [date_]);
const onOpen = item => {
setModal(_objectSpread(_objectSpread({}, item), {}, {
open: true
}));
};
const onClose = () => {
setModal(item_0 => _objectSpread(_objectSpread({}, item_0), {}, {
open: false
}));
};
const onChangeDisplayTime = valueNew => {
setDisplayTime(valueNew);
};
const onChangeView = valueNew_0 => {
setView(valueNew_0);
};
const optionsStatus = _react.default.useMemo(() => {
return [{
name: l('Working'),
value: 'working'
}, {
name: l('Not working'),
value: 'not-working'
}, {
name: l('On a break'),
value: 'break'
}, {
name: l('Scheduled'),
value: 'pending'
}, {
name: l('Rescheduled'),
value: 'rescheduled'
}, {
name: l('Cancelled'),
value: 'canceled'
}, {
name: l('Other'),
value: 'other'
}];
}, []);
const onToday = () => {
const valueNew_1 = new _date.OnesyDate();
setDate(valueNew_1);
if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_1);
};
const onPrevious = () => {
let valueNew_2 = new _date.OnesyDate();
setDate(previous_0 => {
valueNew_2 = (0, _date.remove)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous_0);
return valueNew_2;
});
if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_2);
};
const onNext = () => {
let valueNew_3 = new _date.OnesyDate();
setDate(previous_1 => {
valueNew_3 = (0, _date.add)(1, ['week', 'simple'].includes(view) ? 'week' : view, previous_1);
return valueNew_3;
});
if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_3);
};
const getDates = available => {
var _available$dates;
const values = ((_available$dates = available.dates) === null || _available$dates === void 0 ? void 0 : _available$dates.values) || [];
return values.map(item_1 => {
if (item_1.entire) {
if (item_1.from) {
let from = new _date.OnesyDate(item_1.from);
let to;
if (['day', 'week', 'month', 'year'].includes(item_1.entire)) from = (0, _date.startOf)(from, 'day');
if (item_1.entire === 'minute') from = (0, _date.startOf)(from, 'minute');
if (item_1.entire === 'hour') from = (0, _date.startOf)(from, 'hour');
to = (0, _date.endOf)(from, item_1.entire);
item_1.from = from.milliseconds;
item_1.to = to.milliseconds;
}
}
return item_1;
});
};
const getDatesWeek = available_0 => {
const weekFrom = (0, _date.startOf)(date, 'week');
const weekTo = (0, _date.endOf)(date, 'week');
return getDates(available_0).filter(item_2 => {
const from_0 = new _date.OnesyDate(item_2.from);
const to_0 = new _date.OnesyDate(item_2.to);
return !(from_0.milliseconds >= weekTo.milliseconds || to_0.milliseconds <= weekFrom.milliseconds);
});
};
const getColor = item_3 => {
let palette = theme.palette.color.neutral;
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'working') palette = theme.palette.color.success;
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'not-working') palette = theme.palette.color.info;
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'break') palette = theme.palette.color.warning;
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'pending') palette = theme.methods.color(_styleReact.colors.yellow[50]);
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'rescheduled') palette = theme.methods.color(_styleReact.colors.purple[50]);
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'canceled') palette = theme.palette.color.error;
if ((item_3 === null || item_3 === void 0 ? void 0 : item_3.status) === 'other') palette = theme.palette.color.neutral;
return palette[rangeShade];
};
const itemToText = item_4 => {
var _optionsStatus$find$n, _optionsStatus$find;
if (item_4 === 'pending') return l('Scheduled');
if (item_4 === 'not-count-workout-session') return l(`Don't count workout session`);
return (_optionsStatus$find$n = optionsStatus === null || optionsStatus === void 0 || (_optionsStatus$find = optionsStatus.find(itemStatus => itemStatus.value === item_4)) === null || _optionsStatus$find === void 0 ? void 0 : _optionsStatus$find.name) !== null && _optionsStatus$find$n !== void 0 ? _optionsStatus$find$n : l(item_4);
};
const viewOptions = _react.default.useMemo(() => {
return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item_5 => ({
name: (0, _utils.capitalize)(item_5 === null || item_5 === void 0 ? void 0 : item_5.name),
value: item_5 === null || item_5 === void 0 ? void 0 : item_5.value
}));
}, [viewsProps]);
const days = _react.default.useMemo(() => {
const weekStartDate = (0, _date.set)(4, 'hour', (0, _date.startOf)(date, 'week'));
return Array.from({
length: 7
}).map((_, index) => (0, _date.add)(index, 'day', weekStartDate));
}, [date]);
const simpleTimesUI = () => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 3,
direction: {
default: 'row',
1400: 'column'
},
className: classes.simpleTimes,
fullWidth: true,
children: days.map((itemDay, index_0) => {
const values_0 = times.filter(item_6 => {
var _item_6$weekly$days;
return (_item_6$weekly$days = item_6.weekly.days[index_0 + 1]) === null || _item_6$weekly$days === void 0 ? void 0 : _item_6$weekly$days.active;
}).flatMap(item_7 => item_7.weekly.days[index_0 + 1].values).filter(item_8 => item_8 && [undefined, true].includes(refs.statuses.current[item_8.status || 'working']));
values_0.sort((a, b) => b.from > a.from ? -1 : 1);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
direction: "column",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
align: "center",
fullWidth: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "h3",
weight: 400,
children: (0, _date.format)(itemDay, 'dd', {
l
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
align: "center",
justify: "center",
className: (0, _styleReact.classNames)([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
weight: 200,
children: (0, _date.format)(itemDay, 'DD.MM.', {
l
})
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 2,
fullWidth: true,
children: !!values_0.length ? values_0.map((itemValue, indexItem) => {
const itemValueFrom = new _date.OnesyDate(itemValue.from);
const itemValueTo = new _date.OnesyDate(itemValue.to);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.5,
className: classes.dayWeekSimple,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: classes.palettePreview,
style: {
background: getColor(itemValue)
}
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: "b2",
weight: 300,
children: [(0, _date.format)(itemValueFrom, 'hh:mm a', {
l
}), " \u2014 ", (0, _date.format)(itemValueTo, 'hh:mm a', {
l
})]
})]
}), itemValue.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
weight: 200,
whiteSpace: "pre-wrap",
className: (0, _styleReact.classNames)([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(itemValue.description)
}
})]
}, indexItem);
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
children: l('No information for this day')
})
})]
}, index_0);
})
});
};
const simpleExceptionsUI = () => {
const items = times.flatMap(item_9 => getDatesWeek(item_9));
if (!items.length) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b1",
children: l('No exceptions this week')
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: items.map((itemValue_0, index_1) => {
const day = (0, _date.set)(index_1 + 1, 'dayWeek');
const itemValueFrom_0 = new _date.OnesyDate(itemValue_0.from);
const itemValueTo_0 = new _date.OnesyDate(itemValue_0.to);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "column",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
fullWidth: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: classes.palettePreview,
style: {
background: getColor(itemValue_0)
}
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
weight: 400,
children: (0, _date.format)(day, 'dd', {
l
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: "b2",
children: [(0, _date.format)(itemValueFrom_0, _utils2.formats.entire, {
l
}), " \u2014 ", (0, _date.format)(itemValueTo_0, _utils2.formats.entire, {
l
})]
})]
})]
}), itemValue_0.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
weight: 200,
whiteSpace: "pre-wrap",
className: (0, _styleReact.classNames)([classes.timeDescription, !refs.displayTime.current && 'onesy-work-day-time']),
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(itemValue_0.description)
}
})]
}, index_1);
})
});
};
const formattedDate = _react.default.useMemo(() => {
if (view === 'day') return (0, _date.format)(date, `MMMM DD, YYYY`, {
l
});
if (['week', 'simple'].includes(view)) return `${(0, _date.format)((0, _date.startOf)(date, 'week'), `MMM DD, YYYY`, {
l
})} – ${(0, _date.format)((0, _date.endOf)(date, 'week'), `MMM DD, YYYY`, {
l
})}`;
}, [view, date]);
const legend = _react.default.useMemo(() => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
rowGap: 1.5,
direction: "row",
align: "center",
className: classes.legend,
children: optionsStatus.map((item_10, index_2) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
onClick: () => onStatusToggle(item_10.value),
flexNo: true,
className: (0, _styleReact.classNames)([classes.itemLegend, [undefined, true].includes(refs.statuses.current[item_10.value || 'working']) && classes.itemLegendActive]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: classes.palettePreview,
style: {
background: getColor({
status: item_10.value
})
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
children: item_10.name
})]
}, index_2))
});
}, [theme, statuses, optionsStatus]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
flex: true,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-root'], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-header']]),
children: [startHeader, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 2,
direction: "row",
wrap: "wrap",
justify: "space-between",
align: "center",
fullWidth: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
direction: "row",
wrap: "wrap",
align: "center",
className: classes.aside,
children: [startLeft, /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
color: "inherit",
version: "outlined",
size: "small",
onClick: onToday,
selected: now.days === date.days,
children: l('Today')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
direction: "row",
align: "center",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: `${l('Previous')} ${l(view)}`,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onPrevious
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconPrevious, {
size: "regular"
})
}))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: `${l('Next')} ${l(view)}`,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
onClick: onNext
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconNext, {
size: "regular"
})
}))
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "h2",
weight: 500,
whiteSpace: "nowrap",
children: formattedDate
}), endLeft]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
direction: "row",
align: "center",
flexNo: true,
className: (0, _styleReact.classNames)([classes.aside, classes.overflowX]),
children: [startRight, ['week', 'day'].includes(view) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
checked: displayTime,
onChange: onChangeDisplayTime,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Switch, {}), l('Display time')]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Select, {
name: l('View'),
value: view,
onChange: onChangeView,
options: viewOptions,
size: "small",
MenuProps: {
portal: true,
size: 'regular'
}
}), endRight]
})]
}), endHeader]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
ref: refs.calendar,
gap: 2,
flex: true,
fullWidth: true,
children: [view === 'simple' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
flex: true,
fullWidth: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 4,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarAvailability', theme) && ['onesy-CalendarAvailability-simple'], classes.calendar]),
children: [simpleTimesUI(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "t2",
children: l('Exceptions this week')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
children: simpleExceptionsUI()
})]
})]
})
}), ['week', 'day'].includes(view) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarWeek, _objectSpread({
onOpen: onOpen,
date: date,
displayTime: displayTime,
statuses: statuses,
times: times,
events: events,
day: view === 'day'
}, WeekProps)), legend]
}), times && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Modal, {
open: !!(modal !== null && modal !== void 0 && modal.open),
onClose: onClose,
minWidth: "lg",
TransitionComponent: Slide,
size: "small",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ModalHeader, {
gap: 1,
direction: "row",
align: "center",
justify: "space-between",
fullWidth: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [startLeftModal, /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: classes.palettePreview,
style: {
background: getColor(modal)
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
weight: 100,
children: (0, _utils.cleanValue)(itemToText(modal === null || modal === void 0 ? void 0 : modal.status), {
capitalize: true
})
}), endLeftModal]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
children: [startRightModal, onUpdate && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: l('Update'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
onClick: () => {
onUpdate(modal === null || modal === void 0 ? void 0 : modal.object);
onClose();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconEdit, _objectSpread({}, IconProps))
})
}), onRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: l('Remove'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
onClick: () => {
onRemove(modal === null || modal === void 0 ? void 0 : modal.object);
onClose();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconRemove, _objectSpread({}, IconProps))
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: l('Close'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
onClick: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClose, _objectSpread({}, IconProps))
})
}), endRightModal]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalMain, {
align: "flex-start",
className: classes.modalMain,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1.5,
fullWidth: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: "l1",
weight: 200,
children: [(0, _date.format)(modal === null || modal === void 0 ? void 0 : modal.day, 'dd', {
l
}), " ", (0, _date.format)(new _date.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.from), modal !== null && modal !== void 0 && modal.weekly ? `hh:mm a` : _utils2.formats.entire, {
l
}), " \u2014 ", (0, _date.format)(new _date.OnesyDate(modal === null || modal === void 0 ? void 0 : modal.to), modal !== null && modal !== void 0 && modal.weekly ? `hh:mm a` : _utils2.formats.entire, {
l
})]
}), (modal === null || modal === void 0 ? void 0 : modal.description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(modal.description)
}
})]
})
})]
})]
}));
};
CalendarAvailability.displayName = 'onesy-CalendarAvailability';
var _default = exports.default = CalendarAvailability;