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

package/lib/lib/items/Items.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _generic = require("../utility/generic");
+
+var _calendar = require("../utility/calendar");
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+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 canResizeLeft = function canResizeLeft(item, canResize) {
+  var value = (0, _generic._get)(item, 'canResize') !== undefined ? (0, _generic._get)(item, 'canResize') : canResize;
+  return value === 'left' || value === 'both';
+};
+
+var canResizeRight = function canResizeRight(item, canResize) {
+  var value = (0, _generic._get)(item, 'canResize') !== undefined ? (0, _generic._get)(item, 'canResize') : canResize;
+  return value === 'right' || value === 'both' || value === true;
+};
+
+var Items =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(Items, _Component);
+
+  function Items() {
+    _classCallCheck(this, Items);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(Items).apply(this, arguments));
+  }
+
+  _createClass(Items, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      return !((0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && (0, _generic.arraysEqual)(nextProps.items, this.props.items) && (0, _generic.arraysEqual)(nextProps.dimensionItems, this.props.dimensionItems) && nextProps.keys === this.props.keys && nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.selectedItem === this.props.selectedItem && nextProps.selected === this.props.selected && nextProps.dragSnap === this.props.dragSnap && nextProps.minResizeWidth === this.props.minResizeWidth && nextProps.canChangeGroup === this.props.canChangeGroup && nextProps.canMove === this.props.canMove && nextProps.canResize === this.props.canResize && nextProps.canSelect === this.props.canSelect);
+    }
+  }, {
+    key: "isSelected",
+    value: function isSelected(item, itemIdKey) {
+      if (!this.props.selected) {
+        return this.props.selectedItem === (0, _generic._get)(item, itemIdKey);
+      } else {
+        var target = (0, _generic._get)(item, itemIdKey);
+        return this.props.selected.includes(target);
+      }
+    }
+  }, {
+    key: "getVisibleItems",
+    value: function getVisibleItems(canvasTimeStart, canvasTimeEnd) {
+      var _this$props = this.props,
+          keys = _this$props.keys,
+          items = _this$props.items;
+      return (0, _calendar.getVisibleItems)(items, canvasTimeStart, canvasTimeEnd, keys);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props2 = this.props,
+          canvasTimeStart = _this$props2.canvasTimeStart,
+          canvasTimeEnd = _this$props2.canvasTimeEnd,
+          dimensionItems = _this$props2.dimensionItems,
+          keys = _this$props2.keys,
+          groups = _this$props2.groups;
+      var itemIdKey = keys.itemIdKey,
+          itemGroupKey = keys.itemGroupKey;
+      var groupOrders = (0, _calendar.getGroupOrders)(groups, keys);
+      var visibleItems = this.getVisibleItems(canvasTimeStart, canvasTimeEnd, groupOrders);
+      var sortedDimensionItems = (0, _generic.keyBy)(dimensionItems, 'id');
+      return _react["default"].createElement("div", {
+        className: "rct-items"
+      }, visibleItems.filter(function (item) {
+        return sortedDimensionItems[(0, _generic._get)(item, itemIdKey)];
+      }).map(function (item) {
+        return _react["default"].createElement(_Item["default"], {
+          key: (0, _generic._get)(item, itemIdKey),
+          item: item,
+          keys: _this.props.keys,
+          order: groupOrders[(0, _generic._get)(item, itemGroupKey)],
+          dimensions: sortedDimensionItems[(0, _generic._get)(item, itemIdKey)].dimensions,
+          selected: _this.isSelected(item, itemIdKey),
+          canChangeGroup: (0, _generic._get)(item, 'canChangeGroup') !== undefined ? (0, _generic._get)(item, 'canChangeGroup') : _this.props.canChangeGroup,
+          canMove: (0, _generic._get)(item, 'canMove') !== undefined ? (0, _generic._get)(item, 'canMove') : _this.props.canMove,
+          canResizeLeft: canResizeLeft(item, _this.props.canResize),
+          canResizeRight: canResizeRight(item, _this.props.canResize),
+          canSelect: (0, _generic._get)(item, 'canSelect') !== undefined ? (0, _generic._get)(item, 'canSelect') : _this.props.canSelect,
+          useResizeHandle: _this.props.useResizeHandle,
+          groupTops: _this.props.groupTops,
+          canvasTimeStart: _this.props.canvasTimeStart,
+          canvasTimeEnd: _this.props.canvasTimeEnd,
+          canvasWidth: _this.props.canvasWidth,
+          dragSnap: _this.props.dragSnap,
+          minResizeWidth: _this.props.minResizeWidth,
+          onResizing: _this.props.itemResizing,
+          onResized: _this.props.itemResized,
+          moveResizeValidator: _this.props.moveResizeValidator,
+          onDrag: _this.props.itemDrag,
+          onDrop: _this.props.itemDrop,
+          onItemDoubleClick: _this.props.onItemDoubleClick,
+          onContextMenu: _this.props.onItemContextMenu,
+          onSelect: _this.props.itemSelect,
+          itemRenderer: _this.props.itemRenderer,
+          scrollRef: _this.props.scrollRef
+        });
+      }));
+    }
+  }]);
+
+  return Items;
+}(_react.Component);
+
+exports["default"] = Items;
+
+_defineProperty(Items, "propTypes", {
+  groups: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]).isRequired,
+  items: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]).isRequired,
+  canvasTimeStart: _propTypes["default"].number.isRequired,
+  canvasTimeEnd: _propTypes["default"].number.isRequired,
+  canvasWidth: _propTypes["default"].number.isRequired,
+  dragSnap: _propTypes["default"].number,
+  minResizeWidth: _propTypes["default"].number,
+  selectedItem: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  canChangeGroup: _propTypes["default"].bool.isRequired,
+  canMove: _propTypes["default"].bool.isRequired,
+  canResize: _propTypes["default"].oneOf([true, false, 'left', 'right', 'both']),
+  canSelect: _propTypes["default"].bool,
+  keys: _propTypes["default"].object.isRequired,
+  moveResizeValidator: _propTypes["default"].func,
+  itemSelect: _propTypes["default"].func,
+  itemDrag: _propTypes["default"].func,
+  itemDrop: _propTypes["default"].func,
+  itemResizing: _propTypes["default"].func,
+  itemResized: _propTypes["default"].func,
+  onItemDoubleClick: _propTypes["default"].func,
+  onItemContextMenu: _propTypes["default"].func,
+  itemRenderer: _propTypes["default"].func,
+  selected: _propTypes["default"].array,
+  dimensionItems: _propTypes["default"].array,
+  groupTops: _propTypes["default"].array,
+  useResizeHandle: _propTypes["default"].bool,
+  scrollRef: _propTypes["default"].object
+});
+
+_defineProperty(Items, "defaultProps", {
+  selected: []
+});

