Release 0.18.2 (namespace-ee#389)

Author: mcMickJuice

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+
+### 0.18.2
+
+### Fixed
+
+* `onCanvasClick` not fired - #383
+* cursor marker disappear while hovering over item - #378
+
 ### 0.18.1
 
 ### Fixed

package.json

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

src/lib/Timeline.js

@@ -20,9 +20,9 @@ import {
   nostack,
   calculateDimensions,
   getGroupOrders,
-  getVisibleItems
+  getVisibleItems,
+  calculateTimeForXPosition
 } from './utility/calendar'
-import { getParentPosition } from './utility/dom-helpers'
 import { _get, _length } from './utility/generic'
 import {
   defaultKeys,
@@ -632,16 +632,25 @@ export default class ReactCalendarTimeline extends Component {
   // as well as generalizing how we get time from click on the canvas
   getTimeFromRowClickEvent = e => {
     const { dragSnap } = this.props
-    const { width, visibleTimeStart, visibleTimeEnd } = this.state
-
-    // get coordinates relative to the component
-    const parentPosition = getParentPosition(e.currentTarget)
+    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
 
-    const x = e.clientX - parentPosition.x
+    // FIXME: DRY up way to calculate canvasTimeEnd
+    const zoom = visibleTimeEnd - visibleTimeStart
+    const canvasTimeEnd = zoom * 3 + canvasTimeStart
 
-    // 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
     )
     time = Math.floor(time / dragSnap) * dragSnap
 
@@ -1153,12 +1162,6 @@ export default class ReactCalendarTimeline extends Component {
       height: `${height}px`
     }
 
-    const canvasComponentStyle = {
-      width: `${canvasWidth}px`,
-      height: `${height}px`,
-      position: 'relative'
-    }
-
     return (
       <TimelineStateProvider
         visibleTimeStart={visibleTimeStart}
@@ -1199,11 +1202,7 @@ export default class ReactCalendarTimeline extends Component {
                 onMouseMove={this.handleScrollMouseMove}
                 onContextMenu={this.handleScrollContextMenu}
               >
-                <div
-                  ref={el => (this.canvasComponent = el)}
-                  style={canvasComponentStyle}
-                >
-                  <MarkerCanvas />
+                <MarkerCanvas>
                   {this.items(
                     canvasTimeStart,
                     zoom,
@@ -1239,7 +1238,7 @@ export default class ReactCalendarTimeline extends Component {
                     minUnit,
                     timeSteps
                   )}
-                </div>
+                </MarkerCanvas>
               </ScrollElement>
               {rightSidebarWidth > 0
                 ? this.rightSidebar(height, groupHeights)

src/lib/markers/MarkerCanvas.js

@@ -19,7 +19,8 @@ const staticStyles = {
  */
 class MarkerCanvas extends React.Component {
   static propTypes = {
-    getDateFromLeftOffsetPosition: PropTypes.func.isRequired
+    getDateFromLeftOffsetPosition: PropTypes.func.isRequired,
+    children: PropTypes.node
   }
 
   handleMouseMove = evt => {
@@ -71,6 +72,7 @@ class MarkerCanvas extends React.Component {
           ref={el => (this.containerEl = el)}
         >
           <TimelineMarkersRenderer />
+          {this.props.children}
         </div>
       </MarkerCanvasProvider>
     )

src/lib/markers/implementations/shared.js

@@ -8,7 +8,11 @@ const criticalStyles = {
   top: 0,
   bottom: 0,
   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'
 }
 
 // FIXME: this creates a new object each time in render