react-calendar-timeline - npm Package Compare versions

Comparing version 0.27.2-gamma to 0.27.3-gamma

lib/lib/items/Item.js

@@ -298,8 +298,4 @@ "use strict";
         if (_this2.props.selected) {
-          var clickTime = _this2.timeFor(e); // this.setState({
-          //   dragging: true,
-          //   dragOffset : this.itemTimeStart - clickTime,
-          // })
+          var clickTime = _this2.timeFor(e);
 
-
           _this2.props.onDragStart(true, _this2.itemTimeStart - clickTime, _this2.itemId);
@@ -343,9 +339,4 @@ } else {
             }
-          } // this.setState({
-          //   dragging: false,
-          //   dragOffset: 0,
-          //   dragTime: null,
-          // })
+          }
 
-
           _this2.props.onDragEnd();
@@ -357,8 +348,3 @@ }
         if (_this2.props.selected) {
-          // this.setState({
-          //   resizing: true,
-          //   resizeEdge: null, // we don't know yet
-          //   resizeStart: e.pageX,
-          // })
-          _this2.props.onResizeStart(true, null, e.pageX, _this2.itemId);
+          _this2.props.onResizeStart(true, _this2.itemId);
         } else {
@@ -492,8 +478,2 @@ return false;
   }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      //clear parent state on unmointing
-      this.props.onDragEnd();
-    }
-  }, {
     key: "actualClick",
@@ -546,3 +526,3 @@ value: function actualClick(e, clickType) {
         resizeStart: this.props.resizeStart,
-        resizeTime: this.props.resizeEdge !== null ? this.props.resizeEdge === 'right' ? this.itemTimeEnd : this.itemTimeStart : null,
+        resizeTime: this.props.resizeEdge !== undefined ? this.props.resizeEdge === 'right' ? this.itemTimeEnd : this.itemTimeStart : null,
         width: this.props.dimensions.width
@@ -596,4 +576,4 @@ };
   dragOffset: _propTypes["default"].number.isRequired,
-  resizeEdge: _propTypes["default"].oneOf(_propTypes["default"].oneOfType('left', 'right'), null).isRequired,
-  resizeStart: _propTypes["default"].oneOf(_propTypes["default"].number, null).isRequired,
+  resizeEdge: _propTypes["default"].oneOf(['left', 'right']),
+  resizeStart: _propTypes["default"].number,
   onDragStart: _propTypes["default"].func.isRequired,
@@ -600,0 +580,0 @@ onDragEnd: _propTypes["default"].func.isRequired,

lib/lib/items/Items.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _calendar = require("../utility/calendar");
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
@@ -71,55 +69,4 @@
 
-    _defineProperty(_assertThisInitialized(_this), "initState", {
-      dragging: false,
-      resizing: false,
-      dragOffset: 0,
-      //TODO: exist in Timeline but needs to be passed here through prop drilling (might consider)
-      resizeEdge: null,
-      resizeStart: null,
-      interactingItemId: undefined
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "state", _this.initState);
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (dragging, dragOffset, itemId) {
-      _this.setState({
-        dragging: dragging,
-        dragOffset: dragOffset,
-        interactingItemId: itemId
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "clearState", function () {
-      _this.setState(_this.initState);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleResizeStart", function (resizing, resizeEdge, resizeStart, itemId) {
-      _this.setState({
-        resizing: resizing,
-        resizeEdge: resizeEdge,
-        resizeStart: resizeStart,
-        interactingItemId: itemId
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleResizeMove", function (itemId, resizeTime, resizeEdge) {
-      _this.props.itemResizing(itemId, resizeTime, resizeEdge);
-
-      _this.setState({
-        resizeEdge: resizeEdge
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleResizeEnd", function (itemId, resizeTime, resizeEdge, timeDelta) {
-      _this.props.itemResized(itemId, resizeTime, resizeEdge, timeDelta);
-
-      _this.clearState();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function () {
-      _this.clearState();
-    });
-
     _defineProperty(_assertThisInitialized(_this), "isInteractingItem", function (item) {
-      return _this.state.interactingItemId === (0, _generic._get)(item, _this.props.keys.itemIdKey);
+      return _this.props.interactingItemId === (0, _generic._get)(item, _this.props.keys.itemIdKey);
     });
@@ -132,4 +79,4 @@
     key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return !((0, _generic.arraysEqual)(nextProps.items, this.props.items) && nextProps.groupDimensions === this.props.groupDimensions && nextProps.keys === this.props.keys && nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.selectedItem === this.props.selectedItem && nextProps.selected === this.props.selected && nextProps.dragSnap === this.props.dragSnap && nextProps.minResizeWidth === this.props.minResizeWidth && nextProps.canChangeGroup === this.props.canChangeGroup && nextProps.canMove === this.props.canMove && nextProps.canResize === this.props.canResize && nextState.canSelect === this.state.canSelect && nextState.dragging === this.state.dragging && nextState.resizing === this.state.resizing && nextState.resizeEdge === this.state.resizeEdge && nextState.resizeStart === this.state.resizeStart && nextState.interactingItemId === this.state.interactingItemId);
+    value: function shouldComponentUpdate(nextProps) {
+      return !((0, _generic.arraysEqual)(nextProps.items, this.props.items) && nextProps.groupDimensions === this.props.groupDimensions && nextProps.keys === this.props.keys && nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.selectedItem === this.props.selectedItem && nextProps.selected === this.props.selected && nextProps.dragSnap === this.props.dragSnap && nextProps.minResizeWidth === this.props.minResizeWidth && nextProps.canChangeGroup === this.props.canChangeGroup && nextProps.canMove === this.props.canMove && nextProps.canResize === this.props.canResize && nextProps.canSelect === this.props.canSelect && nextProps.dragging === this.props.dragging && nextProps.resizing === this.props.resizing && nextProps.resizeEdge === this.props.resizeEdge && nextProps.resizeTime === this.props.resizeTime && nextProps.interactingItemId === this.props.interactingItemId);
     }
@@ -184,3 +131,3 @@ }, {
           minResizeWidth: _this2.props.minResizeWidth,
-          onResizing: _this2.handleResizeMove,
+          onResizing: _this2.props.itemResizing,
           onResized: _this2.handleResizeEnd,
@@ -195,10 +142,10 @@ moveResizeValidator: _this2.props.moveResizeValidator,
           scrollRef: _this2.props.scrollRef,
-          dragging: isInteractingItem && _this2.state.dragging,
-          resizing: isInteractingItem && _this2.state.resizing,
-          dragOffset: isInteractingItem && _this2.state.dragOffset,
-          resizeEdge: isInteractingItem && _this2.state.resizeEdge,
-          resizeStart: isInteractingItem && _this2.state.resizeStart,
-          onDragStart: _this2.handleDragStart,
-          onDragEnd: _this2.handleDragEnd,
-          onResizeStart: _this2.handleResizeStart
+          dragging: isInteractingItem && _this2.props.dragging,
+          resizing: isInteractingItem && _this2.props.resizing,
+          dragOffset: isInteractingItem ? _this2.props.dragOffset : 0,
+          resizeEdge: isInteractingItem ? _this2.props.resizeEdge : undefined,
+          resizeTime: isInteractingItem ? _this2.props.resizeTime : 0,
+          onDragStart: _this2.props.onDragStart,
+          onDragEnd: _this2.props.onDragEnd,
+          onResizeStart: _this2.props.onResizeStart
         });
@@ -240,3 +187,11 @@ }));
   scrollRef: _propTypes["default"].object,
-  order: _propTypes["default"].object
+  order: _propTypes["default"].object,
+  onDragStart: _propTypes["default"].func.isRequired,
+  onDragEnd: _propTypes["default"].func.isRequired,
+  onResizeStart: _propTypes["default"].func.isRequired,
+  dragging: _propTypes["default"].bool.isRequired,
+  dragOffset: _propTypes["default"].number.isRequired,
+  interactingItemId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  resizeEdge: _propTypes["default"].oneOf(['right', 'left']),
+  resizeTime: _propTypes["default"].number
 });
@@ -243,0 +198,0 @@

lib/lib/markers/MarkerCanvas.js

@@ -137,3 +137,3 @@ "use strict";
         }
-      }, _react["default"].createElement(_TimelineMarkersRenderer["default"], null), this.props.children));
+      }, this.props.children, _react["default"].createElement(_TimelineMarkersRenderer["default"], null)));
     }
