react-big-schedule 8.0.0 → 9.0.0

package/dist/components/SchedulerHeader.d.ts

@@ -0,0 +1,25 @@
+import React, { type CSSProperties, type ReactNode } from 'react';
+import type { ViewType } from '../config/default';
+import type SchedulerData from './SchedulerData';
+export interface ViewChangeEvent {
+    viewType: ViewType;
+    showAgenda: boolean;
+    isEventPerspective: boolean;
+}
+export interface SchedulerHeaderProps {
+    /** Receives the encoded view key: viewType, showAgenda (0|1), isEventPerspective (0|1). */
+    onViewChange: (event: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    goNext: () => void;
+    goBack: () => void;
+    onSelectDate: (date: string) => void;
+    schedulerData: SchedulerData;
+    leftCustomHeader?: ReactNode;
+    rightCustomHeader?: ReactNode;
+    style?: CSSProperties;
+}
+declare const SchedulerHeader: React.ForwardRefExoticComponent<SchedulerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default SchedulerHeader;

package/dist/components/SchedulerHeader.js

@@ -1,156 +1,56 @@
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { Calendar, Col, Popover, Radio, Row, Space, Spin } from 'antd';
-import dayjs from 'dayjs';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from 'react';
 import { DATE_FORMAT } from '../config/default';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const RadioButton = Radio.Button;
-const RadioGroup = Radio.Group;
-const SchedulerHeader = /*#__PURE__*/React.forwardRef(({
-  onViewChange,
-  goNext,
-  goBack,
-  onSelectDate,
-  schedulerData,
-  leftCustomHeader,
-  rightCustomHeader,
-  style
-}, ref) => {
-  const [viewSpinning, setViewSpinning] = useState(false);
-  const [dateSpinning, setDateSpinning] = useState(false);
-  const [visible, setVisible] = useState(false);
-  const {
-    viewType,
-    showAgenda,
-    isEventPerspective,
-    config
-  } = schedulerData;
-  const dateLabel = schedulerData.getDateLabel();
-  const selectDate = schedulerData.getSelectedDate();
-  const calendarLocale = schedulerData.getCalendarPopoverLocale()?.default?.Calendar;
-  const defaultValue = `${viewType}${showAgenda ? 1 : 0}${isEventPerspective ? 1 : 0}`;
-  const isMountedRef = useRef(true);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-  const handleEvents = (func, isViewSpinning, funcArg) => {
-    const isSpinEnabled = isViewSpinning ? config.viewChangeSpinEnabled : config.dateChangeSpinEnabled;
-    const setSpin = isViewSpinning ? setViewSpinning : setDateSpinning;
-    if (isSpinEnabled) {
-      setSpin(true);
-    }
-    const coreFunc = () => {
-      try {
-        funcArg !== undefined ? func(funcArg) : func();
-      } finally {
-        if (isSpinEnabled && isMountedRef.current) {
-          setSpin(false);
+import { ChevronLeft, ChevronRight } from './ui/Icons';
+import MiniCalendar from './ui/MiniCalendar';
+import Popover from './ui/Popover';
+const Spinner = () => _jsx("span", { className: "rbs-spinner", role: "status", "aria-label": "Loading" });
+const SchedulerHeader = React.forwardRef(({ onViewChange, goNext, goBack, onSelectDate, schedulerData, leftCustomHeader, rightCustomHeader, style }, ref) => {
+    const [viewSpinning, setViewSpinning] = useState(false);
+    const [dateSpinning, setDateSpinning] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const { viewType, showAgenda, isEventPerspective, config } = schedulerData;
+    const dateLabel = schedulerData.getDateLabel();
+    const selectDate = schedulerData.getSelectedDate();
+    const currentView = `${viewType}${showAgenda ? 1 : 0}${isEventPerspective ? 1 : 0}`;
+    const isMountedRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const handleEvents = (func, isViewSpinning, funcArg) => {
+        const isSpinEnabled = isViewSpinning ? config.viewChangeSpinEnabled : config.dateChangeSpinEnabled;
+        const setSpin = isViewSpinning ? setViewSpinning : setDateSpinning;
+        if (isSpinEnabled) {
+            setSpin(true);
+        }
+        const coreFunc = () => {
+            try {
+                func(funcArg);
+            }
+            finally {
+                if (isSpinEnabled && isMountedRef.current) {
+                    setSpin(false);
+                }
+            }
+        };
+        if (isSpinEnabled) {
+            setTimeout(coreFunc, config.schedulerHeaderEventsFuncsTimeoutMs);
+        }
+        else {
+            coreFunc();
         }
-      }
     };
-    if (isSpinEnabled) {
-      setTimeout(coreFunc, config.schedulerHeaderEventsFuncsTimeoutMs);
-    } else {
-      coreFunc();
-    }
-  };
-  const popover = /*#__PURE__*/_jsx("div", {
-    className: "rbs-popover-calendar",
-    children: /*#__PURE__*/_jsx(Calendar, {
-      locale: calendarLocale,
-      defaultValue: dayjs(selectDate),
-      fullscreen: false,
-      onSelect: date => {
-        setVisible(false);
-        handleEvents(onSelectDate, false, date.format(DATE_FORMAT));
-      }
-    })
-  });
-  const radioButtonList = config.views.map(item => /*#__PURE__*/_jsx(RadioButton, {
-    value: `${item.viewType}${item.showAgenda ? 1 : 0}${item.isEventPerspective ? 1 : 0}`,
-    children: /*#__PURE__*/_jsx("span", {
-      style: {
-        margin: '0px 8px'
-      },
-      children: item.viewName
-    })
-  }, `${item.viewType}${item.showAgenda ? 1 : 0}${item.isEventPerspective ? 1 : 0}`));
-  return /*#__PURE__*/_jsxs(Row, {
-    ref: ref,
-    gutter: [10, 10],
-    align: "middle",
-    justify: "space-between",
-    style: {
-      marginInline: 0,
-      ...style
-    },
-    children: [leftCustomHeader, /*#__PURE__*/_jsx(Col, {
-      children: /*#__PURE__*/_jsx("div", {
-        className: "header2-text",
-        children: /*#__PURE__*/_jsxs(Space, {
-          children: [/*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx(LeftOutlined, {
-              style: {
-                marginRight: '8px'
-              },
-              className: "icon-nav",
-              onClick: () => handleEvents(goBack, false)
-            }), config.calendarPopoverEnabled ? /*#__PURE__*/_jsx(Popover, {
-              content: popover,
-              placement: "bottomLeft",
-              trigger: "click",
-              open: visible,
-              onOpenChange: setVisible,
-              overlayClassName: "scheduler-header-popover",
-              children: /*#__PURE__*/_jsx("span", {
-                className: "header2-text-label",
-                style: {
-                  cursor: 'pointer'
-                },
-                children: dateLabel
-              })
-            }) : /*#__PURE__*/_jsx("span", {
-              className: "header2-text-label",
-              children: dateLabel
-            }), /*#__PURE__*/_jsx(RightOutlined, {
-              style: {
-                marginLeft: '8px'
-              },
-              className: "icon-nav",
-              onClick: () => handleEvents(goNext, false)
-            })]
-          }), /*#__PURE__*/_jsx(Spin, {
-            spinning: dateSpinning
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsx(Col, {
-      children: /*#__PURE__*/_jsxs(Space, {
-        children: [/*#__PURE__*/_jsx(Spin, {
-          spinning: viewSpinning
-        }), /*#__PURE__*/_jsx(RadioGroup, {
-          buttonStyle: "solid",
-          defaultValue: defaultValue,
-          size: "default",
-          onChange: event => handleEvents(onViewChange, true, event),
-          children: radioButtonList
-        })]
-      })
-    }), rightCustomHeader]
-  });
+    const popover = (_jsx("div", { className: "rbs-popover-calendar", children: _jsx(MiniCalendar, { dayjs: schedulerData.localeDayjs, value: selectDate, onSelect: date => {
+                setVisible(false);
+                handleEvents(onSelectDate, false, date.format(DATE_FORMAT));
+            } }) }));
+    const viewButtons = config.views.map(item => {
+        const value = `${item.viewType}${item.showAgenda ? 1 : 0}${item.isEventPerspective ? 1 : 0}`;
+        return (_jsx("button", { type: "button", "aria-pressed": value === currentView, onClick: () => handleEvents(onViewChange, true, { target: { value } }), children: _jsx("span", { style: { margin: '0px 8px' }, children: item.viewName }) }, value));
+    });
+    return (_jsxs("div", { ref: ref, className: "rbs:flex rbs:flex-wrap rbs:items-center rbs:justify-between rbs:gap-2.5", style: style, children: [leftCustomHeader, _jsxs("div", { className: "header2-text rbs:flex rbs:items-center rbs:gap-2", children: [_jsxs("div", { className: "rbs:flex rbs:items-center", children: [_jsx(ChevronLeft, { style: { marginRight: '8px' }, className: "icon-nav", onClick: () => handleEvents(goBack, false, undefined) }), config.calendarPopoverEnabled ? (_jsx(Popover, { content: popover, placement: "bottomLeft", trigger: "click", open: visible, onOpenChange: setVisible, className: "scheduler-header-popover", children: _jsx("span", { className: "header2-text-label", style: { cursor: 'pointer' }, children: dateLabel }) })) : (_jsx("span", { className: "header2-text-label", children: dateLabel })), _jsx(ChevronRight, { style: { marginLeft: '8px' }, className: "icon-nav", onClick: () => handleEvents(goNext, false, undefined) })] }), dateSpinning && _jsx(Spinner, {})] }), _jsxs("div", { className: "rbs:flex rbs:items-center rbs:gap-2", children: [viewSpinning && _jsx(Spinner, {}), _jsx("div", { className: "rbs-segmented", role: "group", children: viewButtons })] }), rightCustomHeader] }));
 });
-SchedulerHeader.propTypes = {
-  onViewChange: PropTypes.func.isRequired,
-  goNext: PropTypes.func.isRequired,
-  goBack: PropTypes.func.isRequired,
-  onSelectDate: PropTypes.func.isRequired,
-  schedulerData: PropTypes.object.isRequired,
-  leftCustomHeader: PropTypes.object,
-  rightCustomHeader: PropTypes.object,
-  style: PropTypes.object
-};
 SchedulerHeader.displayName = 'SchedulerHeader';
-export default SchedulerHeader;
+export default SchedulerHeader;

package/dist/components/SelectedArea.d.ts

@@ -0,0 +1,8 @@
+import type SchedulerData from './SchedulerData';
+export interface SelectedAreaProps {
+    schedulerData: SchedulerData;
+    left: number;
+    width: number;
+}
+declare function SelectedArea({ left, width, schedulerData }: SelectedAreaProps): import("react").JSX.Element;
+export default SelectedArea;

package/dist/components/SelectedArea.js

@@ -1,28 +1,13 @@
-import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-function SelectedArea({
-  left,
-  width,
-  schedulerData
-}) {
-  const {
-    config
-  } = schedulerData;
-  const selectedAreaStyle = {
-    left,
-    width,
-    top: 0,
-    bottom: 0,
-    backgroundColor: config.selectedAreaColor
-  };
-  return /*#__PURE__*/_jsx("div", {
-    className: "selected-area",
-    style: selectedAreaStyle
-  });
+function SelectedArea({ left, width, schedulerData }) {
+    const { config } = schedulerData;
+    const selectedAreaStyle = {
+        left,
+        width,
+        top: 0,
+        bottom: 0,
+        backgroundColor: config.selectedAreaColor,
+    };
+    return _jsx("div", { className: "selected-area", style: selectedAreaStyle });
 }
-SelectedArea.propTypes = {
-  schedulerData: PropTypes.object.isRequired,
-  left: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
-};
-export default SelectedArea;
+export default SelectedArea;

package/dist/components/Summary.d.ts

@@ -0,0 +1,11 @@
+import type { SummaryResult } from '../types';
+import type SchedulerData from './SchedulerData';
+export interface SummaryProps {
+    schedulerData: SchedulerData;
+    summary: Partial<SummaryResult>;
+    left: number;
+    width: number;
+    top: number;
+}
+declare function Summary({ schedulerData, summary, left, width, top }: SummaryProps): import("react").JSX.Element;
+export default Summary;

package/dist/components/Summary.js

@@ -1,52 +1,23 @@
-import PropTypes from 'prop-types';
-import { SummaryPos } from '../config/default';
 import { jsx as _jsx } from "react/jsx-runtime";
-function Summary({
-  schedulerData,
-  summary,
-  left,
-  width,
-  top
-}) {
-  const {
-    config
-  } = schedulerData;
-  const color = summary.color !== undefined ? summary.color : config.summaryColor;
-  let textAlign = 'center';
-  if (config.summaryPos === SummaryPos.TopRight || config.summaryPos === SummaryPos.BottomRight) {
-    textAlign = 'right';
-  } else if (config.summaryPos === SummaryPos.TopLeft || config.summaryPos === SummaryPos.BottomLeft) {
-    textAlign = 'left';
-  }
-  const style = {
-    height: config.eventItemHeight,
-    color,
-    textAlign,
-    marginLeft: '6px',
-    marginRight: '6px',
-    ...(summary.fontSize !== undefined ? {
-      fontSize: summary.fontSize
-    } : {})
-  };
-  return /*#__PURE__*/_jsx("div", {
-    className: "timeline-event header2-text",
-    style: {
-      left,
-      width,
-      top,
-      cursor: 'default'
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      style: style,
-      children: summary.text
-    })
-  });
+import { SummaryPos } from '../config/default';
+function Summary({ schedulerData, summary, left, width, top }) {
+    const { config } = schedulerData;
+    const color = summary.color !== undefined ? summary.color : config.summaryColor;
+    let textAlign = 'center';
+    if (config.summaryPos === SummaryPos.TopRight || config.summaryPos === SummaryPos.BottomRight) {
+        textAlign = 'right';
+    }
+    else if (config.summaryPos === SummaryPos.TopLeft || config.summaryPos === SummaryPos.BottomLeft) {
+        textAlign = 'left';
+    }
+    const style = {
+        height: config.eventItemHeight,
+        color,
+        textAlign,
+        marginLeft: '6px',
+        marginRight: '6px',
+        ...(summary.fontSize !== undefined ? { fontSize: summary.fontSize } : {}),
+    };
+    return (_jsx("div", { className: "timeline-event header2-text", style: { left, width, top, cursor: 'default' }, children: _jsx("div", { style: style, children: summary.text }) }));
 }
-Summary.propTypes = {
-  schedulerData: PropTypes.object.isRequired,
-  summary: PropTypes.object.isRequired,
-  left: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  top: PropTypes.number.isRequired
-};
-export default Summary;
+export default Summary;

package/dist/components/WrapperFun.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export default function WrapperFun<P extends object>(Component: ComponentType<P>): (props: P) => import("react").JSX.Element;

package/dist/components/WrapperFun.js

@@ -1,13 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { jsx as _jsx } from "react/jsx-runtime";
 export default function WrapperFun(Component) {
-  return function WrappedComponent(props) {
-    return /*#__PURE__*/_jsx(DndProvider, {
-      backend: HTML5Backend,
-      children: /*#__PURE__*/_jsx(Component, {
-        ...props
-      })
-    });
-  };
-}
+    return function WrappedComponent(props) {
+        return (_jsx(DndProvider, { backend: HTML5Backend, children: _jsx(Component, { ...props }) }));
+    };
+}

package/dist/components/index.d.ts

@@ -0,0 +1,44 @@
+import { type ComponentType, type CSSProperties, type ReactNode, type RefObject } from 'react';
+import { CellUnit, DATE_FORMAT, DATETIME_FORMAT, SummaryPos, ViewType } from '../config/default';
+import DemoData from '../sample-data/sample1';
+import type { Id, SlotClickedFunc, SlotItemTemplateResolver } from '../types';
+import AddMorePopover from './AddMorePopover';
+import DnDContext from './DnDContext';
+import DnDSource from './DnDSource';
+import { type NonAgendaCellHeaderTemplateResolver } from './HeaderView';
+import { type ResourceEventsProps } from './ResourceEvents';
+import { type CustomResourceCellProps } from './ResourceView';
+import SchedulerData from './SchedulerData';
+import type { ViewChangeEvent } from './SchedulerHeader';
+import wrapperFun from './WrapperFun';
+type ScrollHandler = (schedulerData: SchedulerData, element: HTMLElement, maxScroll: number) => void;
+export interface SchedulerProps extends Pick<ResourceEventsProps, 'onSetAddMoreState' | 'updateEventStart' | 'updateEventEnd' | 'moveEvent' | 'movingEvent' | 'newEvent' | 'conflictOccurred' | 'subtitleGetter' | 'eventItemClick' | 'viewEventClick' | 'viewEventText' | 'viewEvent2Click' | 'viewEvent2Text' | 'eventItemTemplateResolver' | 'eventItemPopoverTemplateResolver'> {
+    /** View model that supplies configuration, layout and render data. */
+    schedulerData: SchedulerData;
+    /** Extra drag sources, merged into the DnD context on first mount. */
+    dndSources?: DnDSource[];
+    /** Parent whose height is tracked when `config.responsiveByParent` is on. */
+    parentRef?: RefObject<HTMLElement | null>;
+    className?: string;
+    style?: CSSProperties;
+    prevClick: (schedulerData: SchedulerData) => void;
+    nextClick: (schedulerData: SchedulerData) => void;
+    onViewChange: (schedulerData: SchedulerData, view: ViewChangeEvent) => void;
+    onSelectDate: (schedulerData: SchedulerData, date: string) => void;
+    leftCustomHeader?: ReactNode;
+    rightCustomHeader?: ReactNode;
+    slotClickedFunc?: SlotClickedFunc;
+    toggleExpandFunc?: (schedulerData: SchedulerData, slotId: Id) => void;
+    slotItemTemplateResolver?: SlotItemTemplateResolver;
+    nonAgendaCellHeaderTemplateResolver?: NonAgendaCellHeaderTemplateResolver;
+    onScrollLeft?: ScrollHandler;
+    onScrollRight?: ScrollHandler;
+    onScrollTop?: ScrollHandler;
+    onScrollBottom?: ScrollHandler;
+    CustomResourceHeader?: ComponentType;
+    CustomResourceCell?: ComponentType<CustomResourceCellProps>;
+    /** Extra style for the resource column header cell. */
+    configTableHeaderStyle?: CSSProperties;
+}
+declare function Scheduler(props: SchedulerProps): import("react").JSX.Element;
+export { AddMorePopover, CellUnit, DATE_FORMAT, DATETIME_FORMAT, DemoData, DnDContext, DnDSource, Scheduler, SchedulerData, SummaryPos, ViewType, wrapperFun, };