package/lib/lib/items/defaultItemRenderer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultItemRenderer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var defaultItemRenderer = function defaultItemRenderer(_ref) {
+  var item = _ref.item,
+      itemContext = _ref.itemContext,
+      getItemProps = _ref.getItemProps,
+      getResizeProps = _ref.getResizeProps;
+
+  var _getResizeProps = getResizeProps(),
+      leftResizeProps = _getResizeProps.left,
+      rightResizeProps = _getResizeProps.right;
+
+  return _react["default"].createElement("div", getItemProps(item.itemProps), itemContext.useResizeHandle ? _react["default"].createElement("div", leftResizeProps) : '', _react["default"].createElement("div", {
+    className: "rct-item-content",
+    style: {
+      maxHeight: "".concat(itemContext.dimensions.height)
+    }
+  }, itemContext.title), itemContext.useResizeHandle ? _react["default"].createElement("div", rightResizeProps) : '');
+}; // TODO: update this to actual prop types. Too much to change before release
+// future me, forgive me.
+
+
+exports.defaultItemRenderer = defaultItemRenderer;
+defaultItemRenderer.propTypes = {
+  item: _propTypes["default"].any,
+  itemContext: _propTypes["default"].any,
+  getItemProps: _propTypes["default"].any,
+  getResizeProps: _propTypes["default"].any
+};

