@oddle.me/react-calendar-timeline 0.29.0 → 0.29.2

package/lib/Timeline.css

@@ -1,107 +1,110 @@
-.react-calendar-timeline * {
-  box-sizing: border-box; }
-
-.react-calendar-timeline .rct-outer {
-  display: block;
+.react-calendar-timeline {
   overflow: hidden;
-  white-space: nowrap; }
-
-.react-calendar-timeline .rct-scroll {
-  display: inline-block;
-  white-space: normal;
-  vertical-align: top;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  -ms-touch-action: none;
-  touch-action: none; }
-
-.react-calendar-timeline .rct-item:hover {
-  z-index: 88; }
-
-.react-calendar-timeline .rct-item .rct-item-content {
-  position: sticky;
-  position: -webkit-sticky;
-  left: 0px;
-  overflow: hidden;
-  display: inline-block;
-  border-radius: 2px;
-  padding: 0 6px;
-  height: 100%; }
-
-.react-calendar-timeline .rct-sidebar {
-  overflow: hidden;
-  white-space: normal;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  box-sizing: border-box;
-  border-right: 1px solid #bbb; }
-  .react-calendar-timeline .rct-sidebar.rct-sidebar-right {
-    border-right: 0;
-    border-left: 1px solid #bbb; }
-  .react-calendar-timeline .rct-sidebar .rct-sidebar-row {
-    padding: 0 4px;
+  display: flex;
+  flex-direction: column; }
+  .react-calendar-timeline * {
+    box-sizing: border-box; }
+  .react-calendar-timeline .rct-outer {
+    display: block;
     overflow: hidden;
     white-space: nowrap;
-    text-overflow: ellipsis;
+    flex: 1;
+    height: 0;
+    overflow: hidden; }
+  .react-calendar-timeline .rct-scroll {
+    display: inline-block;
+    white-space: normal;
+    vertical-align: top;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    -ms-touch-action: none;
+    touch-action: none;
+    height: 100% !important; }
+  .react-calendar-timeline .rct-item:hover {
+    z-index: 88; }
+  .react-calendar-timeline .rct-item .rct-item-content {
+    position: sticky;
+    position: -webkit-sticky;
+    left: 0px;
+    overflow: hidden;
+    display: inline-block;
+    border-radius: 2px;
+    padding: 0 6px;
+    height: 100%; }
+  .react-calendar-timeline .rct-sidebar {
+    overflow: hidden;
+    white-space: normal;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
     box-sizing: border-box;
-    margin: 0;
-    border-bottom: 1px solid #bbb; }
-    .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
+    border-right: 1px solid #bbb;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 100% !important;
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */ }
+    .react-calendar-timeline .rct-sidebar::-webkit-scrollbar {
+      display: none; }
+    .react-calendar-timeline .rct-sidebar.rct-sidebar-right {
+      border-right: 0;
+      border-left: 1px solid #bbb; }
+    .react-calendar-timeline .rct-sidebar .rct-sidebar-row {
+      padding: 0 4px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      margin: 0;
+      border-bottom: 1px solid #bbb; }
+      .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
+        background: rgba(0, 0, 0, 0.05); }
+      .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
+        background: transparent; }
+  .react-calendar-timeline .rct-vertical-lines .rct-vl {
+    position: absolute;
+    border-left: 1px solid #bbb;
+    z-index: 30; }
+    .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
+      border-left-width: 2px; }
+  .react-calendar-timeline .rct-horizontal-lines {
+    -webkit-user-select: none;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    user-select: none; }
+    .react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
+    .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+      border-bottom: 1px solid #bbb;
+      box-sizing: border-box;
+      z-index: 40; }
+    .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
       background: rgba(0, 0, 0, 0.05); }
-    .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
+    .react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
       background: transparent; }
-
-.react-calendar-timeline .rct-vertical-lines .rct-vl {
-  position: absolute;
-  border-left: 1px solid #bbb;
-  z-index: 30; }
-  .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
-    border-left-width: 2px; }
-  .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6, .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {
-    background: rgba(250, 246, 225, 0.5); }
-
-.react-calendar-timeline .rct-horizontal-lines {
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none; }
-  .react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
-  .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+  .react-calendar-timeline .rct-cursor-line {
+    position: absolute;
+    width: 2px;
+    background: #2196f3;
+    z-index: 51; }
+  .react-calendar-timeline .rct-dateHeader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
     border-bottom: 1px solid #bbb;
