@oddle.me/react-calendar-timeline 0.29.3 → 0.29.5

package/lib/Timeline.css

@@ -30,21 +30,12 @@
     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;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */ }
-    .react-calendar-timeline .rct-sidebar::-webkit-scrollbar {
-      display: none; }
+    border-right: 1px solid #bbb; }
     .react-calendar-timeline .rct-sidebar.rct-sidebar-right {
       border-right: 0;
       border-left: 1px solid #bbb; }

package/lib/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "DateHeader", {
     return _DateHeader["default"];
   }
 });
+Object.defineProperty(exports, "DisableOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _DisableOverlay["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _Timeline = _interopRequireDefault(require("./lib/Timeline"));
@@ -71,6 +77,8 @@ var _CustomHeader = _interopRequireDefault(require("./lib/headers/CustomHeader")
 
 var _DateHeader = _interopRequireDefault(require("./lib/headers/DateHeader"));
 
+var _DisableOverlay = _interopRequireDefault(require("./lib/overlay/DisableOverlay"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = _Timeline["default"];

package/lib/lib/Timeline.js

@@ -166,6 +166,10 @@ function (_Component) {
 
       if (scrollY) {
         _this.outerScrollElm.scrollTop += scrollY;
+
+        if (_this.props.onVerticalScroll) {
+          _this.props.onVerticalScroll(_this.outerScrollElm.scrollTop);
+        }
       }
     });
 
@@ -874,6 +878,7 @@ _defineProperty(ReactCalendarTimeline, "propTypes", {
   visibleTimeStart: _propTypes["default"].number,
   visibleTimeEnd: _propTypes["default"].number,
   onTimeChange: _propTypes["default"].func,
+  onVerticalScroll: _propTypes["default"].func,
   onBoundsChange: _propTypes["default"].func,
   initialScrollTop: _propTypes["default"].number,
   selected: _propTypes["default"].array,
@@ -939,6 +944,7 @@ _defineProperty(ReactCalendarTimeline, "defaultProps", {
   onTimeChange: function onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas) {
     updateScrollCanvas(visibleTimeStart, visibleTimeEnd);
   },
+  onVerticalScroll: function onVerticalScroll() {},
   // called when the canvas area of the calendar changes
   onBoundsChange: null,
   children: null,

package/lib/lib/overlay/DisabledOverlay.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 DisableOverlay =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(DisableOverlay, _React$Component);
+
+  function DisableOverlay() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    _classCallCheck(this, DisableOverlay);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DisableOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "getTimeRange", function () {
+      var _this$props = _this.props,
+          visibleTimeStart = _this$props.visibleTimeStart,
+          visibleTimeEnd = _this$props.visibleTimeEnd,
+          fromTime = _this$props.fromTime,
+          toTime = _this$props.toTime;
+      var start = fromTime,
+          end = toTime;
+
+      if (!start) {
+        start = visibleTimeStart;
+      }
+
+      if (!end) {
+        end = visibleTimeEnd;
+      }
+
+      return [Math.max(visibleTimeStart, start), Math.min(visibleTimeEnd, end)];
+    });
+
+    return _this;
+  }
+
+  _createClass(DisableOverlay, [{
+    key: "render",
+    value: function render() {
+      var getLeftOffsetFromDate = this.props.getLeftOffsetFromDate;
+
+      var _this$getTimeRange = this.getTimeRange(),
+          _this$getTimeRange2 = _slicedToArray(_this$getTimeRange, 2),
+          start = _this$getTimeRange2[0],
+          end = _this$getTimeRange2[1];
+
+      if (start > end) {
+        return null;
+      }
+
+      var left = getLeftOffsetFromDate(start);
+      var right = getLeftOffsetFromDate(end);
+      return _react["default"].createElement("div", {
+        className: "rct-timeline-overlay",
+        style: {
+          height: '100%',
+          position: 'absolute',
+          left: left,
+          top: 0,
+          width: right - left,
+          background: 'rgba(145, 158, 171, 0.24)',
+          pointerEvents: 'none'
+        }
+      });
+    }
+  }]);
+
+  return DisableOverlay;
+}(_react["default"].Component);
+
+_defineProperty(DisableOverlay, "propTypes", {
+  visibleTimeStart: _propTypes["default"].number,
+  fromTime: _propTypes["default"].number,
+  toTime: _propTypes["default"].number,
+  visibleTimeEnd: _propTypes["default"].number,
+  getLeftOffsetFromDate: _propTypes["default"].func
+});
+
+var DisableOverlayWrapper = function DisableOverlayWrapper(props) {
+  return _react["default"].createElement(_TimelineStateContext.TimelineStateConsumer, null, function (_ref) {
+    var getTimelineState = _ref.getTimelineState,
+        getLeftOffsetFromDate = _ref.getLeftOffsetFromDate;
+
+    var _getTimelineState = getTimelineState(),
+        visibleTimeStart = _getTimelineState.visibleTimeStart,
+        visibleTimeEnd = _getTimelineState.visibleTimeEnd;
+
+    return _react["default"].createElement(DisableOverlay, _extends({
+      visibleTimeStart: visibleTimeStart,
+      visibleTimeEnd: visibleTimeEnd,
+      getLeftOffsetFromDate: getLeftOffsetFromDate
+    }, props));
+  });
+};
+
+var _default = DisableOverlayWrapper;
+exports["default"] = _default;

package/lib/lib/scroll/ScrollElement.js

@@ -191,7 +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 deltaY = y - _this.lastSingleTouch.y;
         var deltaX0 = x - _this.singleTouchStart.x;
         var deltaY0 = y - _this.singleTouchStart.y;
         _this.lastSingleTouch = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddle.me/react-calendar-timeline",
-  "version": "0.29.3",
+  "version": "0.29.5",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "types": "src/global.d.ts",

package/src/global.d.ts

@@ -5,371 +5,459 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
-import * as React from 'react';
-import { Moment } from 'moment';
+import * as React from 'react'
+import { Moment } from 'moment'
 
 declare module '@oddle.me/react-calendar-timeline' {
-  type Id = number | string;
+  type Id = number | string
 
   export interface TimelineGroupBase {
-    id: Id;
-    title: React.ReactNode;
-    rightTitle?: React.ReactNode | undefined;
-    height?: number | undefined;
-    stackItems?: boolean | undefined;
+    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;
+    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 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;
+    timelineWidth: number
+    visibleTimeStart: number
+    visibleTimeEnd: number
+    canvasTimeStart: number
+    canvasTimeEnd: number
   }
 
   export interface ItemContext {
     dimensions: {
-      collisionLeft: number;
-      collisionWidth: number;
-      height: number;
-      isDragging: boolean;
-      left: number;
+      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;
+          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;
+      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;
+    long: string
+    mediumLong: string
+    medium: string
+    short: string
   }
 
   export interface LabelFormat {
-    year: TimeFormat;
-    month: TimeFormat;
-    week: TimeFormat;
-    day: TimeFormat;
-    hour: TimeFormat;
-    minute: TimeFormat;
+    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;
+    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 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;
+    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;
-  };
+    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;
+    item: CustomItem
+    itemContext: ItemContext
     getItemProps: (
-      props: GetItemsProps,
+      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;
+      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 ReactCalendarGroupRendererProps<
+    CustomGroup extends TimelineGroupBase = TimelineGroupBase
+  > {
+    group: CustomGroup
+    isRightSidebar?: boolean | undefined
   }
 
   export interface OnItemDragObjectBase {
-    eventType: 'move' | 'resize';
-    itemId: Id;
-    time: number;
+    eventType: 'move' | 'resize'
+    itemId: Id
+    time: number
   }
 
   export interface OnItemDragObjectMove extends OnItemDragObjectBase {
-    eventType: 'move';
-    newGroupOrder: number;
+    eventType: 'move'
+    newGroupOrder: number
   }
 
   export interface OnItemDragObjectResize extends OnItemDragObjectBase {
-    eventType: 'resize';
-    edge?: 'left' | 'right' | undefined;
+    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;
+    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;
-    outerScrollRef?: 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;
+    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
+    outerScrollRef?: 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;
+      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;
+    ): any
+    onVerticalScroll: (newScrollTop: number) => void
+    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;
+    headerRef?: React.Ref<any> | undefined
+    className?: string
     initialScrollTop?: number
   }
 
   export interface TimelineTimeSteps {
-    second: number;
-    minute: number;
-    hour: number;
-    day: number;
-    month: number;
-    year: number;
+    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;
+    styles: React.CSSProperties
+    date: number
   }
   export interface MarkerProps {
-    date: Date | number;
-    children?: ((props: CustomMarkerChildrenProps) => React.ReactNode) | undefined;
+    date: Date | number
+    children?:
+      | ((props: CustomMarkerChildrenProps) => React.ReactNode)
+      | undefined
   }
 
   export class CustomMarker extends React.Component<MarkerProps> {}
 
   export interface TodayMarkerProps extends MarkerProps {
-    interval?: number | undefined;
+    interval?: number | undefined
   }
   export class TodayMarker extends React.Component<TodayMarkerProps> {}
 
-  export type CursorMarkerProps = Omit<MarkerProps, 'date'>;
+  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;
+    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 type TimelineHeaderProps = TimelineHeadersProps
 
   export interface SidebarHeaderChildrenFnProps<Data> {
-    getRootProps: (propsToOverride?: { style: React.CSSProperties }) => { style: React.CSSProperties };
-    data: 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;
+    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 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;
+    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;
+    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;
+    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;
+    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 class DateHeader<Data = any> extends React.Component<
+    DateHeaderProps<Data>
+  > {}
   export interface Interval {
-    startTime: Moment;
-    endTime: Moment;
+    startTime: Moment
+    endTime: Moment
   }
   export interface HeaderContext {
-    intervals: { startTime: Moment; endTime: Moment }[];
-    unit: string;
+    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;
+    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;
+    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 class CustomHeader<Data = any> extends React.Component<
+    CustomHeaderProps<Data>
+  > {}
+
+  export const defaultKeys: TimelineKeys
+  export const defaultTimeSteps: TimelineTimeSteps
+  export const defaultHeaderFormats: LabelFormat
 
-  export const defaultKeys: TimelineKeys;
-  export const defaultTimeSteps: TimelineTimeSteps;
-  export const defaultHeaderFormats: LabelFormat;
+  export class DisableOverlay extends React.Component<{
+    fromTime?: number
+    toTime?: number
+  }> {}
 
   export default class ReactCalendarTimeline<
     CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>,
     CustomGroup extends TimelineGroupBase = TimelineGroupBase
-  > extends React.Component<ReactCalendarTimelineProps<CustomItem, CustomGroup>> {}
+  > extends React.Component<
+    ReactCalendarTimelineProps<CustomItem, CustomGroup>
+  > {}
 }