@@ -140,0 +140,0 @@ }]);

lib/lib/rows/index.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -23,173 +23,291 @@ var _TimelineStateContext = _interopRequireDefault(require("../timeline/TimelineStateContext"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _default = function _default(_ref) {
-  var groupHeights = _ref.groupHeights,
-      groups = _ref.groups,
-      itemRenderer = _ref.itemRenderer,
-      lineHeight = _ref.lineHeight,
-      itemHeightRatio = _ref.itemHeightRatio,
-      stackItems = _ref.stackItems,
-      canChangeGroup = _ref.canChangeGroup,
-      canMove = _ref.canMove,
-      canResize = _ref.canResize,
-      canSelect = _ref.canSelect,
-      useResizeHandle = _ref.useResizeHandle,
-      groupTops = _ref.groupTops,
-      dragSnap = _ref.dragSnap,
-      minResizeWidth = _ref.minResizeWidth,
-      itemResizing = _ref.itemResizing,
-      moveResizeValidator = _ref.moveResizeValidator,
-      itemDrag = _ref.itemDrag,
-      itemDrop = _ref.itemDrop,
-      onItemDoubleClick = _ref.onItemDoubleClick,
-      onItemContextMenu = _ref.onItemContextMenu,
-      itemSelect = _ref.itemSelect,
-      scrollRef = _ref.scrollRef,
-      itemResized = _ref.itemResized,
-      selected = _ref.selected,
-      selectedItem = _ref.selectedItem,
-      verticalLineClassNamesForTime = _ref.verticalLineClassNamesForTime,
-      timeSteps = _ref.timeSteps,
-      minUnit = _ref.minUnit,
-      Layers = _ref.rowRenderer,
-      rowData = _ref.rowData,
-      groupsWithItemsDimensions = _ref.groupsWithItemsDimensions,
-      clickTolerance = _ref.clickTolerance,
-      onRowClick = _ref.onRowClick,
-      onRowDoubleClick = _ref.onRowDoubleClick,
-      horizontalLineClassNamesForGroup = _ref.horizontalLineClassNamesForGroup,
-      onRowContextClick = _ref.onRowContextClick;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  var _useContext = (0, _react.useContext)(_TimelineStateContext["default"]),
-      getTimelineState = _useContext.getTimelineState,
-      getLeftOffsetFromDate = _useContext.getLeftOffsetFromDate,
-      getDateFromLeftOffsetPosition = _useContext.getDateFromLeftOffsetPosition;
+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); } }
 
-  var _getTimelineState = getTimelineState(),
-      visibleTimeStart = _getTimelineState.visibleTimeStart,
-      visibleTimeEnd = _getTimelineState.visibleTimeEnd,
-      canvasTimeStart = _getTimelineState.canvasTimeStart,
-      canvasTimeEnd = _getTimelineState.canvasTimeEnd,
-      canvasWidth = _getTimelineState.canvasWidth,
-      timelineUnit = _getTimelineState.timelineUnit,
-      timelineWidth = _getTimelineState.timelineWidth,
-      keys = _getTimelineState.keys;
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-  function getLayerRootProps() {
-    return {
-      style: {// height: '100%'
-      }
-    };
-  }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-  function getItemDimensionsHelper(item) {
-    var itemId = (0, _generic._get)(item, keys.itemIdKey);
-    var groupId = (0, _generic._get)(item, keys.itemGroupKey);
-    var group = groupsWithItemsDimensions[groupId];
-    var itemDimensions = group.itemDimensions.find(function (i) {
-      return i.id === itemId;
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Rows =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(Rows, _React$Component);
+
+  function Rows() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, Rows);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Rows)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "initState", {
+      dragging: false,
+      resizing: false,
+      dragOffset: 0,
+      interactingItemId: undefined
     });
-    if (itemDimensions) return itemDimensions.dimensions;else return undefined;
-  }
 
