react-big-schedule 5.3.1 → 5.4.0

package/dist/components/ResourceView.js

@@ -13,13 +13,30 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * Render the scheduler's resource table with hierarchical indentation, optional expand/collapse controls,
+ * clickable slot names, and support for custom slot templates or an injected resource-cell renderer.
+ *
+ * @param {object} schedulerData - Scheduler state and helpers; must include `renderData`,
+ * `getResourceTableWidth`, and `config`.
+ * @param {number} contentScrollbarHeight - Height used to set the container's bottom padding.
+ * @param {Function} [slotClickedFunc] - Called as `slotClickedFunc(schedulerData, item)` when a slot name is clicked.
+ * @param {Function} [slotItemTemplateResolver] - Called as `slotItemTemplateResolver
+ * (schedulerData, item, slotClickedFunc, width, className)` to provide a custom slot cell element;
+ * if a value is returned it replaces the default slot cell.
+ * @param {Function} [toggleExpandFunc] - Called as `toggleExpandFunc(schedulerData, slotId)`
+ * to toggle expansion for items with children.
+ * @param {Function} [CustomResourceCell] - Optional React component rendered inside the resource
+ * `<td>` when provided; receives props `{ schedulerData, item, indents, slotClickedFunc, handleToggleExpand }`.
+ * @returns {JSX.Element} The rendered resource table element.
+ */
 function ResourceView(_ref) {
   var schedulerData = _ref.schedulerData,
     contentScrollbarHeight = _ref.contentScrollbarHeight,
     slotClickedFunc = _ref.slotClickedFunc,
     slotItemTemplateResolver = _ref.slotItemTemplateResolver,
-    toggleExpandFunc = _ref.toggleExpandFunc;
+    toggleExpandFunc = _ref.toggleExpandFunc,
+    CustomResourceCell = _ref.CustomResourceCell;
   var renderData = schedulerData.renderData;
   var width = schedulerData.getResourceTableWidth() - 2;
   var paddingBottom = contentScrollbarHeight;
@@ -44,6 +61,25 @@ function ResourceView(_ref) {
       indent = item.expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MinusSquareOutlined, _objectSpread({}, iconProps), "es".concat(item.indent)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusSquareOutlined, _objectSpread({}, iconProps), "es".concat(item.indent));
     }
     indents.push(indent);
+    var tdStyle = {
+      height: item.rowHeight,
+      backgroundColor: item.groupOnly ? schedulerData.config.groupOnlySlotColor : undefined
+    };
+    if (CustomResourceCell) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          "data-resource-id": item.slotId,
+          style: tdStyle,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomResourceCell, {
+            schedulerData: schedulerData,
+            item: item,
+            indents: indents,
+            slotClickedFunc: slotClickedFunc,
+            handleToggleExpand: handleToggleExpand
+          })
+        })
+      }, item.slotId);
+    }
     var slotCell = slotClickedFunc ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: "slot-cell",
       children: [indents, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -82,10 +118,6 @@ function ResourceView(_ref) {
         slotItem = resolvedTemplate;
       }
     }
-    var tdStyle = {
-      height: item.rowHeight,
-      backgroundColor: item.groupOnly ? schedulerData.config.groupOnlySlotColor : undefined
-    };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
         "data-resource-id": item.slotId,
@@ -120,6 +152,7 @@ ResourceView.propTypes = {
   contentScrollbarHeight: _propTypes["default"].number.isRequired,
   slotClickedFunc: _propTypes["default"].func,
   slotItemTemplateResolver: _propTypes["default"].func,
-  toggleExpandFunc: _propTypes["default"].func
+  toggleExpandFunc: _propTypes["default"].func,
+  CustomResourceCell: _propTypes["default"].func
 };
 var _default = exports["default"] = ResourceView;

package/dist/components/SchedulerData.js

@@ -846,54 +846,6 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
       }
       this.headers = headers;
     }