-    box-sizing: border-box;
-    z-index: 40; }
-  .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
-    background: rgba(0, 0, 0, 0.05); }
-  .react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
-    background: transparent; }
-
-.react-calendar-timeline .rct-cursor-line {
-  position: absolute;
-  width: 2px;
-  background: #2196f3;
-  z-index: 51; }
-
-.react-calendar-timeline .rct-dateHeader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border-bottom: 1px solid #bbb;
-  cursor: pointer;
-  font-size: 14px;
-  background-color: #f0f0f0;
-  border-left: 2px solid #bbb; }
-
-.react-calendar-timeline .rct-dateHeader-primary {
-  background-color: initial;
-  border-left: 1px solid #bbb;
-  border-right: 1px solid #bbb;
-  color: #fff; }
-
-.react-calendar-timeline .rct-header-root {
-  background: #c52020;
-  border-bottom: 1px solid #bbb; }
-
-.react-calendar-timeline .rct-calendar-header {
-  border: 1px solid #bbb; }
+    cursor: pointer;
+    font-size: 14px;
+    background-color: #f0f0f0;
+    border-left: 2px solid #bbb; }
+  .react-calendar-timeline .rct-dateHeader-primary {
+    background-color: initial;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #bbb;
+    color: #fff; }
+  .react-calendar-timeline .rct-header-root {
+    background: #c52020;
+    border-bottom: 1px solid #bbb; }
+  .react-calendar-timeline .rct-calendar-header {
+    border: 1px solid #bbb; }

package/lib/lib/Timeline.js

@@ -154,7 +154,7 @@ function (_Component) {
       _this.scrollHeaderRef.scrollLeft = scrollLeft;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onScroll", function (scrollX) {
+    _defineProperty(_assertThisInitialized(_this), "onScroll", function (scrollX, scrollY) {
       var width = _this.state.width;
       var canvasTimeStart = _this.state.canvasTimeStart;
       var zoom = _this.state.visibleTimeEnd - _this.state.visibleTimeStart;
@@ -163,6 +163,24 @@ function (_Component) {
       if (_this.state.visibleTimeStart !== visibleTimeStart || _this.state.visibleTimeEnd !== visibleTimeStart + zoom) {
         _this.props.onTimeChange(visibleTimeStart, visibleTimeStart + zoom, _this.updateScrollCanvas, _this.getTimelineUnit());
       }
+
+      if (scrollY) {
+        _this.scrollComponent.scrollTo({
+          top: scrollY
+        });
+
+        _this.sidebarScrollRef.scrollTo({
+          top: scrollY
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSidebarScroll", function (newTop) {
+      if (_this.scrollComponent) {
+        _this.scrollComponent.scrollTo({
+          top: newTop
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateScrollCanvas", function (visibleTimeStart, visibleTimeEnd, forceUpdateDimensions) {
@@ -428,6 +446,10 @@ function (_Component) {
       _this.scrollComponent = el;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getSidebarScrollElmRef", function (el) {
+      _this.sidebarScrollRef = el;
+    });
+
     _this.getSelected = _this.getSelected.bind(_assertThisInitialized(_this));
     _this.hasSelectedItem = _this.hasSelectedItem.bind(_assertThisInitialized(_this));
     _this.isItemSelected = _this.isItemSelected.bind(_assertThisInitialized(_this));
@@ -495,6 +517,15 @@ function (_Component) {
       _window["default"].addListener(this);
 
       this.lastTouchDistance = null;
+
+      if (this.props.initialScrollTop) {
+        this.scrollComponent.scrollTo({
+          top: this.props.initialScrollTop
+        });
+        this.sidebarScrollRef.scrollTo({
+          top: this.props.initialScrollTop
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -601,7 +632,9 @@ function (_Component) {
         keys: this.props.keys,
         width: sidebarWidth,
         groupHeights: groupHeights,
-        height: height
+        height: height,
+        getSidebarScrollElmRef: this.getSidebarScrollElmRef,
+        onScroll: this.onSidebarScroll
       });
     }
   }, {
@@ -754,7 +787,9 @@ function (_Component) {
         traditionalZoom: traditionalZoom,
         onScroll: this.onScroll,
         isInteractingWithItem: isInteractingWithItem
-      }, _react["default"].createElement(_MarkerCanvas["default"], null, this.columns(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height), this.rows(canvasWidth, groupHeights, groups), this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops), this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps))), rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null)))));
+      }, _react["default"].createElement(_MarkerCanvas["default"], {
+        height: height
+      }, this.columns(canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height), this.rows(canvasWidth, groupHeights, groups), this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops), this.childrenWithProps(canvasTimeStart, canvasTimeEnd, canvasWidth, dimensionItems, groupHeights, groupTops, height, visibleTimeStart, visibleTimeEnd, minUnit, timeSteps))), rightSidebarWidth > 0 ? this.rightSidebar(height, groupHeights) : null)))));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -857,6 +892,7 @@ _defineProperty(ReactCalendarTimeline, "propTypes", {
   visibleTimeEnd: _propTypes["default"].number,
   onTimeChange: _propTypes["default"].func,
   onBoundsChange: _propTypes["default"].func,
+  initialScrollTop: _propTypes["default"].number,
   selected: _propTypes["default"].array,
   resizeDetector: _propTypes["default"].shape({
     addListener: _propTypes["default"].func,
@@ -915,6 +951,7 @@ _defineProperty(ReactCalendarTimeline, "defaultProps", {
   // which needs to update the props visibleTimeStart and visibleTimeEnd to the ones passed
   visibleTimeStart: null,
   visibleTimeEnd: null,
+  initialScrollTop: 0,
   onTimeChange: function onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas) {
     updateScrollCanvas(visibleTimeStart, visibleTimeEnd);
   },

package/lib/lib/layout/Sidebar.js

@@ -25,10 +25,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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 _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); }
@@ -41,9 +41,23 @@ function (_Component) {
   _inherits(Sidebar, _Component);
 
   function Sidebar() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     _classCallCheck(this, Sidebar);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Sidebar).apply(this, arguments));
+    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, [{
@@ -66,7 +80,7 @@ function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this2 = this;
 
       var _this$props = this.props,
           width = _this$props.width,
@@ -93,11 +107,13 @@ function (_Component) {
           key: (0, _generic._get)(group, groupIdKey),
           className: 'rct-sidebar-row rct-sidebar-row-' + (index % 2 === 0 ? 'even' : 'odd'),
           style: elementStyle
-        }, _this.renderGroupContent(group, isRightSidebar, groupTitleKey, groupRightTitleKey));
+        }, _this2.renderGroupContent(group, isRightSidebar, groupTitleKey, groupRightTitleKey));
       });
       return _react["default"].createElement("div", {
         className: 'rct-sidebar' + (isRightSidebar ? ' rct-sidebar-right' : ''),
-        style: sidebarStyle
+        style: sidebarStyle,
+        onScroll: this.handleScroll,
+        ref: this.props.getSidebarScrollElmRef
       }, _react["default"].createElement("div", {
         style: groupsStyle
       }, groupLines));
