react-big-schedule 5.5.2-beta.2 → 5.5.2-beta.4
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.
- package/README.md +32 -16
- package/dist/components/BodyView.js +1 -1
- package/dist/components/DnDContext.js +3 -3
- package/dist/components/DnDSource.js +1 -1
- package/dist/components/EventItem.js +10 -3
- package/dist/components/HeaderView.js +6 -6
- package/dist/components/ResourceEvents.js +5 -4
- package/dist/components/ResourceView.js +2 -4
- package/dist/components/SchedulerData.js +6 -5
- package/dist/components/index.js +23 -11
- package/dist/css/style.css +4 -4
- package/dist/helper/behaviors.js +1 -1
- package/dist/index.d.ts +28 -23
- package/package.json +5 -17
package/README.md
CHANGED
|
@@ -22,10 +22,20 @@ Unlock the potential of your React projects with react-big-schedule and revoluti
|
|
|
22
22
|
|
|
23
23
|
## Installation
|
|
24
24
|
|
|
25
|
-
To install react-big-schedule, use
|
|
25
|
+
To install react-big-schedule, use your preferred package manager:
|
|
26
26
|
|
|
27
27
|
```bash
|
|
28
|
-
|
|
28
|
+
# npm
|
|
29
|
+
npm install react-big-schedule
|
|
30
|
+
|
|
31
|
+
# yarn
|
|
32
|
+
yarn add react-big-schedule
|
|
33
|
+
|
|
34
|
+
# pnpm
|
|
35
|
+
pnpm add react-big-schedule
|
|
36
|
+
|
|
37
|
+
# bun
|
|
38
|
+
bun add react-big-schedule
|
|
29
39
|
```
|
|
30
40
|
|
|
31
41
|
## Tech Stack
|
|
@@ -36,6 +46,7 @@ To install react-big-schedule, use npm:
|
|
|
36
46
|
- react-dnd-html5-backend
|
|
37
47
|
- webpack
|
|
38
48
|
- dayjs
|
|
49
|
+
- Biome (Linting & Formatting)
|
|
39
50
|
|
|
40
51
|
## Features
|
|
41
52
|
|
|
@@ -98,17 +109,21 @@ We are continuously working on enhancing react-big-schedule and welcome your fee
|
|
|
98
109
|
|
|
99
110
|
## Use and Setup
|
|
100
111
|
|
|
101
|
-
1.)
|
|
102
|
-
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
+
1.) To install react-big-schedule, use your preferred package manager:
|
|
113
|
+
|
|
114
|
+
```bash
|
|
115
|
+
# npm
|
|
116
|
+
npm install react-big-schedule
|
|
117
|
+
|
|
118
|
+
# yarn
|
|
119
|
+
yarn add react-big-schedule
|
|
120
|
+
|
|
121
|
+
# pnpm
|
|
122
|
+
pnpm add react-big-schedule
|
|
123
|
+
|
|
124
|
+
# bun
|
|
125
|
+
bun add react-big-schedule
|
|
126
|
+
```
|
|
112
127
|
|
|
113
128
|
2.) Import dependencies
|
|
114
129
|
|
|
@@ -198,11 +213,12 @@ schedulerData.setEvents([
|
|
|
198
213
|
### Run examples locally
|
|
199
214
|
|
|
200
215
|
- Clone this repository
|
|
201
|
-
- Retrieve dependencies: `npm install` or `
|
|
202
|
-
-
|
|
216
|
+
- Retrieve dependencies: `npm install` (or `yarn`, `pnpm`, `bun install`)
|
|
217
|
+
- Check & Fix: `npm run fix`
|
|
218
|
+
- Start: `npm run dev`
|
|
203
219
|
- Open [http://localhost:8080](http://localhost:8080).
|
|
204
220
|
|
|
205
|
-
If you fail to execute the
|
|
221
|
+
If you fail to execute the installation command, remove the lock file (e.g., `package-lock.json`, `bun.lockb`) and try again.
|
|
206
222
|
|
|
207
223
|
# API
|
|
208
224
|
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
11
|
function BodyView(_ref) {
|
|
@@ -143,13 +143,13 @@ var DnDContext = exports["default"] = /*#__PURE__*/_createClass(function DnDCont
|
|
|
143
143
|
var spec = _this.getDropSpec();
|
|
144
144
|
return {
|
|
145
145
|
accept: _toConsumableArray(_this.sourceMap.keys()),
|
|
146
|
-
drop: function drop(
|
|
146
|
+
drop: function drop(_item, monitor) {
|
|
147
147
|
return spec.drop(props, monitor, component);
|
|
148
148
|
},
|
|
149
|
-
hover: function hover(
|
|
149
|
+
hover: function hover(_item, monitor) {
|
|
150
150
|
return spec.hover(props, monitor, component);
|
|
151
151
|
},
|
|
152
|
-
canDrop: function canDrop(
|
|
152
|
+
canDrop: function canDrop(_item, monitor) {
|
|
153
153
|
return spec.canDrop(props, monitor);
|
|
154
154
|
},
|
|
155
155
|
collect: function collect(monitor) {
|
|
@@ -106,7 +106,7 @@ var DnDSource = exports["default"] = /*#__PURE__*/_createClass(function DnDSourc
|
|
|
106
106
|
item: function item() {
|
|
107
107
|
return spec.beginDrag(props);
|
|
108
108
|
},
|
|
109
|
-
end: function end(
|
|
109
|
+
end: function end(_item, monitor) {
|
|
110
110
|
return spec.endDrag(props, monitor);
|
|
111
111
|
},
|
|
112
112
|
canDrag: function canDrag() {
|
|
@@ -119,7 +119,7 @@ var EventItem = /*#__PURE__*/function (_Component) {
|
|
|
119
119
|
eventItem = _this$props2.eventItem;
|
|
120
120
|
var slotId = schedulerData._getEventSlotId(eventItem);
|
|
121
121
|
var slot = schedulerData.getSlotById(slotId);
|
|
122
|
-
if (
|
|
122
|
+
if (slot !== null && slot !== void 0 && slot.groupOnly) return;
|
|
123
123
|
if (schedulerData._isResizing()) return;
|
|
124
124
|
ev.stopPropagation();
|
|
125
125
|
var clientX = 0;
|
|
@@ -616,14 +616,21 @@ var EventItem = /*#__PURE__*/function (_Component) {
|
|
|
616
616
|
if (eventItemTemplateResolver !== undefined) {
|
|
617
617
|
eventItemTemplate = eventItemTemplateResolver(schedulerData, eventItem, bgColor, isStart, isEnd, 'event-item', config.eventItemHeight, undefined);
|
|
618
618
|
}
|
|
619
|
-
var a = /*#__PURE__*/(0, _jsxRuntime.jsxs)("
|
|
619
|
+
var a = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
|
|
620
|
+
type: "button",
|
|
620
621
|
className: "timeline-event",
|
|
621
622
|
ref: this.eventItemRef,
|
|
622
623
|
onMouseMove: isPopoverPlacementMousePosition ? this.handleMouseMove : undefined,
|
|
623
624
|
style: {
|
|
624
625
|
left: left,
|
|
625
626
|
width: width,
|
|
626
|
-
top: top
|
|
627
|
+
top: top,
|
|
628
|
+
cursor: 'pointer',
|
|
629
|
+
background: 'none',
|
|
630
|
+
border: 'none',
|
|
631
|
+
padding: 0,
|
|
632
|
+
display: 'block',
|
|
633
|
+
textAlign: 'left'
|
|
627
634
|
},
|
|
628
635
|
onClick: function onClick() {
|
|
629
636
|
if (eventItemClick) eventItemClick(schedulerData, eventItem);
|
|
@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _default2 = require("../config/default");
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
11
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
13
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
14
14
|
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; }
|
|
15
15
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
@@ -80,12 +80,12 @@ function HeaderView(_ref) {
|
|
|
80
80
|
padding: '4px 8px',
|
|
81
81
|
textAlign: 'center'
|
|
82
82
|
};
|
|
83
|
-
return weekGroups.map(function (group
|
|
83
|
+
return weekGroups.map(function (group) {
|
|
84
84
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
|
|
85
85
|
colSpan: group.colspan,
|
|
86
86
|
style: cellStyle,
|
|
87
87
|
children: ["W", group.week]
|
|
88
|
-
}, "week-".concat(group.year, "-").concat(group.week
|
|
88
|
+
}, "week-".concat(group.year, "-").concat(group.week));
|
|
89
89
|
});
|
|
90
90
|
}, [showWeekNumber, headers, localeDayjs, config.headerBorderColor]);
|
|
91
91
|
|
|
@@ -117,10 +117,10 @@ function HeaderView(_ref) {
|
|
|
117
117
|
if (typeof nonAgendaCellHeaderTemplateResolver === 'function') {
|
|
118
118
|
return nonAgendaCellHeaderTemplateResolver(schedulerData, item, formattedList, style);
|
|
119
119
|
}
|
|
120
|
-
var content = formattedList.map(function (text
|
|
120
|
+
var content = formattedList.map(function (text) {
|
|
121
121
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
122
122
|
children: text
|
|
123
|
-
}, "".concat(item.time, "-").concat(
|
|
123
|
+
}, "".concat(item.time, "-").concat(text));
|
|
124
124
|
});
|
|
125
125
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
|
|
126
126
|
className: "header3-text",
|
|
@@ -605,7 +605,7 @@ var ResourceEvents = /*#__PURE__*/function (_PureComponent) {
|
|
|
605
605
|
width: _width2,
|
|
606
606
|
top: top,
|
|
607
607
|
clickAction: _this2.onAddMoreClick
|
|
608
|
-
});
|
|
608
|
+
}, "add-more-".concat(headerItem.time));
|
|
609
609
|
eventList.push(addMoreItem);
|
|
610
610
|
}
|
|
611
611
|
if (headerItem.summary !== undefined) {
|
|
@@ -680,6 +680,7 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
|
|
|
680
680
|
// Keep propsRef up to date
|
|
681
681
|
_react["default"].useEffect(function () {
|
|
682
682
|
propsRef.current = props;
|
|
683
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: propsRef is intended to always hold the latest props
|
|
683
684
|
}, [props]);
|
|
684
685
|
|
|
685
686
|
// Always call useDrop unconditionally (Rules of Hooks)
|
|
@@ -700,13 +701,13 @@ var ResourceEventsWithDnD = function ResourceEventsWithDnD(props) {
|
|
|
700
701
|
var spec = dndContext.getDropSpec();
|
|
701
702
|
return {
|
|
702
703
|
accept: _toConsumableArray(dndContext.sourceMap.keys()),
|
|
703
|
-
drop: function drop(
|
|
704
|
+
drop: function drop(_item, monitor) {
|
|
704
705
|
return spec.drop(propsRef.current, monitor, componentRef.current);
|
|
705
706
|
},
|
|
706
|
-
hover: function hover(
|
|
707
|
+
hover: function hover(_item, monitor) {
|
|
707
708
|
return spec.hover(propsRef.current, monitor, componentRef.current);
|
|
708
709
|
},
|
|
709
|
-
canDrop: function canDrop(
|
|
710
|
+
canDrop: function canDrop(_item, monitor) {
|
|
710
711
|
return spec.canDrop(propsRef.current, monitor);
|
|
711
712
|
},
|
|
712
713
|
collect: function collect(monitor) {
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _icons = require("@ant-design/icons");
|
|
9
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
12
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
@@ -153,14 +153,12 @@ function ResourceView(_ref) {
|
|
|
153
153
|
}
|
|
154
154
|
return renderSlotItem(item, indents);
|
|
155
155
|
});
|
|
156
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
156
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
|
|
157
157
|
style: {
|
|
158
158
|
paddingBottom: paddingBottom
|
|
159
159
|
},
|
|
160
160
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
|
|
161
161
|
className: "resource-table",
|
|
162
|
-
role: "grid",
|
|
163
|
-
"aria-multiselectable": "true",
|
|
164
162
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
|
|
165
163
|
children: resourceList
|
|
166
164
|
})
|
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
8
|
+
var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
|
|
8
9
|
var _quarterOfYear = _interopRequireDefault(require("dayjs/plugin/quarterOfYear"));
|
|
9
10
|
var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
|
|
10
11
|
var _weekday = _interopRequireDefault(require("dayjs/plugin/weekday"));
|
|
11
|
-
var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
|
|
12
12
|
var _rrule = require("rrule");
|
|
13
13
|
var _default = require("../config/default");
|
|
14
|
-
var _scheduler = _interopRequireDefault(require("../config/scheduler"));
|
|
15
14
|
var _i18n = require("../config/i18n");
|
|
15
|
+
var _scheduler = _interopRequireDefault(require("../config/scheduler"));
|
|
16
16
|
var _behaviors = _interopRequireDefault(require("../helper/behaviors"));
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
18
18
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
@@ -451,11 +451,12 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
|
|
|
451
451
|
}, {
|
|
452
452
|
key: "getSchedulerHeight",
|
|
453
453
|
value: function getSchedulerHeight() {
|
|
454
|
+
var _this$config$schedule, _this$config$schedule2;
|
|
454
455
|
// Use the header height tracked in SchedulerData (set via _setSchedulerHeaderHeight)
|
|
455
456
|
var headerHeight = this.schedulerHeaderHeight || 0;
|
|
456
457
|
var baseHeight = this.documentHeight - headerHeight - this.config.tableHeaderHeight - (this.config.underneathHeight || 0);
|
|
457
458
|
var validBaseHeight = baseHeight > 0 ? baseHeight : 0;
|
|
458
|
-
if (this.isSchedulerResponsive() && this.config.schedulerHeight &&
|
|
459
|
+
if (this.isSchedulerResponsive() && (_this$config$schedule = this.config.schedulerHeight) !== null && _this$config$schedule !== void 0 && (_this$config$schedule2 = _this$config$schedule.endsWith) !== null && _this$config$schedule2 !== void 0 && _this$config$schedule2.call(_this$config$schedule, '%')) {
|
|
459
460
|
return parseInt(validBaseHeight * Number(this.config.schedulerHeight.slice(0, -1)) / 100, 10);
|
|
460
461
|
}
|
|
461
462
|
// fallback to max height if set, else just use base height
|
|
@@ -1347,10 +1348,10 @@ var SchedulerData = exports["default"] = /*#__PURE__*/function () {
|
|
|
1347
1348
|
if (_this6.behaviors.getSummaryFunc !== undefined) {
|
|
1348
1349
|
var events = [];
|
|
1349
1350
|
headerItem.events.forEach(function (e) {
|
|
1350
|
-
if (
|
|
1351
|
+
if (e !== null && e !== void 0 && e.eventItem) events.push(e.eventItem);
|
|
1351
1352
|
});
|
|
1352
1353
|
headerItem.summary = _this6.behaviors.getSummaryFunc(_this6, events, resourceEvents.slotId, resourceEvents.slotName, headerItem.start, headerItem.end);
|
|
1353
|
-
if (
|
|
1354
|
+
if (headerItem.summary && headerItem.summary.text !== undefined) hasSummary = true;
|
|
1354
1355
|
}
|
|
1355
1356
|
});
|
|
1356
1357
|
resourceEvents.hasSummary = hasSummary;
|
package/dist/components/index.js
CHANGED
|
@@ -93,6 +93,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
93
93
|
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; }
|
|
94
94
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
95
95
|
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); }
|
|
96
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
96
97
|
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
97
98
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
98
99
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
@@ -311,7 +312,7 @@ function Scheduler(props) {
|
|
|
311
312
|
}, [schedulerData, parentRef, onWindowResize]);
|
|
312
313
|
(0, _react.useEffect)(function () {
|
|
313
314
|
var parentEl = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
|
|
314
|
-
if (parentRef !== undefined && schedulerData.config.responsiveByParent &&
|
|
315
|
+
if (parentRef !== undefined && schedulerData.config.responsiveByParent && parentEl) {
|
|
315
316
|
var updateParentSize = function updateParentSize() {
|
|
316
317
|
schedulerData.beginBatch();
|
|
317
318
|
try {
|
|
@@ -337,7 +338,7 @@ function Scheduler(props) {
|
|
|
337
338
|
}
|
|
338
339
|
}, [parentRef, schedulerData]);
|
|
339
340
|
(0, _react.useEffect)(function () {
|
|
340
|
-
if (schedulerData.config.responsiveByParent &&
|
|
341
|
+
if (schedulerData.config.responsiveByParent && schedulerHeaderEl) {
|
|
341
342
|
var updateHeaderHeight = function updateHeaderHeight(node) {
|
|
342
343
|
var rect = node.getBoundingClientRect();
|
|
343
344
|
var style = window.getComputedStyle(node);
|
|
@@ -346,9 +347,18 @@ function Scheduler(props) {
|
|
|
346
347
|
};
|
|
347
348
|
updateHeaderHeight(schedulerHeaderEl);
|
|
348
349
|
headerObserverRef.current = new ResizeObserver(function (entries) {
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
350
|
+
var _iterator = _createForOfIteratorHelper(entries),
|
|
351
|
+
_step;
|
|
352
|
+
try {
|
|
353
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
354
|
+
var entry = _step.value;
|
|
355
|
+
updateHeaderHeight(entry.target);
|
|
356
|
+
}
|
|
357
|
+
} catch (err) {
|
|
358
|
+
_iterator.e(err);
|
|
359
|
+
} finally {
|
|
360
|
+
_iterator.f();
|
|
361
|
+
}
|
|
352
362
|
});
|
|
353
363
|
headerObserverRef.current.observe(schedulerHeaderEl);
|
|
354
364
|
return function () {
|
|
@@ -385,8 +395,8 @@ function Scheduler(props) {
|
|
|
385
395
|
resolveScrollbarSize();
|
|
386
396
|
var localeDayjs = schedulerData.localeDayjs,
|
|
387
397
|
behaviors = schedulerData.behaviors;
|
|
388
|
-
if (schedulerData.getScrollToSpecialDayjs() &&
|
|
389
|
-
if (
|
|
398
|
+
if (schedulerData.getScrollToSpecialDayjs() && behaviors.getScrollSpecialDayjsFunc) {
|
|
399
|
+
if (schedulerContentRef.current && schedulerContentRef.current.scrollWidth > schedulerContentRef.current.clientWidth) {
|
|
390
400
|
var start = localeDayjs(new Date(schedulerData.startDate)).startOf('day');
|
|
391
401
|
var end = localeDayjs(new Date(schedulerData.endDate)).endOf('day');
|
|
392
402
|
var specialDayjs = behaviors.getScrollSpecialDayjsFunc(schedulerData, start, end);
|
|
@@ -688,7 +698,7 @@ function Scheduler(props) {
|
|
|
688
698
|
})
|
|
689
699
|
})
|
|
690
700
|
})
|
|
691
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
701
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
|
|
692
702
|
style: resourceContentStyle,
|
|
693
703
|
ref: schedulerResourceRef,
|
|
694
704
|
onMouseOver: onSchedulerResourceMouseOver,
|
|
@@ -696,6 +706,7 @@ function Scheduler(props) {
|
|
|
696
706
|
onMouseOut: onSchedulerResourceMouseOut,
|
|
697
707
|
onBlur: onSchedulerResourceMouseOut,
|
|
698
708
|
onScroll: onSchedulerResourceScroll,
|
|
709
|
+
"aria-label": "Resource sidebar",
|
|
699
710
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceView["default"], {
|
|
700
711
|
schedulerData: schedulerData,
|
|
701
712
|
schedulerDataVersion: schedulerDataVersion,
|
|
@@ -715,7 +726,7 @@ function Scheduler(props) {
|
|
|
715
726
|
style: schedulerViewStyle,
|
|
716
727
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
717
728
|
style: schedulerHeadWrapperStyle,
|
|
718
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
729
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
|
|
719
730
|
style: schedulerHeadScrollStyle,
|
|
720
731
|
ref: schedulerHeadRef,
|
|
721
732
|
onMouseOver: onSchedulerHeadMouseOver,
|
|
@@ -736,7 +747,7 @@ function Scheduler(props) {
|
|
|
736
747
|
})
|
|
737
748
|
})
|
|
738
749
|
})
|
|
739
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
750
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
|
|
740
751
|
style: schedulerContentStyle,
|
|
741
752
|
ref: schedulerContentRef,
|
|
742
753
|
onMouseOver: onSchedulerContentMouseOver,
|
|
@@ -744,6 +755,7 @@ function Scheduler(props) {
|
|
|
744
755
|
onMouseOut: onSchedulerContentMouseOut,
|
|
745
756
|
onBlur: onSchedulerContentMouseOut,
|
|
746
757
|
onScroll: onSchedulerContentScroll,
|
|
758
|
+
"aria-label": "Scheduler content",
|
|
747
759
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
748
760
|
style: schedulerInnerStyle,
|
|
749
761
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -790,7 +802,7 @@ function Scheduler(props) {
|
|
|
790
802
|
rightCustomHeader: rightCustomHeader,
|
|
791
803
|
leftCustomHeader: leftCustomHeader
|
|
792
804
|
});
|
|
793
|
-
}, [schedulerHeaderStyle, handleViewChange, schedulerData, onSelect, goNext, goBack, rightCustomHeader, leftCustomHeader]);
|
|
805
|
+
}, [schedulerHeaderStyle, handleViewChange, schedulerData, onSelect, goNext, goBack, rightCustomHeader, leftCustomHeader, setSchedulerHeaderRef]);
|
|
794
806
|
var rootTableStyle = (0, _react.useMemo)(function () {
|
|
795
807
|
return {
|
|
796
808
|
width: "".concat(width, "px")
|
package/dist/css/style.css
CHANGED
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
text-overflow: ellipsis;
|
|
163
163
|
white-space: nowrap;
|
|
164
164
|
color: #fff;
|
|
165
|
-
padding-right: 20px
|
|
165
|
+
padding-right: 20px;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
/* Rounded Borders */
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
overflow: hidden;
|
|
188
188
|
text-overflow: ellipsis;
|
|
189
189
|
white-space: nowrap;
|
|
190
|
-
padding-right: 5px
|
|
190
|
+
padding-right: 5px;
|
|
191
191
|
}
|
|
192
192
|
|
|
193
193
|
.rbs .status-dot {
|
|
@@ -224,8 +224,8 @@
|
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
.rbs .icon-nav:hover {
|
|
227
|
-
color: #1e90ff
|
|
228
|
-
box-shadow: 0 0 0
|
|
227
|
+
color: #1e90ff;
|
|
228
|
+
box-shadow: 0 0 0;
|
|
229
229
|
cursor: pointer;
|
|
230
230
|
}
|
|
231
231
|
|
package/dist/helper/behaviors.js
CHANGED
|
@@ -40,7 +40,7 @@ var getCustomDate = exports.getCustomDate = function getCustomDate(schedulerData
|
|
|
40
40
|
cellUnit: cellUnit
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
var getNonAgendaViewBodyCellBgColor = exports.getNonAgendaViewBodyCellBgColor = function getNonAgendaViewBodyCellBgColor(
|
|
43
|
+
var getNonAgendaViewBodyCellBgColor = exports.getNonAgendaViewBodyCellBgColor = function getNonAgendaViewBodyCellBgColor(_schedulerData, _slotId, header) {
|
|
44
44
|
return header.nonWorkingTime ? undefined : '#87e8de';
|
|
45
45
|
};
|
|
46
46
|
var getDateLabel = exports.getDateLabel = function getDateLabel(schedulerData, viewType, startDate, endDate) {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { ConfigType, Dayjs, OptionType } from 'dayjs';
|
|
2
|
-
import React, { CSSProperties } from 'react';
|
|
1
|
+
import type { ConfigType, Dayjs, OptionType } from 'dayjs';
|
|
2
|
+
import React, { type CSSProperties } from 'react';
|
|
3
3
|
|
|
4
4
|
export class Scheduler<EventType extends EventItem = EventItem> extends React.Component<
|
|
5
5
|
SchedulerProps<EventType>,
|
|
6
|
+
// biome-ignore lint/suspicious/noExplicitAny: legacy any usage
|
|
6
7
|
any
|
|
7
8
|
> {}
|
|
8
9
|
|
|
9
|
-
export
|
|
10
|
-
props: AddMorePopoverProps<EventType
|
|
11
|
-
)
|
|
10
|
+
export function AddMorePopover<EventType extends EventItem = EventItem>(
|
|
11
|
+
props: AddMorePopoverProps<EventType>,
|
|
12
|
+
): React.ReactElement;
|
|
12
13
|
|
|
13
14
|
export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
14
15
|
schedulerData: SchedulerData<EventType>;
|
|
@@ -25,7 +26,7 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
25
26
|
isEnd: boolean,
|
|
26
27
|
mustAddCssClass: string,
|
|
27
28
|
mustBeHeight: number,
|
|
28
|
-
agendaMaxEventWidth: number
|
|
29
|
+
agendaMaxEventWidth: number,
|
|
29
30
|
) => void;
|
|
30
31
|
eventItemPopoverTemplateResolver?: (
|
|
31
32
|
schedulerData: SchedulerData<EventType>,
|
|
@@ -33,7 +34,7 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
33
34
|
title: string,
|
|
34
35
|
start: Dayjs,
|
|
35
36
|
end: Dayjs,
|
|
36
|
-
statusColor: string
|
|
37
|
+
statusColor: string,
|
|
37
38
|
) => void;
|
|
38
39
|
toggleExpandFunc?: (schedulerData: SchedulerData<EventType>, slotId: string) => void;
|
|
39
40
|
viewEventClick?: (schedulerData: SchedulerData<EventType>, event: EventType) => void;
|
|
@@ -48,7 +49,7 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
48
49
|
slotId: string,
|
|
49
50
|
slotName: string,
|
|
50
51
|
start: string,
|
|
51
|
-
end: string
|
|
52
|
+
end: string,
|
|
52
53
|
) => void;
|
|
53
54
|
newEvent?: (
|
|
54
55
|
schedulerData: SchedulerData<EventType>,
|
|
@@ -57,27 +58,27 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
57
58
|
start: string,
|
|
58
59
|
end: string,
|
|
59
60
|
type: string,
|
|
60
|
-
item: EventType
|
|
61
|
+
item: EventType,
|
|
61
62
|
) => void;
|
|
62
63
|
onScrollLeft?: (
|
|
63
64
|
schedulerData: SchedulerData<EventType>,
|
|
64
65
|
schedulerContent: React.ReactNode,
|
|
65
|
-
maxScrollLeft: number
|
|
66
|
+
maxScrollLeft: number,
|
|
66
67
|
) => void;
|
|
67
68
|
onScrollRight?: (
|
|
68
69
|
schedulerData: SchedulerData<EventType>,
|
|
69
70
|
schedulerContent: React.ReactNode,
|
|
70
|
-
maxScrollLeft: number
|
|
71
|
+
maxScrollLeft: number,
|
|
71
72
|
) => void;
|
|
72
73
|
onScrollTop?: (
|
|
73
74
|
schedulerData: SchedulerData<EventType>,
|
|
74
75
|
schedulerContent: React.ReactNode,
|
|
75
|
-
maxScrollTop: number
|
|
76
|
+
maxScrollTop: number,
|
|
76
77
|
) => void;
|
|
77
78
|
onScrollBottom?: (
|
|
78
79
|
schedulerData: SchedulerData<EventType>,
|
|
79
80
|
schedulerContent: React.ReactNode,
|
|
80
|
-
maxScrollTop: number
|
|
81
|
+
maxScrollTop: number,
|
|
81
82
|
) => void;
|
|
82
83
|
onSetAddMoreState?: (newState: State<EventType>) => void;
|
|
83
84
|
conflictOccurred?: (
|
|
@@ -88,13 +89,13 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
88
89
|
slotId: string,
|
|
89
90
|
slotName: string,
|
|
90
91
|
newStart: string,
|
|
91
|
-
newEnd: string
|
|
92
|
+
newEnd: string,
|
|
92
93
|
) => void;
|
|
93
94
|
nonAgendaCellHeaderTemplateResolver?: (
|
|
94
95
|
schedulerData: SchedulerData<EventType>,
|
|
95
96
|
item: { time: string; nonWorkingTime: boolean },
|
|
96
97
|
formattedDateItems: string[],
|
|
97
|
-
style: CSSProperties
|
|
98
|
+
style: CSSProperties,
|
|
98
99
|
) => void;
|
|
99
100
|
subtitleGetter?: (schedulerData: SchedulerData<EventType>, event: EventType) => void;
|
|
100
101
|
movingEvent?: (
|
|
@@ -105,7 +106,7 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
105
106
|
newEnd: string,
|
|
106
107
|
action: string,
|
|
107
108
|
type: string,
|
|
108
|
-
item: EventType
|
|
109
|
+
item: EventType,
|
|
109
110
|
) => void;
|
|
110
111
|
slotClickedFunc?: (schedulerData: SchedulerData<EventType>, slot: ResourceEvent<EventType>) => void;
|
|
111
112
|
slotItemTemplateResolver?: (
|
|
@@ -113,12 +114,14 @@ export interface SchedulerProps<EventType extends EventItem = EventItem> {
|
|
|
113
114
|
slot: ResourceEvent<EventType>,
|
|
114
115
|
slotClickedFunc: (schedulerData: SchedulerData<EventType>, slot: ResourceEvent<EventType>) => void,
|
|
115
116
|
width: number,
|
|
116
|
-
clsName: string
|
|
117
|
+
clsName: string,
|
|
117
118
|
) => void;
|
|
118
119
|
leftCustomHeader?: React.ReactNode;
|
|
119
120
|
rightCustomHeader?: React.ReactNode;
|
|
120
121
|
dndSources?: DnDSource[];
|
|
122
|
+
// biome-ignore lint/suspicious/noExplicitAny: legacy any usage
|
|
121
123
|
parentRef?: React.RefObject<any>;
|
|
124
|
+
// biome-ignore lint/suspicious/noExplicitAny: legacy any usage
|
|
122
125
|
CustomResourceHeader?: React.ComponentType<any>;
|
|
123
126
|
CustomResourceCell?: React.ComponentType<CustomResourceCellProps<EventType>>;
|
|
124
127
|
configTableHeaderStyle?: CSSProperties;
|
|
@@ -175,7 +178,7 @@ export class SchedulerData<EventType extends EventItem = EventItem> {
|
|
|
175
178
|
showAgenda?: boolean,
|
|
176
179
|
isEventPerspective?: boolean,
|
|
177
180
|
newConfig?: SchedulerDataConfig,
|
|
178
|
-
newBehaviours?: SchedulerDataBehaviors<EventType
|
|
181
|
+
newBehaviours?: SchedulerDataBehaviors<EventType>,
|
|
179
182
|
);
|
|
180
183
|
|
|
181
184
|
setSchedulerLocale(preset: string | ILocale, object?: Partial<ILocale>): void;
|
|
@@ -204,7 +207,7 @@ export class SchedulerData<EventType extends EventItem = EventItem> {
|
|
|
204
207
|
eventStart: Date | Dayjs,
|
|
205
208
|
eventEnd: Date | Dayjs,
|
|
206
209
|
windowStart: Date | Dayjs,
|
|
207
|
-
windowEnd: Date | Dayjs
|
|
210
|
+
windowEnd: Date | Dayjs,
|
|
208
211
|
): boolean;
|
|
209
212
|
addEvent(newEvent: EventType): void;
|
|
210
213
|
getResourceById(resourceId: string): ResourceEvent<EventType>;
|
|
@@ -218,6 +221,8 @@ export class DnDContext {
|
|
|
218
221
|
}
|
|
219
222
|
|
|
220
223
|
export class DnDSource {
|
|
224
|
+
// biome-ignore lint/complexity/noBannedTypes: legacy {} usage
|
|
225
|
+
// biome-ignore lint/suspicious/noExplicitAny: legacy any usage
|
|
221
226
|
constructor(resolveDragObjFunc: (props: {}) => any, dragAnDropEnabled: boolean, dndType?: string);
|
|
222
227
|
}
|
|
223
228
|
|
|
@@ -427,14 +432,14 @@ export interface SchedulerDataBehaviors<EventType extends EventItem = EventItem>
|
|
|
427
432
|
getCustomDateFunc?: (
|
|
428
433
|
schedulerData: SchedulerData<EventType>,
|
|
429
434
|
num: number,
|
|
430
|
-
date?: string | Dayjs
|
|
435
|
+
date?: string | Dayjs,
|
|
431
436
|
) => { startDate: string | Dayjs; endDate: string | Dayjs; cellUnit: CellUnit };
|
|
432
437
|
getEventTextFunc?: (schedulerData: SchedulerData<EventType>, event: EventType) => string;
|
|
433
438
|
getDateLabel?: (
|
|
434
439
|
schedulerData: SchedulerData<EventType>,
|
|
435
440
|
viewType: ViewType,
|
|
436
441
|
startDate: string | Date,
|
|
437
|
-
endDate: string | Date
|
|
442
|
+
endDate: string | Date,
|
|
438
443
|
) => string;
|
|
439
444
|
getScrollSpecialDayjs?: (schedulerData: SchedulerData<EventType>, startDayjs: Dayjs, endDays: Dayjs) => Dayjs;
|
|
440
445
|
getSummaryFunc?: (
|
|
@@ -443,12 +448,12 @@ export interface SchedulerDataBehaviors<EventType extends EventItem = EventItem>
|
|
|
443
448
|
slotId: string,
|
|
444
449
|
slotName: string,
|
|
445
450
|
headerStart: string,
|
|
446
|
-
headerEnd: string
|
|
451
|
+
headerEnd: string,
|
|
447
452
|
) => { text: string; color: string; fontSize: string };
|
|
448
453
|
getNonAgendaViewBodyCellBgColorFunc?: (
|
|
449
454
|
schedulerData: SchedulerData<EventType>,
|
|
450
455
|
slotId: string,
|
|
451
|
-
header: { nonWorkingTime: boolean; time: string }
|
|
456
|
+
header: { nonWorkingTime: boolean; time: string },
|
|
452
457
|
) => string;
|
|
453
458
|
}
|
|
454
459
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-big-schedule",
|
|
3
|
-
"version": "5.5.2-beta.
|
|
3
|
+
"version": "5.5.2-beta.4",
|
|
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",
|
|
@@ -57,15 +57,12 @@
|
|
|
57
57
|
"build": "webpack --mode production",
|
|
58
58
|
"build:lib": "node scripts/build.js",
|
|
59
59
|
"clean": "npx rimraf dist",
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"prettier": "prettier --check \"src/**/*.{js,jsx,json,css}\"",
|
|
63
|
-
"prettier:fix": "prettier --write \"src/**/*.{js,jsx,json,css}\"",
|
|
64
|
-
"format": "npm run prettier:fix && npm run lint:fix"
|
|
60
|
+
"check": "biome check .",
|
|
61
|
+
"fix": "biome check --write ."
|
|
65
62
|
},
|
|
66
63
|
"dependencies": {
|
|
67
64
|
"@ant-design/icons": "^6.2.2",
|
|
68
|
-
"antd": "^6.
|
|
65
|
+
"antd": "^6.4.2",
|
|
69
66
|
"dayjs": "^1.11.20",
|
|
70
67
|
"prop-types": "^15.8.1",
|
|
71
68
|
"react": "^19.2.6",
|
|
@@ -78,23 +75,14 @@
|
|
|
78
75
|
"devDependencies": {
|
|
79
76
|
"@babel/cli": "^7.28.6",
|
|
80
77
|
"@babel/core": "^7.29.0",
|
|
81
|
-
"@babel/eslint-parser": "^7.28.6",
|
|
82
78
|
"@babel/preset-env": "^7.29.5",
|
|
83
79
|
"@babel/preset-react": "^7.28.5",
|
|
80
|
+
"@biomejs/biome": "^2.4.15",
|
|
84
81
|
"babel-loader": "^10.1.1",
|
|
85
82
|
"copy-webpack-plugin": "^14.0.0",
|
|
86
83
|
"css-loader": "^7.1.4",
|
|
87
|
-
"eslint": "^9.39.4",
|
|
88
|
-
"eslint-config-prettier": "^10.1.8",
|
|
89
|
-
"eslint-plugin-import": "^2.32.0",
|
|
90
|
-
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
91
|
-
"eslint-plugin-prettier": "^5.5.5",
|
|
92
|
-
"eslint-plugin-react": "^7.37.5",
|
|
93
|
-
"eslint-plugin-react-hooks": "^7.1.1",
|
|
94
|
-
"eslint-webpack-plugin": "^6.0.0",
|
|
95
84
|
"fs-extra": "^11.3.5",
|
|
96
85
|
"html-webpack-plugin": "^5.6.7",
|
|
97
|
-
"prettier": "^3.8.1",
|
|
98
86
|
"style-loader": "^4.0.0",
|
|
99
87
|
"webpack": "^5.106.2",
|
|
100
88
|
"webpack-cli": "^7.0.2",
|