Merge pull request #676 from hckr/feature/unit-in-onZoom-and-onTimeChange-callbacks

Author: Ilaiwi

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+* Add unit argument to onZoom and onTimeChange callbacks
 * Add `className` prop to Timeline component to override `react-calendar-timeline` class #682
 * Fix injecting custom vertical line's class names for time periods longer than day
 
@@ -50,11 +51,11 @@ Using controlled scroll and react-spring to trigger scrolling and create an anim
 
 * add documentation for `onItemDeselect` #350 @ilaiwi
 * solve a bug where `onItemDeselect` is not triggered as expected for several item clicks #350 @ilaiwi
-* fix row height on browser scaling #615 @gaston-niglia 
+* fix row height on browser scaling #615 @gaston-niglia
 
 ### Packages
 
-update to `[email protected]` for newer versions of node. 
+update to `[email protected]` for newer versions of node.
 
 ## 0.26.2
 
@@ -86,7 +87,7 @@ you can as well solve the issue without upgrading by adding the following style
 
 #### Breaking
 
-* Removed `<InfoLabel />` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9). 
+* Removed `<InfoLabel />` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9).
 
 
 ## 0.25.4

README.md

@@ -312,7 +312,7 @@ Called when an empty spot on the canvas was double clicked. Get the group ID and
 
 Called when the canvas is clicked by the right button of the mouse. Note: If this property is set the default context menu doesn't appear
 
-## onZoom(timelineContext)
+## onZoom(timelineContext, unit)
 
 Called when the timeline is zoomed, either via mouse/pinch zoom or clicking header to change timeline units
 
@@ -342,7 +342,7 @@ function (action, item, time, resizeEdge) {
 ```
 
 
-## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)
+## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas, unit)
 
 A function that's called when the user tries to scroll. Call the passed `updateScrollCanvas(start, end)` with the updated visibleTimeStart and visibleTimeEnd (as unix timestamps in milliseconds) to change the scroll behavior, for example to limit scrolling.
 

demo/app/demo-main/index.js

@@ -135,6 +135,10 @@ export default class App extends Component {
     }
   }
 
+  handleZoom = (timelineContext, unit) => {
+    console.log('Zoomed', timelineContext, unit)
+  }
+
   moveResizeValidator = (action, item, time) => {
     if (time < new Date().getTime()) {
       var newTime =
@@ -174,6 +178,7 @@ export default class App extends Component {
         onItemResize={this.handleItemResize}
         onItemDoubleClick={this.handleItemDoubleClick}
         onTimeChange={this.handleTimeChange}
+        onZoom={this.handleZoom}
         moveResizeValidator={this.moveResizeValidator}
       >
         <TimelineMarkers>

src/lib/Timeline.js

@@ -266,6 +266,21 @@ export default class ReactCalendarTimeline extends Component {
     }
   }
 
+  getTimelineUnit = () => {
+    const {
+      width,
+      visibleTimeStart,
+      visibleTimeEnd
+    } = this.state
+
+    const { timeSteps } = this.props
+
+    const zoom = visibleTimeEnd - visibleTimeStart
+    const minUnit = getMinUnit(zoom, width, timeSteps)
+
+    return minUnit
+  }
+
   constructor(props) {
     super(props)
 
@@ -421,7 +436,7 @@ export default class ReactCalendarTimeline extends Component {
 
     // are we changing zoom? Report it!
     if (this.props.onZoom && newZoom !== oldZoom) {
-      this.props.onZoom(this.getTimelineContext())
+      this.props.onZoom(this.getTimelineContext(), this.getTimelineUnit())
     }
 
     // The bounds have changed? Report it!
@@ -511,7 +526,8 @@ export default class ReactCalendarTimeline extends Component {
       this.props.onTimeChange(
         visibleTimeStart,
         visibleTimeStart + zoom,
-        this.updateScrollCanvas
+        this.updateScrollCanvas,
+        this.getTimelineUnit()
       )
     }
   }
@@ -555,7 +571,8 @@ export default class ReactCalendarTimeline extends Component {
     this.props.onTimeChange(
       newVisibleTimeStart,
       newVisibleTimeStart + newZoom,
-      this.updateScrollCanvas
+      this.updateScrollCanvas,
+      this.getTimelineUnit()
     )
   }
 
@@ -572,7 +589,8 @@ export default class ReactCalendarTimeline extends Component {
     this.props.onTimeChange(
       visibleTimeStart,
       visibleTimeStart + zoom,
-      this.updateScrollCanvas
+      this.updateScrollCanvas,
+      this.getTimelineUnit()
     )
   }