react-calendar-timeline - npm Package Compare versions

Comparing version 0.17.0 to 0.18.0-beta.0

lib/index.js

@@ -6,3 +6,31 @@ 'use strict';
 });
+exports.CustomMarker = exports.TodayMarker = exports.TimelineMarkers = undefined;
 
+var _TimelineMarkers = require('./lib/markers/TimelineMarkers');
+
+Object.defineProperty(exports, 'TimelineMarkers', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_TimelineMarkers).default;
+  }
+});
+
+var _TodayMarker = require('./lib/markers/TodayMarker');
+
+Object.defineProperty(exports, 'TodayMarker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_TodayMarker).default;
+  }
+});
+
+var _CustomMarker = require('./lib/markers/CustomMarker');
+
+Object.defineProperty(exports, 'CustomMarker', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CustomMarker).default;
+  }
+});
+
 var _Timeline = require('./lib/Timeline');
@@ -9,0 +37,0 @@

lib/lib/scroll/ScrollElement.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _TimelineMarkersRenderer = require('../markers/TimelineMarkersRenderer');
+
+var _TimelineMarkersRenderer2 = _interopRequireDefault(_TimelineMarkersRenderer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -225,3 +229,4 @@
         height: height + 20 + 'px', //20px to push the scroll element down off screen...?
-        cursor: isDragging ? 'move' : 'default'
+        cursor: isDragging ? 'move' : 'default',
+        position: 'relative'
       };
@@ -248,3 +253,4 @@
         },
-        children
+        children,
+        _react2.default.createElement(_TimelineMarkersRenderer2.default, null)
       );
@@ -251,0 +257,0 @@ }

lib/lib/Timeline.js

@@ -45,6 +45,2 @@ 'use strict';
 
-var _TodayLine = require('./lines/TodayLine');
-
-var _TodayLine2 = _interopRequireDefault(_TodayLine);
-
 var _CursorLine = require('./lines/CursorLine');
@@ -70,2 +66,6 @@
 
