react-big-scheduler - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

CHANGELOG.md

@@ -6,2 +6,9 @@ ## Coming npm version
 
+## npm v0.2.7
+
+### 2019-05-04
+* Add inner resources
+* Update dependencies version
+* Optimize the SchedulerData._createRenderData function
+
 ## npm v0.2.6
@@ -8,0 +15,0 @@

lib/BodyView.js

@@ -47,3 +47,6 @@ 'use strict';
 
-            var tableRows = renderData.map(function (item) {
+            var displayRenderData = renderData.filter(function (o) {
+                return o.render;
+            });
+            var tableRows = displayRenderData.map(function (item) {
                 var rowCells = headers.map(function (header, index) {
@@ -53,2 +56,3 @@ var key = item.slotId + '_' + header.time;
                     if (!!header.nonWorkingTime) style = _extends({}, style, { backgroundColor: config.nonWorkingTimeBodyBgColor });
+                    if (item.groupOnly) style = _extends({}, style, { backgroundColor: config.groupOnlySlotColor });
                     if (!!behaviors.getNonAgendaViewBodyCellBgColorFunc) {
@@ -55,0 +59,0 @@ var cellBgColor = behaviors.getNonAgendaViewBodyCellBgColorFunc(schedulerData, item.slotId, header);

lib/config.js

@@ -59,2 +59,3 @@ 'use strict';
     summaryPos: _SummaryPos2.default.TopRight,
+    groupOnlySlotColor: '#F8F8F8',
 
@@ -74,2 +75,3 @@ startResizable: true,
     relativeMove: true,
+    defaultExpanded: true,
 
@@ -76,0 +78,0 @@ resourceName: 'Resource Name',

lib/DemoData.js

@@ -8,10 +8,17 @@ 'use strict';
     resources: [{
+        id: 'r0',
+        name: 'Resource0',
+        groupOnly: true
+    }, {
         id: 'r1',
-        name: 'Resource1'
+        name: 'Resource1',
+        parentId: 'r0'
     }, {
         id: 'r2',
-        name: 'Resource2'
+        name: 'Resource2',
+        parentId: 'r3'
     }, {
         id: 'r3',
-        name: 'Resource3'
+        name: 'Resource3',
+        parentId: 'r1'
     }, {
@@ -18,0 +25,0 @@ id: 'r4',

lib/DnDContext.js

@@ -61,4 +61,64 @@ 'use strict';
 
+            hover: function hover(props, monitor, component) {
+                var schedulerData = props.schedulerData,
+                    resourceEvents = props.resourceEvents,
+                    movingEvent = props.movingEvent;
+                var cellUnit = schedulerData.cellUnit,
+                    config = schedulerData.config,
+                    viewType = schedulerData.viewType,
+                    localeMoment = schedulerData.localeMoment;
+
+                var item = monitor.getItem();
+                var type = monitor.getItemType();
+                var pos = (0, _Util.getPos)(component.eventContainer);
+                var cellWidth = schedulerData.getContentCellWidth();
+                var initialStart = null,
+                    initialEnd = null;
+                if (type === _DnDTypes.DnDTypes.EVENT) {
+                    var initialPoint = monitor.getInitialClientOffset();
+                    var initialLeftIndex = Math.floor((initialPoint.x - pos.x) / cellWidth);
+                    initialStart = resourceEvents.headerItems[initialLeftIndex].start;
+                    initialEnd = resourceEvents.headerItems[initialLeftIndex].end;
+                    if (cellUnit !== _index.CellUnits.Hour) initialEnd = localeMoment(resourceEvents.headerItems[initialLeftIndex].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
+                }
+                var point = monitor.getClientOffset();
+                var leftIndex = Math.floor((point.x - pos.x) / cellWidth);
+                var newStart = resourceEvents.headerItems[leftIndex].start;
+                var newEnd = resourceEvents.headerItems[leftIndex].end;
+                if (cellUnit !== _index.CellUnits.Hour) newEnd = localeMoment(resourceEvents.headerItems[leftIndex].start).hour(23).minute(59).second(59).format(_index.DATETIME_FORMAT);
+                var slotId = resourceEvents.slotId,
+                    slotName = resourceEvents.slotName;
+                var action = 'New';
+                var isEvent = type === _DnDTypes.DnDTypes.EVENT;
+                if (isEvent) {
+                    var event = item;
+                    if (config.relativeMove) {
+                        newStart = localeMoment(event.start).add(localeMoment(newStart).diff(localeMoment(initialStart)), 'ms').format(_index.DATETIME_FORMAT);
+                    } else {
+                        if (viewType !== ViewTypes.Day) {
+                            var tmpMoment = localeMoment(newStart);
+                            newStart = localeMoment(event.start).year(tmpMoment.year()).month(tmpMoment.month()).date(tmpMoment.date()).format(_index.DATETIME_FORMAT);
+                        }
+                    }
+                    newEnd = localeMoment(newStart).add(localeMoment(event.end).diff(localeMoment(event.start)), 'ms').format(_index.DATETIME_FORMAT);
+
+                    //if crossResourceMove disabled, slot returns old value
+                    if (config.crossResourceMove === false) {
+                        slotId = schedulerData._getEventSlotId(item);
+                        slotName = undefined;
+                        var slot = schedulerData.getSlotById(slotId);
+                        if (!!slot) slotName = slot.name;
+                    }
+
+                    action = 'Move';
+                }
+
+                if (!!movingEvent) {
+                    movingEvent(schedulerData, slotId, slotName, newStart, newEnd, action, type, item);
+                }
+            },
+
             canDrop: function canDrop(props, monitor) {
-                var schedulerData = props.schedulerData;
+                var schedulerData = props.schedulerData,
+                    resourceEvents = props.resourceEvents;
 
@@ -69,3 +129,3 @@ var item = monitor.getItem();
 
-                return config.movable && (item.movable == undefined || item.movable !== false);
+                return config.movable && !resourceEvents.groupOnly && (item.movable == undefined || item.movable !== false);
             }
@@ -72,0 +132,0 @@ };

lib/DnDSource.js

@@ -108,3 +108,4 @@ 'use strict';
             canDrag: function canDrag(props) {
-                var schedulerData = props.schedulerData;
+                var schedulerData = props.schedulerData,
+                    resourceEvents = props.resourceEvents;
 
@@ -115,3 +116,3 @@ var item = _this.resolveDragObjFunc(props);
 
-                return config.movable && (item.movable == undefined || item.movable !== false);
+                return config.movable && (resourceEvents == undefined || !resourceEvents.groupOnly) && (item.movable == undefined || item.movable !== false);
             }
@@ -118,0 +119,0 @@ };

lib/EventItem.js

@@ -41,2 +41,4 @@ 'use strict';
 
+var supportTouch = 'ontouchstart' in window;
+
 var EventItem = (_temp = _class = function (_Component) {
@@ -196,14 +198,33 @@ _inherits(EventItem, _Component);
     this.initStartDrag = function (ev) {
-        ev.stopPropagation();
-        if (ev.buttons !== undefined && ev.buttons !== 1) return;
+        var _props2 = _this3.props,
+            schedulerData = _props2.schedulerData,
+            eventItem = _props2.eventItem;
 
-        var schedulerData = _this3.props.schedulerData;
+        var slotId = schedulerData._getEventSlotId(eventItem);
+        var slot = schedulerData.getSlotById(slotId);
+        if (!!slot && !!slot.groupOnly) return;
+        if (schedulerData._isResizing()) return;
 
-        schedulerData._startResizing();
+        ev.stopPropagation();
+        var clientX = 0;
+        if (supportTouch) {
+            if (ev.changedTouches.length == 0) return;
+            var touch = ev.changedTouches[0];
+            clientX = touch.pageX;
+        } else {
+            if (ev.buttons !== undefined && ev.buttons !== 1) return;
+            clientX = ev.clientX;
+        }
         _this3.setState({
-            startX: ev.clientX
+            startX: clientX
         });
-
-        document.documentElement.addEventListener('mousemove', _this3.doStartDrag, false);
-        document.documentElement.addEventListener('mouseup', _this3.stopStartDrag, false);
+        schedulerData._startResizing();
+        if (supportTouch) {
+            _this3.startResizer.addEventListener('touchmove', _this3.doStartDrag, false);
+            _this3.startResizer.addEventListener('touchend', _this3.stopStartDrag, false);
+            _this3.startResizer.addEventListener('touchcancel', _this3.cancelStartDrag, false);
+        } else {
+            document.documentElement.addEventListener('mousemove', _this3.doStartDrag, false);
+            document.documentElement.addEventListener('mouseup', _this3.stopStartDrag, false);
+        }
         document.onselectstart = function () {
@@ -220,8 +241,16 @@ return false;
 
-        var _props2 = _this3.props,
-            left = _props2.left,
-            width = _props2.width,
-            leftIndex = _props2.leftIndex,
-            rightIndex = _props2.rightIndex,
-            schedulerData = _props2.schedulerData;
+        var clientX = 0;
+        if (supportTouch) {
+            if (ev.changedTouches.length == 0) return;
+            var touch = ev.changedTouches[0];
+            clientX = touch.pageX;
+        } else {
+            clientX = ev.clientX;
+        }
+        var _props3 = _this3.props,
+            left = _props3.left,
+            width = _props3.width,
+            leftIndex = _props3.leftIndex,
+            rightIndex = _props3.rightIndex,
+            schedulerData = _props3.schedulerData;
 
@@ -234,4 +263,4 @@ var cellWidth = schedulerData.getContentCellWidth();
 
-        var newLeft = left + ev.clientX - startX;
-        var newWidth = width + startX - ev.clientX;
+        var newLeft = left + clientX - startX;
+        var newWidth = width + startX - clientX;
         if (newWidth < minWidth) {
@@ -250,16 +279,41 @@ newWidth = minWidth;
         ev.stopPropagation();
-        document.documentElement.removeEventListener('mousemove', _this3.doStartDrag, false);
-        document.documentElement.removeEventListener('mouseup', _this3.stopStartDrag, false);
+        if (supportTouch) {
+            _this3.startResizer.removeEventListener('touchmove', _this3.doStartDrag, false);
+            _this3.startResizer.removeEventListener('touchend', _this3.stopStartDrag, false);
+            _this3.startResizer.removeEventListener('touchcancel', _this3.cancelStartDrag, false);
+        } else {
+            document.documentElement.removeEventListener('mousemove', _this3.doStartDrag, false);
+            document.documentElement.removeEventListener('mouseup', _this3.stopStartDrag, false);
+        }
         document.onselectstart = null;
         document.ondragstart = null;
+        var _props4 = _this3.props,
+            width = _props4.width,
+            left = _props4.left,
+            top = _props4.top,
+            leftIndex = _props4.leftIndex,
+            rightIndex = _props4.rightIndex,
+            schedulerData = _props4.schedulerData,
+            eventItem = _props4.eventItem,
+            updateEventStart = _props4.updateEventStart,
+            conflictOccurred = _props4.conflictOccurred;
 
-        var _props3 = _this3.props,
-            width = _props3.width,
-            leftIndex = _props3.leftIndex,
-            rightIndex = _props3.rightIndex,
-            schedulerData = _props3.schedulerData,
-            eventItem = _props3.eventItem,
-            updateEventStart = _props3.updateEventStart;
+        schedulerData._stopResizing();
+        if (_this3.state.width === width) return;
 
-        schedulerData._stopResizing();
+        var clientX = 0;
+        if (supportTouch) {
+            if (ev.changedTouches.length == 0) {
+                _this3.setState({
+                    left: left,
+                    top: top,
+                    width: width
+                });
+                return;
+            }
+            var touch = ev.changedTouches[0];
+            clientX = touch.pageX;
+        } else {
+            clientX = ev.clientX;
+        }
         var cellUnit = schedulerData.cellUnit,
@@ -276,4 +330,4 @@ events = schedulerData.events,
 
-        var newWidth = width + startX - ev.clientX;
-        var deltaX = ev.clientX - startX;
+        var newWidth = width + startX - clientX;
+        var deltaX = clientX - startX;
         var sign = deltaX < 0 ? -1 : deltaX === 0 ? 0 : 1;
@@ -336,12 +390,6 @@ var count = (sign > 0 ? Math.floor(Math.abs(deltaX) / cellWidth) : Math.ceil(Math.abs(deltaX) / cellWidth)) * sign;
         if (hasConflict) {
-            var _props4 = _this3.props,
-                conflictOccurred = _props4.conflictOccurred,
-                left = _props4.left,
-                top = _props4.top,
-                _width = _props4.width;
-
             _this3.setState({
                 left: left,
                 top: top,
-                width: _width
+                width: width
             });
@@ -360,15 +408,57 @@
 
-    this.initEndDrag = function (ev) {
+    this.cancelStartDrag = function (ev) {
         ev.stopPropagation();
-        if (ev.buttons !== undefined && ev.buttons !== 1) return;
 
-        var schedulerData = _this3.props.schedulerData;
+        _this3.startResizer.removeEventListener('touchmove', _this3.doStartDrag, false);
+        _this3.startResizer.removeEventListener('touchend', _this3.stopStartDrag, false);
+        _this3.startResizer.removeEventListener('touchcancel', _this3.cancelStartDrag, false);
+        document.onselectstart = null;
+        document.ondragstart = null;
+        var _props5 = _this3.props,
+            schedulerData = _props5.schedulerData,
+            left = _props5.left,
+            top = _props5.top,
+            width = _props5.width;
 
-        schedulerData._startResizing();
+        schedulerData._stopResizing();
         _this3.setState({
-            endX: ev.clientX
+            left: left,
+            top: top,
+            width: width
         });
+    };
 
-        document.documentElement.addEventListener('mousemove', _this3.doEndDrag, false);
-        document.documentElement.addEventListener('mouseup', _this3.stopEndDrag, false);
+    this.initEndDrag = function (ev) {
+        var _props6 = _this3.props,
+            schedulerData = _props6.schedulerData,
+            eventItem = _props6.eventItem;
+
+        var slotId = schedulerData._getEventSlotId(eventItem);
+        var slot = schedulerData.getSlotById(slotId);
+        if (!!slot && !!slot.groupOnly) return;
+        if (schedulerData._isResizing()) return;
+
+        ev.stopPropagation();
+        var clientX = 0;
+        if (supportTouch) {
+            if (ev.changedTouches.length == 0) return;
+            var touch = ev.changedTouches[0];
+            clientX = touch.pageX;
+        } else {
+            if (ev.buttons !== undefined && ev.buttons !== 1) return;
+            clientX = ev.clientX;
+        }
+        _this3.setState({
+            endX: clientX
+        });
+
+        schedulerData._startResizing();
+        if (supportTouch) {
+            _this3.endResizer.addEventListener('touchmove', _this3.doEndDrag, false);
+            _this3.endResizer.addEventListener('touchend', _this3.stopEndDrag, false);
+            _this3.endResizer.addEventListener('touchcancel', _this3.cancelEndDrag, false);
+        } else {
+            document.documentElement.addEventListener('mousemove', _this3.doEndDrag, false);
+            document.documentElement.addEventListener('mouseup', _this3.stopEndDrag, false);
+        }
         document.onselectstart = function () {
@@ -384,6 +474,14 @@ return false;
         ev.stopPropagation();
-        var _props5 = _this3.props,
-            width = _props5.width,
-            leftIndex = _props5.leftIndex,
-            schedulerData = _props5.schedulerData;
+        var clientX = 0;
+        if (supportTouch) {
+            if (ev.changedTouches.length == 0) return;
+            var touch = ev.changedTouches[0];
+            clientX = touch.pageX;
+        } else {
+            clientX = ev.clientX;
+        }
+        var _props7 = _this3.props,
+            width = _props7.width,
+            leftIndex = _props7.leftIndex,
+            schedulerData = _props7.schedulerData;
         var headers = schedulerData.headers;
@@ -398,3 +496,3 @@
 
-        var newWidth = width + ev.clientX - endX;
+        var newWidth = width + clientX - endX;
         if (newWidth < minWidth) newWidth = minWidth;else if (newWidth > maxWidth) newWidth = maxWidth;
@@ -407,16 +505,42 @@
         ev.stopPropagation();
-        document.documentElement.removeEventListener('mousemove', _this3.doEndDrag, false);
-        document.documentElement.removeEventListener('mouseup', _this3.stopEndDrag, false);
+
+        if (supportTouch) {
+            _this3.endResizer.removeEventListener('touchmove', _this3.doEndDrag, false);
+            _this3.endResizer.removeEventListener('touchend', _this3.stopEndDrag, false);
+            _this3.endResizer.removeEventListener('touchcancel', _this3.cancelEndDrag, false);
+        } else {
+            document.documentElement.removeEventListener('mousemove', _this3.doEndDrag, false);
+            document.documentElement.removeEventListener('mouseup', _this3.stopEndDrag, false);
+        }
         document.onselectstart = null;
         document.ondragstart = null;
+        var _props8 = _this3.props,
+            width = _props8.width,
+            left = _props8.left,
+            top = _props8.top,
+            leftIndex = _props8.leftIndex,
+            rightIndex = _props8.rightIndex,
+            schedulerData = _props8.schedulerData,
+            eventItem = _props8.eventItem,
+            updateEventEnd = _props8.updateEventEnd,
+            conflictOccurred = _props8.conflictOccurred;
 
-        var _props6 = _this3.props,
-            width = _props6.width,
-            leftIndex = _props6.leftIndex,
-            rightIndex = _props6.rightIndex,
-            schedulerData = _props6.schedulerData,
-            eventItem = _props6.eventItem,
-            updateEventEnd = _props6.updateEventEnd;
+        schedulerData._stopResizing();
+        if (_this3.state.width === width) return;
 
-        schedulerData._stopResizing();
+        var clientX = 0;
+        if (supportTouch) {
+            if (ev.changedTouches.length == 0) {
+                _this3.setState({
+                    left: left,
+                    top: top,
+                    width: width
+                });
+                return;
+            }
+            var touch = ev.changedTouches[0];
+            clientX = touch.pageX;
+        } else {
+            clientX = ev.clientX;
+        }
         var headers = schedulerData.headers,
@@ -435,3 +559,3 @@ cellUnit = schedulerData.cellUnit,
 
-        var newWidth = width + ev.clientX - endX;
+        var newWidth = width + clientX - endX;
         var deltaX = newWidth - width;
@@ -495,12 +619,6 @@ var sign = deltaX < 0 ? -1 : deltaX === 0 ? 0 : 1;
         if (hasConflict) {
-            var _props7 = _this3.props,
-                conflictOccurred = _props7.conflictOccurred,
-                left = _props7.left,
-                top = _props7.top,
-                _width2 = _props7.width;
-
             _this3.setState({
                 left: left,
                 top: top,
-                width: _width2
+                width: width
             });
@@ -519,2 +637,24 @@
 
+    this.cancelEndDrag = function (ev) {
+        ev.stopPropagation();
+
+        _this3.endResizer.removeEventListener('touchmove', _this3.doEndDrag, false);
+        _this3.endResizer.removeEventListener('touchend', _this3.stopEndDrag, false);
+        _this3.endResizer.removeEventListener('touchcancel', _this3.cancelEndDrag, false);
+        document.onselectstart = null;
+        document.ondragstart = null;
+        var _props9 = _this3.props,
+            schedulerData = _props9.schedulerData,
+            left = _props9.left,
+            top = _props9.top,
+            width = _props9.width;
+
+        schedulerData._stopResizing();
+        _this3.setState({
+            left: left,
+            top: top,
+            width: width
+        });
+    };
+
     this.startResizable = function (props) {
@@ -540,8 +680,20 @@ var eventItem = props.eventItem,
         if (_this3.startResizer != undefined) {
-            _this3.startResizer.removeEventListener('mousedown', _this3.initStartDrag, false);
-            if (_this3.startResizable(props)) _this3.startResizer.addEventListener('mousedown', _this3.initStartDrag, false);
+            if (supportTouch) {
+                // this.startResizer.removeEventListener('touchstart', this.initStartDrag, false);
+                // if (this.startResizable(props))
+                //     this.startResizer.addEventListener('touchstart', this.initStartDrag, false);
+            } else {
+                _this3.startResizer.removeEventListener('mousedown', _this3.initStartDrag, false);
+                if (_this3.startResizable(props)) _this3.startResizer.addEventListener('mousedown', _this3.initStartDrag, false);
+            }
         }
         if (_this3.endResizer != undefined) {
-            _this3.endResizer.removeEventListener('mousedown', _this3.initEndDrag, false);
-            if (_this3.endResizable(props)) _this3.endResizer.addEventListener('mousedown', _this3.initEndDrag, false);
+            if (supportTouch) {
+                // this.endResizer.removeEventListener('touchstart', this.initEndDrag, false);
+                // if (this.endResizable(props))
+                //     this.endResizer.addEventListener('touchstart', this.initEndDrag, false);
+            } else {
+                _this3.endResizer.removeEventListener('mousedown', _this3.initEndDrag, false);
+                if (_this3.endResizable(props)) _this3.endResizer.addEventListener('mousedown', _this3.initEndDrag, false);
+            }
         }
@@ -548,0 +700,0 @@ };

lib/index.js

@@ -266,3 +266,6 @@ 'use strict';
 
-                var resourceEventsList = renderData.map(function (item) {
+                var displayRenderData = renderData.filter(function (o) {
+                    return o.render;
+                });
+                var resourceEventsList = displayRenderData.map(function (item) {
                     return _react2.default.createElement(DndResourceEvents, _extends({}, _this2.props, {
@@ -482,2 +485,3 @@ key: item.slotId,
     moveEvent: _propTypes.PropTypes.func,
+    movingEvent: _propTypes.PropTypes.func,
     leftCustomHeader: _propTypes.PropTypes.object,
@@ -496,2 +500,3 @@ rightCustomHeader: _propTypes.PropTypes.object,
     slotClickedFunc: _propTypes.PropTypes.func,
+    toggleExpandFunc: _propTypes.PropTypes.func,
     slotItemTemplateResolver: _propTypes.PropTypes.func,
@@ -498,0 +503,0 @@ nonAgendaCellHeaderTemplateResolver: _propTypes.PropTypes.func,

lib/ResourceEvents.js

@@ -45,2 +45,4 @@ 'use strict';
 
+var supportTouch = 'ontouchstart' in window;
+
 var ResourceEvents = (_temp = _class = function (_Component) {
@@ -55,6 +57,22 @@ _inherits(ResourceEvents, _Component);
         _this.initDrag = function (ev) {
-            ev.stopPropagation();
-            if (ev.buttons !== undefined && ev.buttons !== 1) return;
+            var isSelecting = _this.state.isSelecting;
+
+            if (isSelecting) return;
             if ((ev.srcElement || ev.target) !== _this.eventContainer) return;
 
+            ev.stopPropagation();
+
+            var resourceEvents = _this.props.resourceEvents;
+
+            if (resourceEvents.groupOnly) return;
+            var clientX = 0;
+            if (supportTouch) {
+                if (ev.changedTouches.length == 0) return;
+                var touch = ev.changedTouches[0];
+                clientX = touch.pageX;
+            } else {
+                if (ev.buttons !== undefined && ev.buttons !== 1) return;
+                clientX = ev.clientX;
+            }
+
             var schedulerData = _this.props.schedulerData;
@@ -64,3 +82,3 @@
             var pos = (0, _Util.getPos)(_this.eventContainer);
-            var startX = ev.clientX - pos.x;
+            var startX = clientX - pos.x;
             var leftIndex = Math.floor(startX / cellWidth);
@@ -80,4 +98,10 @@ var left = leftIndex * cellWidth;
 
-            document.documentElement.addEventListener('mousemove', _this.doDrag, false);
-            document.documentElement.addEventListener('mouseup', _this.stopDrag, false);
+            if (supportTouch) {
+                document.documentElement.addEventListener('touchmove', _this.doDrag, false);
+                document.documentElement.addEventListener('touchend', _this.stopDrag, false);
+                document.documentElement.addEventListener('touchcancel', _this.cancelDrag, false);
+            } else {
+                document.documentElement.addEventListener('mousemove', _this.doDrag, false);
+                document.documentElement.addEventListener('mouseup', _this.stopDrag, false);
+            }
             document.onselectstart = function () {
@@ -94,2 +118,10 @@ return false;
 
+            var clientX = 0;
+            if (supportTouch) {
+                if (ev.changedTouches.length == 0) return;
+                var touch = ev.changedTouches[0];
+                clientX = touch.pageX;
+            } else {
+                clientX = ev.clientX;
+            }
             var startX = _this.state.startX;
@@ -101,3 +133,3 @@ var schedulerData = _this.props.schedulerData;
             var pos = (0, _Util.getPos)(_this.eventContainer);
-            var currentX = ev.clientX - pos.x;
+            var currentX = clientX - pos.x;
             var leftIndex = Math.floor(Math.min(startX, currentX) / cellWidth);
@@ -121,2 +153,3 @@ leftIndex = leftIndex < 0 ? 0 : leftIndex;
             ev.stopPropagation();
+
             var _this$props = _this.props,
@@ -135,4 +168,10 @@ schedulerData = _this$props.schedulerData,
 
-            document.documentElement.removeEventListener('mousemove', _this.doDrag, false);
-            document.documentElement.removeEventListener('mouseup', _this.stopDrag, false);
+            if (supportTouch) {
+                document.documentElement.removeEventListener('touchmove', _this.doDrag, false);
+                document.documentElement.removeEventListener('touchend', _this.stopDrag, false);
+                document.documentElement.removeEventListener('touchcancel', _this.cancelDrag, false);
+            } else {
+                document.documentElement.removeEventListener('mousemove', _this.doDrag, false);
+                document.documentElement.removeEventListener('mouseup', _this.stopDrag, false);
+            }
             document.onselectstart = null;
@@ -190,2 +229,24 @@ document.ondragstart = null;
 
+        _this.cancelDrag = function (ev) {
+            ev.stopPropagation();
+
+            var isSelecting = _this.state.isSelecting;
+
+            if (isSelecting) {
+                document.documentElement.removeEventListener('touchmove', _this.doDrag, false);
+                document.documentElement.removeEventListener('touchend', _this.stopDrag, false);
+                document.documentElement.removeEventListener('touchcancel', _this.cancelDrag, false);
+                document.onselectstart = null;
+                document.ondragstart = null;
+                _this.setState({
+                    startX: 0,
+                    leftIndex: 0,
+                    left: 0,
+                    rightIndex: 0,
+                    width: 0,
+                    isSelecting: false
+                });
+            }
+        };
+
         _this.onAddMoreClick = function (headerItem) {
@@ -238,3 +299,7 @@ var _this$props2 = _this.props,
             if (config.creatable === true) {
-                this.eventContainer.addEventListener('mousedown', this.initDrag, false);
+                if (supportTouch) {
+                    // this.eventContainer.addEventListener('touchstart', this.initDrag, false);
+                } else {
+                    this.eventContainer.addEventListener('mousedown', this.initDrag, false);
+                }
             }
@@ -245,4 +310,14 @@ }
         value: function componentWillReceiveProps(np) {
-            this.eventContainer.removeEventListener('mousedown', this.initDrag, false);
-            if (np.schedulerData.config.creatable) this.eventContainer.addEventListener('mousedown', this.initDrag, false);
+            if (supportTouch) {
+                // this.eventContainer.removeEventListener('touchstart', this.initDrag, false);
+            } else {
+                this.eventContainer.removeEventListener('mousedown', this.initDrag, false);
+            }
+            if (np.schedulerData.config.creatable) {
+                if (supportTouch) {
+                    // this.eventContainer.addEventListener('touchstart', this.initDrag, false);
+                } else {
+                    this.eventContainer.addEventListener('mousedown', this.initDrag, false);
+                }
+            }
         }
@@ -369,2 +444,3 @@ }, {
     moveEvent: _propTypes.PropTypes.func,
+    movingEvent: _propTypes.PropTypes.func,
     conflictOccurred: _propTypes.PropTypes.func,
@@ -371,0 +447,0 @@ subtitleGetter: _propTypes.PropTypes.func,

lib/ResourceView.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -18,2 +20,6 @@
 
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,3 +49,4 @@
                 slotClickedFunc = _props.slotClickedFunc,
-                slotItemTemplateResolver = _props.slotItemTemplateResolver;
+                slotItemTemplateResolver = _props.slotItemTemplateResolver,
+                toggleExpandFunc = _props.toggleExpandFunc;
             var renderData = schedulerData.renderData;
@@ -50,17 +57,40 @@
             var paddingBottom = contentScrollbarHeight;
-            var resourceList = renderData.map(function (item) {
+            var displayRenderData = renderData.filter(function (o) {
+                return o.render;
+            });
+            var resourceList = displayRenderData.map(function (item) {
+                var indents = [];
+                for (var i = 0; i < item.indent; i++) {
+                    indents.push(_react2.default.createElement('span', { key: 'es' + i, className: 'expander-space' }));
+                }
+                var indent = _react2.default.createElement('span', { key: 'es' + item.indent, className: 'expander-space' });
+                if (item.hasChildren) {
+                    indent = item.expanded ? _react2.default.createElement(_icon2.default, { type: 'minus-square', key: 'es' + item.indent, style: {}, className: '',
+                        onClick: function onClick() {
+                            if (!!toggleExpandFunc) toggleExpandFunc(schedulerData, item.slotId);
+                        } }) : _react2.default.createElement(_icon2.default, { type: 'plus-square', key: 'es' + item.indent, style: {}, className: '',
+                        onClick: function onClick() {
+                            if (!!toggleExpandFunc) toggleExpandFunc(schedulerData, item.slotId);
+                        } });
+                }
+                indents.push(indent);
+
                 var a = slotClickedFunc != undefined ? _react2.default.createElement(
                     'a',
-                    { onClick: function onClick() {
+                    { className: 'slot-cell', onClick: function onClick() {
                             slotClickedFunc(schedulerData, item);
                         } },
-                    _react2.default.createElement('span', { className: 'expander-space' }),
-                    item.slotName
+                    indents,
+                    _react2.default.createElement(
+                        'span',
+                        { className: 'slot-text' },
+                        item.slotName
+                    )
                 ) : _react2.default.createElement(
                     'span',
-                    null,
-                    _react2.default.createElement('span', { className: 'expander-space' }),
+                    { className: 'slot-cell' },
+                    indents,
                     _react2.default.createElement(
                         'span',
-                        null,
+                        { className: 'slot-text' },
                         item.slotName
@@ -79,2 +109,9 @@ )
 
+                var tdStyle = { height: item.rowHeight };
+                if (item.groupOnly) {
+                    tdStyle = _extends({}, tdStyle, {
+                        backgroundColor: schedulerData.config.groupOnlySlotColor
+                    });
+                }
+
                 return _react2.default.createElement(
@@ -85,3 +122,3 @@ 'tr',
                         'td',
-                        { 'data-resource-id': item.slotId, style: { height: item.rowHeight } },
+                        { 'data-resource-id': item.slotId, style: tdStyle },
                         slotItem
@@ -113,4 +150,5 @@ )
     slotClickedFunc: _propTypes.PropTypes.func,
-    slotItemTemplateResolver: _propTypes.PropTypes.func
+    slotItemTemplateResolver: _propTypes.PropTypes.func,
+    toggleExpandFunc: _propTypes.PropTypes.func
 }, _temp);
 exports.default = ResourceView;

lib/SchedulerData.js

@@ -287,2 +287,39 @@ 'use strict';
     }, {
+        key: 'toggleExpandStatus',
+        value: function toggleExpandStatus(slotId) {
+            var slotEntered = false;
+            var slotIndent = -1;
+            var isExpanded = false;
+            var expandedMap = new Map();
+            this.renderData.forEach(function (item) {
+                if (slotEntered === false) {
+                    if (item.slotId === slotId && item.hasChildren) {
+                        slotEntered = true;
+
+                        isExpanded = !item.expanded;
+                        item.expanded = isExpanded;
+                        slotIndent = item.indent;
+                        expandedMap.set(item.indent, {
+                            expanded: item.expanded,
+                            render: item.render
+                        });
+                    }
+                } else {
+                    if (item.indent > slotIndent) {
+                        var expandStatus = expandedMap.get(item.indent - 1);
+                        item.render = expandStatus.expanded && expandStatus.render;
+
+                        if (item.hasChildren) {
+                            expandedMap.set(item.indent, {
+                                expanded: item.expanded,
+                                render: item.render
+                            });
+                        }
+                    } else {
+                        slotEntered = false;
+                    }
+                }
+            });
+        }
+    }, {
         key: 'isResourceViewResponsive',
@@ -366,3 +403,3 @@ value: function isResourceViewResponsive() {
             this.renderData.forEach(function (item) {
-                height += item.rowHeight;
+                if (item.render) height += item.rowHeight;
             });
@@ -696,3 +733,6 @@ return height;
 
-            return isEventPerspective ? eventGroups.map(function (eventGroup) {
+            var slots = isEventPerspective ? eventGroups : resources;
+            var slotTree = [],
+                slotMap = new Map();
+            slots.forEach(function (slot) {
                 var headerEvents = headers.map(function (header) {
@@ -702,20 +742,73 @@ return _this4._createInitHeaderEvents(header);
 
-                return {
-                    slotId: eventGroup.id,
-                    slotName: eventGroup.name,
-                    rowHeight: 0,
-                    headerItems: headerEvents
+                var slotRenderData = {
+                    slotId: slot.id,
+                    slotName: slot.name,
+                    parentId: slot.parentId,
+                    groupOnly: slot.groupOnly,
+                    hasSummary: false,
+                    rowMaxCount: 0,
+                    rowHeight: _this4.config.nonAgendaSlotMinHeight !== 0 ? _this4.config.nonAgendaSlotMinHeight : _this4.config.eventItemLineHeight + 2,
+                    headerItems: headerEvents,
+                    indent: 0,
+                    hasChildren: false,
+                    expanded: true,
+                    render: true
                 };
-            }) : resources.map(function (resource) {
-                var headerEvents = headers.map(function (header) {
-                    return _this4._createInitHeaderEvents(header);
-                });
+                var id = slot.id;
+                var value = undefined;
+                if (slotMap.has(id)) {
+                    value = slotMap.get(id);
+                    value.data = slotRenderData;
+                } else {
+                    value = {
+                        data: slotRenderData,
+                        children: []
+                    };
+                    slotMap.set(id, value);
+                }
 
-                return {
-                    slotId: resource.id,
-                    slotName: resource.name,
-                    rowHeight: 0,
-                    headerItems: headerEvents
-                };
+                var parentId = slot.parentId;
+                if (!parentId || parentId === id) {
+                    slotTree.push(value);
+                } else {
+                    var parentValue = undefined;
+                    if (slotMap.has(parentId)) {
+                        parentValue = slotMap.get(parentId);
+                    } else {
+                        parentValue = {
+                            data: undefined,
+                            children: []
+                        };
+                        slotMap.set(parentId, parentValue);
+                    }
+
+                    parentValue.children.push(value);
+                }
             });
+
+            var slotStack = [];
+            var i = void 0;
+            for (i = slotTree.length - 1; i >= 0; i--) {
+                slotStack.push(slotTree[i]);
+            }
+            var initRenderData = [];
+            var currentNode = undefined;
+            while (slotStack.length > 0) {
+                currentNode = slotStack.pop();
+                if (currentNode.data.indent > 0) {
+                    currentNode.data.render = this.config.defaultExpanded;
+                }
+                if (currentNode.children.length > 0) {
+                    currentNode.data.hasChildren = true;
+                    currentNode.data.expanded = this.config.defaultExpanded;
+                }
+                initRenderData.push(currentNode.data);
+
+                for (i = currentNode.children.length - 1; i >= 0; i--) {
+                    currentNode.children[i].data.indent = currentNode.data.indent + 1;
+                    slotStack.push(currentNode.children[i]);
+                }
+            }
+
+            return initRenderData;
         }
@@ -845,2 +938,4 @@ }, {
             //this.events.sort(this._compare);
+            var cellMaxEventsCount = this.getCellMaxEvents();
+            var cellMaxEventsCountValue = 30;
 
@@ -863,2 +958,8 @@ this.events.forEach(function (item) {
                             header.count = header.count + 1;
+                            if (header.count > resourceEvents.rowMaxCount) {
+                                resourceEvents.rowMaxCount = header.count;
+                                var rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount ? cellMaxEventsCount : resourceEvents.rowMaxCount;
+                                var newRowHeight = rowsCount * _this5.config.eventItemLineHeight + (_this5.config.creatable && _this5.config.checkConflict === false ? 20 : 2);
+                                if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
+                            }
 
@@ -884,50 +985,53 @@ if (pos === -1) {
 
-            initRenderData.forEach(function (resourceEvents) {
-                var maxRowsCount = 0;
-                var hasSummary = false;
-                resourceEvents.headerItems.forEach(function (headerItem) {
-                    maxRowsCount = headerItem.count > maxRowsCount ? headerItem.count : maxRowsCount;
+            if (cellMaxEventsCount <= cellMaxEventsCountValue || this.behaviors.getSummaryFunc !== undefined) {
+                initRenderData.forEach(function (resourceEvents) {
+                    var hasSummary = false;
 
-                    var renderItemsCount = 0,
-                        addMoreIndex = 0,
-                        index = 0;
-                    while (index < _this5.getCellMaxEvents() - 1) {
-                        if (headerItem.events[index] !== undefined) {
-                            renderItemsCount++;
-                            addMoreIndex = index + 1;
+                    resourceEvents.headerItems.forEach(function (headerItem) {
+                        if (cellMaxEventsCount <= cellMaxEventsCountValue) {
+                            var renderItemsCount = 0,
+                                addMoreIndex = 0,
+                                index = 0;
+                            while (index < cellMaxEventsCount - 1) {
+                                if (headerItem.events[index] !== undefined) {
+                                    renderItemsCount++;
+                                    addMoreIndex = index + 1;
+                                }
+
+                                index++;
+                            }
+
+                            if (headerItem.events[index] !== undefined) {
+                                if (renderItemsCount + 1 < headerItem.count) {
+                                    headerItem.addMore = headerItem.count - renderItemsCount;
+                                    headerItem.addMoreIndex = addMoreIndex;
+                                }
+                            } else {
+                                if (renderItemsCount < headerItem.count) {
+                                    headerItem.addMore = headerItem.count - renderItemsCount;
+                                    headerItem.addMoreIndex = addMoreIndex;
+                                }
+                            }
                         }
 
-                        index++;
-                    }
+                        if (_this5.behaviors.getSummaryFunc !== undefined) {
+                            var events = [];
+                            headerItem.events.forEach(function (e) {
+                                if (!!e && !!e.eventItem) events.push(e.eventItem);
+                            });
 
-                    if (headerItem.events[index] !== undefined) {
-                        if (renderItemsCount + 1 < headerItem.count) {
-                            headerItem.addMore = headerItem.count - renderItemsCount;
-                            headerItem.addMoreIndex = addMoreIndex;
+                            headerItem.summary = _this5.behaviors.getSummaryFunc(_this5, events, resourceEvents.slotId, resourceEvents.slotName, headerItem.start, headerItem.end);
+                            if (!!headerItem.summary && headerItem.summary.text != undefined) hasSummary = true;
                         }
-                    } else {
-                        if (renderItemsCount < headerItem.count) {
-                            headerItem.addMore = headerItem.count - renderItemsCount;
-                            headerItem.addMoreIndex = addMoreIndex;
-                        }
-                    }
+                    });
 
-                    if (_this5.behaviors.getSummaryFunc !== undefined) {
-                        var events = [];
-                        headerItem.events.forEach(function (e) {
-                            if (!!e && !!e.eventItem) events.push(e.eventItem);
-                        });
-
-                        headerItem.summary = _this5.behaviors.getSummaryFunc(_this5, events, resourceEvents.slotId, resourceEvents.slotName, headerItem.start, headerItem.end);
-                        if (!!headerItem.summary && headerItem.summary.text != undefined) hasSummary = true;
+                    resourceEvents.hasSummary = hasSummary;
+                    if (hasSummary) {
+                        var rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount ? cellMaxEventsCount : resourceEvents.rowMaxCount;
+                        var newRowHeight = (rowsCount + 1) * _this5.config.eventItemLineHeight + (_this5.config.creatable && _this5.config.checkConflict === false ? 20 : 2);
+                        if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
                     }
                 });
+            }
 
-                resourceEvents.hasSummary = hasSummary;
-                var rowsCount = maxRowsCount > _this5.getCellMaxEvents() ? _this5.getCellMaxEvents() : maxRowsCount;
-                resourceEvents.rowHeight = rowsCount === 0 ? _this5.config.eventItemLineHeight + 2 : rowsCount * _this5.config.eventItemLineHeight + (_this5.config.creatable && _this5.config.checkConflict === false ? 20 : 2);
-                if (hasSummary) resourceEvents.rowHeight = resourceEvents.rowHeight + _this5.config.eventItemLineHeight;
-                if (_this5.config.nonAgendaSlotMinHeight !== 0 && resourceEvents.rowHeight < _this5.config.nonAgendaSlotMinHeight) resourceEvents.rowHeight = _this5.config.nonAgendaSlotMinHeight;
-            });
-
             this.renderData = initRenderData;
@@ -934,0 +1038,0 @@ }

lib/Util.js

@@ -9,6 +9,8 @@ 'use strict';
         y = 0;
-    do {
-        x += element.offsetLeft - element.scrollLeft;
-        y += element.offsetTop - element.scrollTop;
-    } while (element = element.offsetParent);
+    if (!!element) {
+        do {
+            x += element.offsetLeft - element.scrollLeft;
+            y += element.offsetTop - element.scrollTop;
+        } while (element = element.offsetParent);
+    }
     return { 'x': x, 'y': y };
@@ -15,0 +17,0 @@ }

package.json

 {
   "name": "react-big-scheduler",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A scheduler and resource planning component built for React and made for modern browsers (IE10+)",
@@ -44,10 +44,10 @@ "keywords": [
   "dependencies": {
-    "antd": "^3.9.0",
-    "moment": "^2.18.1",
-    "prop-types": "^15.6.1",
-    "react": "^16.0.0",
-    "react-dnd": "^5.0.0",
-    "react-dnd-html5-backend": "^5.0.1",
-    "react-dom": "^16.3.1",
-    "rrule": "^2.2.9"
+    "antd": "^3.16.6",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dnd": "^7.4.5",
+    "react-dnd-html5-backend": "^7.4.4",
+    "react-dom": "^16.8.6",
+    "rrule": "^2.6.0"
   },
@@ -65,25 +65,26 @@ "devDependencies": {
     "babel-preset-stage-0": "6.24.1",
-    "cpy": "^3.4.1",
-    "cross-env": "^5.1.3",
-    "css-loader": "^0.27.3",
-    "eslint": "3.18.0",
-    "eslint-plugin-react": "6.10.2",
-    "json-loader": "0.5.4",
-    "less": "^3.8.1",
-    "less-loader": "^4.1.0",
-    "mocha": "3.2.0",
+    "cpy": "^7.2.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "eslint": "5.16.0",
+    "eslint-plugin-react": "7.13.0",
+    "json-loader": "0.5.7",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "mocha": "^6.1.4",
     "mocha-babel": "3.0.3",
-    "node-sass": "^4.7.2",
-    "react-hot-loader": "^4.0.1",
-    "react-redux": "^4.4.5",
-    "react-router": "^3.0.0",
-    "react-router-redux": "^4.0.7",
-    "sass-loader": "6.0.3",
-    "style-loader": "0.14.1",
-    "url-loader": "0.5.8",
-    "webpack": "^4.5.0",
-    "webpack-cli": "^3.1.1",
-    "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-dev-server": "^3.1.1"
+    "node-sass": "^4.12.0",
+    "react-hot-loader": "^4.8.4",
+    "react-redux": "^7.0.3",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
+    "react-router-redux": "^4.0.8",
+    "sass-loader": "7.1.0",
+    "style-loader": "0.23.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1"
   }
 }

README.md

@@ -13,3 +13,3 @@ react-big-scheduler
 
-* antd >= 3.9.0 ? react-big-scheduler@0.2.6 : react-big-scheduler@0.2.4
+* antd >= 3.9.0 ? react-big-scheduler@0.2.7 : react-big-scheduler@0.2.4
 
@@ -36,2 +36,7 @@ ## Use and Setup
                     {
+                       id: 'r0',
+                       name: 'Resource0',
+                       groupOnly: true
+                    },
+                    {
                        id: 'r1',
@@ -42,8 +47,15 @@ name: 'Resource1'
                        id: 'r2',
-                       name: 'Resource2'
+                       name: 'Resource2',
+                       parentId: 'r0'
                     },
                     {
                        id: 'r3',
-                       name: 'Resource3'
-                    }
+                       name: 'Resource3',
+                       parentId: 'r4'
+                    },
+                    {
+                       id: 'r4',
+                       name: 'Resource4',
+                       parentId: 'r2'
+                    },
                 ];
@@ -120,2 +132,4 @@ schedulerData.setResources(resources);
 
+If you fail to execute the `npm install` command, remove the package-lock.json file and try again.
+
 ## API
@@ -231,2 +245,8 @@
 
+  #### toggleExpandStatus
+  ```js
+  toggleExpandStatus(slotId)
+  ```
+  Used to toggle slot's(and its children's) expand status.
+
   #### getMinuteStepsInHour
@@ -233,0 +253,0 @@ ```js

No alert changes

Improved metrics

Total package byte prevSize

304820

increased by7.45%

Lines of code

5892

increased by7.97%

Number of lines in readme file

729

increased by2.82%

Worsened metrics

Dev dependency count

33

increased by3.13%

Dependency changes

• + Added@types/hoist-non-react-statics@3.3.5(transitive)

• + Addeddnd-core@7.7.0(transitive)

• + Addedreact-dnd@7.7.0(transitive)

• + Addedreact-dnd-html5-backend@7.7.0(transitive)

• - Removedautobind-decorator@2.4.0(transitive)

• - Removedchange-emitter@0.1.6(transitive)

• - Removeddnd-core@4.0.5(transitive)

• - Removedreact-dnd@5.0.0(transitive)

• - Removedreact-dnd-html5-backend@5.0.1(transitive)

• - Removedrecompose@0.27.1(transitive)

• - Removedsymbol-observable@1.2.0(transitive)

• Updatedantd@^3.16.6

• Updatedmoment@^2.24.0

• Updatedprop-types@^15.7.2

• Updatedreact@^16.8.6

• Updatedreact-dnd@^7.4.5

• Updatedreact-dnd-html5-backend@^7.4.4

• Updatedreact-dom@^16.8.6

• Updatedrrule@^2.6.0