react-calendar-timeline - npm Package Compare versions

Comparing version 0.25.5-beta to 0.26.0-beta

CHANGELOG.md

@@ -10,22 +10,30 @@ # Change Log
 
-## 0.25.5
+## 0.26.0
 
-- Upgrade to Babel 7.5.0, Jest 24.8.0, Enzyme 3.10.0 @trevdor
+#### Added
 
+* Add `onItemDrag` prop to `<Timeline />` #517 @bettymakes
+* Upgrade to Babel 7.5.0, Jest 24.8.0, Enzyme 3.10.0 @trevdor
+
+#### Breaking
+
+* Removed `<InfoLabel />` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label.
+
+
 ## 0.25.4
 
-- Move `classnames` to a production dependency
+* Move `classnames` to a production dependency
 
 ## 0.25.3
 
-- Fixed the `undefined` classnames in TimelineHeaders #566 @trevdor
+* Fixed the `undefined` classnames in TimelineHeaders #566 @trevdor
 
 ## 0.25.2
 
-- Fixed the auto-scroll right bug in a scaled browser. #528 @cw196
+* Fixed the auto-scroll right bug in a scaled browser. #528 @cw196
 
 ## 0.25.1
 
-- fix error when using `week` unit causing format error in `DateHeader` #562 @dkarnutsch
-- fix Wheel/Mousewheel Event errors on chrome 73 #541 @ilaiwi
+* fix error when using `week` unit causing format error in `DateHeader` #562 @dkarnutsch
+* fix Wheel/Mousewheel Event errors on chrome 73 #541 @ilaiwi
 
@@ -38,3 +46,2 @@ ## 0.25.0
 
-
 ```jsx
@@ -102,19 +109,19 @@ import Timeline, {
 #### removed props
-- `stickyOffset` and `stickyHeader` now you can make your header sticky by following this [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering)
-- `headerRef` to get the headerRef you need to pass ref callback to `TimelineHeader` component
-- `headerLabelGroupHeight` and `headerLabelHeight` now you can pass a `height` prop to both `CustomHeader` and `DateHeader`
-- `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
 
