react-calendar-timeline - npm Package Compare versions

Comparing version 0.27.11-gamma to 0.27.13-gamma

CHANGELOG.md

@@ -10,2 +10,22 @@ # Change Log
 
+## 0.26.6
+
+* fix `visibleTimeStart`, `visibleTimeEnd` and `onTimeChange` not working as expected in controlled mode @ilaiwi
+
+### examples
+
+two new examples
+
+#### Controlled scroll
+
+Controlled visible port of the calendar using `visibleTimeStart` and `visibleTimeEnd`. This also limits scrolling by mouse and adds two buttons to change the visible port of the calendar
+
+[Example Codesandbox](https://codesandbox.io/s/timeline-demo-controlled-visible-time-no-scroll-659jb)
+
+#### Programmatically Scrolling
+
+Using controlled scroll and react-spring to trigger scrolling and create an animation.
+
+[Example Codesandbox](https://codesandbox.io/s/confident-waterfall-3kq2503y8p)
+
 ## 0.26.5
@@ -12,0 +32,0 @@

lib/lib/scroll/ScrollElement.js

@@ -62,8 +62,2 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "handleScroll", function () {
-      var scrollX = _this.scrollComponent.scrollLeft;
-
-      _this.props.onScroll(scrollX);
-    });
-
     _defineProperty(_assertThisInitialized(_this), "handleWheel", function (e) {
@@ -82,3 +76,4 @@ var traditionalZoom = _this.props.traditionalZoom; // zoom in the time dimension
 
-        _this.scrollComponent.scrollLeft += e.deltaY || e.deltaX; // no modifier pressed? we prevented the default event, so scroll or zoom as needed
+        _this.props.onScroll(_this.scrollComponent.scrollLeft + (e.deltaY || e.deltaX)); // no modifier pressed? we prevented the default event, so scroll or zoom as needed
+
       }
@@ -102,3 +97,4 @@ });
       if (_this.state.isDragging && !_this.props.isInteractingWithItem) {
-        _this.scrollComponent.scrollLeft += _this.dragLastPosition - e.pageX;
+        _this.props.onScroll(_this.scrollComponent.scrollLeft + _this.dragLastPosition - e.pageX);
+
         _this.dragLastPosition = e.pageX;
@@ -187,3 +183,3 @@ }
         if (deltaX !== 0 && moveX) {
-          _this.scrollComponent.scrollLeft -= deltaX;
+          _this.props.onScroll(_this.scrollComponent.scrollLeft - deltaX);
         }
@@ -240,3 +236,2 @@
         style: scrollComponentStyle,
-        onScroll: this.handleScroll,
         onMouseDown: this.handleMouseDown,
@@ -243,0 +238,0 @@ onMouseMove: this.handleMouseMove,

lib/lib/Timeline.js

@@ -148,15 +148,2 @@ "use strict";
       var width = _this.state.width;
-      var newScrollX = scrollX; // move the virtual canvas if needed
-      // if scrollX is less...i dont know how to explain the logic here
-
-      if (newScrollX < width * 0.5) {
-        newScrollX += width;
-      }
-
-      if (newScrollX > width * 1.5) {
-        newScrollX -= width;
-      }
-
-      _this.scrollHeaderRef.scrollLeft = newScrollX;
-      _this.scrollComponent.scrollLeft = newScrollX;
       var canvasTimeStart = _this.state.canvasTimeStart;
@@ -163,0 +150,0 @@ var zoom = _this.state.visibleTimeEnd - _this.state.visibleTimeStart;

lib/lib/utility/calendar.js

