react-calendar-timeline - npm Package Compare versions

Comparing version 0.18.0-beta.0 to 0.18.0-beta.1

CHANGELOG.md

@@ -10,2 +10,28 @@ # Change Log
 
+### Added
+
+* timeline markers - user can have more control over markers that are rendered on the timeline. See `TimelineMarkers` section of README for documentation - #
+
+### Breaking
+
+* removed `showCursorLine` prop in favor of using the `CursorMarker` component. See `TimelineMarkers` section of README for documentation.
+
+```diff
+import Timeline,
++ {TimelineMarkers, CursorMarker}
+from 'react-calendar-timeline'
+
+<Timeline
+- showCursorLine
+
+- />
++ >
+
++ <TimelineMarkers>
++  <CursorMarker />
++ </TimelineMarkers>
+
++ </Timeline>
+```
+
 ### 0.17.0
@@ -12,0 +38,0 @@

lib/index.js

@@ -6,5 +6,5 @@ 'use strict';
 });
-exports.CustomMarker = exports.TodayMarker = exports.TimelineMarkers = undefined;
+exports.CursorMarker = exports.CustomMarker = exports.TodayMarker = exports.TimelineMarkers = undefined;
 
-var _TimelineMarkers = require('./lib/markers/TimelineMarkers');
+var _TimelineMarkers = require('./lib/markers/public/TimelineMarkers');
 
