Merge branch 'pr/1' from Pull Request

CHANGELOG.md

@@ -7,9 +7,17 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
-* Add unit argument to onZoom and onTimeChange callbacks
+
+## 0.28.0
+
+* Add unit argument to onZoom and onTimeChange callbacks @hckr #655
 * 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
+* support zoom level seconds #835 @horizon-plaza
+* custom buffer prop (help with controlled scrolling) @Ilaiwi
+* Fix injecting custom vertical line's class names for time periods longer than day @RafikiTiki
+* fix Context Menu unintentionally disabled by default @dsgipe #769
+* delete props `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
+
 
 ## 0.26.7
 

README.md

@@ -1,3 +1,6 @@
+# ⚠️⚠️⚠️⚠️ HELP WANTED
+please email me [[email protected]](mailto:[email protected]) and we will setup some time to speak and see if you can help maintain this library.
+
 # React Calendar Timeline
 
 A modern and responsive React timeline component.
@@ -140,6 +143,14 @@ The exact viewport of the calendar. When these are specified, scrolling in the c
 
 **Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function**
 
+## buffer
+
+a number (default to 3) which represents the extra timeline rendered on right and lift of the visible area which the user will scroll through before the time rerenders.
+
+more explication in section [behind the scenes](#behind-the-scenes)
+
+Note: setting buffer to 1 will disable the scrolling on the timeline
+
 ## selected
 
 An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's and use `onItemDeselect` handler to clear selection. This overwrites the default behaviour of selecting one item on click.
@@ -202,6 +213,7 @@ What percentage of the height of the line is taken by the item? Default `0.65`
 
 Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour)
 
+__notes__: please note than second won't show up unless you change this to `60 * 1000`
 ## maxZoom
 
 Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 86400 * 1000` (5 years)
@@ -915,7 +927,13 @@ by default we provide a responsive format for the dates based on the label width
     mediumLong: 'HH:mm',
     medium: 'HH:mm',
     short: 'mm',
