0.26.6 (#671)

0.26.6

CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 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
 
 * improve performance by:

examples/README.md

@@ -60,11 +60,17 @@ Through group manipulation, you can achieve tree group views.
 
 Note that this is the user code manipulating groups to achieve tree group functionality. This example is an illustration of how you can achieve this functionality. This is not a feature that is directly supported by the library.
 
+## 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 `scrollRef` you can trigger scrolling and create an animation. This is an alternative to setting `visibleStartTime` and `visibleEndTime`.
+Using controlled scroll and react-spring to trigger scrolling and create an animation.
 
-[Example Codesandbox](https://codesandbox.io/s/3kq2503y8p)
+[Example Codesandbox](https://codesandbox.io/s/confident-waterfall-3kq2503y8p)
 
 ## Sticky header
 
@@ -76,4 +82,5 @@ Using `Timeline Header` you can make the header stick to the top of the page whi
 
 Native info label was removed with 0.26.0 and now the responsibility to render to render the Info Label is on the user. The example bellow has InfoLabel that matches exactly the removed label
 
-[Example Codesandbox](https://codesandbox.io/s/timeline-demo-info-label-neec9)
+[Example Codesandbox](https://codesandbox.io/s/timeline-demo-info-label-neec9)
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.26.5",
+  "version": "0.26.6",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {

src/lib/Timeline.js

@@ -409,7 +409,7 @@ export default class ReactCalendarTimeline extends Component {
         )
       )
     }
-
+    
     return derivedState
   }
 
@@ -495,18 +495,6 @@ export default class ReactCalendarTimeline extends Component {
 
   onScroll = scrollX => {
     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
 

src/lib/scroll/ScrollElement.js

@@ -22,18 +22,16 @@ class ScrollElement extends Component {
     }
   }
 
+
+
   refHandler = el => {
     this.scrollComponent = el
     this.props.scrollRef(el)
     if(el){
       el.addEventListener('wheel', this.handleWheel, {passive: false});
     }
   }
-
-  handleScroll = () => {
-    const scrollX = this.scrollComponent.scrollLeft
-    this.props.onScroll(scrollX)
-  }
+
 
   handleWheel = e => {
     const { traditionalZoom } = this.props
@@ -53,8 +51,7 @@ class ScrollElement extends Component {
     } else if (e.shiftKey) {
       e.preventDefault()
       // 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
     }
   }
@@ -73,7 +70,7 @@ class ScrollElement extends Component {
     // this.props.onMouseMove(e)
     //why is interacting with item important?
     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
     }
   }
@@ -144,7 +141,7 @@ class ScrollElement extends Component {
       let moveX = Math.abs(deltaX0) * 3 > Math.abs(deltaY0)
       let moveY = Math.abs(deltaY0) * 3 > Math.abs(deltaX0)
       if (deltaX !== 0 && moveX) {
-        this.scrollComponent.scrollLeft -= deltaX
+        this.props.onScroll(this.scrollComponent.scrollLeft - deltaX)
       }
       if (moveY) {
         window.scrollTo(
@@ -188,7 +185,6 @@ class ScrollElement extends Component {
         data-testid="scroll-element"
         className="rct-scroll"
         style={scrollComponentStyle}
-        onScroll={this.handleScroll}
         onMouseDown={this.handleMouseDown}
         onMouseMove={this.handleMouseMove}
         onMouseUp={this.handleMouseUp}