From 156350db521c254867a94521c5e4af682a780c0a Mon Sep 17 00:00:00 2001 From: ilaiwi Date: Thu, 24 Oct 2019 20:29:55 +0300 Subject: [PATCH 1/3] fix visibleTimeStart/End and onTimeChange --- CHANGELOG.md | 4 ++++ src/lib/Timeline.js | 14 +------------- src/lib/scroll/ScrollElement.js | 16 ++++++---------- 3 files changed, 11 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cd4a6c1e9..c6c702df2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ 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 + ## 0.26.5 * improve performance by: diff --git a/src/lib/Timeline.js b/src/lib/Timeline.js index f5004cf11..d0087e114 100644 --- a/src/lib/Timeline.js +++ b/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 diff --git a/src/lib/scroll/ScrollElement.js b/src/lib/scroll/ScrollElement.js index 462df2caa..cbe8d626a 100644 --- a/src/lib/scroll/ScrollElement.js +++ b/src/lib/scroll/ScrollElement.js @@ -22,6 +22,8 @@ class ScrollElement extends Component { } } + + refHandler = el => { this.scrollComponent = el this.props.scrollRef(el) @@ -29,11 +31,7 @@ class ScrollElement extends Component { 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} From 50ad93e61620d5dc8da2c0eeebd5db575e1f5c6a Mon Sep 17 00:00:00 2001 From: ilaiwi Date: Fri, 25 Oct 2019 14:05:11 +0300 Subject: [PATCH 2/3] 0.26.6 --- CHANGELOG.md | 16 ++++++++++++++++ examples/README.md | 13 ++++++++++--- package.json | 2 +- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c6c702df2..49b31af74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,22 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o * 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: diff --git a/examples/README.md b/examples/README.md index 211b19435..5ee55b387 100644 --- a/examples/README.md +++ b/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) \ No newline at end of file +[Example Codesandbox](https://codesandbox.io/s/timeline-demo-info-label-neec9) + diff --git a/package.json b/package.json index 1398fb5b3..74edc6b24 100644 --- a/package.json +++ b/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": { From be32100f4c2bd76521c613076e4d975b646d1f3f Mon Sep 17 00:00:00 2001 From: ilaiwi Date: Fri, 25 Oct 2019 14:05:54 +0300 Subject: [PATCH 3/3] fix anchors --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49b31af74..61deacbfc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,13 +15,13 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o two new examples -## Controlled scroll +#### 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 +#### Programmatically Scrolling Using controlled scroll and react-spring to trigger scrolling and create an animation.