@amaui/ui-react
Version:
UI for React
360 lines • 12.7 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", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { capitalize, is } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import { add, AmauiDate, endOf, format, remove, startOf } from '@amaui/date';
import IconMaterialArrowBackIosNew from '@amaui/icons-material-rounded-react/IconMaterialArrowBackIosNewW100';
import IconMaterialArrowForwardIos from '@amaui/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,
'& .amaui-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: {
'&.amaui-CalendarMonth-root': {
width: '100%',
height: '100%',
minHeight: '0',
flex: '0 0 auto',
minWidth: 'unset',
overflow: 'unset',
transition: theme.methods.transitions.make('opacity')
},
'& .amaui-CalendarMonth-weeks': {
position: 'relative',
top: '0',
width: 'calc(100% - 2px)',
height: 'auto',
marginLeft: '1px',
gap: '0'
},
'& .amaui-CalendarMonth-week': {
flex: '1 1 auto'
},
'& .amaui-CalendarMonth-day': {
height: 'unset',
minWidth: '170px',
minHeight: '100px',
marginTop: '-1px',
marginLeft: '-1px',
border: `1px solid ${theme.palette.light ? '#dadada' : '#575757'}`
},
'& .amaui-CalendarMonth-day-name': {
minWidth: '170px'
},
'& .amaui-CalendarMonth-day-out': {
zIndex: '-1px'
}
},
dayWrapper: {
height: '100%'
},
overflowX: {
padding: '2px 0',
overflow: 'auto hidden'
}
}), {
name: 'amaui-CalendarViews'
});
const CalendarViews = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiCalendarViews?.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 = ['month', 'week', 'day'],
render,
onTimeClick,
onChangeView: onChangeViewProps,
onChangeDate: onChangeDateProps,
startHeader,
endHeader,
startLeft,
endLeft,
startRight,
endRight,
noViews,
IconPrevious = IconMaterialArrowBackIosNew,
IconNext = IconMaterialArrowForwardIos,
WeekProps,
DayProps,
CalendarMonthProps,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle(props);
const [now, setNow] = React.useState(new AmauiDate());
const [date, setDate] = React.useState(dateDefault || new AmauiDate());
const [view, setView] = React.useState(viewDefault || 'month');
const refs = {
interval: React.useRef(undefined)
};
React.useEffect(() => {
// 1 minute
refs.interval.current = setInterval(() => {
setNow(new AmauiDate());
}, 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: capitalize(item),
value: item
}));
}, [viewsProps]);
const formattedDate = React.useMemo(() => {
if (view === 'day') return format(date, `MMMM DD, YYYY`);
if (view === 'week') return `${format(startOf(date, 'week'), `MMM DD, YYYY`)} – ${format(endOf(date, 'week'), `MMM DD, YYYY`)}`;
if (view === 'month') return format(date, `MMMM YYYY`);
}, [view, date]);
const onChangeView = React.useCallback(valueNew => {
setView(valueNew);
if (is('function', onChangeViewProps)) onChangeViewProps(valueNew);
}, [onChangeViewProps]);
const onToday = React.useCallback(() => {
const valueNew = new AmauiDate();
setDate(valueNew);
if (is('function', onChangeDateProps)) onChangeDateProps(valueNew);
}, [onChangeDateProps]);
const onPrevious = React.useCallback(() => {
let valueNew = new AmauiDate();
setDate(previous => {
valueNew = remove(1, view, previous);
return valueNew;
});
if (is('function', onChangeDateProps)) onChangeDateProps(valueNew);
}, [view, onChangeDateProps]);
const onNext = React.useCallback(() => {
let valueNew = new AmauiDate();
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'))), /*#__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: 'Mon',
2: 'Tue',
3: 'Wed',
4: 'Thu',
5: 'Fri',
6: 'Sat',
7: 'Sun'
};
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) && ['amaui-CalendarViews-root'], className, classes.root])
}, other), /*#__PURE__*/React.createElement(Line, {
gap: 1,
fullWidth: true,
className: classNames([staticClassName('CalendarViews', theme) && ['amaui-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
}, "Today"), /*#__PURE__*/React.createElement(Line, {
gap: 0,
direction: "row",
align: "center"
}, /*#__PURE__*/React.createElement(Tooltip, {
name: `Previous ${view}`
}, /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: onPrevious
}, iconButtonProps), /*#__PURE__*/React.createElement(IconPrevious, iconProps))), /*#__PURE__*/React.createElement(Tooltip, {
name: `Next ${view}`
}, /*#__PURE__*/React.createElement(IconButton, _extends({
onClick: onNext
}, iconButtonProps), /*#__PURE__*/React.createElement(IconNext, iconProps)))), /*#__PURE__*/React.createElement(Type, {
version: "h2",
weight: 500,
whiteSpace: "nowrap"
}, 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: "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 = 'amaui-CalendarViews';
export default CalendarViews;