+var _TimelineStateContext = require('./timeline/TimelineStateContext');
+
+var _TimelineMarkersContext = require('./markers/TimelineMarkersContext');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -219,12 +219,2 @@
   }, {
-    key: 'todayLine',
-    value: function todayLine(canvasTimeStart, canvasTimeEnd, canvasWidth, height) {
-      return _react2.default.createElement(_TodayLine2.default, {
-        canvasTimeStart: canvasTimeStart,
-        canvasTimeEnd: canvasTimeEnd,
-        canvasWidth: canvasWidth,
-        height: height
-      });
-    }
-  }, {
     key: 'cursorLine',
@@ -528,3 +518,2 @@ value: function cursorLine(cursorTime, canvasTimeStart, canvasTimeEnd, canvasWidth, height) {
           timeSteps = _props3.timeSteps,
-          showCursorLine = _props3.showCursorLine,
           traditionalZoom = _props3.traditionalZoom;
@@ -537,5 +526,3 @@ var _state3 = this.state,
           visibleTimeEnd = _state3.visibleTimeEnd,
-          canvasTimeStart = _state3.canvasTimeStart,
-          mouseOverCanvas = _state3.mouseOverCanvas,
-          cursorTime = _state3.cursorTime;
+          canvasTimeStart = _state3.canvasTimeStart;
       var _state4 = this.state,
@@ -574,52 +561,64 @@ dimensionItems = _state4.dimensionItems,
       return _react2.default.createElement(
-        'div',
+        _TimelineStateContext.TimelineStateProvider,
         {
-          style: this.props.style,
-          ref: function ref(el) {
-            return _this3.container = el;
-          },
-          className: 'react-calendar-timeline'
+          visibleTimeStart: visibleTimeStart,
+          visibleTimeEnd: visibleTimeEnd,
+          canvasTimeStart: canvasTimeStart,
+          canvasTimeEnd: canvasTimeEnd,
+          canvasWidth: canvasWidth
         },
-        this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight),
         _react2.default.createElement(
-          'div',
-          { style: outerComponentStyle, className: 'rct-outer' },
-          sidebarWidth > 0 ? this.sidebar(height, groupHeights) : null,
+          _TimelineMarkersContext.TimelineMarkersProvider,
+          null,
           _react2.default.createElement(
-            _ScrollElement2.default,
+            'div',
             {
-              scrollRef: function scrollRef(el) {
-                return _this3.scrollComponent = el;
+              style: this.props.style,
+              ref: function ref(el) {
+                return _this3.container = el;
               },
-              width: width,
-              height: height,
-              onZoom: this.changeZoom,
-              onWheelZoom: this.handleWheelZoom,
-              traditionalZoom: traditionalZoom,
-              onScroll: this.onScroll,
-              isInteractingWithItem: isInteractingWithItem,
-              onMouseEnter: this.handleScrollMouseEnter,
-              onMouseLeave: this.handleScrollMouseLeave,
-              onMouseMove: this.handleScrollMouseMove,
-              onContextMenu: this.handleScrollContextMenu
+              className: 'react-calendar-timeline'
             },
+            this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight),
             _react2.default.createElement(
               'div',
-              {
-                ref: function ref(el) {
-                  return _this3.canvasComponent = el;
+              { style: outerComponentStyle, className: 'rct-outer' },
+              sidebarWidth > 0 ? this.sidebar(height, groupHeights) : null,
+              _react2.default.createElement(
+                _ScrollElement2.default,
+                {
+                  scrollRef: function scrollRef(el) {
+                    return _this3.scrollComponent = el;
+                  },
+                  width: width,
+                  height: height,
+                  onZoom: this.changeZoom,
+                  onWheelZoom: this.handleWheelZoom,
+                  traditionalZoom: traditionalZoom,
+                  onScroll: this.onScroll,
+                  isInteractingWithItem: isInteractingWithItem,
+                  onMouseEnter: this.handleScrollMouseEnter,
+                  onMouseLeave: this.handleScrollMouseLeave,
+                  onMouseMove: this.handleScrollMouseMove,
+                  onContextMenu: this.handleScrollContextMenu
                 },
-                className: 'rct-canvas',
-                style: canvasComponentStyle
-              },
-              this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
-              this.verticalLines(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight),
-              this.horizontalLines(canvasWidth, groupHeights),
-              this.todayLine(canvasTimeStart, canvasTimeEnd, canvasWidth, height),
-              mouseOverCanvas && showCursorLine ? this.cursorLine(cursorTime, canvasTimeStart, canvasTimeEnd, canvasWidth, height) : null,
-              this.infoLabel(),
-              this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, headerHeight, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps)
+                _react2.default.createElement(
+                  'div',
+                  {
+                    ref: function ref(el) {
+                      return _this3.canvasComponent = el;
+                    },
+                    className: 'rct-canvas',
+                    style: canvasComponentStyle
+                  },
+                  this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
+                  this.verticalLines(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight),
+                  this.horizontalLines(canvasWidth, groupHeights),
+                  this.infoLabel(),
+                  this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, headerHeight, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps)
+                )
+              ),
+              rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null
             )
-          ),
-          rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null
+          )
         )
@@ -626,0 +625,0 @@ );

lib/lib/utility/generic.js

@@ -11,2 +11,3 @@ 'use strict';
 exports.keyBy = keyBy;
+exports.noop = noop;
 
@@ -47,2 +48,4 @@ var _lodash = require('lodash.isequal');
   return obj;
-}
+}
+
+function noop() {}

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.17.0",
+  "version": "0.18.0-beta.0",
   "description": "react calendar timeline",
@@ -59,5 +59,3 @@ "main": "lib/index.js",
     ],
