@onesy/ui-react 1.0.0

package/esm/CalendarViews/CalendarViews.js

@@ -0,0 +1,360 @@
+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(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 { capitalize, 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 '@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,
+    '& .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 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 = ['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 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: 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 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'))), /*#__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) && ['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
+  }, "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 = 'onesy-CalendarViews';
+export default CalendarViews;

package/esm/CalendarViews/index.js

@@ -0,0 +1 @@
+export { default } from './CalendarViews';