@onesy/ui-react
Version:
UI for React
412 lines (411 loc) • 16.5 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 _IconMaterialArrowBackIosNewW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100"));
var _IconMaterialArrowForwardIosW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100"));
var _CalendarWeek = _interopRequireDefault(require("../CalendarWeek"));
var _CalendarMonth = _interopRequireDefault(require("../CalendarMonth"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Line = _interopRequireDefault(require("../Line"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Type = _interopRequireDefault(require("../Type"));
var _Select = _interopRequireDefault(require("../Select"));
var _Button = _interopRequireDefault(require("../Button"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["viewDefault", "dateDefault", "times", "events", "views", "render", "onTimeClick", "onChangeView", "onChangeDate", "startHeader", "endHeader", "startLeft", "endLeft", "startRight", "endRight", "noViews", "IconPrevious", "IconNext", "WeekProps", "DayProps", "CalendarMonthProps", "TypeDateFormattedProps", "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: {
padding: '16px',
color: theme.methods.palette.color.value('primary', 10),
background: theme.palette.background.default.primary,
'& .onesy-Label-text': {
whiteSpace: 'nowrap'
}
},
main: {
paddingTop: '4px',
overflow: 'auto hidden'
},
aside: {
width: 'auto',
maxWidth: '100%'
},
month: {
position: 'relative',
width: 'auto',
minWidth: '100%'
},
monthDay: {
width: '32px',
height: '32px',
marginTop: '4px',
borderRadius: '50%'
},
today: {
background: theme.palette.color.primary[40],
color: '#fff'
},
contentItemsMonth: {
position: 'relative',
padding: '0px 4px 8px',
height: '100px',
overflow: 'hidden auto'
},
calendarMonth: {
'&.onesy-CalendarMonth-root': {
width: '100%',
height: '100%',
minHeight: '0',
flex: '0 0 auto',
minWidth: 'unset',
overflow: 'unset',
transition: theme.methods.transitions.make('opacity')
},
'& .onesy-CalendarMonth-weeks': {
position: 'relative',
top: '0',
width: 'calc(100% - 2px)',
height: 'auto',
marginLeft: '1px',
gap: '0'
},
'& .onesy-CalendarMonth-week': {
flex: '1 1 auto'
},
'& .onesy-CalendarMonth-day': {
height: 'unset',
minWidth: '170px',
minHeight: '100px',
marginTop: '-1px',
marginLeft: '-1px',
border: `1px solid ${theme.palette.light ? '#dadada' : '#575757'}`
},
'& .onesy-CalendarMonth-day-name': {
minWidth: '170px'
},
'& .onesy-CalendarMonth-day-out': {
zIndex: '-1px'
}
},
dayWrapper: {
height: '100%'
},
overflowX: {
padding: '2px 0',
overflow: 'auto hidden'
}
}), {
name: 'onesy-CalendarViews'
});
const CalendarViews = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
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.onesyCalendarViews) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const CalendarMonth = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.CalendarMonth) || _CalendarMonth.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
const Line = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Line) || _Line.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 Type = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Type) || _Type.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 Select = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Select) || _Select.default;
const CalendarWeek = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.CalendarWeek) || _CalendarWeek.default;
const {
viewDefault,
dateDefault,
times: timesProps,
events,
views: viewsProps = [{
name: l('Month'),
value: 'month'
}, {
name: l('Week'),
value: 'week'
}, {
name: l('Day'),
value: 'day'
}],
render,
onTimeClick,
onChangeView: onChangeViewProps,
onChangeDate: onChangeDateProps,
startHeader,
endHeader,
startLeft,
endLeft,
startRight,
endRight,
noViews,
IconPrevious = _IconMaterialArrowBackIosNewW.default,
IconNext = _IconMaterialArrowForwardIosW.default,
WeekProps,
DayProps,
CalendarMonthProps,
TypeDateFormattedProps,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle(props);
const [now, setNow] = _react.default.useState(new _date.OnesyDate());
const [date, setDate] = _react.default.useState(dateDefault || new _date.OnesyDate());
const [view, setView] = _react.default.useState(viewDefault || 'month');
const refs = {
interval: _react.default.useRef(undefined)
};
_react.default.useEffect(() => {
// 1 minute
refs.interval.current = setInterval(() => {
setNow(new _date.OnesyDate());
}, 60 * 1e3);
return () => {
clearInterval(refs.interval.current);
};
}, []);
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 viewOptions = _react.default.useMemo(() => {
return viewsProps === null || viewsProps === void 0 ? void 0 : viewsProps.map(item => ({
name: item === null || item === void 0 ? void 0 : item.name,
value: item === null || item === void 0 ? void 0 : item.value
}));
}, [viewsProps]);
const formattedDate = _react.default.useMemo(() => {
if (view === 'day') return (0, _date.format)(date, `MMMM DD, YYYY`, {
l
});
if (view === 'week') 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
})}`;
if (view === 'month') return (0, _date.format)(date, `MMMM YYYY`, {
l
});
}, [view, date]);
const onChangeView = valueNew => {
setView(valueNew);
if ((0, _utils.is)('function', onChangeViewProps)) onChangeViewProps(valueNew);
};
const onToday = () => {
const valueNew_0 = new _date.OnesyDate();
setDate(valueNew_0);
if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_0);
};
const onPrevious = () => {
let valueNew_1 = new _date.OnesyDate();
setDate(previous => {
valueNew_1 = (0, _date.remove)(1, view, previous);
return valueNew_1;
});
if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_1);
};
const onNext = () => {
let valueNew_2 = new _date.OnesyDate();
setDate(previous_0 => {
valueNew_2 = (0, _date.add)(1, view, previous_0);
return valueNew_2;
});
if ((0, _utils.is)('function', onChangeDateProps)) onChangeDateProps(valueNew_2);
};
const renderDay = (valueCalendarMonth, propsDay, day, outside) => {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.5,
direction: "column",
align: "center",
flex: true,
fullWidth: true,
className: classes.dayWrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
direction: "row",
justify: "center",
align: "center",
fullWidth: true,
className: (0, _styleReact.classNames)([classes.monthDay, day.today && classes.today]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
children: (0, _date.format)(valueCalendarMonth, 'D', {
l
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0.5,
flex: true,
fullWidth: true,
className: classes.contentItemsMonth,
children: (0, _utils.is)('function', render) && render(valueCalendarMonth, view)
})]
});
};
const renderDayName = order => {
const values = {
1: l('Mo'),
2: l('Tu'),
3: l('We'),
4: l('Th'),
5: l('Fr'),
6: l('Sa'),
7: l('Su')
};
return values[order];
};
const ui = {
month: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
className: classes.month,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarMonth, _objectSpread(_objectSpread({
value: now,
calendar: date,
renderDay: renderDay,
renderDayName: renderDayName,
onTimeClick: onTimeClick,
size: "large",
dayNamesFull: true,
noTransition: true,
outside: false,
DayNameProps: {
version: 'l1',
weight: 200
}
}, CalendarMonthProps), {}, {
className: (0, _styleReact.classNames)([CalendarMonthProps === null || CalendarMonthProps === void 0 ? void 0 : CalendarMonthProps.className, classes.calendarMonth])
}))
})
}),
week: /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarWeek, _objectSpread({
date: date,
times: times,
events: events,
onTimeClick: onTimeClick
}, WeekProps)),
day: /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarWeek, _objectSpread({
date: date,
times: times,
events: events,
onTimeClick: onTimeClick,
day: true
}, WeekProps))
};
const iconProps = {
size: 'regular'
};
const iconButtonProps = {
size: 'regular'
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
flex: true,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarViews', theme) && ['onesy-CalendarViews-root'], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CalendarViews', theme) && ['onesy-CalendarViews-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, _objectSpread({}, iconProps))
}))
}), /*#__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, _objectSpread({}, iconProps))
}))
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: "h3",
weight: 300,
whiteSpace: "nowrap"
}, TypeDateFormattedProps), {}, {
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, !noViews && /*#__PURE__*/(0, _jsxRuntime.jsx)(Select, {
name: l('View'),
value: view,
onChange: onChangeView,
options: viewOptions,
size: "small",
MenuProps: {
portal: true,
size: 'regular'
},
WrapperProps: {
style: {
width: 170,
minWidth: 'unset'
}
},
style: {
width: 170,
minWidth: 'unset'
}
}), endRight]
})]
}), endHeader]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
flex: true,
fullWidth: true,
className: classes.main,
children: ui[view]
})]
}));
};
CalendarViews.displayName = 'onesy-CalendarViews';
var _default = exports.default = CalendarViews;