package/lib/lib/items/styles.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rightResizeStyle = exports.leftResizeStyle = exports.selectedAndCanResizeRightAndDragRight = exports.selectedAndCanResizeRight = exports.selectedAndCanResizeLeftAndDragLeft = exports.selectedAndCanResizeLeft = exports.selectedAndCanMove = exports.selectedStyle = exports.overridableStyles = void 0;
+var overridableStyles = {
+  fontSize: 12,
+  color: 'white',
+  cursor: 'pointer',
+  background: '#2196f3',
+  border: '1px solid #1a6fb3',
+  zIndex: 80
+};
+exports.overridableStyles = overridableStyles;
+var selectedStyle = {
+  background: '#ffc107',
+  border: '1px solid #ff9800',
+  zIndex: 82
+};
+exports.selectedStyle = selectedStyle;
+var selectedAndCanMove = {
+  cursor: 'move'
+};
+exports.selectedAndCanMove = selectedAndCanMove;
+var selectedAndCanResizeLeft = {
+  borderLeftWidth: 3
+};
+exports.selectedAndCanResizeLeft = selectedAndCanResizeLeft;
+var selectedAndCanResizeLeftAndDragLeft = {
+  cursor: 'w-resize'
+};
+exports.selectedAndCanResizeLeftAndDragLeft = selectedAndCanResizeLeftAndDragLeft;
+var selectedAndCanResizeRight = {
+  borderRightWidth: 3
+};
+exports.selectedAndCanResizeRight = selectedAndCanResizeRight;
+var selectedAndCanResizeRightAndDragRight = {
+  cursor: 'e-resize'
+};
+exports.selectedAndCanResizeRightAndDragRight = selectedAndCanResizeRightAndDragRight;
+var leftResizeStyle = {
+  position: 'absolute',
+  width: 24,
+  maxWidth: '20%',
+  minWidth: 2,
+  height: '100%',
+  top: 0,
+  left: 0,
+  cursor: 'pointer',
+  zIndex: 88
+};
+exports.leftResizeStyle = leftResizeStyle;
+var rightResizeStyle = {
+  position: 'absolute',
+  width: 24,
+  maxWidth: '20%',
+  minWidth: 2,
+  height: '100%',
+  top: 0,
+  right: 0,
+  cursor: 'pointer',
+  zIndex: 88
+};
+exports.rightResizeStyle = rightResizeStyle;

package/lib/lib/layout/Sidebar.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _generic = require("../utility/generic");
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+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 Sidebar =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(Sidebar, _Component);
+
+  function Sidebar() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, Sidebar);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Sidebar)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "handleScroll", function (e) {
+      _this.props.onScroll(e.target.scrollTop);
+    });
+
+    return _this;
+  }
+
+  _createClass(Sidebar, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      return !(nextProps.keys === this.props.keys && nextProps.width === this.props.width && nextProps.height === this.props.height && (0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && (0, _generic.arraysEqual)(nextProps.groupHeights, this.props.groupHeights));
+    }
+  }, {
+    key: "renderGroupContent",
+    value: function renderGroupContent(group, isRightSidebar, groupTitleKey, groupRightTitleKey) {
+      if (this.props.groupRenderer) {
+        return _react["default"].createElement(this.props.groupRenderer, {
+          group: group,
+          isRightSidebar: isRightSidebar
+        });
+      } else {
+        return (0, _generic._get)(group, isRightSidebar ? groupRightTitleKey : groupTitleKey);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          width = _this$props.width,
+          groupHeights = _this$props.groupHeights,
+          height = _this$props.height,
+          isRightSidebar = _this$props.isRightSidebar;
+      var _this$props$keys = this.props.keys,
+          groupIdKey = _this$props$keys.groupIdKey,
+          groupTitleKey = _this$props$keys.groupTitleKey,
+          groupRightTitleKey = _this$props$keys.groupRightTitleKey;
+      var sidebarStyle = {
+        width: "".concat(width, "px"),
+        height: "".concat(height, "px")
+      };
+      var groupsStyle = {
+        width: "".concat(width, "px")
+      };
+      var groupLines = this.props.groups.map(function (group, index) {
+        var elementStyle = {
+          height: "".concat(groupHeights[index], "px"),
+          lineHeight: "".concat(groupHeights[index], "px")
+        };
+        return _react["default"].createElement("div", {
+          key: (0, _generic._get)(group, groupIdKey),
+          className: 'rct-sidebar-row rct-sidebar-row-' + (index % 2 === 0 ? 'even' : 'odd'),
+          style: elementStyle
+        }, _this2.renderGroupContent(group, isRightSidebar, groupTitleKey, groupRightTitleKey));
+      });
+      return _react["default"].createElement("div", {
+        className: 'rct-sidebar' + (isRightSidebar ? ' rct-sidebar-right' : ''),
+        style: sidebarStyle,
+        onScroll: this.handleScroll,
+        ref: this.props.getSidebarScrollElmRef
+      }, _react["default"].createElement("div", {
+        style: groupsStyle
+      }, groupLines));
+    }
+  }]);
+
+  return Sidebar;
+}(_react.Component);
+
+exports["default"] = Sidebar;
+
+_defineProperty(Sidebar, "propTypes", {
+  groups: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]).isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  groupHeights: _propTypes["default"].array.isRequired,
+  keys: _propTypes["default"].object.isRequired,
+  groupRenderer: _propTypes["default"].func,
+  isRightSidebar: _propTypes["default"].bool,
+  getSidebarScrollElmRef: _propTypes["default"].func,
+  onScroll: _propTypes["default"].func
+});