-    "setupFiles": [
-      "<rootDir>/config/jest-setup.js"
-    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/config/jest-setup.js",
     "collectCoverageFrom": [
@@ -73,5 +71,10 @@ "src/**/*.{js,jsx}"
       "<rootDir>/__tests__/test-utility"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
     ]
   },
   "dependencies": {
+    "create-react-context": "^0.2.2",
     "element-resize-detector": "^1.1.12",
@@ -81,5 +84,5 @@ "lodash.isequal": "^4.5.0"
   "peerDependencies": {
+    "interactjs": "^1.3.4",
     "moment": "*",
-    "interactjs": "^1.3.4",
-    "react": "^0.14.8 || >=15"
+    "react": ">=16.3.0"
   },
@@ -101,3 +104,3 @@ "devDependencies": {
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.16.0",
@@ -115,3 +118,5 @@ "eslint-config-prettier": "^2.9.0",
     "interactjs": "^1.3.4",
-    "jest": "^22.0.6",
+    "jest": "^23.1.0",
+    "jest-dom": "^1.3.1",
+    "jest-watch-typeahead": "^0.1.0",
     "jsdom": "^11.5.1",
@@ -123,9 +128,7 @@ "moment": "^2.11.1",
     "randomcolor": "^0.5.3",
-    "react": "15.*",
-    "react-addons-perf": "^15.0.1",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "15.*",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-router-dom": "^4.1.1",
-    "react-test-renderer": "^15.5.0",
+    "react-testing-library": "^3.1.7",
     "rimraf": "^2.6.2",
@@ -132,0 +135,0 @@ "sass-loader": "~4.0.2",

README.md

@@ -9,3 +9,3 @@ # React Calendar Timeline
 
-## Getting started
+# Getting started
 
@@ -22,3 +22,3 @@ ```bash
 
-## Usage
+# Usage
 
@@ -73,3 +73,3 @@ At the very minimum:
 
-## API
+# API
 
@@ -80,3 +80,3 @@ _NB!_ All props need to be immutable. For example, this means if you wish to change the title of one of your items, please pass in a whole new items array instead of changing the title in the old array. [Here's more info.](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/)
 
-### groups
+## groups
 
@@ -95,3 +95,3 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects with the following attributes:
 
-### items
+## items
 
@@ -122,7 +122,7 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects with the following attributes:
 
-### defaultTimeStart and defaultTimeEnd
+## defaultTimeStart and defaultTimeEnd
 
 Unless overridden by `visibleTimeStart` and `visibleTimeEnd`, specify where the calendar begins and where it ends. This parameter expects a Date or moment object.
 
-### visibleTimeStart and visibleTimeEnd
+## visibleTimeStart and visibleTimeEnd
 
@@ -133,7 +133,7 @@ The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a unix timestamp in milliseconds.
 
-### selected
+## selected
 
 An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's. This overwrites the default behaviour of selecting one item on click.
 
-### keys
+## keys
 
@@ -156,27 +156,27 @@ An array specifying keys in the `items` and `groups` objects. Defaults to
 
-### sidebarWidth
+## sidebarWidth
 
 Width of the sidebar in pixels. If set to `0`, the sidebar is not rendered. Defaults to `150`.
 
-### sidebarContent
+## sidebarContent
 
 Everything passed here will be displayed above the left sidebar. Use this to display small filters or so. Defaults to `null`.
 
-### rightSidebarWidth
+## rightSidebarWidth
 
 Width of the right sidebar in pixels. If set to `0`, the right sidebar is not rendered. Defaults to `0`.
 
-### rightSidebarContent
+## rightSidebarContent
 
 Everything passed here will be displayed above the right sidebar. Use this to display small filters or so. Defaults to `null`.
 
-### dragSnap
+## dragSnap
 
 Snapping unit when dragging items. Defaults to `15 * 60 * 1000` or 15min. When so, the items will snap to 15min intervals when dragging.
 
-### minResizeWidth
+## minResizeWidth
 
 The minimum width, in pixels, of a timeline entry when it's possible to resize. If not reached, you must zoom in to resize more. Default to `20`.
 
-### stickyOffset
+## stickyOffset
 
@@ -186,71 +186,71 @@ At what height from the top of the screen should we start "sticking" the header (i.e. position: sticky)? This is useful if for example you already have
 
-### stickyHeader
+## stickyHeader
 
 Specify whether you want the timeline header to be "sticky". Pass `false` if you want the header to fix at top of element and not fix when you scroll down the page. Defaults to `true`
 
-### headerRef
+## headerRef
 
 Ref callback that gets a DOM reference to the header element. See [FAQ below](#the-timeline-header-doesnt-fix-to-the-top-of-the-container-when-i-scroll-down).
 
-### lineHeight
+## lineHeight
 
 Height of one line in the calendar in pixels. Default `30`
 
-### headerLabelGroupHeight
+## headerLabelGroupHeight
 
 Height of the top header line. Default `30`
 
-### headerLabelHeight
+## headerLabelHeight
 
 Height of the bottom header line. Default `30`
 
-### itemHeightRatio
+## itemHeightRatio
 
 What percentage of the height of the line is taken by the item? Default `0.65`
 
-### minZoom
+## minZoom
 
 Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour)
 
-### maxZoom
+## maxZoom
 
 Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 86400 * 1000` (5 years)
 
-### clickTolerance
+## clickTolerance
 
 How many pixels we can drag the background for it to be counted as a click on the background. Defualt: `3`
 
-### canMove
+## canMove
 
 Can items be dragged around? Can be overridden in the `items` array. Defaults to `true`
 
-### canChangeGroup
+## canChangeGroup
 
 Can items be moved between groups? Can be overridden in the `items` array. Defaults to `true`
 
-### canResize
+## canResize
 
 Can items be resized? Can be overridden in the `items` array. Accepted values: `false`, `"left"`, `"right"`, `"both"`. Defaults to `"right"`. If you pass `true`, it will be treated as `"right"` to not break compatibility with versions 0.9 and below.
 
-### useResizeHandle
+## useResizeHandle
 
 Append a special `.rct-drag-right` handle to the elements and only resize if dragged from there. Defaults to `false`
 
-### showCursorLine
+## showCursorLine
 
 Show a vertical line at the snap point when you mouse over the calendar
 
-### stackItems
+## stackItems
 
 Stack items under each other, so there is no visual overlap when times collide. Defaults to `false`.
 
-### traditionalZoom
+## traditionalZoom
 
 Zoom in when scrolling the mouse up/down. Defaults to `false`
 
-### itemTouchSendsClick
+## itemTouchSendsClick
 
 Normally tapping (touching) an item selects it. If this is set to true, a tap will have the same effect, as selecting with the first click and then clicking again to open and send the onItemClick event. Defaults to `false`.
 
-### timeSteps
+## timeSteps
 
@@ -272,43 +272,43 @@ With what step to display different units. E.g. `15` for `minute` means only minutes 0, 15, 30 and 45 will be shown.
 
-### onItemMove(itemId, dragTime, newGroupOrder)
+## onItemMove(itemId, dragTime, newGroupOrder)
 
 Callback when an item is moved. Returns 1) the item's ID, 2) the new start time and 3) the index of the new group in the `groups` array.
 
-### onItemResize(itemId, time, edge)
+## onItemResize(itemId, time, edge)
 
 Callback when an item is resized. Returns 1) the item's ID, 2) the new start or end time of the item 3) The edge that was dragged (`left` or `right`)
 