-  function getItemAbsoluteLocation(item) {
-    var itemId = (0, _generic._get)(item, keys.itemIdKey);
-    var groupId = (0, _generic._get)(item, keys.itemGroupKey);
-    var group = groupsWithItemsDimensions[groupId];
-    var itemDimensions = group.itemDimensions.find(function (i) {
-      return i.id === itemId;
+    _defineProperty(_assertThisInitialized(_this), "state", _this.initState);
+
+    _defineProperty(_assertThisInitialized(_this), "handleDragStart", function (dragging, dragOffset, itemId) {
+      _this.setState({
+        dragging: dragging,
+        dragOffset: dragOffset,
+        interactingItemId: itemId
+      });
     });
-    var groupIndex = group.index;
-    var groupTop = groupHeights.reduce(function (acc, height, index) {
-      if (index < groupIndex) return acc + height;else return acc;
-    }, 0);
-    return {
-      left: itemDimensions.dimensions.left,
-      top: groupTop + itemDimensions.dimensions.top
-    };
+
+    _defineProperty(_assertThisInitialized(_this), "clearState", function () {
+      _this.setState(_this.initState);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResizeEnd", function (itemId, resizeTime, resizeEdge, timeDelta) {
+      _this.props.itemResized(itemId, resizeTime, resizeEdge, timeDelta);
+
+      _this.clearState();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleDragEnd", function () {
+      _this.clearState();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleResizeStart", function (resizing, itemId) {
+      _this.setState({
+        resizing: resizing,
+        interactingItemId: itemId
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getGroupByItemId", function (itemId) {
+      var _this$props = _this.props,
+          items = _this$props.items,
+          keys = _this$props.keys;
+      var item = items.find(function (i) {
+        return (0, _generic._get)(i, keys.itemIdKey) === itemId;
+      });
+      var groupId = (0, _generic._get)(item, keys.itemGroupKey);
+      return groupId;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getItemDimensionsHelper", function (itemId) {
+      var groupsWithItemsDimensions = _this.props.groupsWithItemsDimensions;
+
+      var groupId = _this.getGroupByItemId(itemId);
+
+      var group = groupsWithItemsDimensions[groupId];
+      var itemDimensions = group.itemDimensions.find(function (i) {
+        return i.id === itemId;
+      });
+      if (itemDimensions) return itemDimensions.dimensions;else return undefined;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getItemAbsoluteLocation", function (itemId) {
+      var groupsWithItemsDimensions = _this.props.groupsWithItemsDimensions;
+      var groupHeights = _this.props.groupHeights;
+
+      var groupId = _this.getGroupByItemId(itemId);
+
+      var group = groupsWithItemsDimensions[groupId];
+      var itemDimensions = group.itemDimensions.find(function (i) {
+        return i.id === itemId;
+      });
+      if (!itemDimensions) return;
+      var groupIndex = group.index;
+      var groupTop = groupHeights.reduce(function (acc, height, index) {
+        if (index < groupIndex) return acc + height;else return acc;
+      }, 0);
+      return {
+        left: itemDimensions.dimensions.left,
+        top: groupTop + itemDimensions.dimensions.top
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getLayerRootProps", function () {
+      return {
+        style: {// height: '100%'
+        }
+      };
+    });
+
+    return _this;
   }
 
-  return _react["default"].createElement("div", {
-    style: {
-      position: 'absolute',
-      top: 0
+  _createClass(Rows, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          groupHeights = _this$props2.groupHeights,
+          groups = _this$props2.groups,
+          itemRenderer = _this$props2.itemRenderer,
+          lineHeight = _this$props2.lineHeight,
+          itemHeightRatio = _this$props2.itemHeightRatio,
+          stackItems = _this$props2.stackItems,
+          canChangeGroup = _this$props2.canChangeGroup,
+          canMove = _this$props2.canMove,
+          canResize = _this$props2.canResize,
+          canSelect = _this$props2.canSelect,
+          useResizeHandle = _this$props2.useResizeHandle,
+          groupTops = _this$props2.groupTops,
+          dragSnap = _this$props2.dragSnap,
+          minResizeWidth = _this$props2.minResizeWidth,
+          itemResizing = _this$props2.itemResizing,
+          moveResizeValidator = _this$props2.moveResizeValidator,
+          itemDrag = _this$props2.itemDrag,
+          itemDrop = _this$props2.itemDrop,
+          onItemDoubleClick = _this$props2.onItemDoubleClick,
+          onItemContextMenu = _this$props2.onItemContextMenu,
+          itemSelect = _this$props2.itemSelect,
+          scrollRef = _this$props2.scrollRef,
+          itemResized = _this$props2.itemResized,
+          selected = _this$props2.selected,
+          selectedItem = _this$props2.selectedItem,
+          verticalLineClassNamesForTime = _this$props2.verticalLineClassNamesForTime,
+          timeSteps = _this$props2.timeSteps,
+          minUnit = _this$props2.minUnit,
+          Layers = _this$props2.rowRenderer,
+          rowData = _this$props2.rowData,
+          groupsWithItemsDimensions = _this$props2.groupsWithItemsDimensions,
+          clickTolerance = _this$props2.clickTolerance,
+          onRowClick = _this$props2.onRowClick,
+          onRowDoubleClick = _this$props2.onRowDoubleClick,
+          horizontalLineClassNamesForGroup = _this$props2.horizontalLineClassNamesForGroup,
+          onRowContextClick = _this$props2.onRowContextClick,
+          items = _this$props2.items,
+          keys = _this$props2.keys;
+      var _this$context = this.context,
+          getTimelineState = _this$context.getTimelineState,
+          getLeftOffsetFromDate = _this$context.getLeftOffsetFromDate,
+          getDateFromLeftOffsetPosition = _this$context.getDateFromLeftOffsetPosition;
+
+      var _getTimelineState = getTimelineState(),
+          visibleTimeStart = _getTimelineState.visibleTimeStart,
+          visibleTimeEnd = _getTimelineState.visibleTimeEnd,
+          canvasTimeStart = _getTimelineState.canvasTimeStart,
+          canvasTimeEnd = _getTimelineState.canvasTimeEnd,
+          canvasWidth = _getTimelineState.canvasWidth,
+          timelineUnit = _getTimelineState.timelineUnit,
+          timelineWidth = _getTimelineState.timelineWidth,
+          resizeEdge = _getTimelineState.resizeEdge,
+          resizeTime = _getTimelineState.resizeTime;
+
+      return _react["default"].createElement("div", {
+        style: {
+          position: 'absolute',
+          top: 0
+        }
+      }, groupHeights.map(function (groupHeight, i) {
+        var groupId = (0, _generic._get)(groups[i], keys.groupIdKey);
+        var group = groupsWithItemsDimensions[groupId];
+        return _react["default"].createElement(_GroupRow["default"], {
+          clickTolerance: clickTolerance,
+          onContextMenu: function onContextMenu(evt) {
+            return onRowContextClick(evt, i);
+          },
+          onClick: function onClick(evt) {
+            return onRowClick(evt, i);
+          },
+          onDoubleClick: function onDoubleClick(evt) {
+            return onRowDoubleClick(evt, i);
+          },
+          key: "horizontal-line-".concat(groupId),
+          isEvenRow: i % 2 === 0,
+          group: groups[i],
+          horizontalLineClassNamesForGroup: horizontalLineClassNamesForGroup,
+          style: {
+            width: canvasWidth,
+            height: groupHeight,
+            background: 'lightgray',
+            border: '1px solid blue',
+            position: 'relative'
+          },
+          keys: keys
+        }, _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Columns["default"], {
+          canvasTimeStart: canvasTimeStart,
+          canvasTimeEnd: canvasTimeEnd,
+          canvasWidth: canvasWidth,
+          lineCount: (0, _generic._length)(groups),
+          minUnit: minUnit,
+          timeSteps: timeSteps,
+          height: groupHeight,
+          verticalLineClassNamesForTime: verticalLineClassNamesForTime
+        }), _react["default"].createElement(_Items["default"] //TODO: fix groups with no items
+        , {
+          items: group.items || [],
+          canvasTimeStart: canvasTimeStart,
+          canvasTimeEnd: canvasTimeEnd,
+          canvasWidth: canvasWidth,
+          dragSnap: dragSnap,
+          minResizeWidth: minResizeWidth,
+          selectedItem: selectedItem,
+          canChangeGroup: canChangeGroup,
+          canMove: canMove,
+          canResize: canResize,
+          canSelect: canSelect,
+          keys: keys,
+          moveResizeValidator: moveResizeValidator,
+          itemSelect: itemSelect,
+          itemDrag: itemDrag,
+          itemDrop: itemDrop,
+          itemResizing: itemResizing,
+          itemResized: _this2.handleResizeEnd,
+          onItemDoubleClick: onItemDoubleClick,
+          onItemContextMenu: onItemContextMenu,
+          itemRenderer: itemRenderer,
+          selected: selected,
+          groupDimensions: group,
+          useResizeHandle: useResizeHandle,
+          scrollRef: scrollRef,
+          order: group,
+          onDragStart: _this2.handleDragStart,
+          onDragEnd: _this2.handleDragEnd,
+          onResizeStart: _this2.handleResizeStart,
+          resizeEdge: resizeEdge,
+          resizeTime: resizeTime,
+          dragging: _this2.state.dragging,
+          resizing: _this2.state.resizing,
+          dragOffset: _this2.state.dragOffset,
+          interactingItemId: _this2.state.interactingItemId
+        }), _react["default"].createElement(Layers, {
+          getLayerRootProps: _this2.getLayerRootProps,
+          helpers: {
+            getLeftOffsetFromDate: getLeftOffsetFromDate,
+            getDateFromLeftOffsetPosition: _this2.getDateFromLeftOffsetPosition,
+            getItemAbsoluteLocation: _this2.getItemAbsoluteLocation,
+            getItemDimensions: _this2.getItemDimensionsHelper
+          },
+          rowData: rowData,
+          group: group.group,
+          itemsWithInteractions: items
+        })));
+      }));
     }
-  }, groupHeights.map(function (groupHeight, i) {
-    var groupId = (0, _generic._get)(groups[i], keys.groupIdKey);
-    var group = groupsWithItemsDimensions[groupId];
-    return _react["default"].createElement(_GroupRow["default"], {
-      clickTolerance: clickTolerance,
-      onContextMenu: function onContextMenu(evt) {
-        return onRowContextClick(evt, i);
-      },
-      onClick: function onClick(evt) {
-        return onRowClick(evt, i);
-      },
-      onDoubleClick: function onDoubleClick(evt) {
-        return onRowDoubleClick(evt, i);
-      },
-      key: "horizontal-line-".concat(groupId),
-      isEvenRow: i % 2 === 0,
-      group: groups[i],
-      horizontalLineClassNamesForGroup: horizontalLineClassNamesForGroup,
-      style: {
-        width: canvasWidth,
-        height: groupHeight,
-        background: 'lightgray',
-        border: '1px solid blue',
-        position: 'relative'
-      },
-      keys: keys
-    }, _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Columns["default"], {
-      canvasTimeStart: canvasTimeStart,
-      canvasTimeEnd: canvasTimeEnd,
-      canvasWidth: canvasWidth,
-      lineCount: (0, _generic._length)(groups),
-      minUnit: minUnit,
-      timeSteps: timeSteps,
-      height: groupHeight,
-      verticalLineClassNamesForTime: verticalLineClassNamesForTime
-    }), _react["default"].createElement(_Items["default"] //TODO: fix groups with no items
-    , {
-      items: group.items || [],
-      canvasTimeStart: canvasTimeStart,
-      canvasTimeEnd: canvasTimeEnd,
-      canvasWidth: canvasWidth,
-      dragSnap: dragSnap,
-      minResizeWidth: minResizeWidth,
-      selectedItem: selectedItem,
-      canChangeGroup: canChangeGroup,
-      canMove: canMove,
-      canResize: canResize,
-      canSelect: canSelect,
-      keys: keys,
-      moveResizeValidator: moveResizeValidator,
-      itemSelect: itemSelect,
-      itemDrag: itemDrag,
-      itemDrop: itemDrop,
-      itemResizing: itemResizing,
-      itemResized: itemResized,
-      onItemDoubleClick: onItemDoubleClick,
-      onItemContextMenu: onItemContextMenu,
-      itemRenderer: itemRenderer,
-      selected: selected,
-      groupDimensions: group,
-      useResizeHandle: useResizeHandle,
-      scrollRef: scrollRef,
-      order: group
-    }), _react["default"].createElement(Layers, {
-      getLayerRootProps: getLayerRootProps,
-      helpers: {
-        getLeftOffsetFromDate: getLeftOffsetFromDate,
-        getDateFromLeftOffsetPosition: getDateFromLeftOffsetPosition,
-        getItemAbsoluteLocation: getItemAbsoluteLocation,
-        getItemDimensions: getItemDimensionsHelper
-      },
-      rowData: rowData,
-      group: group.group
-    })));
-  }));
-};
+  }]);
 
