@oddle.me/react-calendar-timeline 0.28.1-0

package/lib/lib/markers/TimelineMarkersContext.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimelineMarkersConsumer = exports.TimelineMarkersProvider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _createReactContext2 = _interopRequireDefault(require("create-react-context"));
+
+var _generic = require("../utility/generic");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultContextState = {
+  markers: [],
+  subscribeMarker: function subscribeMarker() {
+    // eslint-disable-next-line
+    console.warn('default subscribe marker used');
+    return _generic.noop;
+  }
+};
+
+var _createReactContext = (0, _createReactContext2["default"])(defaultContextState),
+    Consumer = _createReactContext.Consumer,
+    Provider = _createReactContext.Provider; // REVIEW: is this the best way to manage ids?
+
+
+var _id = 0;
+
+var createId = function createId() {
+  _id += 1;
+  return _id + 1;
+};
+
+var TimelineMarkersProvider =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(TimelineMarkersProvider, _React$Component);
+
+  function TimelineMarkersProvider() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, TimelineMarkersProvider);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TimelineMarkersProvider)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubscribeToMarker", function (newMarker) {
+      newMarker = _objectSpread({}, newMarker, {
+        // REVIEW: in the event that we accept id to be passed to the Marker components, this line would override those
+        id: createId()
+      });
+
+      _this.setState(function (state) {
+        return {
+          markers: [].concat(_toConsumableArray(state.markers), [newMarker])
+        };
+      });
+
+      return {
+        unsubscribe: function unsubscribe() {
+          _this.setState(function (state) {
+            return {
+              markers: state.markers.filter(function (marker) {
+                return marker.id !== newMarker.id;
+              })
+            };
+          });
+        },
+        getMarker: function getMarker() {
+          return newMarker;
+        }
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleUpdateMarker", function (updateMarker) {
+      var markerIndex = _this.state.markers.findIndex(function (marker) {
+        return marker.id === updateMarker.id;
+      });
+
+      if (markerIndex < 0) return;
+
+      _this.setState(function (state) {
+        return {
+          markers: [].concat(_toConsumableArray(state.markers.slice(0, markerIndex)), [updateMarker], _toConsumableArray(state.markers.slice(markerIndex + 1)))
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      markers: [],
+      subscribeMarker: _this.handleSubscribeToMarker,
+      updateMarker: _this.handleUpdateMarker
+    });
+
+    return _this;
+  }
+
+  _createClass(TimelineMarkersProvider, [{
+    key: "render",
+    value: function render() {
+      return _react["default"].createElement(Provider, {
+        value: this.state
+      }, this.props.children);
+    }
+  }]);
+
+  return TimelineMarkersProvider;
+}(_react["default"].Component);
+
+exports.TimelineMarkersProvider = TimelineMarkersProvider;
+
+_defineProperty(TimelineMarkersProvider, "propTypes", {
+  children: _propTypes["default"].element.isRequired
+});
+
+var TimelineMarkersConsumer = Consumer;
+exports.TimelineMarkersConsumer = TimelineMarkersConsumer;

