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

package/lib/Timeline.css

@@ -6,20 +6,18 @@
     box-sizing: border-box; }
   .react-calendar-timeline .rct-outer {
     display: block;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
     white-space: nowrap;
     flex: 1;
-    height: 0;
-    overflow: hidden; }
+    height: 0; }
   .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; }
+    overflow-x: hidden; }
   .react-calendar-timeline .rct-item:hover {
     z-index: 88; }
   .react-calendar-timeline .rct-item .rct-item-content {
@@ -32,22 +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;
-    height: 100% !important;
-    -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/lib/Timeline.js

@@ -165,21 +165,7 @@ function (_Component) {
       }
 
       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
-        });
+        _this.outerScrollElm.scrollTop += scrollY;
       }
     });
 
@@ -446,8 +432,10 @@ function (_Component) {
       _this.scrollComponent = el;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSidebarScrollElmRef", function (el) {
-      _this.sidebarScrollRef = el;
+    _defineProperty(_assertThisInitialized(_this), "getOuterScrollElementRef", function (el) {
+      _this.props.outerScrollRef(el);
+
+      _this.outerScrollElm = el;
     });
 
     _this.getSelected = _this.getSelected.bind(_assertThisInitialized(_this));
@@ -519,12 +507,7 @@ function (_Component) {
       this.lastTouchDistance = null;
 
       if (this.props.initialScrollTop) {
-        this.scrollComponent.scrollTo({
-          top: this.props.initialScrollTop
-        });
-        this.sidebarScrollRef.scrollTo({
-          top: this.props.initialScrollTop
-        });
+        this.outerScrollElm.scrollTop = this.props.initialScrollTop;
       }
     }
   }, {
@@ -632,9 +615,7 @@ function (_Component) {
         keys: this.props.keys,
         width: sidebarWidth,
         groupHeights: groupHeights,
-        height: height,
-        getSidebarScrollElmRef: this.getSidebarScrollElmRef,
-        onScroll: this.onSidebarScroll
+        height: height
       });
     }
   }, {
@@ -777,6 +758,7 @@ function (_Component) {
         className: "react-calendar-timeline ".concat(this.props.className)
       }, this.renderHeaders(), _react["default"].createElement("div", {
         style: outerComponentStyle,
+        ref: this.getOuterScrollElementRef,
         className: "rct-outer"
       }, sidebarWidth > 0 ? this.sidebar(height, groupHeights) : null, _react["default"].createElement(_ScrollElement["default"], {
         scrollRef: this.getScrollElementRef,
@@ -878,6 +860,7 @@ _defineProperty(ReactCalendarTimeline, "propTypes", {
   }),
   headerRef: _propTypes["default"].func,
   scrollRef: _propTypes["default"].func,
+  outerScrollRef: _propTypes["default"].func,
   timeSteps: _propTypes["default"].shape({
     second: _propTypes["default"].number,
     minute: _propTypes["default"].number,
@@ -947,6 +930,7 @@ _defineProperty(ReactCalendarTimeline, "defaultProps", {
   timeSteps: _defaultConfig.defaultTimeSteps,
   headerRef: function headerRef() {},
   scrollRef: function scrollRef() {},
+  outerScrollRef: function outerScrollRef() {},
   // if you pass in visibleTimeStart and visibleTimeEnd, you must also pass onTimeChange(visibleTimeStart, visibleTimeEnd),
   // which needs to update the props visibleTimeStart and visibleTimeEnd to the ones passed
   visibleTimeStart: null,

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 _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 _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); }
@@ -41,23 +41,9 @@ 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;
+    return _possibleConstructorReturn(this, _getPrototypeOf(Sidebar).apply(this, arguments));
   }
 
   _createClass(Sidebar, [{
@@ -80,7 +66,7 @@ function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this = this;
 
       var _this$props = this.props,
           width = _this$props.width,
@@ -107,13 +93,11 @@ function (_Component) {
           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));
+        }, _this.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
+        style: sidebarStyle
       }, _react["default"].createElement("div", {
         style: groupsStyle
       }, groupLines));
@@ -132,7 +116,5 @@ _defineProperty(Sidebar, "propTypes", {
   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
+  isRightSidebar: _propTypes["default"].bool
 });

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.2",
+  "version": "0.29.4",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "types": "src/global.d.ts",

package/src/global.d.ts

@@ -221,6 +221,7 @@ declare module '@oddle.me/react-calendar-timeline' {
     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;