react-calendar-timeline - npm Package Compare versions

Comparing version 0.15.7 to 0.15.8

CHANGELOG.md

@@ -12,2 +12,13 @@ # Change Log
 
+## 0.15.8
+
+### Fixed
+
+* propTypes error related to Item prop - #239
+* onCanvasClick and onCanvasDoubleClick were being called on header click - #236
+
+### Added
+
+* on timeline zoom, onZoom prop is called with timelineContext - #248
+
 ## 0.15.7
@@ -14,0 +25,0 @@

lib/lib/items/Items.js

@@ -80,5 +80,3 @@ 'use strict';
         var target = (0, _generic._get)(item, itemIdKey);
-        return this.props.selected.find(function (value) {
-          return value === target;
-        });
+        return this.props.selected.includes(target);
       }
@@ -85,0 +83,0 @@ }

lib/lib/Timeline.js

@@ -141,16 +141,3 @@ 'use strict';
         getTimelineContext: function getTimelineContext() {
-          var _state = _this2.state,
-              width = _state.width,
-              visibleTimeStart = _state.visibleTimeStart,
-              visibleTimeEnd = _state.visibleTimeEnd;
-
-          //TODO: Performance
-          //prob wanna memoize this so we ensure that if no items changed,
-          //we return same context reference
-
-          return {
-            timelineWidth: width,
-            visibleTimeStart: visibleTimeStart,
-            visibleTimeEnd: visibleTimeEnd
-          };
+          return _this2.getTimelineContext();
         }
@@ -293,7 +280,7 @@ };
     value: function updateDimensions(items, groups) {
-      var _state2 = this.state,
-          canvasTimeStart = _state2.canvasTimeStart,
-          visibleTimeStart = _state2.visibleTimeStart,
-          visibleTimeEnd = _state2.visibleTimeEnd,
-          width = _state2.width;
+      var _state = this.state,
+          canvasTimeStart = _state.canvasTimeStart,
+          visibleTimeStart = _state.visibleTimeStart,
+          visibleTimeEnd = _state.visibleTimeEnd,
+          width = _state.width;
 
@@ -535,9 +522,9 @@ var _stackItems = this.stackItems(items, groups, canvasTimeStart, visibleTimeStart, visibleTimeEnd, width),
           itemHeightRatio = _props2.itemHeightRatio;
-      var _state3 = this.state,
-          draggingItem = _state3.draggingItem,
-          dragTime = _state3.dragTime,
-          resizingItem = _state3.resizingItem,
-          resizingEdge = _state3.resizingEdge,
-          resizeTime = _state3.resizeTime,
-          newGroupOrder = _state3.newGroupOrder;
+      var _state2 = this.state,
+          draggingItem = _state2.draggingItem,
+          dragTime = _state2.dragTime,
+          resizingItem = _state2.resizingItem,
+          resizingEdge = _state2.resizingEdge,
+          resizeTime = _state2.resizeTime,
+          newGroupOrder = _state2.newGroupOrder;
 
@@ -649,17 +636,17 @@ var zoom = visibleTimeEnd - visibleTimeStart;
           showCursorLine = _props3.showCursorLine;
+      var _state3 = this.state,
+          draggingItem = _state3.draggingItem,
+          resizingItem = _state3.resizingItem,
+          isDragging = _state3.isDragging,
+          width = _state3.width,
+          visibleTimeStart = _state3.visibleTimeStart,
+          visibleTimeEnd = _state3.visibleTimeEnd,
+          canvasTimeStart = _state3.canvasTimeStart,
+          mouseOverCanvas = _state3.mouseOverCanvas,
+          cursorTime = _state3.cursorTime;
       var _state4 = this.state,
-          draggingItem = _state4.draggingItem,
-          resizingItem = _state4.resizingItem,
-          isDragging = _state4.isDragging,
-          width = _state4.width,
-          visibleTimeStart = _state4.visibleTimeStart,
-          visibleTimeEnd = _state4.visibleTimeEnd,
-          canvasTimeStart = _state4.canvasTimeStart,
-          mouseOverCanvas = _state4.mouseOverCanvas,
-          cursorTime = _state4.cursorTime;
-      var _state5 = this.state,
-          dimensionItems = _state5.dimensionItems,
-          height = _state5.height,
-          groupHeights = _state5.groupHeights,
-          groupTops = _state5.groupTops;
+          dimensionItems = _state4.dimensionItems,
+          height = _state4.height,
+          groupHeights = _state4.groupHeights,
+          groupTops = _state4.groupTops;
 
@@ -724,2 +711,3 @@
             },