@@ -18,3 +18,3 @@ Object.defineProperty(exports, 'TimelineMarkers', {
 
-var _TodayMarker = require('./lib/markers/TodayMarker');
+var _TodayMarker = require('./lib/markers/public/TodayMarker');
 
@@ -28,3 +28,3 @@ Object.defineProperty(exports, 'TodayMarker', {
 
-var _CustomMarker = require('./lib/markers/CustomMarker');
+var _CustomMarker = require('./lib/markers/public/CustomMarker');
 
@@ -38,2 +38,11 @@ Object.defineProperty(exports, 'CustomMarker', {
 
+var _CursorMarker = require('./lib/markers/public/CursorMarker');
+
+Object.defineProperty(exports, 'CursorMarker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CursorMarker).default;
+  }
+});
+
 var _Timeline = require('./lib/Timeline');
@@ -40,0 +49,0 @@

lib/lib/layout/Header.js

@@ -67,5 +67,3 @@ 'use strict';
           'div',
-          {
-            style: { width: width }
-          },
+          { style: { width: width } },
           _react2.default.createElement(_TimelineElementsHeader2.default, this.props)
@@ -72,0 +70,0 @@ ),

lib/lib/markers/implementations/CustomMarker.js

@@ -35,2 +35,3 @@ 'use strict';
 
+  // FIXME: this is used in all marker implementations
   // REVIEW: might want to memoize this as it creates a new object
@@ -44,10 +45,12 @@ // in each render which is passed to React component
 
-// FIXME: this is used in all marker implementations
-// lift into single spot and memoize?
 // eslint-disable-next-line
 var defaultCustomMarkerRenderer = function defaultCustomMarkerRenderer(_ref) {
   var styles = _ref.styles;
-  return _react2.default.createElement('div', { style: styles, 'data-testid': 'default-customer-marker-id' });
+  return _react2.default.createElement('div', { style: styles });
 };
 
+/**
+ * CustomMarker that is placed based on passed in date prop
+ */
+
 var CustomMarker = function (_React$Component) {
@@ -54,0 +57,0 @@ _inherits(CustomMarker, _React$Component);

lib/lib/markers/implementations/TodayMarker.js

@@ -35,2 +35,3 @@ 'use strict';
 
+  // FIXME: this is used in all marker implementations
   // REVIEW: might want to memoize this as it creates a new object
@@ -44,12 +45,10 @@ // in each render which is passed to React component
 
-// FIXME: this is used in all marker implementations
-// lift into single spot and memoize?
 // eslint-disable-next-line
 var defaultRenderer = function defaultRenderer(_ref) {
   var styles = _ref.styles;
-  return _react2.default.createElement('div', { style: styles, 'data-testid': 'default-today-line' });
+  return _react2.default.createElement('div', { style: styles });
 };
 
-/** Implementation of TodayMarker.  This component will be in charge
- * of setting interval as to when to re render with new time
+/** Marker that is placed based on current date.  This component updates itself on
+ * a set interval, dictated by the 'interval' prop.
  */
@@ -56,0 +55,0 @@

lib/lib/markers/markerType.js

@@ -8,3 +8,4 @@ 'use strict';
   Today: 'Today',
-  Custom: 'Custom'
+  Custom: 'Custom',
+  Cursor: 'Cursor'
 };

lib/lib/markers/TimelineMarkersContext.js

@@ -74,3 +74,4 @@ 'use strict';
       newMarker = _extends({}, newMarker, {
-        id: createId() // REVIEW: this will override any id in here...do we wanna do this?
+        // REVIEW: in the event that we accept id to be passed to the Marker components, this line would override those
+        id: createId()
       });
@@ -77,0 +78,0 @@

lib/lib/markers/TimelineMarkersRenderer.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _CursorMarker = require('./implementations/CursorMarker');
+
+var _CursorMarker2 = _interopRequireDefault(_CursorMarker);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,2 +61,8 @@
                 });
+              case _markerType.TimelineMarkerType.Cursor:
+                return _react2.default.createElement(_CursorMarker2.default, {
+                  key: marker.id,
+                  renderer: marker.renderer,
+                  getLeftOffsetFromDate: getLeftOffsetFromDate
+                });
               default:
@@ -68,6 +78,2 @@ return null;
 
-// TimelineMarkersRenderer.propTypes = {
-
-// }
-
 exports.default = TimelineMarkersRenderer;

lib/lib/scroll/ScrollElement.js

@@ -19,6 +19,2 @@ 'use strict';
 
-var _TimelineMarkersRenderer = require('../markers/TimelineMarkersRenderer');
-
-var _TimelineMarkersRenderer2 = _interopRequireDefault(_TimelineMarkersRenderer);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -112,3 +108,3 @@
     _this.handleMouseMove = function (e) {
-      _this.props.onMouseMove(e);
+      // this.props.onMouseMove(e)
       //why is interacting with item important?
@@ -130,4 +126,4 @@ if (_this.state.isDragging && !_this.props.isInteractingWithItem) {
 
-    _this.handleMouseLeave = function (e) {
-      _this.props.onMouseLeave(e);
+    _this.handleMouseLeave = function () {
+      // this.props.onMouseLeave(e)
       _this.dragStartPosition = null;
@@ -223,4 +219,3 @@ _this.dragLastPosition = null;
           children = _props.children,
-          onContextMenu = _props.onContextMenu,
-          onMouseEnter = _props.onMouseEnter;
+          onContextMenu = _props.onContextMenu;
       var isDragging = this.state.isDragging;
@@ -252,7 +247,5 @@
           onTouchEnd: this.handleTouchEnd,
-          onContextMenu: onContextMenu,
-          onMouseEnter: onMouseEnter
+          onContextMenu: onContextMenu
         },
-        children,
-        _react2.default.createElement(_TimelineMarkersRenderer2.default, null)
+        children
       );
@@ -272,5 +265,5 @@ }
   isInteractingWithItem: _propTypes2.default.bool.isRequired,
-  onMouseEnter: _propTypes2.default.func.isRequired,
-  onMouseMove: _propTypes2.default.func.isRequired,
-  onMouseLeave: _propTypes2.default.func.isRequired,
+  // onMouseEnter: PropTypes.func.isRequired,
+  // onMouseMove: PropTypes.func.isRequired,
+  // onMouseLeave: PropTypes.func.isRequired,
   onContextMenu: _propTypes2.default.func.isRequired,
@@ -277,0 +270,0 @@ onZoom: _propTypes2.default.func.isRequired,

lib/lib/Timeline.js

@@ -45,6 +45,2 @@ 'use strict';
 
-var _CursorLine = require('./lines/CursorLine');
-
-var _CursorLine2 = _interopRequireDefault(_CursorLine);
-
 var _ScrollElement = require('./scroll/ScrollElement');
@@ -54,2 +50,6 @@
 
+var _MarkerCanvas = require('./markers/MarkerCanvas');
+
+var _MarkerCanvas2 = _interopRequireDefault(_MarkerCanvas);
+
 var _window = require('../resize-detector/window');
@@ -219,13 +219,2 @@
   }, {
-    key: 'cursorLine',
-    value: function cursorLine(cursorTime, canvasTimeStart, canvasTimeEnd, canvasWidth, height) {
-      return _react2.default.createElement(_CursorLine2.default, {
-        cursorTime: cursorTime,
-        canvasTimeStart: canvasTimeStart,
-        canvasTimeEnd: canvasTimeEnd,
-        canvasWidth: canvasWidth,
-        height: height
-      });
-    }
-  }, {
     key: 'verticalLines',
@@ -555,3 +544,4 @@ value: function verticalLines(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height) {
         width: canvasWidth + 'px',
-        height: height + 'px'
+        height: height + 'px',
+        position: 'relative'
       };
@@ -612,2 +602,3 @@
                   },
+                  _react2.default.createElement(_MarkerCanvas2.default, null),
                   this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
@@ -662,3 +653,2 @@ this.verticalLines(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight),
   traditionalZoom: _propTypes2.default.bool,
-  showCursorLine: _propTypes2.default.bool,
 
@@ -677,5 +667,2 @@ itemTouchSendsClick: _propTypes2.default.bool,
   onCanvasContextMenu: _propTypes2.default.func,
-  onCanvasMouseEnter: _propTypes2.default.func,
-  onCanvasMouseLeave: _propTypes2.default.func,
-  onCanvasMouseMove: _propTypes2.default.func,
   onZoom: _propTypes2.default.func,
@@ -787,3 +774,2 @@
   traditionalZoom: false,
-  showCursorLine: false,
 
@@ -798,5 +784,2 @@ onItemMove: null,
   onItemContextMenu: null,
-  onCanvasMouseEnter: null,
-  onCanvasMouseLeave: null,
-  onCanvasMouseMove: null,
   onZoom: null,
@@ -1132,57 +1115,2 @@
 
-  this.handleScrollMouseEnter = function (e) {
-    var showCursorLine = _this4.props.showCursorLine;
-
-    if (showCursorLine) {
-      _this4.setState({ mouseOverCanvas: true });
-    }
-
-    if (_this4.props.onCanvasMouseEnter) {
-      _this4.props.onCanvasMouseEnter(e);
-    }
-  };
-
-  this.handleScrollMouseLeave = function (e) {
-    var showCursorLine = _this4.props.showCursorLine;
-
-    if (showCursorLine) {
-      _this4.setState({ mouseOverCanvas: false });
-    }
-
-    if (_this4.props.onCanvasMouseLeave) {
-      _this4.props.onCanvasMouseLeave(e);
-    }
-  };
-
-  this.handleScrollMouseMove = function (e) {
-    var showCursorLine = _this4.props.showCursorLine;
-    var _state8 = _this4.state,
-        canvasTimeStart = _state8.canvasTimeStart,
-        width = _state8.width,
-        visibleTimeStart = _state8.visibleTimeStart,
-        visibleTimeEnd = _state8.visibleTimeEnd,
-        cursorTime = _state8.cursorTime;
-
-    var zoom = visibleTimeEnd - visibleTimeStart;
-    var canvasTimeEnd = canvasTimeStart + zoom * 3;
-    var canvasWidth = width * 3;
-    var pageX = e.pageX;
-
-    var ratio = (canvasTimeEnd - canvasTimeStart) / canvasWidth;
-    var boundingRect = _this4.scrollComponent.getBoundingClientRect();
-    var timePosition = visibleTimeStart + ratio * (pageX - boundingRect.left);
-
-    if (_this4.props.dragSnap) {
-      timePosition = Math.round(timePosition / _this4.props.dragSnap) * _this4.props.dragSnap;
-    }
-
-    if (_this4.props.onCanvasMouseMove) {
-      _this4.props.onCanvasMouseMove(e);
-    }
-
-    if (cursorTime !== timePosition && showCursorLine) {
-      _this4.setState({ cursorTime: timePosition, mouseOverCanvas: true });
-    }
-  };
-
   this.handleRowClick = function (e, rowIndex) {
@@ -1214,9 +1142,9 @@ // shouldnt this be handled by the user, as far as when to deselect an item?
   this.handleScrollContextMenu = function (e) {
-    var _state9 = _this4.state,
-        canvasTimeStart = _state9.canvasTimeStart,
-        width = _state9.width,
-        visibleTimeStart = _state9.visibleTimeStart,
-        visibleTimeEnd = _state9.visibleTimeEnd,
-        groupTops = _state9.groupTops,
-        topOffset = _state9.topOffset;
+    var _state8 = _this4.state,
+        canvasTimeStart = _state8.canvasTimeStart,
+        width = _state8.width,
+        visibleTimeStart = _state8.visibleTimeStart,
+        visibleTimeEnd = _state8.visibleTimeEnd,
+        groupTops = _state8.groupTops,
+        topOffset = _state8.topOffset;
 
@@ -1223,0 +1151,0 @@ var zoom = visibleTimeEnd - visibleTimeStart;

lib/lib/timeline/TimelineStateContext.js

@@ -46,2 +46,5 @@ 'use strict';
     console.warn('"getLeftOffsetFromDate" default func is being used');
+  },
+  getDateFromLeftOffsetPosition: function getDateFromLeftOffsetPosition() {
+    console.warn('"getDateFromLeftOffsetPosition" default func is being used');
   }
@@ -66,2 +69,10 @@ /* eslint-enable */
 
+var getDateFromLeftOffsetPosition = function getDateFromLeftOffsetPosition(leftOffset, timelineState) {
+  var canvasTimeStart = timelineState.canvasTimeStart,
+      canvasTimeEnd = timelineState.canvasTimeEnd,
+      canvasWidth = timelineState.canvasWidth;
+
+  return (0, _calendar.calculateTimeForXPosition)(canvasTimeStart, canvasTimeEnd, canvasWidth, leftOffset);
+};
+
 var TimelineStateProvider = exports.TimelineStateProvider = function (_React$Component) {
@@ -83,6 +94,11 @@ _inherits(TimelineStateProvider, _React$Component);
 
+    _this.getDateFromLeftOffsetPosition = function (leftOffset) {
+      return getDateFromLeftOffsetPosition(leftOffset, _this.props);
+    };
+
     _this.state = {
       timelineContext: {
         getTimelineState: _this.getTimelineState,
-        getLeftOffsetFromDate: _this.getLeftOffsetFromDate
+        getLeftOffsetFromDate: _this.getLeftOffsetFromDate,
+        getDateFromLeftOffsetPosition: _this.getDateFromLeftOffsetPosition
       }
@@ -89,0 +105,0 @@ };

lib/lib/utility/calendar.js

@@ -9,2 +9,3 @@ 'use strict';
 exports.calculateXPositionForTime = calculateXPositionForTime;
+exports.calculateTimeForXPosition = calculateTimeForXPosition;
 exports.iterateTimes = iterateTimes;
@@ -40,2 +41,10 @@ exports.getMinUnit = getMinUnit;
 
+function calculateTimeForXPosition(canvasTimeStart, canvasTimeEnd, canvasWidth, leftOffset) {
+  var timeToPxRatio = (canvasTimeEnd - canvasTimeStart) / canvasWidth;
+
+  var timeFromCanvasTimeStart = timeToPxRatio * leftOffset;
+
+  return timeFromCanvasTimeStart + canvasTimeEnd;
+}
+
 function iterateTimes(start, end, unit, timeSteps, callback) {
@@ -42,0 +51,0 @@ var time = (0, _moment2.default)(start).startOf(unit);

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.18.0-beta.0",
+  "version": "0.18.0-beta.1",
   "description": "react calendar timeline",
   "main": "lib/index.js",
-  "module": "src/index.js",
   "scripts": {
@@ -8,0 +7,0 @@ "build": "npm run build:lib",

README.md

@@ -230,8 +230,4 @@ # React Calendar Timeline
 
-## showCursorLine
+### stackItems
 
-Show a vertical line at the snap point when you mouse over the calendar
-
-## stackItems
-
 Stack items under each other, so there is no visual overlap when times collide. Defaults to `false`.
@@ -536,2 +532,9 @@
 ```jsx
+import Timeline, {
+  TimelineMarkers,
+  CustomMarker,
+  TodayMarker,
+  CursorMarker
+} from 'react-calendar-timeline'
+
 <Timeline>
@@ -552,2 +555,3 @@ <TimelineMarkers>
     </CustomMarker>
+    <CursorMarker />
   </TimelineMarkers>
@@ -567,2 +571,6 @@ </Timeline>
 
+## TimelineMarkers
+
+Wrapper for timeline markers that you want rendered.
+
 ## TodayMarker
@@ -580,2 +588,20 @@
 
+```jsx
+// custom interval
+const twoSeconds = 2000
+
+<TodayMarker interval={twoSeconds} />
+
+//custom renderer
+
+<TodayMarker>
+  {({ styles, date }) =>
+  // date is value of current date. Use this to render special styles for the marker
+  // or any other custom logic based on date:
+  // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'}
+  return <div style={styles} />
+  }
+</TodayMarker>
+```
+
 ## CustomMarker
@@ -593,2 +619,48 @@
 
+```jsx
+const today = Date.now()
+<CustomMarker date={today} />
+
+//custom renderer
+<CustomMarker date={today}>
+  {({ styles, date }) =>
+  return <div style={styles} />
+  }
+</CustomMarker>
+
+// multiple CustomMarkers
+const markerDates = [
+  {date: today, id: 1,},
+  {date: tomorrow, id: 2,},
+  {date: nextFriday, id: 3,},
+]
+
+<TimelineMarkers>
+  {markerDates.map(marker => <CustomMarker key={marker.date} date={marker.date}/> )}
+</TimelineMarkers>
+```
+
+## CursorMarker
+
+Marker that is displayed when hovering over the timeline and matches where your cursor is.
+
+> children: function({styles: object, date: number}) => JSX.Element
+
+Custom renderer for this marker. Ensure that you always pass `styles` to the root component's `style` prop as this object contains positioning of the marker.
+
+```jsx
+// render default marker for Cursor
+<CursorMarker />
+
+//custom renderer
+<CursorMarker>
+  {({ styles, date }) =>
+  // date is value of current date. Use this to render special styles for the marker
+  // or any other custom logic based on date:
+  // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'}
+  return <div style={styles} />
+  }
+</CursorMarker>
+```
+
 # FAQ
@@ -690,3 +762,2 @@
 * Vertical Lines: 40
-* Cursor line: 51
 * Items: 80-88 (depending on selection, dragging, etc)
@@ -693,0 +764,0 @@ * Header: 90

src/index.js

 import Timeline from './lib/Timeline'
 
-export { default as TimelineMarkers } from './lib/markers/TimelineMarkers'
-export { default as TodayMarker } from './lib/markers/TodayMarker'
-export { default as CustomMarker } from './lib/markers/CustomMarker'
+export {
+  default as TimelineMarkers
+} from './lib/markers/public/TimelineMarkers'
+export { default as TodayMarker } from './lib/markers/public/TodayMarker'
+export { default as CustomMarker } from './lib/markers/public/CustomMarker'
+export { default as CursorMarker } from './lib/markers/public/CursorMarker'
 
 export default Timeline

src/lib/layout/Header.js

@@ -46,3 +46,3 @@ import React, { Component } from 'react'
         className={`rct-header-container ${headerClass}`}
-        data-test-id="timeline-elements-container"
+        data-testid="timeline-elements-container"
         ref={headerRef}
@@ -52,8 +52,5 @@ style={headerStyle}
         {leftSidebarHeader}
-        <div
-          style={{ width }}
-          data-test-id="timeline-elements-header-container"
-        >
+        <div style={{ width }} data-testid="timeline-elements-header-container">
           <TimelineElementsHeader
-            data-test-id="timeline-elements-header"
+            data-testid="timeline-elements-header"
             {...this.props}
@@ -60,0 +57,0 @@ />

src/lib/layout/TimelineElementsHeader.js

@@ -228,3 +228,3 @@ import PropTypes from 'prop-types'
         key="header"
-        data-test-id="header"
+        data-testid="header"
         className="rct-header"
@@ -231,0 +231,0 @@ onMouseDown={this.handleHeaderMouseDown}

src/lib/markers/implementations/CustomMarker.js

@@ -13,2 +13,3 @@ import React from 'react'
 
+// FIXME: this is used in all marker implementations
 // REVIEW: might want to memoize this as it creates a new object
@@ -21,4 +22,2 @@ // in each render which is passed to React component
 
-// FIXME: this is used in all marker implementations
-// lift into single spot and memoize?
 // eslint-disable-next-line
@@ -29,2 +28,5 @@ const defaultCustomMarkerRenderer = ({ styles }) => (
 
+/**
+ * CustomMarker that is placed based on passed in date prop
+ */
 class CustomMarker extends React.Component {
@@ -31,0 +33,0 @@ static propTypes = {

src/lib/markers/implementations/TodayMarker.js

@@ -13,2 +13,3 @@ import React from 'react'
 
+// FIXME: this is used in all marker implementations
 // REVIEW: might want to memoize this as it creates a new object
@@ -21,4 +22,2 @@ // in each render which is passed to React component
 
-// FIXME: this is used in all marker implementations
-// lift into single spot and memoize?
 // eslint-disable-next-line
@@ -29,4 +28,4 @@ const defaultRenderer = ({ styles }) => (
 
-/** Implementation of TodayMarker.  This component will be in charge
- * of setting interval as to when to re render with new time
+/** Marker that is placed based on current date.  This component updates itself on
+ * a set interval, dictated by the 'interval' prop.
  */
@@ -33,0 +32,0 @@ class TodayMarker extends React.Component {

src/lib/markers/markerType.js

 export const TimelineMarkerType = {
   Today: 'Today',
-  Custom: 'Custom'
+  Custom: 'Custom',
+  Cursor: 'Cursor'
 }

src/lib/markers/TimelineMarkersContext.js

@@ -32,3 +32,4 @@ import React from 'react'
       ...newMarker,
-      id: createId() // REVIEW: this will override any id in here...do we wanna do this?
+      // REVIEW: in the event that we accept id to be passed to the Marker components, this line would override those
+      id: createId()
     }
@@ -35,0 +36,0 @@

src/lib/markers/TimelineMarkersRenderer.js

@@ -7,2 +7,3 @@ import React from 'react'
 import { TimelineStateConsumer } from '../timeline/TimelineStateContext'
+import CursorMarker from './implementations/CursorMarker'
 
@@ -36,2 +37,10 @@ /** Internal component used in timeline to render markers registered */
                   )
+                case TimelineMarkerType.Cursor:
+                  return (
+                    <CursorMarker
+                      key={marker.id}
+                      renderer={marker.renderer}
+                      getLeftOffsetFromDate={getLeftOffsetFromDate}
+                    />
+                  )
                 default:
@@ -48,6 +57,2 @@ return null
 
-// TimelineMarkersRenderer.propTypes = {
-
-// }
-
 export default TimelineMarkersRenderer

src/lib/scroll/ScrollElement.js

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { getParentPosition } from '../utility/dom-helpers'
-import TimelineMarkersRenderer from '../markers/TimelineMarkersRenderer'
 
@@ -14,5 +13,5 @@ class ScrollElement extends Component {
     isInteractingWithItem: PropTypes.bool.isRequired,
-    onMouseEnter: PropTypes.func.isRequired,
-    onMouseMove: PropTypes.func.isRequired,
-    onMouseLeave: PropTypes.func.isRequired,
+    // onMouseEnter: PropTypes.func.isRequired,
+    // onMouseMove: PropTypes.func.isRequired,
+    // onMouseLeave: PropTypes.func.isRequired,
     onContextMenu: PropTypes.func.isRequired,
@@ -102,3 +101,3 @@ onZoom: PropTypes.func.isRequired,
   handleMouseMove = e => {
-    this.props.onMouseMove(e)
+    // this.props.onMouseMove(e)
     //why is interacting with item important?
@@ -120,4 +119,4 @@ if (this.state.isDragging && !this.props.isInteractingWithItem) {
 
-  handleMouseLeave = e => {
-    this.props.onMouseLeave(e)
+  handleMouseLeave = () => {
+    // this.props.onMouseLeave(e)
     this.dragStartPosition = null
@@ -200,3 +199,3 @@ this.dragLastPosition = null
   render() {
-    const { width, height, children, onContextMenu, onMouseEnter } = this.props
+    const { width, height, children, onContextMenu } = this.props
     const { isDragging } = this.state
@@ -214,3 +213,3 @@
         ref={this.refHandler}
-        data-test-id="scroll-element"
+        data-testid="scroll-element"
         className="rct-scroll"
@@ -228,6 +227,4 @@ style={scrollComponentStyle}
         onContextMenu={onContextMenu}
-        onMouseEnter={onMouseEnter}
       >
         {children}
-        <TimelineMarkersRenderer />
       </div>
@@ -234,0 +231,0 @@ )

src/lib/Timeline.js

@@ -11,4 +11,4 @@ import PropTypes from 'prop-types'
 import GroupRows from './row/GroupRows'
-import CursorLine from './lines/CursorLine'
 import ScrollElement from './scroll/ScrollElement'
+import MarkerCanvas from './markers/MarkerCanvas'
 
@@ -69,3 +69,2 @@ import windowResizeDetector from '../resize-detector/window'
     traditionalZoom: PropTypes.bool,
-    showCursorLine: PropTypes.bool,
 
@@ -84,5 +83,2 @@ itemTouchSendsClick: PropTypes.bool,
     onCanvasContextMenu: PropTypes.func,
-    onCanvasMouseEnter: PropTypes.func,
-    onCanvasMouseLeave: PropTypes.func,
-    onCanvasMouseMove: PropTypes.func,
     onZoom: PropTypes.func,
@@ -195,3 +191,2 @@
     traditionalZoom: false,
-    showCursorLine: false,
 
@@ -206,5 +201,2 @@ onItemMove: null,
     onItemContextMenu: null,
-    onCanvasMouseEnter: null,
-    onCanvasMouseLeave: null,
-    onCanvasMouseMove: null,
     onZoom: null,
@@ -707,67 +699,2 @@
 
-  handleScrollMouseEnter = e => {
-    const { showCursorLine } = this.props
-    if (showCursorLine) {
-      this.setState({ mouseOverCanvas: true })
-    }
-
-    if (this.props.onCanvasMouseEnter) {
-      this.props.onCanvasMouseEnter(e)
-    }
-  }
-
-  handleScrollMouseLeave = e => {
-    const { showCursorLine } = this.props
-    if (showCursorLine) {
-      this.setState({ mouseOverCanvas: false })
-    }
-
-    if (this.props.onCanvasMouseLeave) {
-      this.props.onCanvasMouseLeave(e)
-    }
-  }
-
-  handleScrollMouseMove = e => {
-    const { showCursorLine } = this.props
-    const {
-      canvasTimeStart,
-      width,
-      visibleTimeStart,
-      visibleTimeEnd,
-      cursorTime
-    } = this.state
-    const zoom = visibleTimeEnd - visibleTimeStart
-    const canvasTimeEnd = canvasTimeStart + zoom * 3
-    const canvasWidth = width * 3
-    const { pageX } = e
-    const ratio = (canvasTimeEnd - canvasTimeStart) / canvasWidth
-    const boundingRect = this.scrollComponent.getBoundingClientRect()
-    let timePosition = visibleTimeStart + ratio * (pageX - boundingRect.left)
-
-    if (this.props.dragSnap) {
-      timePosition =
-        Math.round(timePosition / this.props.dragSnap) * this.props.dragSnap
-    }
-
-    if (this.props.onCanvasMouseMove) {
-      this.props.onCanvasMouseMove(e)
-    }
-
-    if (cursorTime !== timePosition && showCursorLine) {
-      this.setState({ cursorTime: timePosition, mouseOverCanvas: true })
-    }
-  }
-
-  cursorLine(cursorTime, canvasTimeStart, canvasTimeEnd, canvasWidth, height) {
-    return (
-      <CursorLine
-        cursorTime={cursorTime}
-        canvasTimeStart={canvasTimeStart}
-        canvasTimeEnd={canvasTimeEnd}
-        canvasWidth={canvasWidth}
-        height={height}
-      />
-    )
-  }
-
   verticalLines(
@@ -1237,3 +1164,4 @@ canvasTimeStart,
       width: `${canvasWidth}px`,
-      height: `${height}px`
+      height: `${height}px`,
+      position: 'relative'
     }
@@ -1286,2 +1214,3 @@
                 >
+                  <MarkerCanvas />
                   {this.items(
@@ -1288,0 +1217,0 @@ canvasTimeStart,

src/lib/timeline/TimelineStateContext.js

 import React from 'react'
 import PropTypes from 'prop-types'
 import createReactContext from 'create-react-context'
-import { calculateXPositionForTime } from '../utility/calendar'
+import {
+  calculateXPositionForTime,
+  calculateTimeForXPosition
+} from '../utility/calendar'
 
@@ -20,2 +23,5 @@ /* this context will hold all information regarding timeline state:
     console.warn('"getLeftOffsetFromDate" default func is being used')
+  },
+  getDateFromLeftOffsetPosition: () => {
+    console.warn('"getDateFromLeftOffsetPosition" default func is being used')
   }
@@ -38,2 +44,12 @@ }
 
+const getDateFromLeftOffsetPosition = (leftOffset, timelineState) => {
+  const { canvasTimeStart, canvasTimeEnd, canvasWidth } = timelineState
+  return calculateTimeForXPosition(
+    canvasTimeStart,
+    canvasTimeEnd,
+    canvasWidth,
+    leftOffset
+  )
+}
+
 export class TimelineStateProvider extends React.Component {
@@ -57,3 +73,4 @@ /* eslint-disable react/no-unused-prop-types */
         getTimelineState: this.getTimelineState,
-        getLeftOffsetFromDate: this.getLeftOffsetFromDate
+        getLeftOffsetFromDate: this.getLeftOffsetFromDate,
+        getDateFromLeftOffsetPosition: this.getDateFromLeftOffsetPosition
       }
@@ -71,2 +88,6 @@ }
 
+  getDateFromLeftOffsetPosition = leftOffset => {
+    return getDateFromLeftOffsetPosition(leftOffset, this.props)
+  }
+
   render() {
@@ -73,0 +94,0 @@ return (

src/lib/utility/calendar.js

@@ -24,2 +24,15 @@ import moment from 'moment'
 
+export function calculateTimeForXPosition(
+  canvasTimeStart,
+  canvasTimeEnd,
+  canvasWidth,
+  leftOffset
+) {
+  const timeToPxRatio = (canvasTimeEnd - canvasTimeStart) / canvasWidth
+
+  const timeFromCanvasTimeStart = timeToPxRatio * leftOffset
+
+  return timeFromCanvasTimeStart + canvasTimeEnd
+}
+
 export function iterateTimes(start, end, unit, timeSteps, callback) {
@@ -26,0 +39,0 @@ let time = moment(start).startOf(unit)

No alert changes

Improved metrics

Total package byte prevSize

351714

increased by5.71%

Number of package files

70

increased by9.38%

Lines of code

7629

increased by5.34%

Number of lines in readme file

807

increased by9.65%

No dependency changes