-### onItemSelect(itemId, e, time)
+## onItemSelect(itemId, e, time)
 
 Called when an item is selected. This is sent on the first click on an item. `time` is the time that corresponds to where you click/select on the item in the timeline.
 
-### onItemClick(itemId, e, time)
+## onItemClick(itemId, e, time)
 
 Called when an item is clicked. Note: the item must be selected before it's clicked... except if it's a touch event and `itemTouchSendsClick` is enabled. `time` is the time that corresponds to where you click on the item in the timeline.
 
-### onItemDoubleClick(itemId, e, time)
+## onItemDoubleClick(itemId, e, time)
 
 Called when an item was double clicked. `time` is the time that corresponds to where you double click on the item in the timeline.
 
-### onItemContextMenu(itemId, e, time)
+## onItemContextMenu(itemId, e, time)
 
 Called when the item is clicked by the right button of the mouse. `time` is the time that corresponds to where you context click on the item in the timeline. Note: If this property is set the default context menu doesn't appear.
 
-### onCanvasClick(groupId, time, e)
+## onCanvasClick(groupId, time, e)
 
 Called when an empty spot on the canvas was clicked. Get the group ID and the time as arguments. For example open a "new item" window after this.
 
-### onCanvasDoubleClick(group, time, e)
+## onCanvasDoubleClick(group, time, e)
 
 Called when an empty spot on the canvas was double clicked. Get the group and the time as arguments.
 
-### onCanvasContextMenu(group, time, e)
+## onCanvasContextMenu(group, time, e)
 
 Called when the canvas is clicked by the right button of the mouse. Note: If this property is set the default context menu doesn't appear
 
-### onZoom(timelineContext)
+## 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)
+## moveResizeValidator(action, itemId, time, resizeEdge)
 
@@ -338,3 +338,3 @@ 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.
 
-### headerLabelFormats and subHeaderLabelFormats
+## headerLabelFormats and subHeaderLabelFormats
 
@@ -412,3 +412,3 @@ The formats passed to moment to render times in the header and subheader. Defaults to these:
 
-### onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)
+## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)
 