+            this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight),
             _react2.default.createElement(
@@ -745,3 +733,2 @@ 'div',
               this.infoLabel(),
-              this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight),
               this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, headerHeight, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps)
@@ -807,2 +794,3 @@ )
   onCanvasMouseMove: _propTypes2.default.func,
+  onZoom: _propTypes2.default.func,
 
@@ -928,2 +916,3 @@ moveResizeValidator: _propTypes2.default.func,
   onCanvasMouseMove: null,
+  onZoom: null,
 
@@ -968,2 +957,19 @@ moveResizeValidator: null,
 
+  this.getTimelineContext = function () {
+    var _state5 = _this4.state,
+        width = _state5.width,
+        visibleTimeStart = _state5.visibleTimeStart,
+        visibleTimeEnd = _state5.visibleTimeEnd;
+
+    //TODO: Performance
+    //prob wanna memoize this so we ensure that if no items changed,
+    //we return same context reference
+
+    return {
+      timelineWidth: width,
+      visibleTimeStart: visibleTimeStart,
+      visibleTimeEnd: visibleTimeEnd
+    };
+  };
+
   this.scrollEventListener = function () {
@@ -1170,3 +1176,10 @@ var _props4 = _this4.props,
 
-    _this4.setState(newState);
+    _this4.setState(newState, function () {
+      // are we changing zoom? Well then let's report it
+      // need to wait until state is set so that we get current
+      // timeline context
+      if (_this4.props.onZoom && oldZoom !== newZoom) {
+        _this4.props.onZoom(_this4.getTimelineContext());
+      }
+    });
   };
@@ -1331,4 +1344,9 @@
   this.scrollAreaClick = function (e) {
+    if ((0, _domHelpers.hasSomeParentTheClass)(e.target, 'rct-header')) {
+      // don't do anything if we clicked on the header
+      // TODO: there should be a better way to handle this...
+      return;
+    }
+
     // if not clicking on an item
-
     if (!(0, _domHelpers.hasSomeParentTheClass)(e.target, 'rct-item')) {
@@ -1335,0 +1353,0 @@ if (_this4.state.selectedItem) {

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.15.7",
+  "version": "0.15.8",
   "description": "react calendar timeline",
@@ -9,6 +9,4 @@ "main": "lib/index.js",
     "build": "npm run build:lib",
-    "build:demo":
-      "echo '!!! Building Demo' && BABEL_ENV=react node build.js production",
-    "build:lib":
-      "echo '!!! Building Library' && ./node_modules/.bin/babel src --out-dir lib && ./node_modules/.bin/node-sass src/lib/Timeline.scss lib/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' && BABEL_ENV=react node build.js production",
+    "build:lib": "echo '!!! Building Library' && ./node_modules/.bin/babel src --out-dir lib && ./node_modules/.bin/node-sass src/lib/Timeline.scss lib/lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
     "jest": "node_modules/.bin/jest",
@@ -19,7 +17,9 @@ "jest:update": "node_modules/.bin/jest -u",
     "prepublish": "npm run build:lib",
-    "start":
-      "./node_modules/.bin/webpack-dev-server --hot --host 0.0.0.0 --display-modules",
+    "start": "./node_modules/.bin/webpack-dev-server --hot --host 0.0.0.0 --display-modules",
     "test": "npm run build:lib && npm run jest && npm run lint"
   },
-  "files": ["lib", "src"],
+  "files": [
+    "lib",
+    "src"
+  ],
   "homepage": "https://github.com/namespace-ee/react-calendar-timeline",
@@ -37,3 +37,8 @@ "repository": {
   "license": "MIT",
-  "keywords": ["react", "reactjs", "react-component", "timeline"],
+  "keywords": [
+    "react",
+    "reactjs",
+    "react-component",
+    "timeline"
+  ],
   "standard": {
@@ -44,8 +49,14 @@ "parser": "babel-eslint"
     "verbose": true,
-    "testMatch": ["**/__tests__/**/*.js"],
-    "setupFiles": ["<rootDir>/config/jest-setup.js"],
+    "testMatch": [
+      "**/__tests__/**/*.js"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/jest-setup.js"
+    ],
     "moduleNameMapper": {
       "^.+\\.(css|scss)$": "<rootDir>/src/mocks/styleMock.js"
     },
-    "collectCoverageFrom": ["src/**/*.{js,jsx}"]
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ]
   },
@@ -52,0 +63,0 @@ "dependencies": {

README.md

@@ -245,4 +245,4 @@ # React Calendar Timeline
 
-### onCanvasDoubleClick(groupId, time, e)
-Called when an empty spot on the canvas was double clicked. Get the group ID and the time as arguments.
+### onCanvasDoubleClick(group, time, e)
+Called when an empty spot on the canvas was double clicked. Get the group and the time as arguments.
 
@@ -252,2 +252,5 @@ ### onCanvasContextMenu(group, time, e)
 
+### onZoom(timelineContext)
+Called when the timeline is zoomed, either via mouse/pinch zoom or clicking header to change timeline units
+
 ### moveResizeValidator(action, itemId, time, resizeEdge)
@@ -254,0 +257,0 @@ This function is called when an item is being moved or resized. It's up to this function to return a new version of `change`, when the proposed move would violate business logic.

src/lib/items/Items.js

@@ -102,3 +102,3 @@ import PropTypes from 'prop-types'
       let target = _get(item, itemIdKey)
-      return this.props.selected.find(value => value === target)
+      return this.props.selected.includes(target)
     }
@@ -105,0 +105,0 @@ }

src/lib/Timeline.js

@@ -131,2 +131,3 @@ import PropTypes from 'prop-types'
     onCanvasMouseMove: PropTypes.func,
+    onZoom: PropTypes.func,
 
@@ -253,2 +254,3 @@ moveResizeValidator: PropTypes.func,
     onCanvasMouseMove: null,
+    onZoom: null,
 
@@ -298,12 +300,3 @@ moveResizeValidator: null,
       getTimelineContext: () => {
-        const { width, visibleTimeStart, visibleTimeEnd } = this.state
-
-        //TODO: Performance
-        //prob wanna memoize this so we ensure that if no items changed,
-        //we return same context reference
-        return {
-          timelineWidth: width,
-          visibleTimeStart,
-          visibleTimeEnd
-        }
+        return this.getTimelineContext()
       }
@@ -313,2 +306,15 @@ }
 
