react-calendar-timeline - npm Package Compare versions

Comparing version 0.18.1 to 0.18.2

CHANGELOG.md

@@ -10,2 +10,10 @@ # Change Log
 
+
+### 0.18.2
+
+### Fixed
+
+* `onCanvasClick` not fired - #383
+* cursor marker disappear while hovering over item - #378
+
 ### 0.18.1
@@ -12,0 +20,0 @@

lib/lib/markers/implementations/shared.js

@@ -24,3 +24,7 @@ 'use strict';
   width: '2px',
-  backgroundColor: 'black'
+  backgroundColor: 'black',
+  // by default, pointer events (specifically click) will
+  // "pass through".  This is added so that CursorMarker
+  // will not get in the way of canvas click
+  pointerEvents: 'none'
 
@@ -27,0 +31,0 @@ // FIXME: this creates a new object each time in render

lib/lib/markers/MarkerCanvas.js

@@ -118,3 +118,4 @@ 'use strict';
           },
-          _react2.default.createElement(_TimelineMarkersRenderer2.default, null)
+          _react2.default.createElement(_TimelineMarkersRenderer2.default, null),
+          this.props.children
         )
@@ -129,3 +130,4 @@ );
 MarkerCanvas.propTypes = {
-  getDateFromLeftOffsetPosition: _propTypes2.default.func.isRequired
+  getDateFromLeftOffsetPosition: _propTypes2.default.func.isRequired,
+  children: _propTypes2.default.node
 };
@@ -132,0 +134,0 @@

lib/lib/Timeline.js

@@ -59,4 +59,2 @@ 'use strict';
 
-var _domHelpers = require('./utility/dom-helpers');
-
 var _generic = require('./utility/generic');
@@ -539,8 +537,2 @@
 
-      var canvasComponentStyle = {
-        width: canvasWidth + 'px',
-        height: height + 'px',
-        position: 'relative'
-      };
-
       return _react2.default.createElement(
@@ -591,10 +583,4 @@ _TimelineStateContext.TimelineStateProvider,
                 _react2.default.createElement(
-                  'div',
-                  {
-                    ref: function ref(el) {
-                      return _this3.canvasComponent = el;
-                    },
-                    style: canvasComponentStyle
-                  },
-                  _react2.default.createElement(_MarkerCanvas2.default, null),
+                  _MarkerCanvas2.default,
+                  null,
                   this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
@@ -1037,13 +1023,16 @@ this.verticalLines(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight),
         width = _state6.width,
+        canvasTimeStart = _state6.canvasTimeStart,
         visibleTimeStart = _state6.visibleTimeStart,
         visibleTimeEnd = _state6.visibleTimeEnd;
+    // this gives us distance from left of row element, so event is in
+    // context of the row element, not client or page
 
-    // get coordinates relative to the component
+    var offsetX = e.nativeEvent.offsetX;
 
-    var parentPosition = (0, _domHelpers.getParentPosition)(e.currentTarget);
+    // FIXME: DRY up way to calculate canvasTimeEnd
 
-    var x = e.clientX - parentPosition.x;
+    var zoom = visibleTimeEnd - visibleTimeStart;
+    var canvasTimeEnd = zoom * 3 + canvasTimeStart;
 
-    // calculate the x (time) coordinate taking the dragSnap into account
-    var time = Math.round(visibleTimeStart + x / width * (visibleTimeEnd - visibleTimeStart));
+    var time = (0, _calendar.calculateTimeForXPosition)(canvasTimeStart, canvasTimeEnd, width * 3, offsetX);
     time = Math.floor(time / dragSnap) * dragSnap;
@@ -1050,0 +1039,0 @@

package.json

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

src/lib/markers/implementations/shared.js

@@ -11,3 +11,7 @@ import React from 'react'
   width: '2px',
-  backgroundColor: 'black'
+  backgroundColor: 'black',
+  // by default, pointer events (specifically click) will
+  // "pass through".  This is added so that CursorMarker
+  // will not get in the way of canvas click
+  pointerEvents: 'none'
 }
@@ -14,0 +18,0 @@

src/lib/markers/MarkerCanvas.js

@@ -22,3 +22,4 @@ import React from 'react'
   static propTypes = {
-    getDateFromLeftOffsetPosition: PropTypes.func.isRequired
+    getDateFromLeftOffsetPosition: PropTypes.func.isRequired,
+    children: PropTypes.node
   }
@@ -75,2 +76,3 @@
           <TimelineMarkersRenderer />
+          {this.props.children}
         </div>
@@ -77,0 +79,0 @@ </MarkerCanvasProvider>

src/lib/Timeline.js

@@ -23,5 +23,5 @@ import PropTypes from 'prop-types'
   getGroupOrders,
-  getVisibleItems
+  getVisibleItems,
+  calculateTimeForXPosition
 } from './utility/calendar'
-import { getParentPosition } from './utility/dom-helpers'
 import { _get, _length } from './utility/generic'
@@ -636,12 +636,21 @@ import {
     const { dragSnap } = this.props
-    const { width, visibleTimeStart, visibleTimeEnd } = this.state
+    const {
+      width,
+      canvasTimeStart,
+      visibleTimeStart,
+      visibleTimeEnd
+    } = this.state
+    // this gives us distance from left of row element, so event is in
+    // context of the row element, not client or page
+    const { offsetX } = e.nativeEvent
 
-    // get coordinates relative to the component
-    const parentPosition = getParentPosition(e.currentTarget)
+    // FIXME: DRY up way to calculate canvasTimeEnd
+    const zoom = visibleTimeEnd - visibleTimeStart
+    const canvasTimeEnd = zoom * 3 + canvasTimeStart
 
-    const x = e.clientX - parentPosition.x
-
-    // calculate the x (time) coordinate taking the dragSnap into account
-    let time = Math.round(
-      visibleTimeStart + x / width * (visibleTimeEnd - visibleTimeStart)
+    let time = calculateTimeForXPosition(
+      canvasTimeStart,
+      canvasTimeEnd,
+      width * 3,
+      offsetX
     )
@@ -1158,8 +1167,2 @@ time = Math.floor(time / dragSnap) * dragSnap
 
-    const canvasComponentStyle = {
-      width: `${canvasWidth}px`,
-      height: `${height}px`,
-      position: 'relative'
-    }
-
     return (
@@ -1205,7 +1208,3 @@ <TimelineStateProvider
               >
-                <div
-                  ref={el => (this.canvasComponent = el)}
-                  style={canvasComponentStyle}
-                >
-                  <MarkerCanvas />
+                <MarkerCanvas>
                   {this.items(
@@ -1246,3 +1245,3 @@ canvasTimeStart,
                   )}
-                </div>
+                </MarkerCanvas>
               </ScrollElement>
@@ -1249,0 +1248,0 @@ {rightSidebarWidth > 0

No alert changes

Improved metrics

Total package byte prevSize

353201

increased by0.05%

Lines of code

7613

increased by0.05%

No dependency changes