@@ -479,3 +479,3 @@ "use strict";
 function stackTimelineItems(items, groups, canvasWidth, canvasTimeStart, canvasTimeEnd, keys, lineHeight, itemHeightRatio, stackItems, draggingItem, resizingItem, dragTime, resizingEdge, resizeTime, newGroupId) {
-  var itemsWithInteraction = items.map(function (item) {
+  var itemsWithInteractions = items.map(function (item) {
     return getItemWithInteractions({
@@ -493,3 +493,3 @@ item: item,
   });
-  var visibleItemsWithInteraction = getVisibleItems(itemsWithInteraction, canvasTimeStart, canvasTimeEnd, keys); // if there are no groups return an empty array of dimensions
+  var visibleItemsWithInteraction = getVisibleItems(itemsWithInteractions, canvasTimeStart, canvasTimeEnd, keys); // if there are no groups return an empty array of dimensions
 
@@ -526,3 +526,3 @@ if (groups.length === 0) {
     groupTops: groupTops,
-    itemsWithInteraction: itemsWithInteraction
+    itemsWithInteractions: itemsWithInteractions
   };
@@ -529,0 +529,0 @@ }

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.27.11-gamma",
+  "version": "0.27.13-gamma",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -118,6 +118,2 @@ # React Calendar Timeline
   canChangeGroup: false,
-  className: 'weekend',
-  style: {
-    backgroundColor: 'fuchsia'
-  },
   itemProps: {
@@ -127,3 +123,7 @@ // these optional attributes are passed to the root <div /> of each item as <div {...itemProps} />
     'aria-hidden': true,
-    onDoubleClick: () => { console.log('You clicked double!') }
+    onDoubleClick: () => { console.log('You clicked double!') },
+    className: 'weekend',
+    style: {
+      background: 'fuchsia'
+    }
   }
@@ -130,0 +130,0 @@ }

src/lib/scroll/ScrollElement.js

@@ -25,2 +25,4 @@ import React, { Component } from 'react'
 
+  
+
   refHandler = el => {
@@ -33,8 +35,4 @@ this.scrollComponent = el
   }
+  
 
-  handleScroll = () => {
-    const scrollX = this.scrollComponent.scrollLeft
-    this.props.onScroll(scrollX)
-  }
-
   handleWheel = e => {
@@ -58,4 +56,3 @@ const { traditionalZoom } = this.props
       // shift+scroll event from a touchpad has deltaY property populated; shift+scroll event from a mouse has deltaX
-      this.scrollComponent.scrollLeft += e.deltaY || e.deltaX
-
+      this.props.onScroll(this.scrollComponent.scrollLeft + (e.deltaY || e.deltaX))
       // no modifier pressed? we prevented the default event, so scroll or zoom as needed
@@ -79,3 +76,3 @@ }
     if (this.state.isDragging && !this.props.isInteractingWithItem) {
-      this.scrollComponent.scrollLeft += this.dragLastPosition - e.pageX
+      this.props.onScroll(this.scrollComponent.scrollLeft + this.dragLastPosition - e.pageX)
       this.dragLastPosition = e.pageX
@@ -151,3 +148,3 @@ }
       if (deltaX !== 0 && moveX) {
-        this.scrollComponent.scrollLeft -= deltaX
+        this.props.onScroll(this.scrollComponent.scrollLeft - deltaX)
       }
@@ -196,3 +193,2 @@ if (moveY) {
         style={scrollComponentStyle}
-        onScroll={this.handleScroll}
         onMouseDown={this.handleMouseDown}
@@ -199,0 +195,0 @@ onMouseMove={this.handleMouseMove}

src/lib/Timeline.js

@@ -421,3 +421,3 @@ import PropTypes from 'prop-types'
     }
-
+    
     return derivedState
@@ -508,15 +508,3 @@ }
     const width = this.state.width
-    let newScrollX = scrollX
-    // move the virtual canvas if needed
-    // if scrollX is less...i dont know how to explain the logic here
-    if (newScrollX < width * 0.5) {
-      newScrollX += width
-    }
-    if (newScrollX > width * 1.5) {
-      newScrollX -= width
-    }
 
-    this.scrollHeaderRef.scrollLeft = newScrollX
-    this.scrollComponent.scrollLeft = newScrollX
-
     const canvasTimeStart = this.state.canvasTimeStart
@@ -523,0 +511,0 @@

src/lib/utility/calendar.js

@@ -484,3 +484,3 @@ import moment from 'moment'
 
-  const itemsWithInteraction = items.map(item =>
+  const itemsWithInteractions = items.map(item =>
     getItemWithInteractions({
@@ -500,3 +500,3 @@ item,
   const visibleItemsWithInteraction = getVisibleItems(
-    itemsWithInteraction,
+    itemsWithInteractions,
     canvasTimeStart,
@@ -551,3 +551,3 @@ canvasTimeEnd,
 
-  return { groupsWithItemsDimensions, height, groupHeights, groupTops, itemsWithInteraction }
+  return { groupsWithItemsDimensions, height, groupHeights, groupTops, itemsWithInteractions }
 }
@@ -554,0 +554,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

561241

decreased by-0.06%

Lines of code

11088

decreased by-0.28%

No dependency changes