-
-    // Fix Optimited code
-    // _createHeaders() {
-    //   const headers = [];
-    //   const start = this.localeDayjs(new Date(this.startDate));
-    //   const end = this.localeDayjs(new Date(this.endDate));
-
-    //   const processHeader = (header, format, unit, incrementFn) => {
-    //     let head = header;
-    //     while (head >= start && head <= end) {
-    //       const time = head.format(format);
-    //       if (unit === CellUnit.Day) {
-    //         const dayOfWeek = head.weekday();
-    //         if (this.config.displayWeekend || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
-    //           const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-    //           headers.push({ time, nonWorkingTime });
-    //         }
-    //       } else {
-    //         headers.push({ time });
-    //       }
-    //       head = head.add(1, incrementFn);
-    //     }
-    //   };
-
-    //   if (this.showAgenda) {
-    //     headers.push({ time: start.format(DATETIME_FORMAT), nonWorkingTime: false });
-    //   } else if (this.cellUnit === CellUnit.Hour) {
-    //     const hourIncrement = this.config.minuteStep < 60 ? 'minutes' : 'hours';
-    //     const minuteSteps = this.getMinuteStepsInHour();
-    //     let header = start.hour() === 0 ? start.add(this.config.dayStartFrom, 'hours') : start;
-    //     while (header <= end) {
-    //       const hour = header.hour();
-    //       if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
-    //         const time = header.format(DATETIME_FORMAT);
-    //         const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-    //         headers.push({ time, nonWorkingTime });
-    //       }
-    //       header = header.add(minuteSteps, hourIncrement);
-    //     }
-    //   } else {
-    //     const header = start;
-    //     const format = this.cellUnit === CellUnit.Day ? DATETIME_FORMAT : DATE_FORMAT;
-    //     const incrementFn = this.cellUnit === CellUnit.Day ? 'days' : `${this.cellUnit}s`;
-    //     processHeader(header, format, this.cellUnit, incrementFn);
-    //   }
-
-    //   this.headers = headers;
-    // }
   }, {
     key: "_createInitHeaderEvents",
     value: function _createInitHeaderEvents(header) {

package/dist/components/index.js

@@ -103,14 +103,12 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } /**
- * Render a configurable scheduler UI with optional resource and agenda views,
- * responsive sizing, and drag-and-drop support.
+ * Render the scheduler UI with resource and agenda views, responsive sizing, and drag-and-drop support.
  *
  * @param {object} props - Component properties.
- * @param {SchedulerData} props.schedulerData - Core scheduler state and configuration used
- * to drive rendering and behavior.
- * @param {Array<DnDSource>} [props.dndSources] - Additional drag-and-drop sources to merge
- * into the scheduler's DnD context.
+ * @param {SchedulerData} props.schedulerData - Scheduler state and configuration used to drive rendering and behavior.
+ * @param {Array<DnDSource>} [props.dndSources] - Additional drag-and-drop sources to merge into the
+ * scheduler's DnD context.
  * @param {React.RefObject<HTMLElement>} [props.parentRef] - Parent element ref used when sizing
  * is driven by the parent container.
  * @param {function(SchedulerData):void} props.prevClick - Callback invoked to navigate to the previous range.
@@ -121,7 +119,10 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * @param {React.ReactNode} [props.leftCustomHeader] - Optional custom content rendered on the left side of the header.
  * @param {React.ReactNode} [props.rightCustomHeader] - Optional custom content rendered on the
  * right side of the header.
- * @returns {JSX.Element} The scheduler element tree to be rendered.
+ * @param {function} [props.CustomResourceHeader] - Optional component used to render the resource header cell.
+ * @param {object} [props.configTableHeaderStyle] - Optional inline style object applied
+ * to the resource header container.
+ * @returns {JSX.Element} The scheduler root element tree to be rendered.
  */
 function Scheduler(props) {
   var schedulerData = props.schedulerData,
@@ -132,7 +133,9 @@ function Scheduler(props) {
     onViewChange = props.onViewChange,
     onSelectDate = props.onSelectDate,
     leftCustomHeader = props.leftCustomHeader,
-    rightCustomHeader = props.rightCustomHeader;
+    rightCustomHeader = props.rightCustomHeader,
+    CustomResourceHeader = props.CustomResourceHeader,
+    configTableHeaderStyle = props.configTableHeaderStyle;
 
   // Initialize DnD context
   var initDndContext = function initDndContext() {
@@ -499,10 +502,10 @@ function Scheduler(props) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "resource-view",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: {
+            style: _objectSpread({
               borderBottom: "1px solid ".concat((_config$headerBorderC = config.headerBorderColor) !== null && _config$headerBorderC !== void 0 ? _config$headerBorderC : '#e9e9e9'),
               height: config.tableHeaderHeight + (showWeekNumber ? weekNumberRowHeight : 0)
-            },
+            }, configTableHeaderStyle),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               style: {
                 overflowX: 'scroll',
@@ -531,7 +534,7 @@ function Scheduler(props) {
                     },
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
                       className: "header3-text",
-                      children: resourceName
+                      children: CustomResourceHeader ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomResourceHeader, {}) : resourceName
                     })
                   })]
                 })
@@ -687,5 +690,8 @@ Scheduler.propTypes = {
   onScrollLeft: _propTypes["default"].func,
   onScrollRight: _propTypes["default"].func,
   onScrollTop: _propTypes["default"].func,
-  onScrollBottom: _propTypes["default"].func
+  onScrollBottom: _propTypes["default"].func,
+  CustomResourceHeader: _propTypes["default"].func,
+  CustomResourceCell: _propTypes["default"].func,
+  configTableHeaderStyle: _propTypes["default"].object
 };

package/dist/index.d.ts

@@ -119,6 +119,17 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
   rightCustomHeader?: React.ReactNode;
   dndSources?: DnDSource[];
   parentRef?: React.RefObject<any>;
+  CustomResourceHeader?: React.ComponentType<any>;
+  CustomResourceCell?: React.ComponentType<CustomResourceCellProps<EventType>>;
+  configTableHeaderStyle?: CSSProperties;
+}
+
+export interface CustomResourceCellProps<EventType extends EventItem = EventItem> {
+  schedulerData: SchedulerData<EventType>;
+  item: ResourceEvent<EventType>;
+  indents: React.ReactNode[];
+  slotClickedFunc?: (schedulerData: SchedulerData<EventType>, slot: ResourceEvent<EventType>) => void;
+  handleToggleExpand: (item: ResourceEvent<EventType>) => void;
 }
 
 export interface AddMorePopoverProps<EventType extends EventItem = EventItem> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",