+  return Rows;
+}(_react["default"].Component);
+
+_defineProperty(Rows, "contextType", _TimelineStateContext["default"]);
+
+var _default = Rows;
 exports["default"] = _default;

lib/lib/Timeline.js

@@ -467,5 +467,5 @@ "use strict";
       dragGroupTitle: null,
-      resizeTime: null,
       resizingItem: null,
-      resizingEdge: null
+      resizeTime: undefined,
+      resizingEdge: undefined
     };
@@ -572,3 +572,3 @@
     key: "childrenWithProps",
-    value: function childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, groupsWithItemsDimensions, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps) {
+    value: function childrenWithProps() {
       var _this3 = this;
@@ -584,22 +584,5 @@
       }) : [this.props.children];
-      var childProps = {
-        canvasTimeStart: canvasTimeStart,
-        canvasTimeEnd: canvasTimeEnd,
-        canvasWidth: canvasWidth,
-        visibleTimeStart: visibleTimeStart,
-        visibleTimeEnd: visibleTimeEnd,
-        groupsWithItemsDimensions: groupsWithItemsDimensions,
-        items: this.props.items,
-        groups: this.props.groups,
-        keys: this.props.keys,
-        groupHeights: groupHeights,
-        groupTops: groupTops,
-        selected: this.getSelected(),
-        height: height,
-        minUnit: minUnit,
-        timeSteps: timeSteps
-      };
       return _react["default"].Children.map(childArray, function (child) {
         if (!_this3.isTimelineHeader(child)) {
-          return _react["default"].cloneElement(child, childProps);
+          return child;
         } else {
@@ -708,3 +691,3 @@ return null;
         isInteractingWithItem: isInteractingWithItem
-      }, _react["default"].createElement(_MarkerCanvas["default"], null, this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, groupsWithItemsDimensions, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps), _react["default"].createElement(_rows["default"], {
+      }, _react["default"].createElement(_MarkerCanvas["default"], null, this.childrenWithProps(), _react["default"].createElement(_rows["default"], {
         groupHeights: groupHeights,
@@ -746,3 +729,7 @@ canvasWidth: canvasWidth,
         groupsWithItemsDimensions: groupsWithItemsDimensions,
-        groups: groups
+        groups: groups,
+        items: items,
+        resizingEdge: this.state.resizingEdge,
+        resizeTime: this.state.resizeTime,
+        keys: keys
       }))), rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null)))));
