react-calendar-timeline - npm Package Compare versions

Comparing version 0.15.5 to 0.15.6

CHANGELOG.md

@@ -10,2 +10,8 @@ # Change Log
 
+## 0.15.6
+
+### Fixed
+- Fixed issue with state not properly updated when ending resize #173
+- Fixed issue with onItem* events not reporting correct time when timeline has outer padding #227
+
 ## 0.15.5
@@ -12,0 +18,0 @@

lib/lib/items/Item.js

@@ -386,4 +386,4 @@ 'use strict';
 
-          if (_this2.props.onResized && _this2.resizeTimeDelta(e, resizeEdge) !== 0) {
-            _this2.props.onResized(_this2.itemId, resizeTime, resizeEdge);
+          if (_this2.props.onResized) {
+            _this2.props.onResized(_this2.itemId, resizeTime, resizeEdge, _this2.resizeTimeDelta(e, resizeEdge));
           }
@@ -390,0 +390,0 @@ _this2.setState({

lib/lib/Timeline.js

@@ -306,2 +306,7 @@ 'use strict';
     }
+
+    // TODO: this is very similar to timeFromItemEvent, aside from which element to get offsets
+    // from.  Look to consolidate the logic for determining coordinate to time
+    // as well as generalizing how we get time from click on the canvas
+
   }, {
@@ -1173,3 +1178,3 @@ key: 'todayLine',
       if (item && _this2.props.onItemClick) {
-        var time = _this2.timeFromEvent(e);
+        var time = _this2.timeFromItemEvent(e);
         _this2.props.onItemClick(item, e, time);
@@ -1180,3 +1185,3 @@ }
       if (item && _this2.props.onItemSelect) {
-        var _time = _this2.timeFromEvent(e);
+        var _time = _this2.timeFromItemEvent(e);
         _this2.props.onItemSelect(item, e, _time);
@@ -1191,3 +1196,3 @@ } else if (item === null && _this2.props.onItemDeselect) {
     if (_this2.props.onItemDoubleClick) {
-      var time = _this2.timeFromEvent(e);
+      var time = _this2.timeFromItemEvent(e);
       _this2.props.onItemDoubleClick(item, e, time);
@@ -1199,3 +1204,3 @@ }
     if (_this2.props.onItemContextMenu) {
-      var time = _this2.timeFromEvent(e);
+      var time = _this2.timeFromItemEvent(e);
       _this2.props.onItemContextMenu(item, e, time);
@@ -1205,8 +1210,7 @@ }
 
-  this.rowAndTimeFromEvent = function (e) {
+  this.rowAndTimeFromScrollAreaEvent = function (e) {
     var _props5 = _this2.props,
         headerLabelGroupHeight = _props5.headerLabelGroupHeight,
         headerLabelHeight = _props5.headerLabelHeight,
-        dragSnap = _props5.dragSnap,
-        sidebarWidth = _props5.sidebarWidth;
+        dragSnap = _props5.dragSnap;
     var _state5 = _this2.state,
@@ -1223,3 +1227,3 @@ width = _state5.width,
 
-    var x = e.clientX - sidebarWidth;
+    var x = e.clientX - parentPosition.x;
     var y = e.clientY - parentPosition.y;
@@ -1243,7 +1247,24 @@
 
-  this.timeFromEvent = function (e) {
-    var _rowAndTimeFromEvent = _this2.rowAndTimeFromEvent(e),
-        _rowAndTimeFromEvent2 = _slicedToArray(_rowAndTimeFromEvent, 2),
-        time = _rowAndTimeFromEvent2[1];
+  this.timeFromItemEvent = function (e) {
+    var _state6 = _this2.state,
+        width = _state6.width,
+        visibleTimeStart = _state6.visibleTimeStart,
+        visibleTimeEnd = _state6.visibleTimeEnd;
+    var dragSnap = _this2.props.dragSnap;
 
+
+    var scrollComponent = _this2.refs.scrollComponent;
+
+    var _scrollComponent$getB = scrollComponent.getBoundingClientRect(),
+        scrollX = _scrollComponent$getB.x;
+
+    var xRelativeToTimeline = e.clientX - scrollX;
+
+    var relativeItemPosition = xRelativeToTimeline / width;
+    var zoom = visibleTimeEnd - visibleTimeStart;
+    var timeOffset = relativeItemPosition * zoom;
+
+    var time = Math.round(visibleTimeStart + timeOffset);
+    time = Math.floor(time / dragSnap) * dragSnap;
+
     return time;
@@ -1259,6 +1280,6 @@ };
       } else if (_this2.props.onCanvasClick) {
-        var _rowAndTimeFromEvent3 = _this2.rowAndTimeFromEvent(e),
-            _rowAndTimeFromEvent4 = _slicedToArray(_rowAndTimeFromEvent3, 2),
-            row = _rowAndTimeFromEvent4[0],
-            time = _rowAndTimeFromEvent4[1];
+        var _rowAndTimeFromScroll = _this2.rowAndTimeFromScrollAreaEvent(e),
+            _rowAndTimeFromScroll2 = _slicedToArray(_rowAndTimeFromScroll, 2),
+            row = _rowAndTimeFromScroll2[0],
+            time = _rowAndTimeFromScroll2[1];
 
@@ -1300,5 +1321,5 @@ if (row >= 0 && row < _this2.props.groups.length) {
 
-  this.resizedItem = function (item, resizeTime, edge) {
+  this.resizedItem = function (item, resizeTime, edge, timeDelta) {
     _this2.setState({ resizingItem: null, resizingEdge: null, resizeTime: null });
-    if (_this2.props.onItemResize) {
+    if (_this2.props.onItemResize && timeDelta !== 0) {
       _this2.props.onItemResize(item, resizeTime, edge);
@@ -1370,8 +1391,8 @@ }
     var showCursorLine = _this2.props.showCursorLine;
-    var _state6 = _this2.state,
-        canvasTimeStart = _state6.canvasTimeStart,
-        width = _state6.width,
-        visibleTimeStart = _state6.visibleTimeStart,
-        visibleTimeEnd = _state6.visibleTimeEnd,
-        cursorTime = _state6.cursorTime;
+    var _state7 = _this2.state,
+        canvasTimeStart = _state7.canvasTimeStart,
+        width = _state7.width,
+        visibleTimeStart = _state7.visibleTimeStart,
+        visibleTimeEnd = _state7.visibleTimeEnd,
+        cursorTime = _state7.cursorTime;
 
@@ -1401,9 +1422,9 @@ var zoom = visibleTimeEnd - visibleTimeStart;
   this.handleDoubleClick = function (e) {
-    var _state7 = _this2.state,
-        canvasTimeStart = _state7.canvasTimeStart,
-        width = _state7.width,
-        visibleTimeStart = _state7.visibleTimeStart,
-        visibleTimeEnd = _state7.visibleTimeEnd,
-        groupTops = _state7.groupTops,
-        topOffset = _state7.topOffset;
+    var _state8 = _this2.state,
+        canvasTimeStart = _state8.canvasTimeStart,
+        width = _state8.width,
+        visibleTimeStart = _state8.visibleTimeStart,
+        visibleTimeEnd = _state8.visibleTimeEnd,
+        groupTops = _state8.groupTops,
+        topOffset = _state8.topOffset;
 
@@ -1460,9 +1481,9 @@ var zoom = visibleTimeEnd - visibleTimeStart;
   this.handleCanvasContextMenu = function (e) {
-    var _state8 = _this2.state,
-        canvasTimeStart = _state8.canvasTimeStart,
-        width = _state8.width,
-        visibleTimeStart = _state8.visibleTimeStart,
-        visibleTimeEnd = _state8.visibleTimeEnd,
-        groupTops = _state8.groupTops,
-        topOffset = _state8.topOffset;
+    var _state9 = _this2.state,
+        canvasTimeStart = _state9.canvasTimeStart,
+        width = _state9.width,
+        visibleTimeStart = _state9.visibleTimeStart,
+        visibleTimeEnd = _state9.visibleTimeEnd,
+        groupTops = _state9.groupTops,
+        topOffset = _state9.topOffset;
 
@@ -1469,0 +1490,0 @@ var zoom = visibleTimeEnd - visibleTimeStart;

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.15.5",
+  "version": "0.15.6",
   "description": "react calendar timeline",
@@ -31,3 +31,4 @@ "main": "lib/index.js",
     "Stanisław Chmiela <[e-mail]>",
-    "Mike Joyce <[e-mail]>"
+    "Mike Joyce <[e-mail]>",
+    "Samuel Rossetti"
   ],
@@ -34,0 +35,0 @@ "license": "MIT",

README.md

@@ -9,3 +9,3 @@ # React Calendar Timeline
 
-Code sandbox example: https://codesandbox.io/s/y3nwx4ron9
+Code sandbox example: https://codesandbox.io/s/kkjnv3jmz3
 
@@ -12,0 +12,0 @@ ## Getting started

src/lib/items/Item.js

@@ -298,4 +298,4 @@ import React, { Component } from 'react'
 
-          if (this.props.onResized && this.resizeTimeDelta(e, resizeEdge) !== 0) {
-            this.props.onResized(this.itemId, resizeTime, resizeEdge)
+          if (this.props.onResized) {
+            this.props.onResized(this.itemId, resizeTime, resizeEdge, this.resizeTimeDelta(e, resizeEdge))
           }
@@ -302,0 +302,0 @@ this.setState({

src/lib/Timeline.js

@@ -670,3 +670,3 @@ import PropTypes from 'prop-types'
       if (item && this.props.onItemClick) {
-        const time = this.timeFromEvent(e)
+        const time = this.timeFromItemEvent(e)
         this.props.onItemClick(item, e, time)
@@ -677,3 +677,3 @@ }
       if (item && this.props.onItemSelect) {
-        const time = this.timeFromEvent(e)
+        const time = this.timeFromItemEvent(e)
         this.props.onItemSelect(item, e, time)
@@ -688,3 +688,3 @@ } else if (item === null && this.props.onItemDeselect) {
     if (this.props.onItemDoubleClick) {
-      const time = this.timeFromEvent(e)
+      const time = this.timeFromItemEvent(e)
       this.props.onItemDoubleClick(item, e, time)
@@ -696,3 +696,3 @@ }
     if (this.props.onItemContextMenu) {
-      const time = this.timeFromEvent(e)
+      const time = this.timeFromItemEvent(e)
       this.props.onItemContextMenu(item, e, time)
@@ -702,4 +702,7 @@ }
 
-  rowAndTimeFromEvent = (e) => {
-    const { headerLabelGroupHeight, headerLabelHeight, dragSnap, sidebarWidth } = this.props
+  // TODO: this is very similar to timeFromItemEvent, aside from which element to get offsets
+  // from.  Look to consolidate the logic for determining coordinate to time
+  // as well as generalizing how we get time from click on the canvas
+  rowAndTimeFromScrollAreaEvent = (e) => {
+    const { headerLabelGroupHeight, headerLabelHeight, dragSnap } = this.props
     const { width, groupHeights, visibleTimeStart, visibleTimeEnd } = this.state
@@ -711,3 +714,3 @@ const lineCount = _length(this.props.groups)
 
-    const x = e.clientX - sidebarWidth
+    const x = e.clientX - parentPosition.x
     const y = e.clientY - parentPosition.y
@@ -731,5 +734,18 @@
 
-  timeFromEvent = (e) => {
-    const [, time] = this.rowAndTimeFromEvent(e)
+  timeFromItemEvent = (e) => {
+    const { width, visibleTimeStart, visibleTimeEnd } = this.state
+    const { dragSnap } = this.props
 
+    const scrollComponent = this.refs.scrollComponent
+    const {x: scrollX} = scrollComponent.getBoundingClientRect()
+
+    const xRelativeToTimeline = e.clientX - scrollX
+
+    const relativeItemPosition = xRelativeToTimeline / width
+    const zoom = (visibleTimeEnd - visibleTimeStart)
+    const timeOffset = relativeItemPosition * zoom
+
+    let time = Math.round(visibleTimeStart + timeOffset)
+    time = Math.floor(time / dragSnap) * dragSnap
+
     return time
@@ -745,3 +761,3 @@ }
       } else if (this.props.onCanvasClick) {
-        const [row, time] = this.rowAndTimeFromEvent(e)
+        const [row, time] = this.rowAndTimeFromScrollAreaEvent(e)
         if (row >= 0 && row < this.props.groups.length) {
@@ -782,5 +798,5 @@ const groupId = _get(this.props.groups[row], this.props.keys.groupIdKey)
 
-  resizedItem = (item, resizeTime, edge) => {
+  resizedItem = (item, resizeTime, edge, timeDelta) => {
     this.setState({resizingItem: null, resizingEdge: null, resizeTime: null})
-    if (this.props.onItemResize) {
+    if (this.props.onItemResize && timeDelta !== 0) {
       this.props.onItemResize(item, resizeTime, edge)
@@ -787,0 +803,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

350428

increased by0.52%

Lines of code

7671

increased by0.33%

No dependency changes