@@ -116,5 +132,7 @@ _defineProperty(Sidebar, "propTypes", {
   groupHeights: _propTypes["default"].array.isRequired,
   keys: _propTypes["default"].object.isRequired,
   groupRenderer: _propTypes["default"].func,
-  isRightSidebar: _propTypes["default"].bool
+  isRightSidebar: _propTypes["default"].bool,
+  getSidebarScrollElmRef: _propTypes["default"].func,
+  onScroll: _propTypes["default"].func
 });

package/lib/lib/markers/MarkerCanvas.js

@@ -21,6 +21,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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); } }
@@ -128,7 +130,9 @@ function (_React$Component) {
       return _react["default"].createElement(_MarkerCanvasContext.MarkerCanvasProvider, {
         value: this.state
       }, _react["default"].createElement("div", {
-        style: staticStyles,
+        style: _objectSpread({}, staticStyles, {
+          height: this.props.height
+        }),
         onMouseMove: this.handleMouseMove,
         onMouseLeave: this.handleMouseLeave,
         ref: function ref(el) {
@@ -143,7 +147,8 @@ function (_React$Component) {
 
 _defineProperty(MarkerCanvas, "propTypes", {
   getDateFromLeftOffsetPosition: _propTypes["default"].func.isRequired,
-  children: _propTypes["default"].node
+  children: _propTypes["default"].node,
+  height: _propTypes["default"].number
 });
 
 var MarkerCanvasWrapper = function MarkerCanvasWrapper(props) {

package/lib/lib/scroll/ScrollElement.js

@@ -49,8 +49,9 @@ function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleScroll", function () {
       var scrollX = _this.scrollComponent.scrollLeft;
+      var scrollY = _this.scrollComponent.scrollTop;
 
-      _this.props.onScroll(scrollX);
+      _this.props.onScroll(scrollX, scrollY);
     });
 
     _defineProperty(_assertThisInitialized(_this), "refHandler", function (el) {
@@ -83,11 +84,6 @@ function (_Component) {
         checking deltaX first in this ternary prevents bugs when both deltaY and deltaX are changing by prioritizing deltaX*/
 
         _this.props.onScroll(_this.scrollComponent.scrollLeft + (e.deltaX || e.deltaY));
-      } else {
-        // no modifier pressed?
-        e.preventDefault();
-        _this.scrollComponent.scrollLeft += e.deltaX;
-        window.scrollBy(0, e.deltaY);
       }
     });
 
@@ -117,9 +113,12 @@ function (_Component) {
         var yPositionChange = _this.dragLastPosition.y - e.pageY;
         window.scrollBy(0, yPositionChange);
 
-        _this.props.onScroll(_this.scrollComponent.scrollLeft + _this.dragLastPosition.x - e.pageX);
+        _this.props.onScroll(_this.scrollComponent.scrollLeft + _this.dragLastPosition.x - e.pageX, _this.scrollComponent.scrollTop + _this.dragLastPosition.y - e.pageY);
 
-        _this.dragLastPosition.x = e.pageX;
+        _this.dragLastPosition = {
+          x: e.pageX,
+          y: e.pageY
+        };
       }
     });
 
@@ -192,6 +191,7 @@ function (_Component) {
         var x = e.touches[0].clientX;
         var y = e.touches[0].clientY;
         var deltaX = x - _this.lastSingleTouch.x;
+        var deltaY = x - _this.lastSingleTouch.y;
         var deltaX0 = x - _this.singleTouchStart.x;
         var deltaY0 = y - _this.singleTouchStart.y;
         _this.lastSingleTouch = {
@@ -201,12 +201,8 @@ function (_Component) {
         var moveX = Math.abs(deltaX0) * 3 > Math.abs(deltaY0);
         var moveY = Math.abs(deltaY0) * 3 > Math.abs(deltaX0);
 
-        if (deltaX !== 0 && moveX) {
-          _this.props.onScroll(_this.scrollComponent.scrollLeft - deltaX);
-        }
-
-        if (moveY) {
-          window.scrollTo(window.pageXOffset, _this.singleTouchStart.screenY - deltaY0);
+        if (deltaX !== 0 && moveX || deltaY !== 0 && moveY) {
+          _this.props.onScroll(_this.scrollComponent.scrollLeft - deltaX, _this.scrollComponent.scrollTop - deltaY);
         }
       }
     });

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@oddle.me/react-calendar-timeline",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "description": "react calendar timeline",
   "main": "lib/index.js",
+  "types": "src/global.d.ts",
   "scripts": {
     "build": "npm run build:lib",
     "build:demo": "echo '!!! Building Demo' && cross-env NODE_ENV=production webpack --progress",
@@ -15,6 +16,7 @@
     "test:watch": "jest --watch"
   },
   "files": [
+    "src/global.d.ts",
     "lib"
   ],
   "publishConfig": {

package/src/global.d.ts

@@ -0,0 +1,374 @@
+// Project: https://github.com/namespace-ee/react-calendar-timeline
+// Definitions by: Rajab Shakirov <https://github.com/radziksh>
+//                 Andrii Los <https://github.com/rip21>
+//                 Jon Caruana <https://github.com/joncar>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.5
+
+import * as React from 'react';
+import { Moment } from 'moment';
+
+declare module '@oddle.me/react-calendar-timeline' {
+  type Id = number | string;
+
+  export interface TimelineGroupBase {
+    id: Id;
+    title: React.ReactNode;
+    rightTitle?: React.ReactNode | undefined;
+    height?: number | undefined;
+    stackItems?: boolean | undefined;
+  }
+
+  export interface TimelineItemBase<DateType> {
+    id: Id;
+    group: Id;
+    title?: React.ReactNode | undefined;
+    start_time: DateType;
+    end_time: DateType;
+    canMove?: boolean | undefined;
+    canResize?: boolean | 'left' | 'right' | 'both' | undefined;
+    canChangeGroup?: boolean | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    itemProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+  }
+
+  export type TimelineItem<CustomItemFields, DateType = number> = TimelineItemBase<DateType> & CustomItemFields;
+  export type TimelineGroup<CustomGroupFields> = TimelineGroupBase & CustomGroupFields;
+
+  export interface TimelineContext {
+    timelineWidth: number;
+    visibleTimeStart: number;
+    visibleTimeEnd: number;
+    canvasTimeStart: number;
+    canvasTimeEnd: number;
+  }
+
+  export interface ItemContext {
+    dimensions: {
+      collisionLeft: number;
+      collisionWidth: number;
+      height: number;
+      isDragging: boolean;
+      left: number;
+      order: {
+        group: {
+          id: string;
+        };
+        index: number;
+      };
+      originalLeft: number;
+      stack: boolean;
+      top: number | null;
+      width: number;
+    };
+    useResizeHandle: boolean;
+    title: string;
+    canMove: boolean;
+    canResizeLeft: boolean;
+    canResizeRight: boolean;
+    selected: boolean;
+    dragging: boolean;
+    dragStart: {
+      x: number;
+      y: number;
+    };
+    dragTime: number;
+    dragGroupDelta: number;
+    resizing: boolean;
+    resizeEdge: 'left' | 'right';
+    resizeStart: number;
+    resizeTime: number;
+    width: boolean;
+  }
+
+  export interface TimeFormat {
+    long: string;
+    mediumLong: string;
+    medium: string;
+    short: string;
+  }
+
+  export interface LabelFormat {
+    year: TimeFormat;
+    month: TimeFormat;
+    week: TimeFormat;
+    day: TimeFormat;
+    hour: TimeFormat;
+    minute: TimeFormat;
+  }
+
+  export interface ItemRendererGetItemPropsReturnType {
+    key: Id;
+    ref: React.Ref<any>;
+    className: string;
+    onMouseDown: React.MouseEventHandler;
+    onMouseUp: React.MouseEventHandler;
+    onTouchStart: React.TouchEventHandler;
+    onTouchEnd: React.TouchEventHandler;
+    onDoubleClick: React.MouseEventHandler;
+    onContextMenu: React.ReactEventHandler;
+    style: React.CSSProperties;
+  }
+
+  export type GetItemsProps = Partial<Omit<ItemRendererGetItemPropsReturnType, 'key' | 'ref'>>;
+
+  export interface ItemRendererGetResizePropsReturnType {
+    left?: {
+      ref: React.Ref<any>;
+      className: string;
+      style: React.CSSProperties;
+    } | undefined;
+    right?: {
+      ref: React.Ref<any>;
+      className: string;
+      style: React.CSSProperties;
+    } | undefined;
+  }
+
+  export type GetResizeProps = {
+    leftStyle?: React.CSSProperties | undefined;
+    rightStyle?: React.CSSProperties | undefined;
+    leftClassName?: string | undefined;
+    rightClassName?: string | undefined;
+  };
+
+  export interface ReactCalendarItemRendererProps<
+    CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>
+  > {
+    item: CustomItem;
+    itemContext: ItemContext;
+    getItemProps: (
+      props: GetItemsProps,
+    ) => {
+      key: Id;
+      ref: React.Ref<any>;
+      className: string;
+      onMouseDown: React.MouseEventHandler;
+      onMouseUp: React.MouseEventHandler;
+      onTouchStart: React.TouchEventHandler;
+      onTouchEnd: React.TouchEventHandler;
+      onDoubleClick: React.MouseEventHandler;
+      onContextMenu: React.ReactEventHandler;
+      style: React.CSSProperties;
+    };
+    getResizeProps: (propsOverride?: GetResizeProps) => ItemRendererGetResizePropsReturnType;
+  }
+
+  export interface ReactCalendarGroupRendererProps<CustomGroup extends TimelineGroupBase = TimelineGroupBase> {
+    group: CustomGroup;
+    isRightSidebar?: boolean | undefined;
+  }
+
+  export interface OnItemDragObjectBase {
+    eventType: 'move' | 'resize';
+    itemId: Id;
+    time: number;
+  }
+
+  export interface OnItemDragObjectMove extends OnItemDragObjectBase {
+    eventType: 'move';
+    newGroupOrder: number;
+  }
+
+  export interface OnItemDragObjectResize extends OnItemDragObjectBase {
+    eventType: 'resize';
+    edge?: 'left' | 'right' | undefined;
+  }
+
+  export interface TimelineKeys {
+    groupIdKey: string;
+    groupTitleKey: string;
+    groupRightTitleKey: string;
+    itemIdKey: string;
+    itemTitleKey: string;
+    itemDivTitleKey: string;
+    itemGroupKey: string;
+    itemTimeStartKey: string;
+    itemTimeEndKey: string;
+  }
+
+  export interface ReactCalendarTimelineProps<
+    CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>,
+    CustomGroup extends TimelineGroupBase = TimelineGroupBase
+  > {
+    children?: React.ReactNode;
+    groups: CustomGroup[];
+    items: CustomItem[];
+    keys?: TimelineKeys | undefined;
+    defaultTimeStart?: Date | Moment | undefined;
+    defaultTimeEnd?: Date | Moment | undefined;
+    visibleTimeStart?: Date | Moment | number | undefined;
+    visibleTimeEnd?: Date | Moment | number | undefined;
+    selected?: Id[] | undefined;
+    sidebarWidth?: number | undefined;
+    sidebarContent?: React.ReactNode | undefined;
+    rightSidebarWidth?: number | undefined;
+    rightSidebarContent?: React.ReactNode | undefined;
+    dragSnap?: number | undefined;
+    minResizeWidth?: number | undefined;
+    lineHeight?: number | undefined;
+    itemHeightRatio?: number | undefined;
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
+    clickTolerance?: number | undefined;
+    canMove?: boolean | undefined;
+    canChangeGroup?: boolean | undefined;
+    canResize?: false | true | 'left' | 'right' | 'both' | undefined;
+    useResizeHandle?: boolean | undefined;
+    stackItems?: boolean | undefined;
+    traditionalZoom?: boolean | undefined;
+    itemTouchSendsClick?: boolean | undefined;
+    timeSteps?: TimelineTimeSteps | undefined;
+    scrollRef?: React.Ref<any> | undefined;
+    onItemDrag?(itemDragObject: OnItemDragObjectMove | OnItemDragObjectResize): void;
+    onItemMove?(itemId: Id, dragTime: number, newGroupOrder: number): void;
+    onItemResize?(itemId: Id, endTimeOrStartTime: number, edge: 'left' | 'right'): void;
+    onItemSelect?(itemId: Id, e: any, time: number): void;
+    onItemDeselect?(e: React.SyntheticEvent): void;
+    onItemClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
+    onItemDoubleClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
+    onItemContextMenu?(itemId: Id, e: React.SyntheticEvent, time: number): void;
+    onCanvasClick?(groupId: Id, time: number, e: React.SyntheticEvent): void;
+    onCanvasDoubleClick?(groupId: Id, time: number, e: React.SyntheticEvent): void;
+    onCanvasContextMenu?(groupId: Id, time: number, e: React.SyntheticEvent): void;
+    onZoom?(timelineContext: TimelineContext, unit: Unit): void;
+    moveResizeValidator?(
+      action: 'move' | 'resize',
+      itemId: Id,
+      time: number,
+      resizeEdge: 'left' | 'right',
+    ): number;
+    onTimeChange?(
+      visibleTimeStart: number,
+      visibleTimeEnd: number,
+      updateScrollCanvas: (start: number, end: number) => void,
+      unit: Unit
+    ): any;
+    onBoundsChange?(canvasTimeStart: number, canvasTimeEnd: number): any;
+    itemRenderer?: ((props: ReactCalendarItemRendererProps<CustomItem>) => React.ReactNode) | undefined;
+    groupRenderer?: ((props: ReactCalendarGroupRendererProps<CustomGroup>) => React.ReactNode) | undefined;
+    resizeDetector?: ((containerResizeDetector: any) => void) | undefined;
+    verticalLineClassNamesForTime?: ((start: number, end: number) => string[] | undefined) | undefined;
+    horizontalLineClassNamesForGroup?: ((group: CustomGroup) => string[]) | undefined;
+    buffer?: number | undefined;
+    // Fields that are in propTypes but not documented
+    headerRef?: React.Ref<any> | undefined;
+    className?: string;
+    initialScrollTop?: number
+  }
+
+  export interface TimelineTimeSteps {
+    second: number;
+    minute: number;
+    hour: number;
+    day: number;
+    month: number;
+    year: number;
+  }
+
+  export class TimelineMarkers extends React.Component {}
+
+  export interface CustomMarkerChildrenProps {
+    styles: React.CSSProperties;
+    date: number;
+  }
+  export interface MarkerProps {
+    date: Date | number;
+    children?: ((props: CustomMarkerChildrenProps) => React.ReactNode) | undefined;
+  }
+
+  export class CustomMarker extends React.Component<MarkerProps> {}
+
+  export interface TodayMarkerProps extends MarkerProps {
+    interval?: number | undefined;
+  }
+  export class TodayMarker extends React.Component<TodayMarkerProps> {}
+
+  export type CursorMarkerProps = Omit<MarkerProps, 'date'>;
+  export class CursorMarker extends React.Component<CursorMarkerProps> {}
+
+  export interface TimelineHeadersProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+    calendarHeaderStyle?: React.CSSProperties | undefined;
+    calendarHeaderClassName?: string | undefined;
+    headerRef?: React.Ref<any> | undefined;
+  }
+  export class TimelineHeaders extends React.Component<TimelineHeadersProps> {}
+
+  export type TimelineHeaderProps = TimelineHeadersProps;
+
+  export interface SidebarHeaderChildrenFnProps<Data> {
+    getRootProps: (propsToOverride?: { style: React.CSSProperties }) => { style: React.CSSProperties };
+    data: Data;
+  }
+
+  export interface SidebarHeaderProps<Data> {
+    variant?: 'left' | 'right' | undefined;
+    headerData?: Data | undefined;
+    children: (props: SidebarHeaderChildrenFnProps<Data>) => React.ReactNode;
+  }
+  export class SidebarHeader<Data = any> extends React.Component<SidebarHeaderProps<Data>> {}
+
+  export type Unit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'isoWeek' | 'month' | 'year';
+
+  export interface IntervalContext {
+    interval: { startTime: number; endTime: number; labelWidth: number; left: number };
+    intervalText: string;
+  }
+  export interface GetIntervalProps {
+    interval?: Interval | undefined;
+    style?: React.CSSProperties | undefined;
+    onClick?: React.MouseEventHandler | undefined;
+  }
+  export interface IntervalRenderer<Data> {
+    intervalContext: IntervalContext;
+    getIntervalProps: (props?: GetIntervalProps) => Required<GetIntervalProps> & { key: string | number };
+    data?: Data | undefined;
+  }
+  export interface DateHeaderProps<Data> {
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+    unit?: Unit | 'primaryHeader' | undefined;
+    labelFormat?: string | (([startTime, endTime]: [Moment, Moment], unit: Unit, labelWidth: number) => string) | undefined;
+    intervalRenderer?: ((props?: IntervalRenderer<Data>) => React.ReactNode) | undefined;
+    headerData?: Data | undefined;
+    children?: ((props: SidebarHeaderChildrenFnProps<Data>) => React.ReactNode) | undefined;
+    height?: number | undefined;
+  }
+  export class DateHeader<Data = any> extends React.Component<DateHeaderProps<Data>> {}
+  export interface Interval {
+    startTime: Moment;
+    endTime: Moment;
+  }
+  export interface HeaderContext {
+    intervals: { startTime: Moment; endTime: Moment }[];
+    unit: string;
+  }
+  export interface CustomHeaderPropsChildrenFnProps<Data> {
+    timelineContext: TimelineContext;
+    headerContext: HeaderContext;
+    getIntervalProps: (props?: GetIntervalProps) => Required<GetIntervalProps> & { key: string | number };
+    getRootProps: (propsToOverride?: { style: React.CSSProperties }) => { style: React.CSSProperties };
+    showPeriod: (startDate: Moment | number, endDate: Moment | number) => void;
+    data: Data;
+  }
+  export interface CustomHeaderProps<Data> {
+    unit?: Unit | undefined;
+    headerData?: Data | undefined;
+    height?: number | undefined;
+    children: (props?: CustomHeaderPropsChildrenFnProps<Data>) => React.ReactNode;
+  }
+  export class CustomHeader<Data = any> extends React.Component<CustomHeaderProps<Data>> {}
+
+  export const defaultKeys: TimelineKeys;
+  export const defaultTimeSteps: TimelineTimeSteps;
+  export const defaultHeaderFormats: LabelFormat;
+
+  export default class ReactCalendarTimeline<
+    CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>,
+    CustomGroup extends TimelineGroupBase = TimelineGroupBase
+  > extends React.Component<ReactCalendarTimelineProps<CustomItem, CustomGroup>> {}
+}