+* `stickyOffset` and `stickyHeader` now you can make your header sticky by following this [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering)
+* `headerRef` to get the headerRef you need to pass ref callback to `TimelineHeader` component
+* `headerLabelGroupHeight` and `headerLabelHeight` now you can pass a `height` prop to both `CustomHeader` and `DateHeader`
+* `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
 
 ## 0.23.1
 
-- fix height calculation of stacked items is off if no item is visible in a line @Felix-N
-- fix Unsubscribing markers correctly when unmounted @gaston-niglia
+* fix height calculation of stacked items is off if no item is visible in a line @Felix-N
+* fix Unsubscribing markers correctly when unmounted @gaston-niglia
 
 ## 0.23.0
 
-- improve unit tests coverage #426 - @ilaiwi
-- stack items by group #384 - @acemac
-- fix bug where `canMove` prop gets ignored #484 - @acemac + @ilaiwi
-- fix sidebar re-render when groupHeights do not change #478 - @SDupZ
+* improve unit tests coverage #426 - @ilaiwi
+* stack items by group #384 - @acemac
+* fix bug where `canMove` prop gets ignored #484 - @acemac + @ilaiwi
+* fix sidebar re-render when groupHeights do not change #478 - @SDupZ
 
@@ -166,3 +173,2 @@ ### Stack per group
 
-
 ## 0.22.0
@@ -192,5 +198,7 @@
 ### improvements
+
 * eliminate extra renders on every scroll - #357 [acemac](https://github.com/acemac)
 
 ### Fixed
+
 * When the `date` prop on a `CustomMarker` changes the marker will now move on the timeline - #421 [kevinmanncito](https://github.com/kevinmanncito) [ilaiwi](https://github.com/ilaiwi)
@@ -204,4 +212,2 @@ * Header has a bounce effect - #311 [acemac](https://github.com/acemac)
 
-
-
 ### 0.19.0
@@ -245,3 +251,3 @@
 
-* Removed support for React 15 and lower.  This is due to the fact that 16+ supports returning arrays from render, something that the TimelineMarker feature relies on.
+* Removed support for React 15 and lower. This is due to the fact that 16+ supports returning arrays from render, something that the TimelineMarker feature relies on.
 * removed `showCursorLine` prop in favor of using the `CursorMarker` component. See `TimelineMarkers` section of README for documentation.
@@ -270,2 +276,3 @@
 ### Added
+
 * fix issue with single row header - #359
@@ -272,0 +279,0 @@

lib/lib/columns/Columns.js

@@ -20,6 +20,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _extends() { _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; }; return _extends.apply(this, arguments); }
@@ -26,0 +24,0 @@

lib/lib/headers/CustomHeader.js

@@ -24,6 +24,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,0 +28,0 @@

lib/lib/headers/DateHeader.js

@@ -36,6 +36,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -42,0 +40,0 @@

lib/lib/headers/Interval.js

@@ -22,6 +22,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -28,0 +26,0 @@

lib/lib/headers/SidebarHeader.js

@@ -20,6 +20,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,0 +24,0 @@

lib/lib/headers/TimelineHeaders.js

@@ -24,6 +24,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -30,0 +28,0 @@

lib/lib/markers/implementations/shared.js

@@ -12,6 +12,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 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; }
@@ -18,0 +16,0 @@

lib/lib/markers/public/CustomMarker.js

@@ -22,6 +22,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -28,0 +26,0 @@

lib/lib/markers/public/TodayMarker.js

@@ -22,6 +22,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -28,0 +26,0 @@

lib/lib/markers/TimelineMarkersContext.js

@@ -28,6 +28,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -34,0 +32,0 @@

lib/lib/Timeline.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _InfoLabel = _interopRequireDefault(require("./layout/InfoLabel"));
-
 var _Sidebar = _interopRequireDefault(require("./layout/Sidebar"));
@@ -294,2 +292,9 @@
       });
+
+      _this.updatingItem({
+        eventType: 'move',
+        itemId: item,
+        time: dragTime,
+        newGroupOrder: newGroupOrder
+      });
     });
@@ -315,2 +320,9 @@
       });
+
+      _this.updatingItem({
+        eventType: 'resize',
+        itemId: item,
+        time: resizeTime,
+        edge: edge
+      });
     });
@@ -330,2 +342,20 @@
 
+    _defineProperty(_assertThisInitialized(_this), "updatingItem", function (_ref) {
+      var eventType = _ref.eventType,
+          itemId = _ref.itemId,
+          time = _ref.time,
+          edge = _ref.edge,
+          newGroupOrder = _ref.newGroupOrder;
+
+      if (_this.props.onItemDrag) {
+        _this.props.onItemDrag({
+          eventType: eventType,
+          itemId: itemId,
+          time: time,
+          edge: edge,
+          newGroupOrder: newGroupOrder
+        });
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleRowClick", function (e, rowIndex) {
@@ -565,17 +595,2 @@ // shouldnt this be handled by the user, as far as when to deselect an item?
   }, {
-    key: "infoLabel",
-    value: function infoLabel() {
-      var label = null;
-
-      if (this.state.dragTime) {
-        label = "".concat((0, _moment["default"])(this.state.dragTime).format('LLL'), ", \n        ").concat(this.state.dragGroupTitle);
-      } else if (this.state.resizeTime) {
-        label = (0, _moment["default"])(this.state.resizeTime).format('LLL');
-      }
-
-      return label ? _react["default"].createElement(_InfoLabel["default"], {
-        label: label
-      }) : undefined;
-    }
-  }, {
     key: "sidebar",
@@ -716,3 +731,3 @@ value: function sidebar(height, groupHeights) {
         isInteractingWithItem: isInteractingWithItem
-      }, _react["default"].createElement(_MarkerCanvas["default"], null, this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops), this.columns(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height), this.rows(canvasWidth, groupHeights, groups), this.infoLabel(), this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps))), rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null)))));
+      }, _react["default"].createElement(_MarkerCanvas["default"], null, this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops), this.columns(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height), this.rows(canvasWidth, groupHeights, groups), this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps))), rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null)))));
     }
@@ -786,2 +801,3 @@ }], [{
   onZoom: _propTypes["default"].func,
+  onItemDrag: _propTypes["default"].func,
   moveResizeValidator: _propTypes["default"].func,
@@ -885,2 +901,3 @@ itemRenderer: _propTypes["default"].func,
   onItemDeselect: null,
+  onItemDrag: null,
   onCanvasClick: null,
@@ -887,0 +904,0 @@ onItemDoubleClick: null,

lib/lib/utility/calendar.js

@@ -36,6 +36,4 @@ "use strict";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 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; }
@@ -42,0 +40,0 @@

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.25.5-beta",
+  "version": "0.26.0-beta",
   "description": "react calendar timeline",
@@ -8,4 +8,6 @@ "main": "lib/index.js",
     "build": "npm run build:lib",
-    "build:demo": "echo '!!! Building Demo' && cross-env NODE_ENV=production webpack --progress",
-    "build:lib": "echo '!!! Building Library' && rimraf lib && cross-env NODE_ENV=production babel src --out-dir lib && node-sass src/lib/Timeline.scss lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
+    "build:demo":
+      "echo '!!! Building Demo' && cross-env NODE_ENV=production webpack --progress",
+    "build:lib":
+      "echo '!!! Building Library' && rimraf lib && cross-env NODE_ENV=production babel src --out-dir lib && node-sass src/lib/Timeline.scss lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
     "lint": "eslint --ext .js --ext .jsx ./src",
@@ -18,6 +20,3 @@ "lint:fix": "prettier-eslint --parser babylon --write \"src/**/*.js\"",
   },
-  "files": [
-    "lib",
-    "src"
-  ],
+  "files": ["lib", "src"],
   "homepage": "https://github.com/namespace-ee/react-calendar-timeline",
@@ -63,8 +62,3 @@ "repository": {
   "license": "MIT",
-  "keywords": [
-    "react",
-    "reactjs",
-    "react-component",
-    "timeline"
-  ],
+  "keywords": ["react", "reactjs", "react-component", "timeline"],
   "standard": {
@@ -71,0 +65,0 @@ "parser": "babel-eslint"

README.md

@@ -259,2 +259,15 @@ # React Calendar Timeline
 
+## onItemDrag(itemDragObject)
+
+Called when an item is moving or resizing. Returns an object with the following properties:
+
+| property           | type     | description                                                            |
+| ------------------ | -------- | ---------------------------------------------------------------------- |
+| `eventType`        | `string` | retuns either `move` or `resize`                                       |
+| `itemId`           | `number` | ID of the item being moved or resized                                  |
+| `time`             | `number` | UNIX timestamp in milliseconds                                         |
+| `edge`             | `string` | on `resize`, returns a value of either `left` or `right`               |
+| `newGroupOrder`    | `number` | on `move`, index position of the new group that the item is moving to  |
+
+
 ## onItemMove(itemId, dragTime, newGroupOrder)
@@ -261,0 +274,0 @@

src/lib/Timeline.js

@@ -6,3 +6,2 @@ import PropTypes from 'prop-types'
 import Items from './items/Items'
-import InfoLabel from './layout/InfoLabel'
 import Sidebar from './layout/Sidebar'
@@ -23,3 +22,3 @@ import Columns from './columns/Columns'
   getCanvasWidth,
-  stackTimelineItems,
+  stackTimelineItems
 } from './utility/calendar'
@@ -82,2 +81,3 @@ import { _get, _length } from './utility/generic'
     onZoom: PropTypes.func,
+    onItemDrag: PropTypes.func,
 
@@ -197,2 +197,3 @@ moveResizeValidator: PropTypes.func,
     onItemDeselect: null,
+    onItemDrag: null,
     onCanvasClick: null,
@@ -259,3 +260,3 @@ onItemDoubleClick: null,
       canvasTimeStart,
-      canvasTimeEnd,
+      canvasTimeEnd
     } = this.state
@@ -291,3 +292,6 @@
 
-    const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(visibleTimeStart, visibleTimeEnd)
+    const [canvasTimeStart, canvasTimeEnd] = getCanvasBoundariesFromVisibleTime(
+      visibleTimeStart,
+      visibleTimeEnd
+    )
 
@@ -308,20 +312,25 @@ this.state = {
 
-    const canvasWidth=  getCanvasWidth(this.state.width)
+    const canvasWidth = getCanvasWidth(this.state.width)
 
-    const { dimensionItems, height, groupHeights, groupTops } = stackTimelineItems(
-        props.items,
-        props.groups,
-        canvasWidth,
-        this.state.canvasTimeStart,
-        this.state.canvasTimeEnd,
-        props.keys,
-        props.lineHeight,
-        props.itemHeightRatio,
-        props.stackItems,
-        this.state.draggingItem,
-        this.state.resizingItem,
-        this.state.dragTime,
-        this.state.resizingEdge,
-        this.state.resizeTime,
-        this.state.newGroupOrder
+    const {
+      dimensionItems,
+      height,
+      groupHeights,
+      groupTops
+    } = stackTimelineItems(
+      props.items,
+      props.groups,
+      canvasWidth,
+      this.state.canvasTimeStart,
+      this.state.canvasTimeEnd,
+      props.keys,
+      props.lineHeight,
+      props.itemHeightRatio,
+      props.stackItems,
+      this.state.draggingItem,
+      this.state.resizingItem,
+      this.state.dragTime,
+      this.state.resizingEdge,
+      this.state.resizeTime,
+      this.state.newGroupOrder
     )
@@ -386,3 +395,4 @@
       const canvasWidth = getCanvasWidth(prevState.width)
-      Object.assign(derivedState, 
+      Object.assign(
+        derivedState,
         stackTimelineItems(
@@ -404,3 +414,4 @@ items,
           prevState.newGroupOrder
-        ))
+        )
+      )
     }
@@ -433,10 +444,10 @@
     const scrollLeft = Math.round(
-      (this.state.width *
-        (this.state.visibleTimeStart - this.state.canvasTimeStart)) /
+      this.state.width *
+        (this.state.visibleTimeStart - this.state.canvasTimeStart) /
         newZoom
     )
-    const componentScrollLeft = Math.round(this.scrollComponent.scrollLeft);
+    const componentScrollLeft = Math.round(this.scrollComponent.scrollLeft)
     if (componentScrollLeft !== scrollLeft) {
-      this.scrollComponent.scrollLeft = scrollLeft;
-      this.scrollHeaderRef.scrollLeft = scrollLeft;
+      this.scrollComponent.scrollLeft = scrollLeft
+      this.scrollHeaderRef.scrollLeft = scrollLeft
     }
@@ -446,9 +457,12 @@ }
   resize = (props = this.props) => {
-    const {
-      width: containerWidth,
-    } = this.container.getBoundingClientRect()
+    const { width: containerWidth } = this.container.getBoundingClientRect()
 
     let width = containerWidth - props.sidebarWidth - props.rightSidebarWidth
     const canvasWidth = getCanvasWidth(width)
-    const { dimensionItems, height, groupHeights, groupTops } = stackTimelineItems(
+    const {
+      dimensionItems,
+      height,
+      groupHeights,
+      groupTops
+    } = stackTimelineItems(
       props.items,
@@ -479,3 +493,3 @@ props.groups,
       groupHeights,
-      groupTops,
+      groupTops
     })
@@ -506,3 +520,3 @@
 
-    const visibleTimeStart = canvasTimeStart + (zoom * scrollX) / width
+    const visibleTimeStart = canvasTimeStart + zoom * scrollX / width
 
@@ -543,3 +557,3 @@ if (
   handleWheelZoom = (speed, xPosition, deltaY) => {
-    this.changeZoom(1.0 + (speed * deltaY) / 500, xPosition / this.state.width)
+    this.changeZoom(1.0 + speed * deltaY / 500, xPosition / this.state.width)
   }
@@ -621,7 +635,3 @@
     const { dragSnap } = this.props
-    const {
-      width,
-      canvasTimeStart,
-      canvasTimeEnd,
-    } = this.state
+    const { width, canvasTimeStart, canvasTimeEnd } = this.state
     // this gives us distance from left of row element, so event is in
@@ -633,3 +643,3 @@ // context of the row element, not client or page
       canvasTimeStart,
-      
+
       canvasTimeEnd,
@@ -673,2 +683,9 @@ getCanvasWidth(width),
     })
+
+    this.updatingItem({
+      eventType: 'move',
+      itemId: item,
+      time: dragTime,
+      newGroupOrder
+    })
   }
@@ -689,2 +706,9 @@
     })
+
+    this.updatingItem({
+      eventType: 'resize',
+      itemId: item,
+      time: resizeTime,
+      edge
+    })
   }
@@ -699,2 +723,8 @@
 
+  updatingItem = ({ eventType, itemId, time, edge, newGroupOrder }) => {
+    if (this.props.onItemDrag) {
+      this.props.onItemDrag({ eventType, itemId, time, edge, newGroupOrder })
+    }
+  }
+
   columns(
@@ -826,15 +856,2 @@ canvasTimeStart,
 
-  infoLabel() {
-    let label = null
-
-    if (this.state.dragTime) {
-      label = `${moment(this.state.dragTime).format('LLL')}, 
-        ${this.state.dragGroupTitle}`
-    } else if (this.state.resizeTime) {
-      label = moment(this.state.resizeTime).format('LLL')
-    }
-
-    return label ? <InfoLabel label={label} /> : undefined
-  }
-
   handleHeaderRef = el => {
@@ -848,12 +865,12 @@ this.scrollHeaderRef = el
     return (
-      sidebarWidth && 
-      <Sidebar
-        groups={this.props.groups}
-        groupRenderer={this.props.groupRenderer}
-        keys={this.props.keys}
-        width={sidebarWidth}
-        groupHeights={groupHeights}
-        height={height}
-
-      />
+      sidebarWidth && (
+        <Sidebar
+          groups={this.props.groups}
+          groupRenderer={this.props.groupRenderer}
+          keys={this.props.keys}
+          width={sidebarWidth}
+          groupHeights={groupHeights}
+          height={height}
+        />
+      )
     )
@@ -865,13 +882,13 @@ }
     return (
-      rightSidebarWidth &&
-      <Sidebar
-        groups={this.props.groups}
-        keys={this.props.keys}
-        groupRenderer={this.props.groupRenderer}
-        isRightSidebar
-        width={rightSidebarWidth}
-        groupHeights={groupHeights}
-        height={height}
-
-      />
+      rightSidebarWidth && (
+        <Sidebar
+          groups={this.props.groups}
+          keys={this.props.keys}
+          groupRenderer={this.props.groupRenderer}
+          isRightSidebar
+          width={rightSidebarWidth}
+          groupHeights={groupHeights}
+          height={height}
+        />
+      )
     )
@@ -974,3 +991,3 @@ }
       canvasTimeStart,
-      canvasTimeEnd,
+      canvasTimeEnd
     } = this.state
@@ -1066,6 +1083,5 @@ let { dimensionItems, height, groupHeights, groupTops } = this.state
                       timeSteps,
-                      height,
+                      height
                     )}
                     {this.rows(canvasWidth, groupHeights, groups)}
-                    {this.infoLabel()}
                     {this.childrenWithProps(
@@ -1072,0 +1088,0 @@ canvasTimeStart,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

1272

increased by1.03%

Worsened metrics

Total package byte prevSize

483996

decreased by-1.16%

Number of package files

86

decreased by-2.27%

Lines of code

9518

decreased by-0.49%

No dependency changes