makula-schedule 1.0.8 → 1.0.10

package/dist/components/ResourceView.js

@@ -19,7 +19,8 @@ function ResourceView(_ref) {
     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;
@@ -86,6 +87,23 @@ function ResourceView(_ref) {
       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,
+            toggleExpandFunc: function toggleExpandFunc() {
+              return handleToggleExpand(item);
+            }
+          })
+        })
+      }, item.slotId);
+    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
         "data-resource-id": item.slotId,
@@ -120,6 +138,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/index.js

@@ -114,7 +114,9 @@ function Scheduler(props) {
     leftCustomHeader = props.leftCustomHeader,
     rightCustomHeader = props.rightCustomHeader,
     showWeekNumber = props.showWeekNumber,
-    CustomResourceHeader = props.CustomResourceHeader;
+    CustomResourceHeader = props.CustomResourceHeader,
+    CustomResourceCell = props.CustomResourceCell,
+    configTableHeaderStyle = props.configTableHeaderStyle;
 
   // Initialize DnD context
   var initDndContext = function initDndContext() {
@@ -477,10 +479,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 #e9e9e9',
               height: showWeekNumber ? config.tableHeaderHeight + 24 : config.tableHeaderHeight
-            },
+            }, configTableHeaderStyle),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               style: {
                 overflowX: 'scroll',
@@ -525,7 +527,8 @@ function Scheduler(props) {
             onBlur: onSchedulerResourceMouseOut,
             onScroll: onSchedulerResourceScroll,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceView["default"], _objectSpread(_objectSpread({}, props), {}, {
-              contentScrollbarHeight: resourcePaddingBottom
+              contentScrollbarHeight: resourcePaddingBottom,
+              CustomResourceCell: CustomResourceCell
             }))
           })]
         })
@@ -671,5 +674,7 @@ Scheduler.propTypes = {
   onScrollTop: _propTypes["default"].func,
   onScrollBottom: _propTypes["default"].func,
   showWeekNumber: _propTypes["default"].bool,
-  CustomResourceHeader: _propTypes["default"].func
+  CustomResourceHeader: _propTypes["default"].func,
+  CustomResourceCell: _propTypes["default"].func,
+  configTableHeaderStyle: _propTypes["default"].object
 };

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import { ConfigType, Dayjs, OptionType } from 'dayjs';
 import React, { CSSProperties } from 'react';
 
-export class Scheduler<EventType extends EventItem = EventItem> extends React.Component<
-  SchedulerProps<EventType>,
-  any
-> {}
+export const Scheduler: <EventType extends EventItem = EventItem>(
+  props: SchedulerProps<EventType>
+) => React.ReactElement;
 
 export const AddMorePopover: <EventType extends EventItem = EventItem>(
   props: AddMorePopoverProps<EventType>
@@ -119,10 +118,20 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
   rightCustomHeader?: React.ReactNode;
   showWeekNumber?: boolean;
   CustomResourceHeader?: React.ComponentType;
+  CustomResourceCell?: React.ComponentType<CustomResourceCellProps>;
+  configTableHeaderStyle?: CSSProperties;
   dndSources?: DnDSource[];
   parentRef?: React.RefObject<any>;
 }
 
+export interface CustomResourceCellProps<EventType extends EventItem = EventItem> {
+  schedulerData: SchedulerData<EventType>;
+  item: ResourceEvent<EventType>;
+  indents: React.ReactNode[];
+  slotClickedFunc?: (schedulerData: SchedulerData<EventType>, slot: ResourceEvent<EventType>) => void;
+  toggleExpandFunc: () => void;
+}
+
 export interface AddMorePopoverProps<EventType extends EventItem = EventItem> {
   schedulerData: SchedulerData<EventType>;
   headerItem: HeaderItem<EventType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "makula-schedule",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "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",
@@ -62,7 +62,7 @@
     "prettier": "prettier --check \"src/**/*.{js,jsx,json,css}\"",
     "prettier:fix": "prettier --write \"src/**/*.{js,jsx,json,css}\"",
     "format": "npm run prettier:fix && npm run lint:fix",
-    "publish": "npm run build && npm run build:lib && npm publish"
+    "publish-package": "npm run build && npm run build:lib && npm publish"
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",