package/lib/lib/markers/TimelineMarkersRenderer.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TimelineMarkersContext = require("./TimelineMarkersContext");
+
+var _markerType = require("./markerType");
+
+var _TodayMarker = _interopRequireDefault(require("./implementations/TodayMarker"));
+
+var _CustomMarker = _interopRequireDefault(require("./implementations/CustomMarker"));
+
+var _TimelineStateContext = require("../timeline/TimelineStateContext");
+
+var _CursorMarker = _interopRequireDefault(require("./implementations/CursorMarker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** Internal component used in timeline to render markers registered */
+var TimelineMarkersRenderer = function TimelineMarkersRenderer() {
+  return _react["default"].createElement(_TimelineStateContext.TimelineStateConsumer, null, function (_ref) {
+    var getLeftOffsetFromDate = _ref.getLeftOffsetFromDate,
+        getTimelineState = _ref.getTimelineState;
+    return _react["default"].createElement(_TimelineMarkersContext.TimelineMarkersConsumer, null, function (_ref2) {
+      var markers = _ref2.markers;
+      var timelineState = getTimelineState();
+      return markers.map(function (marker) {
+        switch (marker.type) {
+          case _markerType.TimelineMarkerType.Today:
+            if (!(new Date().valueOf() >= timelineState.canvasTimeStart && new Date().valueOf() <= timelineState.canvasTimeEnd)) return null;
+            return _react["default"].createElement(_TodayMarker["default"], {
+              key: marker.id,
+              getLeftOffsetFromDate: getLeftOffsetFromDate,
+              renderer: marker.renderer,
+              interval: marker.interval
+            });
+
+          case _markerType.TimelineMarkerType.Custom:
+            //filter out cursors outside canvas start/end
+            if (!(marker.date >= timelineState.canvasTimeStart && marker.date <= timelineState.canvasTimeEnd)) return null;
+            return _react["default"].createElement(_CustomMarker["default"], {
+              key: marker.id,
+              renderer: marker.renderer,
+              date: marker.date,
+              getLeftOffsetFromDate: getLeftOffsetFromDate
+            });
+
+          case _markerType.TimelineMarkerType.Cursor:
+            return _react["default"].createElement(_CursorMarker["default"], {
+              key: marker.id,
+              renderer: marker.renderer,
+              getLeftOffsetFromDate: getLeftOffsetFromDate
+            });
+
+          default:
+            return null;
+        }
+      });
+    });
+  });
+};
+
+var _default = TimelineMarkersRenderer;
+exports["default"] = _default;

package/lib/lib/markers/implementations/CursorMarker.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _shared = require("./shared");
+
+var _MarkerCanvasContext = require("../MarkerCanvasContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultRenderer = (0, _shared.createDefaultRenderer)('default-cursor-marker');
+/**
+ * CursorMarker implementation subscribes to 'subscribeToCanvasMouseOver' on mount.
+ * This subscription is passed in via MarkerCanvasConsumer, which is wired up to
+ * MarkerCanvasProvider in the MarkerCanvas component. When the user mouses over MarkerCanvas,
+ * the callback registered in CursorMarker (this component) is passed:
+ *  leftOffset - pixels from left edge of canvas, used to position this element
+ *  date - the date the cursor pertains to
+ *  isCursorOverCanvas - whether the user cursor is over the canvas. This is set to 'false'
+ *  when the user mouseleaves the element
+ */
+
+var CursorMarker =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(CursorMarker, _React$Component);
+
+  function CursorMarker() {
+    var _this;
+
+    _classCallCheck(this, CursorMarker);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(CursorMarker).call(this));
+
+    _defineProperty(_assertThisInitialized(_this), "handleCanvasMouseOver", function (_ref) {
+      var leftOffset = _ref.leftOffset,
+          date = _ref.date,
+          isCursorOverCanvas = _ref.isCursorOverCanvas;
+
+      _this.setState({
+        leftOffset: leftOffset,
+        date: date,
+        isShowingCursor: isCursorOverCanvas
+      });
+    });
+
+    _this.state = {
+      leftOffset: 0,
+      date: 0,
+      isShowingCursor: false
+    };
+    return _this;
+  }
+
+  _createClass(CursorMarker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.unsubscribe = this.props.subscribeToCanvasMouseOver(this.handleCanvasMouseOver);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.unsubscribe != null) {
+        this.unsubscribe();
+        this.unsubscribe = null;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          isShowingCursor = _this$state.isShowingCursor,
+          leftOffset = _this$state.leftOffset,
+          date = _this$state.date;
+      if (!isShowingCursor) return null;
+      var styles = (0, _shared.createMarkerStylesWithLeftOffset)(leftOffset);
+      return this.props.renderer({
+        styles: styles,
+        date: date
+      });
+    }
+  }]);
+
+  return CursorMarker;
+}(_react["default"].Component); // TODO: turn into HOC?
+
+
+_defineProperty(CursorMarker, "propTypes", {
+  subscribeToCanvasMouseOver: _propTypes["default"].func.isRequired,
+  renderer: _propTypes["default"].func
+});
+
+_defineProperty(CursorMarker, "defaultProps", {
+  renderer: defaultRenderer
+});
+
+var CursorMarkerWrapper = function CursorMarkerWrapper(props) {
+  return _react["default"].createElement(_MarkerCanvasContext.MarkerCanvasConsumer, null, function (_ref2) {
+    var subscribeToMouseOver = _ref2.subscribeToMouseOver;
+    return _react["default"].createElement(CursorMarker, _extends({
+      subscribeToCanvasMouseOver: subscribeToMouseOver
+    }, props));
+  });
+};
+
+CursorMarkerWrapper.displayName = 'CursorMarkerWrapper';
+var _default = CursorMarkerWrapper;
+exports["default"] = _default;