@@ -749,0 +736,0 @@ }

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.27.2-gamma",
+  "version": "0.27.3-gamma",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/lib/items/Item.js

@@ -64,4 +64,4 @@ import { Component } from 'react'
     dragOffset: PropTypes.number.isRequired,
-    resizeEdge: PropTypes.oneOf(PropTypes.oneOfType('left', 'right'), null).isRequired,
-    resizeStart: PropTypes.oneOf(PropTypes.number, null).isRequired,
+    resizeEdge: PropTypes.oneOf(['left', 'right']),
+    resizeStart: PropTypes.number,
   
@@ -211,6 +211,2 @@ onDragStart: PropTypes.func.isRequired,
           const clickTime = this.timeFor(e)
-          // this.setState({
-          //   dragging: true,
-          //   dragOffset : this.itemTimeStart - clickTime,
-          // })
           this.props.onDragStart(true, this.itemTimeStart - clickTime, this.itemId)
@@ -254,7 +250,2 @@ } else {
           }
-          // this.setState({
-          //   dragging: false,
-          //   dragOffset: 0,
-          //   dragTime: null,
-          // })
           this.props.onDragEnd()
@@ -266,8 +257,3 @@ }
         if (this.props.selected) {
-          // this.setState({
-          //   resizing: true,
-          //   resizeEdge: null, // we don't know yet
-          //   resizeStart: e.pageX,
-          // })
-          this.props.onResizeStart(true, null, e.pageX, this.itemId);
+          this.props.onResizeStart(true, this.itemId);
         } else {
@@ -395,6 +381,2 @@ return false
 
-  componentWillUnmount(){
-    //clear parent state on unmointing
-    this.props.onDragEnd()
-  }
 
@@ -569,3 +551,3 @@ onMouseDown = e => {
       resizeStart: this.props.resizeStart,
-      resizeTime: this.props.resizeEdge !== null ?
+      resizeTime: this.props.resizeEdge !== undefined ?
         this.props.resizeEdge === 'right'? 
@@ -572,0 +554,0 @@ this.itemTimeEnd

src/lib/items/Items.js

@@ -6,4 +6,3 @@ import PropTypes from 'prop-types'
 
-import { _get, arraysEqual, keyBy } from '../utility/generic'
-import { getGroupOrders, getVisibleItems } from '../utility/calendar'
+import { _get, arraysEqual } from '../utility/generic'
 
@@ -57,3 +56,12 @@ const canResizeLeft = (item, canResize) => {
     scrollRef: PropTypes.object,
-    order: PropTypes.object
+    order: PropTypes.object,
+
+    onDragStart: PropTypes.func.isRequired,
+    onDragEnd: PropTypes.func.isRequired,
+    onResizeStart:  PropTypes.func.isRequired,
+    dragging: PropTypes.bool.isRequired,
+    dragOffset: PropTypes.number.isRequired,
+    interactingItemId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    resizeEdge: PropTypes.oneOf(['right', 'left']),
+    resizeTime: PropTypes.number
   }
@@ -65,50 +73,3 @@
 
-  initState = {
-    dragging: false,
-    resizing: false,
-    dragOffset: 0,
-    //TODO: exist in Timeline but needs to be passed here through prop drilling (might consider)
-    resizeEdge: null,
-    resizeStart: null,
-    interactingItemId: undefined,
-  }
-
-  state = this.initState
-
-  handleDragStart = (dragging, dragOffset, itemId) => {
-    this.setState({
-      dragging,
-      dragOffset,
-      interactingItemId: itemId
-    })
-  }
-
-  clearState = () => {
-    this.setState(this.initState)
-  }
-
-  handleResizeStart = (resizing, resizeEdge, resizeStart, itemId) => {
-    this.setState({
-      resizing,
-      resizeEdge,
-      resizeStart,
-      interactingItemId: itemId
-    })
-  }
-
-  handleResizeMove = (itemId, resizeTime, resizeEdge) =>{
-    this.props.itemResizing(itemId, resizeTime, resizeEdge)
-    this.setState({resizeEdge})
-  }
-
-  handleResizeEnd = (itemId, resizeTime, resizeEdge, timeDelta) => {
-    this.props.itemResized(itemId, resizeTime, resizeEdge, timeDelta)
-    this.clearState()
-  }
-
-  handleDragEnd = () => {
-    this.clearState()
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps) {
     return !(
@@ -128,8 +89,8 @@ arraysEqual(nextProps.items, this.props.items) &&
       nextProps.canResize === this.props.canResize &&
-      nextState.canSelect === this.state.canSelect &&
-      nextState.dragging === this.state.dragging &&
-      nextState.resizing === this.state.resizing &&
-      nextState.resizeEdge === this.state.resizeEdge &&
-      nextState.resizeStart === this.state.resizeStart &&
-      nextState.interactingItemId === this.state.interactingItemId
+      nextProps.canSelect === this.props.canSelect &&
+      nextProps.dragging === this.props.dragging &&
+      nextProps.resizing === this.props.resizing &&
+      nextProps.resizeEdge === this.props.resizeEdge &&
+      nextProps.resizeTime === this.props.resizeTime &&
+      nextProps.interactingItemId === this.props.interactingItemId
     )
@@ -148,3 +109,3 @@ }
   isInteractingItem = (item) => {
-    return this.state.interactingItemId === _get(item, this.props.keys.itemIdKey)
+    return this.props.interactingItemId === _get(item, this.props.keys.itemIdKey)
   }
@@ -199,3 +160,3 @@
             minResizeWidth={this.props.minResizeWidth}
-            onResizing={this.handleResizeMove}
+            onResizing={this.props.itemResizing}
             onResized={this.handleResizeEnd}
@@ -210,10 +171,10 @@ moveResizeValidator={this.props.moveResizeValidator}
             scrollRef={this.props.scrollRef}
-            dragging={isInteractingItem && this.state.dragging}
-            resizing={isInteractingItem && this.state.resizing}
-            dragOffset={isInteractingItem && this.state.dragOffset}
-            resizeEdge={isInteractingItem && this.state.resizeEdge}
-            resizeStart={isInteractingItem && this.state.resizeStart}
-            onDragStart={this.handleDragStart}
-            onDragEnd={this.handleDragEnd}
-            onResizeStart={this.handleResizeStart}
+            dragging={isInteractingItem && this.props.dragging}
+            resizing={isInteractingItem && this.props.resizing}
+            dragOffset={isInteractingItem ? this.props.dragOffset: 0}
+            resizeEdge={isInteractingItem ? this.props.resizeEdge: undefined}
+            resizeTime={isInteractingItem ? this.props.resizeTime: 0}
+            onDragStart={this.props.onDragStart}
+            onDragEnd={this.props.onDragEnd}
+            onResizeStart={this.props.onResizeStart}
           />
@@ -220,0 +181,0 @@ )})}