package/lib/lib/markers/MarkerCanvas.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MarkerCanvasContext = require("./MarkerCanvasContext");
+
+var _TimelineMarkersRenderer = _interopRequireDefault(require("./TimelineMarkersRenderer"));
+
+var _TimelineStateContext = require("../timeline/TimelineStateContext");
+
+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 _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; }
+
+// expand to fill entire parent container (ScrollElement)
+var staticStyles = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0
+  /**
+   * Renders registered markers and exposes a mouse over listener for
+   * CursorMarkers to subscribe to
+   */
+
+};
+
+var MarkerCanvas =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(MarkerCanvas, _React$Component);
+
+  function MarkerCanvas() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, MarkerCanvas);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MarkerCanvas)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function (evt) {
+      if (_this.subscription != null) {
+        var pageX = evt.pageX; // FIXME: dont use getBoundingClientRect. Use passed in scroll amount
+
+        var _this$containerEl$get = _this.containerEl.getBoundingClientRect(),
+            containerLeft = _this$containerEl$get.left; // number of pixels from left we are on canvas
+        // we do this calculation as pageX is based on x from viewport whereas
+        // our canvas can be scrolled left and right and is generally outside
+        // of the viewport.  This calculation is to get how many pixels the cursor
+        // is from left of this element
+
+
+        var canvasX = pageX - containerLeft;
+
+        var date = _this.props.getDateFromLeftOffsetPosition(canvasX);
+
+        _this.subscription({
+          leftOffset: canvasX,
+          date: date,
+          isCursorOverCanvas: true
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function () {
+      if (_this.subscription != null) {
+        // tell subscriber that we're not on canvas
+        _this.subscription({
+          leftOffset: 0,
+          date: 0,
+          isCursorOverCanvas: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMoveSubscribe", function (sub) {
+      _this.subscription = sub;
+      return function () {
+        _this.subscription = null;
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      subscribeToMouseOver: _this.handleMouseMoveSubscribe
+    });
+
+    return _this;
+  }
+
+  _createClass(MarkerCanvas, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return _react["default"].createElement(_MarkerCanvasContext.MarkerCanvasProvider, {
+        value: this.state
+      }, _react["default"].createElement("div", {
+        style: _objectSpread({}, staticStyles, {
+          height: this.props.height
+        }),
+        onMouseMove: this.handleMouseMove,
+        onMouseLeave: this.handleMouseLeave,
+        ref: function ref(el) {
+          return _this2.containerEl = el;
+        }
+      }, _react["default"].createElement(_TimelineMarkersRenderer["default"], null), this.props.children));
+    }
+  }]);
+
+  return MarkerCanvas;
+}(_react["default"].Component);
+
+_defineProperty(MarkerCanvas, "propTypes", {
+  getDateFromLeftOffsetPosition: _propTypes["default"].func.isRequired,
+  children: _propTypes["default"].node,
+  height: _propTypes["default"].number
+});
+
+var MarkerCanvasWrapper = function MarkerCanvasWrapper(props) {
+  return _react["default"].createElement(_TimelineStateContext.TimelineStateConsumer, null, function (_ref) {
+    var getDateFromLeftOffsetPosition = _ref.getDateFromLeftOffsetPosition;
+    return _react["default"].createElement(MarkerCanvas, _extends({
+      getDateFromLeftOffsetPosition: getDateFromLeftOffsetPosition
+    }, props));
+  });
+};
+
+var _default = MarkerCanvasWrapper;
+exports["default"] = _default;

package/lib/lib/markers/MarkerCanvasContext.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MarkerCanvasConsumer = exports.MarkerCanvasProvider = void 0;
+
+var _createReactContext2 = _interopRequireDefault(require("create-react-context"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable no-console */
+var defaultContextState = {
+  subscribeToMouseOver: function subscribeToMouseOver() {
+    console.warn('"subscribeToMouseOver" default func is being used');
+  }
+  /* eslint-enable */
+
+};
+
+var _createReactContext = (0, _createReactContext2["default"])(defaultContextState),
+    Consumer = _createReactContext.Consumer,
+    Provider = _createReactContext.Provider;
+
+var MarkerCanvasProvider = Provider;
+exports.MarkerCanvasProvider = MarkerCanvasProvider;
+var MarkerCanvasConsumer = Consumer;
+exports.MarkerCanvasConsumer = MarkerCanvasConsumer;