react-big-schedule 5.5.0 → 5.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -42,6 +42,7 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
|
|
|
42
42
|
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; }
|
|
43
43
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
44
44
|
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); }
|
|
45
|
+
var DEFAULT_ROW_HEIGHT = 50;
|
|
45
46
|
var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
|
|
46
47
|
function ResourceEvents(props) {
|
|
47
48
|
var _this;
|
|
@@ -151,8 +152,24 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
|
|
|
151
152
|
}
|
|
152
153
|
var currentY = clientY - pos.y;
|
|
153
154
|
var displayRenderData = _this.getDisplayRenderData();
|
|
155
|
+
if (displayRenderData.length === 0) {
|
|
156
|
+
_this.setState({
|
|
157
|
+
leftIndex: leftIndex,
|
|
158
|
+
left: left,
|
|
159
|
+
rightIndex: rightIndex,
|
|
160
|
+
width: width,
|
|
161
|
+
isSelecting: true,
|
|
162
|
+
startRowIndex: -1,
|
|
163
|
+
endRowIndex: -1
|
|
164
|
+
});
|
|
165
|
+
_this.emitSelectionChange(true, [], {
|
|
166
|
+
left: left,
|
|
167
|
+
width: width
|
|
168
|
+
});
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
154
171
|
var rowHeights = displayRenderData.map(function (row) {
|
|
155
|
-
return (row === null || row === void 0 ? void 0 : row.rowHeight) ||
|
|
172
|
+
return (row === null || row === void 0 ? void 0 : row.rowHeight) || DEFAULT_ROW_HEIGHT;
|
|
156
173
|
});
|
|
157
174
|
var startRowTop = rowHeights.slice(0, Math.max(0, originalStartRowIndex)).reduce(function (sum, h) {
|
|
158
175
|
return sum + h;
|
|
@@ -441,7 +458,10 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
|
|
|
441
458
|
value: function componentWillUnmount() {
|
|
442
459
|
this.cleanupDragInteraction();
|
|
443
460
|
this.supportTouchHelper('remove');
|
|
444
|
-
this.emitSelectionChange(false, []
|
|
461
|
+
this.emitSelectionChange(false, [], {
|
|
462
|
+
left: 0,
|
|
463
|
+
width: 0
|
|
464
|
+
});
|
|
445
465
|
}
|
|
446
466
|
}, {
|
|
447
467
|
key: "render",
|
|
@@ -644,7 +664,11 @@ _defineProperty(ResourceEvents, "propTypes", {
|
|
|
644
664
|
eventItemTemplateResolver: _propTypes.PropTypes.func,
|
|
645
665
|
onSelectionChange: _propTypes.PropTypes.func,
|
|
646
666
|
isRowSelected: _propTypes.PropTypes.bool,
|
|
647
|
-
selectionPreview: _propTypes.PropTypes.
|
|
667
|
+
selectionPreview: _propTypes.PropTypes.shape({
|
|
668
|
+
isSelecting: _propTypes.PropTypes.bool,
|
|
669
|
+
left: _propTypes.PropTypes.number,
|
|
670
|
+
width: _propTypes.PropTypes.number
|
|
671
|
+
})
|
|
648
672
|
});
|
|
649
673
|
var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
|
|
650
674
|
var schedulerData = props.schedulerData,
|
|
@@ -72,7 +72,8 @@ function ResourceView(_ref) {
|
|
|
72
72
|
var selectedBorderColor = schedulerData.config.selectedSlotBorderColor || '#1677ff';
|
|
73
73
|
var selectedShadowColor = schedulerData.config.selectedSlotShadowColor || '#91caff';
|
|
74
74
|
var selectedSlotColor = schedulerData.config.selectedSlotColor || '#e6f4ff';
|
|
75
|
-
var
|
|
75
|
+
var hasSelectedResourceId = selectedResourceIds instanceof Set ? selectedResourceIds.has(item.slotId) : Array.isArray(selectedResourceIds) && selectedResourceIds.includes(item.slotId);
|
|
76
|
+
var isRowSelected = isSelecting && hasSelectedResourceId;
|
|
76
77
|
if (isRowSelected) {
|
|
77
78
|
tdStyle.borderLeft = "3px solid ".concat(selectedBorderColor);
|
|
78
79
|
tdStyle.boxShadow = "inset 0 0 0 1px ".concat(selectedShadowColor);
|
|
@@ -82,6 +83,7 @@ function ResourceView(_ref) {
|
|
|
82
83
|
}
|
|
83
84
|
if (CustomResourceCell) {
|
|
84
85
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
|
|
86
|
+
"aria-selected": isRowSelected,
|
|
85
87
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
|
|
86
88
|
"data-resource-id": item.slotId,
|
|
87
89
|
style: tdStyle,
|
|
@@ -134,6 +136,7 @@ function ResourceView(_ref) {
|
|
|
134
136
|
}
|
|
135
137
|
}
|
|
136
138
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
|
|
139
|
+
"aria-selected": isRowSelected,
|
|
137
140
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
|
|
138
141
|
"data-resource-id": item.slotId,
|
|
139
142
|
style: tdStyle,
|
|
@@ -156,6 +159,8 @@ function ResourceView(_ref) {
|
|
|
156
159
|
},
|
|
157
160
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
|
|
158
161
|
className: "resource-table",
|
|
162
|
+
role: "grid",
|
|
163
|
+
"aria-multiselectable": "true",
|
|
159
164
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
|
|
160
165
|
children: resourceList
|
|
161
166
|
})
|
|
@@ -171,6 +176,6 @@ ResourceView.propTypes = {
|
|
|
171
176
|
toggleExpandFunc: _propTypes["default"].func,
|
|
172
177
|
CustomResourceCell: _propTypes["default"].func,
|
|
173
178
|
isSelecting: _propTypes["default"].bool,
|
|
174
|
-
selectedResourceIds: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]))
|
|
179
|
+
selectedResourceIds: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _propTypes["default"].instanceOf(Set)])
|
|
175
180
|
};
|
|
176
181
|
var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(ResourceView);
|
|
@@ -106,10 +106,11 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
|
|
|
106
106
|
if (this._batchCount > 0) {
|
|
107
107
|
this._batchCount -= 1;
|
|
108
108
|
if (this._batchCount === 0 && this._pendingVersion !== undefined) {
|
|
109
|
+
var pendingVersion = this._pendingVersion;
|
|
110
|
+
this._pendingVersion = undefined;
|
|
109
111
|
if (typeof this._versionChangeCallback === 'function') {
|
|
110
|
-
this._versionChangeCallback(
|
|
112
|
+
this._versionChangeCallback(pendingVersion);
|
|
111
113
|
}
|
|
112
|
-
this._pendingVersion = undefined;
|
|
113
114
|
}
|
|
114
115
|
}
|
|
115
116
|
}
|
|
@@ -305,9 +306,7 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
|
|
|
305
306
|
var isCustomView = viewType === _default.ViewType.Custom || viewType === _default.ViewType.Custom1 || viewType === _default.ViewType.Custom2;
|
|
306
307
|
|
|
307
308
|
// Force built-in views only; custom views can provide their own cellUnit via custom date behavior.
|
|
308
|
-
if (viewType
|
|
309
|
-
this.cellUnit = _default.CellUnit.Hour;
|
|
310
|
-
} else if (!isCustomView) {
|
|
309
|
+
if (!isCustomView && viewType !== _default.ViewType.Day) {
|
|
311
310
|
this.cellUnit = _default.CellUnit.Day;
|
|
312
311
|
}
|
|
313
312
|
|
package/dist/components/index.js
CHANGED
|
@@ -241,27 +241,16 @@ function Scheduler(props) {
|
|
|
241
241
|
var _useState11 = (0, _react.useState)(0),
|
|
242
242
|
_useState12 = _slicedToArray(_useState11, 2),
|
|
243
243
|
setRenderTrigger = _useState12[1];
|
|
244
|
-
|
|
245
|
-
// Callback ref pattern for ResizeObserver to handle parent element reassignment
|
|
246
|
-
var _useState13 = (0, _react.useState)(null),
|
|
247
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
248
|
-
parentEl = _useState14[0],
|
|
249
|
-
setParentEl = _useState14[1];
|
|
250
|
-
var setParentRef = (0, _react.useCallback)(function (el) {
|
|
251
|
-
if (parentRef) {
|
|
252
|
-
parentRef.current = el;
|
|
253
|
-
}
|
|
254
|
-
setParentEl(el);
|
|
255
|
-
}, [parentRef]);
|
|
244
|
+
var schedulerRootRef = (0, _react.useRef)(null);
|
|
256
245
|
|
|
257
246
|
// Layout/header refs - declare before setSchedulerHeaderRef useCallback
|
|
258
247
|
var schedulerHeaderRef = (0, _react.useRef)(null);
|
|
259
248
|
|
|
260
249
|
// Callback ref pattern for ResizeObserver to handle schedulerHeader element reassignment
|
|
261
|
-
var
|
|
262
|
-
|
|
263
|
-
schedulerHeaderEl =
|
|
264
|
-
setSchedulerHeaderEl =
|
|
250
|
+
var _useState13 = (0, _react.useState)(null),
|
|
251
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
252
|
+
schedulerHeaderEl = _useState14[0],
|
|
253
|
+
setSchedulerHeaderEl = _useState14[1];
|
|
265
254
|
var setSchedulerHeaderRef = (0, _react.useCallback)(function (el) {
|
|
266
255
|
schedulerHeaderRef.current = el;
|
|
267
256
|
setSchedulerHeaderEl(el);
|
|
@@ -297,13 +286,23 @@ function Scheduler(props) {
|
|
|
297
286
|
return undefined;
|
|
298
287
|
}, [schedulerData]);
|
|
299
288
|
var onWindowResize = (0, _react.useCallback)(function () {
|
|
300
|
-
schedulerData.
|
|
301
|
-
|
|
289
|
+
schedulerData.beginBatch();
|
|
290
|
+
try {
|
|
291
|
+
schedulerData._setDocumentWidth(document.documentElement.clientWidth);
|
|
292
|
+
schedulerData._setDocumentHeight(document.documentElement.clientHeight);
|
|
293
|
+
} finally {
|
|
294
|
+
schedulerData.endBatch();
|
|
295
|
+
}
|
|
302
296
|
}, [schedulerData]);
|
|
303
297
|
(0, _react.useEffect)(function () {
|
|
304
298
|
if (schedulerData.isSchedulerResponsive() && !schedulerData.config.responsiveByParent || parentRef === undefined) {
|
|
305
|
-
schedulerData.
|
|
306
|
-
|
|
299
|
+
schedulerData.beginBatch();
|
|
300
|
+
try {
|
|
301
|
+
schedulerData._setDocumentWidth(document.documentElement.clientWidth);
|
|
302
|
+
schedulerData._setDocumentHeight(document.documentElement.clientHeight);
|
|
303
|
+
} finally {
|
|
304
|
+
schedulerData.endBatch();
|
|
305
|
+
}
|
|
307
306
|
window.addEventListener('resize', onWindowResize);
|
|
308
307
|
return function () {
|
|
309
308
|
return window.removeEventListener('resize', onWindowResize);
|
|
@@ -311,19 +310,24 @@ function Scheduler(props) {
|
|
|
311
310
|
}
|
|
312
311
|
}, [schedulerData, parentRef, onWindowResize]);
|
|
313
312
|
(0, _react.useEffect)(function () {
|
|
313
|
+
var parentEl = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
|
|
314
314
|
if (parentRef !== undefined && schedulerData.config.responsiveByParent && !!parentEl) {
|
|
315
|
-
|
|
315
|
+
var updateParentSize = function updateParentSize() {
|
|
316
|
+
schedulerData.beginBatch();
|
|
317
|
+
try {
|
|
318
|
+
schedulerData._setDocumentWidth(parentEl.clientWidth);
|
|
319
|
+
schedulerData._setDocumentHeight(parentEl.clientHeight);
|
|
320
|
+
} finally {
|
|
321
|
+
schedulerData.endBatch();
|
|
322
|
+
}
|
|
323
|
+
};
|
|
324
|
+
updateParentSize();
|
|
316
325
|
|
|
317
326
|
// Disconnect any previous observer to prevent memory leaks
|
|
318
327
|
if (ulObserverRef.current) {
|
|
319
328
|
ulObserverRef.current.disconnect();
|
|
320
329
|
}
|
|
321
|
-
ulObserverRef.current = new ResizeObserver(
|
|
322
|
-
if (parentEl) {
|
|
323
|
-
schedulerData._setDocumentWidth(parentEl.offsetWidth);
|
|
324
|
-
schedulerData._setDocumentHeight(parentEl.offsetHeight);
|
|
325
|
-
}
|
|
326
|
-
});
|
|
330
|
+
ulObserverRef.current = new ResizeObserver(updateParentSize);
|
|
327
331
|
ulObserverRef.current.observe(parentEl);
|
|
328
332
|
return function () {
|
|
329
333
|
if (ulObserverRef.current) {
|
|
@@ -331,28 +335,29 @@ function Scheduler(props) {
|
|
|
331
335
|
}
|
|
332
336
|
};
|
|
333
337
|
}
|
|
334
|
-
}, [
|
|
338
|
+
}, [parentRef, schedulerData]);
|
|
335
339
|
(0, _react.useEffect)(function () {
|
|
336
340
|
if (schedulerData.config.responsiveByParent && !!schedulerHeaderEl) {
|
|
337
|
-
|
|
338
|
-
|
|
341
|
+
var updateHeaderHeight = function updateHeaderHeight(node) {
|
|
342
|
+
var rect = node.getBoundingClientRect();
|
|
343
|
+
var style = window.getComputedStyle(node);
|
|
344
|
+
var totalHeight = rect.height + (parseFloat(style.marginTop) || 0) + (parseFloat(style.marginBottom) || 0) + (schedulerData.config.showWeekNumber ? schedulerData.config.weekNumberRowHeight || 0 : 0);
|
|
345
|
+
schedulerData._setSchedulerHeaderHeight(totalHeight);
|
|
346
|
+
};
|
|
347
|
+
updateHeaderHeight(schedulerHeaderEl);
|
|
339
348
|
headerObserverRef.current = new ResizeObserver(function (entries) {
|
|
340
349
|
entries.forEach(function (entry) {
|
|
341
|
-
|
|
342
|
-
var rect = node.getBoundingClientRect();
|
|
343
|
-
var style = window.getComputedStyle(node);
|
|
344
|
-
var totalHeight = rect.height + (parseFloat(style.marginTop) || 0) + (parseFloat(style.marginBottom) || 0);
|
|
345
|
-
schedulerData._setSchedulerHeaderHeight(totalHeight);
|
|
350
|
+
return updateHeaderHeight(entry.target);
|
|
346
351
|
});
|
|
347
352
|
});
|
|
348
353
|
headerObserverRef.current.observe(schedulerHeaderEl);
|
|
349
354
|
return function () {
|
|
350
|
-
if (headerObserverRef.current
|
|
351
|
-
headerObserverRef.current.
|
|
355
|
+
if (headerObserverRef.current) {
|
|
356
|
+
headerObserverRef.current.disconnect();
|
|
352
357
|
}
|
|
353
358
|
};
|
|
354
359
|
}
|
|
355
|
-
}, [schedulerHeaderEl, schedulerData]);
|
|
360
|
+
}, [schedulerHeaderEl, schedulerData, schedulerData.config.showWeekNumber, schedulerData.config.weekNumberRowHeight]);
|
|
356
361
|
var resolveScrollbarSize = (0, _react.useCallback)(function () {
|
|
357
362
|
var prev = scrollbarSizeRef.current;
|
|
358
363
|
var newContentHeight = schedulerContentRef.current ? schedulerContentRef.current.offsetHeight - schedulerContentRef.current.clientHeight : 17;
|
|
@@ -795,7 +800,7 @@ function Scheduler(props) {
|
|
|
795
800
|
id: "rbs-root",
|
|
796
801
|
className: "rbs",
|
|
797
802
|
style: rootTableStyle,
|
|
798
|
-
ref:
|
|
803
|
+
ref: schedulerRootRef,
|
|
799
804
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
|
|
800
805
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
|
|
801
806
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
|
package/dist/helper/utility.js
CHANGED
|
@@ -3,7 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.getNextNumericEventId = getNextNumericEventId;
|
|
6
7
|
exports.getPos = getPos;
|
|
8
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
9
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
11
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
12
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
13
|
+
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; }
|
|
7
14
|
function getPos(element) {
|
|
8
15
|
var x = 0;
|
|
9
16
|
var y = 0;
|
|
@@ -17,4 +24,19 @@ function getPos(element) {
|
|
|
17
24
|
x: x,
|
|
18
25
|
y: y
|
|
19
26
|
};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Generates the next numeric event ID by finding the maximum numeric ID in the events array
|
|
31
|
+
* and incrementing it by 1. Filters out non-numeric and non-finite IDs.
|
|
32
|
+
* @param {Array} events - Array of event objects with id properties
|
|
33
|
+
* @returns {number} The next available numeric ID
|
|
34
|
+
*/
|
|
35
|
+
function getNextNumericEventId(events) {
|
|
36
|
+
var numericIds = events.map(function (event) {
|
|
37
|
+
return event.id;
|
|
38
|
+
}).filter(function (id) {
|
|
39
|
+
return typeof id === 'number' && Number.isFinite(id);
|
|
40
|
+
});
|
|
41
|
+
return Math.max.apply(Math, _toConsumableArray(numericIds).concat([0])) + 1;
|
|
20
42
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-big-schedule",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.1",
|
|
4
4
|
"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",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-big-schedule",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"@babel/cli": "^7.28.6",
|
|
80
80
|
"@babel/core": "^7.29.0",
|
|
81
81
|
"@babel/eslint-parser": "^7.28.6",
|
|
82
|
-
"@babel/preset-env": "^7.29.
|
|
82
|
+
"@babel/preset-env": "^7.29.5",
|
|
83
83
|
"@babel/preset-react": "^7.28.5",
|
|
84
84
|
"babel-loader": "^10.1.1",
|
|
85
85
|
"copy-webpack-plugin": "^14.0.0",
|