@@ -437,7 +437,7 @@ A function that's called when the user tries to scroll. Call the passed `updateScrollCanvas(start, end)` with the updated visibleTimeStart and visibleTimeEnd (as unix timestamps in milliseconds) to change the scroll behavior, for example to limit scrolling.
 
-### onBoundsChange(canvasTimeStart, canvasTimeEnd)
+## onBoundsChange(canvasTimeStart, canvasTimeEnd)
 
 Called when the bounds in the calendar's canvas change. Use it for example to load new data to display. (see "Behind the scenes" below). `canvasTimeStart` and `canvasTimeEnd` are unix timestamps in milliseconds.
 
-### itemRenderer
+## itemRenderer
 
@@ -500,3 +500,3 @@ React component that will be used to render the item content. Will be
 
-### groupRenderer
+## groupRenderer
 
@@ -525,7 +525,7 @@ React component that will be used to render the content of groups in the
 
-### minimumWidthForItemContentVisibility
+## minimumWidthForItemContentVisibility
 
 Number of pixels to render inner content of an Item. To improve performance of the timeline, this prop dictates whether the inner contents of an Item are rendered based on the item width. This setting is useful if you have a dataset which results in a large number of small items to be rendered on the timeline. Default is 25.
 
-### resizeDetector
+## resizeDetector
 
@@ -541,9 +541,71 @@ The component automatically detects when the window has been resized. Optionally you can also detect when the component's DOM element has been resized.
 
-## FAQ
+# Timeline Markers
 
-### My timeline is unstyled
+Timeline markers are markers that are overlayed on the canvas at specific datepoints.
 
+## Overview
+
+Markers can be placed in the Timeline by declaring them as `children` of the `Timeline` component:
+
+```jsx
+<Timeline>
+  <TimelineMarkers>
+    <TodayMarker />
+    <CustomMarker date={today} />
+    <CustomMarker date={tomorrow}>
+      {/* custom renderer for this marker */}
+      {({ styles, date }) => {
+        const customStyles = {
+          ...styles,
+          backgroundColor: 'deeppink',
+          width: '4px'
+        }
+        return <div style={customStyles} onClick={someCustomHandler} />
+      }}
+    </CustomMarker>
+  </TimelineMarkers>
+</Timeline>
+```
+
+Each marker allows for passing in a custom renderer via a [function as a child component](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9). This allows the user to render whatever they want (event handlers, custom styling, etc). This custom renderer receives an object with two properties:
+
+> styles: {position: 'absolute', top: 0, bottom: 0, left: number}
+
+This object _must_ be passed to the root component's `style` prop in order to be rendered properly. Note that you can merge this object with any other properties.
+
+> date: number
+
+Date in unix timestamp of this marker. This can be used to change how your marker is rendered (or if its rendered at all)
+
+## TodayMarker
+
+Marker that is placed on the current date/time.
+
+> interval: number | default: 10000
+
+How often the TodayMarker refreshes. Value represents milliseconds.
+
+> 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.
+
+## CustomMarker
+
+Marker that is placed on the current date/time.
+
+> date: number | required
+
+Where to place the marker on the timeline. `date` value is unix timestamp.
+
+> 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.
+
+# FAQ
+
+## My timeline is unstyled
+
 You need to include the `Timeline.css` file, either via static file reference or webpack stylesheet bundling. The file is located at `lib/Timeline.css`
 
-### How can I have items with different colors?
+## How can I have items with different colors?
 