+  getTimelineContext = () => {
+    const { width, visibleTimeStart, visibleTimeEnd } = this.state
+
+    //TODO: Performance
+    //prob wanna memoize this so we ensure that if no items changed,
+    //we return same context reference
+    return {
+      timelineWidth: width,
+      visibleTimeStart,
+      visibleTimeEnd
+    }
+  }
+
   constructor(props) {
@@ -699,3 +705,10 @@ super(props)
 
-    this.setState(newState)
+    this.setState(newState, () => {
+      // are we changing zoom? Well then let's report it
+      // need to wait until state is set so that we get current
+      // timeline context
+      if (this.props.onZoom && oldZoom !== newZoom) {
+        this.props.onZoom(this.getTimelineContext())
+      }
+    })
   }
@@ -893,4 +906,9 @@
   scrollAreaClick = e => {
+    if (hasSomeParentTheClass(e.target, 'rct-header')) {
+      // don't do anything if we clicked on the header
+      // TODO: there should be a better way to handle this...
+      return
+    }
+
     // if not clicking on an item
-
     if (!hasSomeParentTheClass(e.target, 'rct-item')) {
@@ -1579,2 +1597,12 @@ if (this.state.selectedItem) {
           >
+            {this.header(
+              canvasTimeStart,
+              zoom,
+              canvasTimeEnd,
+              canvasWidth,
+              minUnit,
+              timeSteps,
+              headerLabelGroupHeight,
+              headerLabelHeight
+            )}
             <div
@@ -1633,12 +1661,2 @@ ref={el => (this.canvasComponent = el)}
               {this.infoLabel()}
-              {this.header(
-                canvasTimeStart,
-                zoom,
-                canvasTimeEnd,
-                canvasWidth,
-                minUnit,
-                timeSteps,
-                headerLabelGroupHeight,
-                headerLabelHeight
-              )}
               {this.childrenWithProps(
@@ -1645,0 +1663,0 @@ canvasTimeStart,

No alert changes

Improved metrics

Number of lines in readme file

597

increased by0.51%

Worsened metrics

Total package byte prevSize

360987

decreased by-1.71%

Lines of code

8477

decreased by-2.92%

No dependency changes