src/lib/markers/MarkerCanvas.js

@@ -74,4 +74,4 @@ import React from 'react'
         >
+          {this.props.children}
           <TimelineMarkersRenderer />
-          {this.props.children}
         </div>
@@ -78,0 +78,0 @@ </MarkerCanvasProvider>

src/lib/rows/index.js

@@ -1,2 +0,2 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import TimelineStateContext from '../timeline/TimelineStateContext'
@@ -8,68 +8,53 @@ import Columns from '../columns/Columns'
 
-export default ({
-  groupHeights,
-  groups,
-  itemRenderer,
-  lineHeight,
-  itemHeightRatio,
-  stackItems,
-  canChangeGroup,
-  canMove,
-  canResize,
-  canSelect,
-  useResizeHandle,
-  groupTops,
-  dragSnap,
-  minResizeWidth,
-  itemResizing,
-  moveResizeValidator,
-  itemDrag,
-  itemDrop,
-  onItemDoubleClick,
-  onItemContextMenu,
-  itemSelect,
-  scrollRef,
-  itemResized,
-  selected,
-  selectedItem,
-  verticalLineClassNamesForTime,
-  timeSteps,
-  minUnit,
-  rowRenderer: Layers,
-  rowData,
-  groupsWithItemsDimensions,
-  //row props
-  clickTolerance,
-  onRowClick,
-  onRowDoubleClick,
-  horizontalLineClassNamesForGroup,
-  onRowContextClick
-}) => {
-  const {
-    getTimelineState,
-    getLeftOffsetFromDate,
-    getDateFromLeftOffsetPosition
-  } = useContext(TimelineStateContext)
-  const {
-    visibleTimeStart,
-    visibleTimeEnd,
-    canvasTimeStart,
-    canvasTimeEnd,
-    canvasWidth,
-    timelineUnit,
-    timelineWidth,
-    keys
-  } = getTimelineState()
+class Rows extends React.Component {
+  static contextType = TimelineStateContext
 
-  function getLayerRootProps() {
-    return {
-      style: {
-        // height: '100%'
-      }
-    }
+  initState = {
+    dragging: false,
+    resizing: false,
+    dragOffset: 0,
+    interactingItemId: undefined
   }
-  
-  function getItemDimensionsHelper(item) {
-    const itemId = _get(item, keys.itemIdKey)
+
+  state = this.initState
+
+  handleDragStart = (dragging, dragOffset, itemId) => {
+    this.setState({
+      dragging,
+      dragOffset,
+      interactingItemId: itemId
+    })
+  }
+
+  clearState = () => {
+    this.setState(this.initState)
+  }
+
+  handleResizeEnd = (itemId, resizeTime, resizeEdge, timeDelta) => {
+    this.props.itemResized(itemId, resizeTime, resizeEdge, timeDelta)
+    this.clearState()
+  }
+
+  handleDragEnd = () => {
+    this.clearState()
+  }
+
+  handleResizeStart = (resizing, itemId) => {
+    this.setState({
+      resizing,
+      interactingItemId: itemId
+    })
+  }
+
+  //TODO: make this faster
+  getGroupByItemId= (itemId) => {
+    const {items, keys} = this.props
+    const item = items.find(i => _get(i, keys.itemIdKey) === itemId)
     const groupId = _get(item, keys.itemGroupKey)
+    return groupId
+  }
+
+  getItemDimensionsHelper = (itemId) => {
+    const { groupsWithItemsDimensions } = this.props
+    const groupId = this.getGroupByItemId(itemId)
     const group = groupsWithItemsDimensions[groupId]
@@ -81,7 +66,9 @@ const itemDimensions = group.itemDimensions.find(i => i.id === itemId)
 
-  function getItemAbsoluteLocation(item) {
-    const itemId = _get(item, keys.itemIdKey)
-    const groupId = _get(item, keys.itemGroupKey)
+  getItemAbsoluteLocation = (itemId) => {
+    const { groupsWithItemsDimensions } = this.props
+    const {groupHeights} = this.props;
+    const groupId = this.getGroupByItemId(itemId)
     const group = groupsWithItemsDimensions[groupId]
     const itemDimensions = group.itemDimensions.find(i => i.id === itemId)
+    if (!itemDimensions) return
     const groupIndex = group.index
@@ -98,83 +85,167 @@ const groupTop = groupHeights.reduce((acc, height, index) => {
 
-  return (
-    <div style={{ position: 'absolute', top: 0 }}>
-      {groupHeights.map((groupHeight, i) => {
-        const groupId = _get(groups[i], keys.groupIdKey)
-        const group = groupsWithItemsDimensions[groupId]
-        return (
-          <GroupRow
-            clickTolerance={clickTolerance}
-            onContextMenu={evt => onRowContextClick(evt, i)}
-            onClick={evt => onRowClick(evt, i)}
-            onDoubleClick={evt => onRowDoubleClick(evt, i)}
-            key={`horizontal-line-${groupId}`}
-            isEvenRow={i % 2 === 0}
-            group={groups[i]}
-            horizontalLineClassNamesForGroup={horizontalLineClassNamesForGroup}
-            style={{
-              width: canvasWidth,
-              height: groupHeight,
-              background: 'lightgray',
-              border: '1px solid blue',
-              position: 'relative'
-            }}
-            keys={keys}
-          >
-            <React.Fragment>
-              <Columns
-                canvasTimeStart={canvasTimeStart}
-                canvasTimeEnd={canvasTimeEnd}
-                canvasWidth={canvasWidth}
-                lineCount={_length(groups)}
-                minUnit={minUnit}
-                timeSteps={timeSteps}
-                height={groupHeight}
-                verticalLineClassNamesForTime={verticalLineClassNamesForTime}
-              />
-              <Items
-                //TODO: fix groups with no items
-                items={group.items || []}
-                canvasTimeStart={canvasTimeStart}
-                canvasTimeEnd={canvasTimeEnd}
-                canvasWidth={canvasWidth}
-                dragSnap={dragSnap}
-                minResizeWidth={minResizeWidth}
-                selectedItem={selectedItem}
-                canChangeGroup={canChangeGroup}
-                canMove={canMove}
-                canResize={canResize}
-                canSelect={canSelect}
-                keys={keys}
-                moveResizeValidator={moveResizeValidator}
-                itemSelect={itemSelect}
-                itemDrag={itemDrag}
-                itemDrop={itemDrop}
-                itemResizing={itemResizing}
-                itemResized={itemResized}
-                onItemDoubleClick={onItemDoubleClick}
-                onItemContextMenu={onItemContextMenu}
-                itemRenderer={itemRenderer}
-                selected={selected}
-                groupDimensions={group}
-                useResizeHandle={useResizeHandle}
-                scrollRef={scrollRef}
-                order={group}
-              />
-              <Layers
-                getLayerRootProps={getLayerRootProps}
-                helpers={{
-                  getLeftOffsetFromDate,
-                  getDateFromLeftOffsetPosition,
-                  getItemAbsoluteLocation,
-                  getItemDimensions: getItemDimensionsHelper
-                }}
-                rowData={rowData}
-                group={group.group}
-              />
-            </React.Fragment>
-          </GroupRow>
-        )
-      })}
-    </div>
-  )
+  getLayerRootProps = () => {
+    return {
+      style: {
+        // height: '100%'
+      }
+    }
+  }
+
+  render() {
+    const {
+      groupHeights,
+      groups,
+      itemRenderer,
+      lineHeight,
+      itemHeightRatio,
+      stackItems,
+      canChangeGroup,
+      canMove,
+      canResize,
+      canSelect,
+      useResizeHandle,
+      groupTops,
+      dragSnap,
+      minResizeWidth,
+      itemResizing,
+      moveResizeValidator,
+      itemDrag,
+      itemDrop,
+      onItemDoubleClick,
+      onItemContextMenu,
+      itemSelect,
+      scrollRef,
+      itemResized,
+      selected,
+      selectedItem,
+      verticalLineClassNamesForTime,
+      timeSteps,
+      minUnit,
+      rowRenderer: Layers,
+      rowData,
+      groupsWithItemsDimensions,
+      //row props
+      clickTolerance,
+      onRowClick,
+      onRowDoubleClick,
+      horizontalLineClassNamesForGroup,
+      onRowContextClick,
+      items,
+      keys
+    } = this.props
+    const {
+      getTimelineState,
+      getLeftOffsetFromDate,
+      getDateFromLeftOffsetPosition
+    } = this.context
+    const {
+      visibleTimeStart,
+      visibleTimeEnd,
+      canvasTimeStart,
+      canvasTimeEnd,
+      canvasWidth,
+      timelineUnit,
+      timelineWidth,
+      resizeEdge,
+      resizeTime,
+
+    } = getTimelineState()
+
+
+    return (
+      <div style={{ position: 'absolute', top: 0 }}>
+        {groupHeights.map((groupHeight, i) => {
+          const groupId = _get(groups[i], keys.groupIdKey)
+          const group = groupsWithItemsDimensions[groupId]
+          return (
+            <GroupRow
+              clickTolerance={clickTolerance}
+              onContextMenu={evt => onRowContextClick(evt, i)}
+              onClick={evt => onRowClick(evt, i)}
+              onDoubleClick={evt => onRowDoubleClick(evt, i)}
+              key={`horizontal-line-${groupId}`}
+              isEvenRow={i % 2 === 0}
+              group={groups[i]}
+              horizontalLineClassNamesForGroup={
+                horizontalLineClassNamesForGroup
+              }
+              style={{
+                width: canvasWidth,
+                height: groupHeight,
+                background: 'lightgray',
+                border: '1px solid blue',
+                position: 'relative'
+              }}
+              keys={keys}
+            >
+              <React.Fragment>
+                <Columns
+                  canvasTimeStart={canvasTimeStart}
+                  canvasTimeEnd={canvasTimeEnd}
+                  canvasWidth={canvasWidth}
+                  lineCount={_length(groups)}
+                  minUnit={minUnit}
+                  timeSteps={timeSteps}
+                  height={groupHeight}
+                  verticalLineClassNamesForTime={verticalLineClassNamesForTime}
+                />
+                <Items
+                  //TODO: fix groups with no items
+                  items={group.items || []}
+                  canvasTimeStart={canvasTimeStart}
+                  canvasTimeEnd={canvasTimeEnd}
+                  canvasWidth={canvasWidth}
+                  dragSnap={dragSnap}
+                  minResizeWidth={minResizeWidth}
+                  selectedItem={selectedItem}
+                  canChangeGroup={canChangeGroup}
+                  canMove={canMove}
+                  canResize={canResize}
+                  canSelect={canSelect}
+                  keys={keys}
+                  moveResizeValidator={moveResizeValidator}
+                  itemSelect={itemSelect}
+                  itemDrag={itemDrag}
+                  itemDrop={itemDrop}
+                  itemResizing={itemResizing}
+                  itemResized={this.handleResizeEnd}
+                  onItemDoubleClick={onItemDoubleClick}
+                  onItemContextMenu={onItemContextMenu}
+                  itemRenderer={itemRenderer}
+                  selected={selected}
+                  groupDimensions={group}
+                  useResizeHandle={useResizeHandle}
+                  scrollRef={scrollRef}
+                  order={group}
+                  onDragStart={this.handleDragStart}
+                  onDragEnd={this.handleDragEnd}
+                  onResizeStart={this.handleResizeStart}
+                  resizeEdge={resizeEdge}
+                  resizeTime={resizeTime}
+                  dragging={this.state.dragging}
+                  resizing={this.state.resizing}
+                  dragOffset={this.state.dragOffset}
+                  interactingItemId={this.state.interactingItemId}
+                />
+                <Layers
+                  getLayerRootProps={this.getLayerRootProps}
+                  helpers={{
+                    getLeftOffsetFromDate: getLeftOffsetFromDate,
+                    getDateFromLeftOffsetPosition: this.getDateFromLeftOffsetPosition,
+                    getItemAbsoluteLocation: this.getItemAbsoluteLocation,
+                    getItemDimensions: this.getItemDimensionsHelper
+                  }}
+                  rowData={rowData}
+                  group={group.group}
+                  itemsWithInteractions={items}
+                />
+              </React.Fragment>
+            </GroupRow>
+          )
+        })}
+      </div>
+    )
+  }
 }
+
+export default Rows

src/lib/Timeline.js

@@ -315,5 +315,5 @@ import PropTypes from 'prop-types'
       dragGroupTitle: null,
-      resizeTime: null,
       resizingItem: null,
-      resizingEdge: null
+      resizeTime: undefined,
+      resizingEdge: undefined
     }
@@ -815,15 +815,3 @@
   
-  childrenWithProps(
-    canvasTimeStart,
-    canvasTimeEnd,
-    canvasWidth,
-    groupsWithItemsDimensions,
-    groupHeights,
-    groupTops,
-    height,
-    visibleTimeStart,
-    visibleTimeEnd,
-    minUnit,
-    timeSteps
-  ) {
+  childrenWithProps() {
     if (!this.props.children) {
@@ -838,23 +826,5 @@ return null
 
-    const childProps = {
-      canvasTimeStart,
-      canvasTimeEnd,
-      canvasWidth,
-      visibleTimeStart: visibleTimeStart,
-      visibleTimeEnd: visibleTimeEnd,
-      groupsWithItemsDimensions,
-      items: this.props.items,
-      groups: this.props.groups,
-      keys: this.props.keys,
-      groupHeights: groupHeights,
-      groupTops: groupTops,
-      selected: this.getSelected(),
-      height: height,
-      minUnit: minUnit,
-      timeSteps: timeSteps
-    }
-
     return React.Children.map(childArray, child => {
       if (!this.isTimelineHeader(child)) {
-        return React.cloneElement(child, childProps)
+        return child
       } else {
@@ -1003,15 +973,3 @@ return null
                   <MarkerCanvas>
-                    {this.childrenWithProps(
-                      canvasTimeStart,
-                      canvasTimeEnd,
-                      canvasWidth,
-                      groupsWithItemsDimensions,
-                      groupHeights,
-                      groupTops,
-                      height,
-                      visibleTimeStart,
-                      visibleTimeEnd,
-                      minUnit,
-                      timeSteps
-                    )}
+                    {this.childrenWithProps()}
                     <Rows
@@ -1057,2 +1015,6 @@ groupHeights={groupHeights}
                       groups={groups}
+                      items={items}
+                      resizingEdge={this.state.resizingEdge}
+                      resizeTime={this.state.resizeTime}
+                      keys={keys}
                     />
@@ -1059,0 +1021,0 @@ </MarkerCanvas>

No alert changes

Improved metrics

Total package byte prevSize

498064

increased by0.62%

Worsened metrics

Lines of code

9972

decreased by-0.05%

No dependency changes