@@ -560,3 +622,3 @@ [Items](https://github.com/namespace-ee/react-calendar-timeline#items) have a "className" parameter. For example if you have "standard" items and "analysis" items, then you can just add an "analysis" class for your analysis items and then change the css backgroundColor property for them.
 
-### How can I add a sidebar on the right?
+## How can I add a sidebar on the right?
 
@@ -583,3 +645,3 @@ The library supports right sidebar.
 
-### The timeline header doesn't fix to the top of the container when I scroll down.
+## The timeline header doesn't fix to the top of the container when I scroll down.
 
@@ -613,3 +675,3 @@ There are two causes of this:
 
-### I'm using Babel with Rollup or Webpack 2+ and I'm getting strange bugs with click events
+## I'm using Babel with Rollup or Webpack 2+ and I'm getting strange bugs with click events
 
@@ -631,7 +693,7 @@ These module bundlers don't use the transpiled (ES5) code of this module. They load the original ES2015+ source. Thus your babel configuration needs to match ours. We recommend adding the [`stage-0` preset](https://babeljs.io/docs/plugins/preset-stage-0/) to your `.babelrc` to make sure everything works as intended.
 
-### It doesn't work with `create-react-app`
+## It doesn't work with `create-react-app`
 
 It's the same issue as above. See [issue 134](https://github.com/namespace-ee/react-calendar-timeline/issues/134#issuecomment-314215244) for details and options.
 
-### What are the zIndex values for all the elements?
+## What are the zIndex values for all the elements?
 
@@ -642,3 +704,2 @@ This is useful when using the plugins (that you pass as children to the component). Override the CSS to change:
 * Vertical Lines: 40
-* Today line: 50
 * Cursor line: 51
@@ -645,0 +706,0 @@ * Items: 80-88 (depending on selection, dragging, etc)

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 Timeline

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'
 
@@ -202,3 +203,4 @@ class ScrollElement extends Component {
       height: `${height + 20}px`, //20px to push the scroll element down off screen...?
-      cursor: isDragging ? 'move' : 'default'
+      cursor: isDragging ? 'move' : 'default',
+      position: 'relative'
     }
@@ -225,2 +227,3 @@
         {children}
+        <TimelineMarkersRenderer />
       </div>
@@ -227,0 +230,0 @@ )

src/lib/Timeline.js

@@ -11,3 +11,2 @@ import PropTypes from 'prop-types'
 import GroupRows from './row/GroupRows'
-import TodayLine from './lines/TodayLine'
 import CursorLine from './lines/CursorLine'
@@ -35,2 +34,4 @@ import ScrollElement from './scroll/ScrollElement'
 } from './default-config'
+import { TimelineStateProvider } from './timeline/TimelineStateContext'
+import { TimelineMarkersProvider } from './markers/TimelineMarkersContext'
 