package/lib/lib/markers/implementations/CustomMarker.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _shared = require("./shared");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultCustomMarkerRenderer = (0, _shared.createDefaultRenderer)('default-customer-marker-id');
+/**
+ * CustomMarker that is placed based on passed in date prop
+ */
+
+var CustomMarker =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(CustomMarker, _React$Component);
+
+  function CustomMarker() {
+    _classCallCheck(this, CustomMarker);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(CustomMarker).apply(this, arguments));
+  }
+
+  _createClass(CustomMarker, [{
+    key: "render",
+    value: function render() {
+      var date = this.props.date;
+      var leftOffset = this.props.getLeftOffsetFromDate(date);
+      var styles = (0, _shared.createMarkerStylesWithLeftOffset)(leftOffset);
+      return this.props.renderer({
+        styles: styles,
+        date: date
+      });
+    }
+  }]);
+
+  return CustomMarker;
+}(_react["default"].Component);
+
+_defineProperty(CustomMarker, "propTypes", {
+  getLeftOffsetFromDate: _propTypes["default"].func.isRequired,
+  renderer: _propTypes["default"].func,
+  date: _propTypes["default"].number.isRequired
+});
+
+_defineProperty(CustomMarker, "defaultProps", {
+  renderer: defaultCustomMarkerRenderer
+});
+
+var _default = CustomMarker;
+exports["default"] = _default;

package/lib/lib/markers/implementations/TodayMarker.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _shared = require("./shared");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultRenderer = (0, _shared.createDefaultRenderer)('default-today-line');
+/** Marker that is placed based on current date.  This component updates itself on
+ * a set interval, dictated by the 'interval' prop.
+ */
+
+var TodayMarker =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(TodayMarker, _React$Component);
+
+  function TodayMarker() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, TodayMarker);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TodayMarker)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      date: Date.now()
+    });
+
+    return _this;
+  }
+
+  _createClass(TodayMarker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.intervalToken = this.createIntervalUpdater(this.props.interval);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.interval !== this.props.interval) {
+        clearInterval(this.intervalToken);
+        this.intervalToken = this.createIntervalUpdater(this.props.interval);
+      }
+    }
+  }, {
+    key: "createIntervalUpdater",
+    value: function createIntervalUpdater(interval) {
+      var _this2 = this;
+
+      return setInterval(function () {
+        _this2.setState({
+          date: Date.now() // FIXME: use date utils pass in as props
+
+        });
+      }, interval);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearInterval(this.intervalToken);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var date = this.state.date;
+      var leftOffset = this.props.getLeftOffsetFromDate(date);
+      var styles = (0, _shared.createMarkerStylesWithLeftOffset)(leftOffset);
+      return this.props.renderer({
+        styles: styles,
+        date: date
+      });
+    }
+  }]);
+
+  return TodayMarker;
+}(_react["default"].Component);
+
+_defineProperty(TodayMarker, "propTypes", {
+  getLeftOffsetFromDate: _propTypes["default"].func.isRequired,
+  renderer: _propTypes["default"].func,
+  interval: _propTypes["default"].number.isRequired
+});
+
+_defineProperty(TodayMarker, "defaultProps", {
+  renderer: defaultRenderer
+});
+
+var _default = TodayMarker;
+exports["default"] = _default;

package/lib/lib/markers/implementations/shared.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDefaultRenderer = exports.createMarkerStylesWithLeftOffset = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * Baseline styles to get the marker to render correctly
+ */
+var criticalStyles = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: '2px',
+  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
+  // might want to memoize this?
+
+};
+
+var createMarkerStylesWithLeftOffset = function createMarkerStylesWithLeftOffset(leftOffset) {
+  return _objectSpread({}, criticalStyles, {
+    left: leftOffset
+  });
+};
+
+exports.createMarkerStylesWithLeftOffset = createMarkerStylesWithLeftOffset;
+
+var createDefaultRenderer = function createDefaultRenderer(dataTestidValue) {
+  // eslint-disable-next-line
+  return function DefaultMarkerRenderer(_ref) {
+    var styles = _ref.styles;
+    return _react["default"].createElement("div", {
+      style: styles
+    });
+  };
+};
+
+exports.createDefaultRenderer = createDefaultRenderer;

package/lib/lib/markers/markerType.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimelineMarkerType = void 0;
+var TimelineMarkerType = {
+  Today: 'Today',
+  Custom: 'Custom',
+  Cursor: 'Cursor'
+};
+exports.TimelineMarkerType = TimelineMarkerType;