@onesy/ui-react
Version:
UI for React
381 lines • 12.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _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 { is } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import { add, OnesyDate, endOf, format, remove, startOf } from '@onesy/date';
import IconMaterialArrowBackIosNew from '@onesy/icons-material-rounded-react/IconMaterialArrowBackIosNewW100';
import IconMaterialArrowForwardIos from '@onesy/icons-material-rounded-react/IconMaterialArrowForwardIosW100';
import CalendarWeekElement from '../CalendarWeek';
import CalendarMonthElement from '../CalendarMonth';
import IconButtonElement from '../IconButton';
import LineElement from '../Line';
import TooltipElement from '../Tooltip';
import TypeElement from '../Type';
import SelectElement from '../Select';
import ButtonElement from '../Button';
import { staticClassName } from '../utils';
const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const l = theme.l;
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendarViews?.props?.default), props_), [props_]);
const CalendarMonth = React.useMemo(() => theme?.elements?.CalendarMonth || CalendarMonthElement, [theme]);
const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
const Select = React.useMemo(() => theme?.elements?.Select || SelectElement, [theme]);
const CalendarWeek = React.useMemo(() => theme?.elements?.CalendarWeek || CalendarWeekElement, [theme]);
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 = IconMaterialArrowBackIosNew,
IconNext = IconMaterialArrowForwardIos,
WeekProps,
DayProps,
CalendarMonthProps,
TypeDateFormattedProps,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle(props);
const [now, setNow] = React.useState(new OnesyDate());
const [date, setDate] = React.useState(dateDefault || new OnesyDate());
const [view, setView] = React.useState(viewDefault || 'month');
const refs = {
interval: React.useRef(undefined)
};
React.useEffect(() => {
// 1 minute
refs.interval.current = setInterval(() => {
setNow(new OnesyDate());
}, 60 * 1e3);
return () => {
clearInterval(refs.interval.current);
};
}, []);
const times = React.useMemo(() => {
if (events) {
return [{
dates: {
active: true,
values: (is('array', events) ? events : [events]).filter(Boolean)
}
}];
}
return (is('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
}, [events, timesProps]);
const viewOptions = React.useMemo(() => {
return viewsProps?.map(item => ({
name: item?.name,
value: item?.value
}));
}, [viewsProps]);
const formattedDate = React.useMemo(() => {
if (view === 'day') return format(date, `MMMM DD, YYYY`, {
l
});
if (view === 'week') return `${format(startOf(date, 'week'), `MMM DD, YYYY`, {
l
})} – ${format(endOf(date, 'week'), `MMM DD, YYYY`, {
l
})}`;
if (view === 'month') return format(date, `MMMM YYYY`, {
l
});
}, [view, date]);
const onChangeView = React.useCallback(valueNew => {
setView(valueNew);
if (is('function', onChangeViewProps)) onChangeViewProps(valueNew);
}, [onChangeViewProps]);
const onToday = React.useCallback(() => {
const valueNew = new OnesyDate();
setDate(valueNew);
if (is('function', onChangeDateProps)) onChangeDateProps(valueNew);
}, [onChangeDateProps]);
const onPrevious = React.useCallback(() => {
let valueNew = new OnesyDate();
setDate(previous => {
valueNew = remove(1, view, previous);
return valueNew;
});
if (is('function', onChangeDateProps)) onChangeDateProps(valueNew);
}, [view, onChangeDateProps]);
const onNext = React.useCallback(() => {
let valueNew = new OnesyDate();
setDate(previous => {
valueNew = add(1, view, previous);
return valueNew;
});
if (is('function', onChangeDateProps)) onChangeDateProps(valueNew);
}, [view, onChangeDateProps]);
const renderDay = React.useCallback((valueCalendarMonth, propsDay, day, outside) => {
return /*#__PURE__*/React.createElement(Line, {
gap: 0.5,
direction: "column",
align: "center",
flex: true,
fullWidth: true,
className: classes.dayWrapper
}, /*#__PURE__*/React.createElement(Line, {
direction: "row",
justify: "center",
align: "center",
fullWidth: true,
className: classNames([classes.monthDay, day.today && classes.today])
}, /*#__PURE__*/React.createElement(Type, {
version: "b2"
}, format(valueCalendarMonth, 'D', {
l
}))), /*#__PURE__*/React.createElement(Line, {
gap: 0.5,
flex: true,
fullWidth: true,
className: classes.contentItemsMonth
}, is('function', render) && render(valueCalendarMonth, view)));
}, [render, view]);
const renderDayName = React.useCallback(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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
gap: 0,
className: classes.month
}, /*#__PURE__*/React.createElement(CalendarMonth, _extends({
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: classNames([CalendarMonthProps?.className, classes.calendarMonth])
})))),
week: /*#__PURE__*/React.createElement(CalendarWeek, _extends({
date: date,
times: times,
events: events,
onTimeClick: onTimeClick
}, WeekProps)),
day: /*#__PURE__*/React.createElement(CalendarWeek, _extends({
date: date,
times: times,
events: events,
onTimeClick: onTimeClick,
day: true
}, WeekProps))
};
const iconProps = {
size: 'regular'
};
const iconButtonProps = {
size: 'regular'
};
return /*#__PURE__*/React.createElement(Line, _extends({
ref: ref,
flex: true,
fullWidth: true,
className: classNames([staticClassName('CalendarViews', theme) && ['onesy-CalendarViews-root'], className, classes.root])
}, other), /*#__PURE__*/React.createElement(Line, {
gap: 1,
fullWidth: true,
className: classNames([staticClassName('CalendarViews', theme) && ['onesy-CalendarViews-header']])
}, startHeader, /*#__PURE__*/React.createElement(Line, {
gap: 2,
direction: "row",
wrap: "wrap",
justify: "space-between",
align: "center",
fullWidth: true
}, /*#__PURE__*/React.createElement(Line, {
gap: 1.5,
direction: "row",
wrap: "wrap",
align: "center",
className: classes.aside
}, startLeft, /*#__PURE__*/React.createElement(Button, {
color: "inherit",
version: "outlined",
size: "small",
onClick: onToday,
selected: now.days === date.days
}, l('Today')), /*#__PURE__*/React.createElement(Line, {
gap: 0,
direction: "row",
align: "center"
}, /*#__PURE__*/React.createElement(Tooltip, {
name: `${l('Previous')} ${l(view)}`
}, /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: onPrevious
}, iconButtonProps), /*#__PURE__*/React.createElement(IconPrevious, iconProps))), /*#__PURE__*/React.createElement(Tooltip, {
name: `${l('Next')} ${l(view)}`
}, /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: onNext
}, iconButtonProps), /*#__PURE__*/React.createElement(IconNext, iconProps)))), /*#__PURE__*/React.createElement(Type, _extends({
version: "h3",
weight: 300,
whiteSpace: "nowrap"
}, TypeDateFormattedProps), formattedDate), endLeft), /*#__PURE__*/React.createElement(Line, {
gap: 1.5,
direction: "row",
align: "center",
flexNo: true,
className: classNames([classes.aside, classes.overflowX])
}, startRight, !noViews && /*#__PURE__*/React.createElement(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__*/React.createElement(Line, {
flex: true,
fullWidth: true,
className: classes.main
}, ui[view]));
});
CalendarViews.displayName = 'onesy-CalendarViews';
export default CalendarViews;