-  }
+  },
+  second: {
+    "long": 'mm:ss',
+    mediumLong: 'mm:ss',
+    medium: 'mm:ss',
+    "short": 'ss'
+  }  
 }
   ```
 
@@ -1236,6 +1254,8 @@ This results in a visually endless scrolling canvas with optimal performance.
 
 Extensibility and usability: While some parameters (`onTimeChange`, `moveResizeValidator`) might be hard to configure, these are design decisions to make it as extensible as possible. If you have recipes for common tasks regarding those parameters, send a PR to add them to this doc.
 
+Note: 3x can be controlled by changing the buffer
+
 ## Interaction
 
 To interact and navigate within the timeline there are the following options for the user:

__fixtures__/stateAndProps.js

@@ -11,6 +11,7 @@ export const props = {
   itemHeightRatio: 0.75,
   visibleTimeEnd,
   visibleTimeStart,
+  buffer: 3,
 }
 
 export const propsNoStack = {

__tests__/components/Markers/CustomMarker.test.js

@@ -4,16 +4,24 @@ import 'jest-dom/extend-expect'
 import TimelineMarkers from 'lib/markers/public/TimelineMarkers'
 import CustomMarker from 'lib/markers/public/CustomMarker'
 import { RenderWrapper } from 'test-utility/marker-renderer'
+import { TimelineStateConsumer } from 'lib/timeline/TimelineStateContext'
 
 describe('CustomMarker', () => {
   afterEach(cleanup)
   const defaultCustomMarkerTestId = 'default-customer-marker-id'
   it('renders one', () => {
     const { getByTestId } = render(
       <RenderWrapper>
-        <TimelineMarkers>
-          <CustomMarker date={1000} />
-        </TimelineMarkers>
+        <TimelineStateConsumer>
+          {({ getTimelineState }) => {
+            const { canvasTimeStart } = getTimelineState();
+            return (
+              <TimelineMarkers>
+                <CustomMarker date={canvasTimeStart + 100} />
+              </TimelineMarkers>
+            )
+          }}
+        </TimelineStateConsumer>
       </RenderWrapper>
     )
 
@@ -22,11 +30,18 @@ describe('CustomMarker', () => {
   it('render multiple', () => {
     const { queryAllByTestId } = render(
       <RenderWrapper>
-        <TimelineMarkers>
-          <CustomMarker date={1000} />
-          <CustomMarker date={1000} />
-          <CustomMarker date={1000} />
-        </TimelineMarkers>
+        <TimelineStateConsumer>
+          {({ getTimelineState }) => {
+            const { canvasTimeStart } = getTimelineState();
+            return (
+              <TimelineMarkers>
+                <CustomMarker date={canvasTimeStart + 100} />
+                <CustomMarker date={canvasTimeStart + 101} />
+                <CustomMarker date={canvasTimeStart + 102} />
+              </TimelineMarkers>
+            )
+          }}
+        </TimelineStateConsumer>
       </RenderWrapper>
     )
 
@@ -36,11 +51,18 @@ describe('CustomMarker', () => {
     const customDataIdSelector = 'my-custom-marker'
     const { getByTestId } = render(
       <RenderWrapper>
-        <TimelineMarkers>
-          <CustomMarker date={1000}>
-            {() => <div data-testid={customDataIdSelector} />}
-          </CustomMarker>
-        </TimelineMarkers>
+        <TimelineStateConsumer>
+          {({ getTimelineState }) => {
+            const { canvasTimeStart } = getTimelineState();
+            return (
+              <TimelineMarkers>
+                <CustomMarker date={canvasTimeStart + 100}>
+                  {() => <div data-testid={customDataIdSelector} />}
+                </CustomMarker>
+              </TimelineMarkers>
+            )
+          }}
+        </TimelineStateConsumer>
       </RenderWrapper>
     )
 
@@ -68,7 +90,7 @@ describe('CustomMarker', () => {
       canvasTimeStart: visibleTimeStart - oneDay,
       canvasTimeEnd: visibleTimeEnd + oneDay,
       canvasWidth,
-      showPeriod: () => {},
+      showPeriod: () => { },
       timelineWidth: 1000,
       timelineUnit: 'day'
     }
@@ -101,12 +123,20 @@ describe('CustomMarker', () => {
       render() {
         return (
           <RenderWrapper>
-            <button onClick={this.handleToggleCustomMarker}>
-              Hide Custom Marker
-            </button>
-            <TimelineMarkers>
-              {this.state.isShowing && <CustomMarker date={1000} />}
-            </TimelineMarkers>
+            <TimelineStateConsumer>
+              {({ getTimelineState }) => {
+                const { canvasTimeStart } = getTimelineState();
+                return (
+                  <React.Fragment>
+                    <button onClick={this.handleToggleCustomMarker}>
+                      Hide Custom Marker
+                    </button>
+                    <TimelineMarkers>
+                      {this.state.isShowing && <CustomMarker date={canvasTimeStart + 100} />}
+                    </TimelineMarkers>
+                  </React.Fragment>
+                )
+              }}</TimelineStateConsumer>
           </RenderWrapper>
         )
       }
@@ -120,20 +150,50 @@ describe('CustomMarker', () => {
 
     expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDocument()
   })
-  it('updates marker location after passing new date', ()=>{
+  it('updates marker location after passing new date', () => {
     const { getByTestId, rerender } = render(
       <RenderWrapper>
-        <TimelineMarkers>
-          <CustomMarker date={1000} />
-        </TimelineMarkers>
+        <TimelineStateConsumer>
+          {({ getTimelineState }) => {
+            const { canvasTimeStart } = getTimelineState();
+            return (
+              <TimelineMarkers>
+                <CustomMarker date={canvasTimeStart + 1000} />
+              </TimelineMarkers>
+            )
+          }}</TimelineStateConsumer>
       </RenderWrapper>)
-      const positionLeftBeforeChange = getByTestId(defaultCustomMarkerTestId).style.left
-      rerender(<RenderWrapper>
-        <TimelineMarkers>
-          <CustomMarker date={2000} />
-        </TimelineMarkers>
-      </RenderWrapper>)
-      const positionLeftAfterChange = getByTestId(defaultCustomMarkerTestId).style.left
-      expect(positionLeftBeforeChange).not.toEqual(positionLeftAfterChange)
+    const positionLeftBeforeChange = getByTestId(defaultCustomMarkerTestId).style.left
+    rerender(<RenderWrapper>
+      <TimelineStateConsumer>
+        {({ getTimelineState }) => {
+          const { canvasTimeStart } = getTimelineState();
+          return (
+            <TimelineMarkers>
+              <CustomMarker date={canvasTimeStart + 2000} />
+            </TimelineMarkers>
+          )
+        }}</TimelineStateConsumer>
+    </RenderWrapper>)
+    const positionLeftAfterChange = getByTestId(defaultCustomMarkerTestId).style.left
+    expect(positionLeftBeforeChange).not.toEqual(positionLeftAfterChange)
+  })
+  it('should not render marker outside canvas', () => {
+    const { queryByTestId } = render(
+      <RenderWrapper>
+        <TimelineStateConsumer>
+          {({ getTimelineState }) => {
+            const { canvasTimeEnd } = getTimelineState();
+            return (
+              <TimelineMarkers>
+                <CustomMarker date={canvasTimeEnd + 100} />
+              </TimelineMarkers>
+            )
+          }}
+        </TimelineStateConsumer>
+      </RenderWrapper>
+    )
+
+    expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDocument()
   })
 })