@@ -756,13 +757,2 @@ export default class ReactCalendarTimeline extends Component {
 
-  todayLine(canvasTimeStart, canvasTimeEnd, canvasWidth, height) {
-    return (
-      <TodayLine
-        canvasTimeStart={canvasTimeStart}
-        canvasTimeEnd={canvasTimeEnd}
-        canvasWidth={canvasWidth}
-        height={height}
-      />
-    )
-  }
-
   cursorLine(cursorTime, canvasTimeStart, canvasTimeEnd, canvasWidth, height) {
@@ -1203,3 +1193,2 @@ return (
       timeSteps,
-      showCursorLine,
       traditionalZoom
@@ -1213,5 +1202,3 @@ } = this.props
       visibleTimeEnd,
-      canvasTimeStart,
-      mouseOverCanvas,
-      cursorTime
+      canvasTimeStart
     } = this.state
@@ -1253,97 +1240,92 @@ let { dimensionItems, height, groupHeights, groupTops } = this.state
     return (
-      <div
-        style={this.props.style}
-        ref={el => (this.container = el)}
-        className="react-calendar-timeline"
+      <TimelineStateProvider
+        visibleTimeStart={visibleTimeStart}
+        visibleTimeEnd={visibleTimeEnd}
+        canvasTimeStart={canvasTimeStart}
+        canvasTimeEnd={canvasTimeEnd}
+        canvasWidth={canvasWidth}
       >
-        {this.header(
-          canvasTimeStart,
-          zoom,
-          canvasTimeEnd,
-          canvasWidth,
-          minUnit,
-          timeSteps,
-          headerLabelGroupHeight,
-          headerLabelHeight
-        )}
-        <div style={outerComponentStyle} className="rct-outer">
-          {sidebarWidth > 0 ? this.sidebar(height, groupHeights) : null}
-          <ScrollElement
-            scrollRef={el => (this.scrollComponent = el)}
-            width={width}
-            height={height}
-            onZoom={this.changeZoom}
-            onWheelZoom={this.handleWheelZoom}
-            traditionalZoom={traditionalZoom}
-            onScroll={this.onScroll}
-            isInteractingWithItem={isInteractingWithItem}
-            onMouseEnter={this.handleScrollMouseEnter}
-            onMouseLeave={this.handleScrollMouseLeave}
-            onMouseMove={this.handleScrollMouseMove}
-            onContextMenu={this.handleScrollContextMenu}
+        <TimelineMarkersProvider>
+          <div
+            style={this.props.style}
+            ref={el => (this.container = el)}
+            className="react-calendar-timeline"
           >
-            <div
-              ref={el => (this.canvasComponent = el)}
-              className="rct-canvas"
-              style={canvasComponentStyle}
-            >
-              {this.items(
-                canvasTimeStart,
-                zoom,
-                canvasTimeEnd,
-                canvasWidth,
-                minUnit,
-                dimensionItems,
-                groupHeights,
-                groupTops
-              )}
-              {this.verticalLines(
-                canvasTimeStart,
-                canvasTimeEnd,
-                canvasWidth,
-                minUnit,
-                timeSteps,
-                height,
-                headerHeight
-              )}
-              {this.horizontalLines(canvasWidth, groupHeights)}
-              {this.todayLine(
-                canvasTimeStart,
-                canvasTimeEnd,
-                canvasWidth,
-                height
-              )}
-              {mouseOverCanvas && showCursorLine
-                ? this.cursorLine(
-                    cursorTime,
+            {this.header(
+              canvasTimeStart,
+              zoom,
+              canvasTimeEnd,
+              canvasWidth,
+              minUnit,
+              timeSteps,
+              headerLabelGroupHeight,
+              headerLabelHeight
+            )}
+            <div style={outerComponentStyle} className="rct-outer">
+              {sidebarWidth > 0 ? this.sidebar(height, groupHeights) : null}
+              <ScrollElement
+                scrollRef={el => (this.scrollComponent = el)}
+                width={width}
+                height={height}
+                onZoom={this.changeZoom}
+                onWheelZoom={this.handleWheelZoom}
+                traditionalZoom={traditionalZoom}
+                onScroll={this.onScroll}
+                isInteractingWithItem={isInteractingWithItem}
+                onMouseEnter={this.handleScrollMouseEnter}
+                onMouseLeave={this.handleScrollMouseLeave}
+                onMouseMove={this.handleScrollMouseMove}
+                onContextMenu={this.handleScrollContextMenu}
+              >
+                <div
+                  ref={el => (this.canvasComponent = el)}
+                  className="rct-canvas"
+                  style={canvasComponentStyle}
+                >
+                  {this.items(
                     canvasTimeStart,
+                    zoom,
                     canvasTimeEnd,
                     canvasWidth,
-                    height
-                  )
+                    minUnit,
+                    dimensionItems,
+                    groupHeights,
+                    groupTops
+                  )}
+                  {this.verticalLines(
+                    canvasTimeStart,
+                    canvasTimeEnd,
+                    canvasWidth,
+                    minUnit,
+                    timeSteps,
+                    height,
+                    headerHeight
+                  )}
+                  {this.horizontalLines(canvasWidth, groupHeights)}
+                  {this.infoLabel()}
+                  {this.childrenWithProps(
+                    canvasTimeStart,
+                    canvasTimeEnd,
+                    canvasWidth,
+                    dimensionItems,
+                    groupHeights,
+                    groupTops,
+                    height,
+                    headerHeight,
+                    visibleTimeStart,
+                    visibleTimeEnd,
+                    minUnit,
+                    timeSteps
+                  )}
+                </div>
+              </ScrollElement>
+              {rightSidebarWidth > 0
+                ? this.rightSidebar(height, groupHeights)
                 : null}
-              {this.infoLabel()}
-              {this.childrenWithProps(
-                canvasTimeStart,
-                canvasTimeEnd,
-                canvasWidth,
-                dimensionItems,
-                groupHeights,
-                groupTops,
-                height,
-                headerHeight,
-                visibleTimeStart,
-                visibleTimeEnd,
-                minUnit,
-                timeSteps
-              )}
             </div>
-          </ScrollElement>
-          {rightSidebarWidth > 0
-            ? this.rightSidebar(height, groupHeights)
-            : null}
-        </div>
-      </div>
+          </div>
+        </TimelineMarkersProvider>
+      </TimelineStateProvider>
     )
   }
 }

src/lib/utility/generic.js

@@ -35,1 +35,3 @@ import isEqual from 'lodash.isequal'
 }
+
+export function noop() {}

No alert changes

Improved metrics

Total package byte prevSize

332705

increased by13.21%

Number of package files

64

increased by33.33%

Lines of code

7242

increased by12.8%

Number of lines in readme file

736

increased by9.04%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedcreate-react-context@^0.2.2

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedgud@1.0.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.40(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)