Skip to content

Commit 2b11cc9

Browse files
IlaiwiIlaiwi
committed
WIP
1 parent 44bed94 commit 2b11cc9

File tree

10 files changed

+409
-96
lines changed

10 files changed

+409
-96
lines changed

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,14 @@ The exact viewport of the calendar. When these are specified, scrolling in the c
140140

141141
**Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function**
142142

143+
## buffer
144+
145+
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.
146+
147+
more explication in section [behind the scenes](#behind-the-scenes)
148+
149+
Note: setting buffer to 1 will disable the scrolling on the timeline
150+
143151
## selected
144152

145153
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.
@@ -1236,6 +1244,8 @@ This results in a visually endless scrolling canvas with optimal performance.
12361244

12371245
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.
12381246

1247+
Note: 3x can be controlled by changing the buffer
1248+
12391249
## Interaction
12401250

12411251
To interact and navigate within the timeline there are the following options for the user:

‎__fixtures__/stateAndProps.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const props = {
1111
itemHeightRatio: 0.75,
1212
visibleTimeEnd,
1313
visibleTimeStart,
14+
buffer: 3,
1415
}
1516

1617
export const propsNoStack = {

‎__tests__/components/Markers/CustomMarker.test.js‎

Lines changed: 92 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,24 @@ import 'jest-dom/extend-expect'
44
import TimelineMarkers from 'lib/markers/public/TimelineMarkers'
55
import CustomMarker from 'lib/markers/public/CustomMarker'
66
import { RenderWrapper } from 'test-utility/marker-renderer'
7+
import { TimelineStateConsumer } from 'lib/timeline/TimelineStateContext'
78

89
describe('CustomMarker', () => {
910
afterEach(cleanup)
1011
const defaultCustomMarkerTestId = 'default-customer-marker-id'
1112
it('renders one', () => {
1213
const { getByTestId } = render(
1314
<RenderWrapper>
14-
<TimelineMarkers>
15-
<CustomMarker date={1000} />
16-
</TimelineMarkers>
15+
<TimelineStateConsumer>
16+
{({ getTimelineState }) => {
17+
const { canvasTimeStart } = getTimelineState();
18+
return (
19+
<TimelineMarkers>
20+
<CustomMarker date={canvasTimeStart + 100} />
21+
</TimelineMarkers>
22+
)
23+
}}
24+
</TimelineStateConsumer>
1725
</RenderWrapper>
1826
)
1927

@@ -22,11 +30,18 @@ describe('CustomMarker', () => {
2230
it('render multiple', () => {
2331
const { queryAllByTestId } = render(
2432
<RenderWrapper>
25-
<TimelineMarkers>
26-
<CustomMarker date={1000} />
27-
<CustomMarker date={1000} />
28-
<CustomMarker date={1000} />
29-
</TimelineMarkers>
33+
<TimelineStateConsumer>
34+
{({ getTimelineState }) => {
35+
const { canvasTimeStart } = getTimelineState();
36+
return (
37+
<TimelineMarkers>
38+
<CustomMarker date={canvasTimeStart + 100} />
39+
<CustomMarker date={canvasTimeStart + 101} />
40+
<CustomMarker date={canvasTimeStart + 102} />
41+
</TimelineMarkers>
42+
)
43+
}}
44+
</TimelineStateConsumer>
3045
</RenderWrapper>
3146
)
3247

@@ -36,11 +51,18 @@ describe('CustomMarker', () => {
3651
const customDataIdSelector = 'my-custom-marker'
3752
const { getByTestId } = render(
3853
<RenderWrapper>
39-
<TimelineMarkers>
40-
<CustomMarker date={1000}>
41-
{() => <div data-testid={customDataIdSelector} />}
42-
</CustomMarker>
43-
</TimelineMarkers>
54+
<TimelineStateConsumer>
55+
{({ getTimelineState }) => {
56+
const { canvasTimeStart } = getTimelineState();
57+
return (
58+
<TimelineMarkers>
59+
<CustomMarker date={canvasTimeStart + 100}>
60+
{() => <div data-testid={customDataIdSelector} />}
61+
</CustomMarker>
62+
</TimelineMarkers>
63+
)
64+
}}
65+
</TimelineStateConsumer>
4466
</RenderWrapper>
4567
)
4668

@@ -68,7 +90,7 @@ describe('CustomMarker', () => {
6890
canvasTimeStart: visibleTimeStart - oneDay,
6991
canvasTimeEnd: visibleTimeEnd + oneDay,
7092
canvasWidth,
71-
showPeriod: () => {},
93+
showPeriod: () => { },
7294
timelineWidth: 1000,
7395
timelineUnit: 'day'
7496
}
@@ -101,12 +123,20 @@ describe('CustomMarker', () => {
101123
render() {
102124
return (
103125
<RenderWrapper>
104-
<button onClick={this.handleToggleCustomMarker}>
105-
Hide Custom Marker
106-
</button>
107-
<TimelineMarkers>
108-
{this.state.isShowing && <CustomMarker date={1000} />}
109-
</TimelineMarkers>
126+
<TimelineStateConsumer>
127+
{({ getTimelineState }) => {
128+
const { canvasTimeStart } = getTimelineState();
129+
return (
130+
<React.Fragment>
131+
<button onClick={this.handleToggleCustomMarker}>
132+
Hide Custom Marker
133+
</button>
134+
<TimelineMarkers>
135+
{this.state.isShowing && <CustomMarker date={canvasTimeStart + 100} />}
136+
</TimelineMarkers>
137+
</React.Fragment>
138+
)
139+
}}</TimelineStateConsumer>
110140
</RenderWrapper>
111141
)
112142
}
@@ -120,20 +150,50 @@ describe('CustomMarker', () => {
120150

121151
expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDocument()
122152
})
123-
it('updates marker location after passing new date', ()=>{
153+
it('updates marker location after passing new date', () => {
124154
const { getByTestId, rerender } = render(
125155
<RenderWrapper>
126-
<TimelineMarkers>
127-
<CustomMarker date={1000} />
128-
</TimelineMarkers>
156+
<TimelineStateConsumer>
157+
{({ getTimelineState }) => {
158+
const { canvasTimeStart } = getTimelineState();
159+
return (
160+
<TimelineMarkers>
161+
<CustomMarker date={canvasTimeStart + 1000} />
162+
</TimelineMarkers>
163+
)
164+
}}</TimelineStateConsumer>
129165
</RenderWrapper>)
130-
const positionLeftBeforeChange = getByTestId(defaultCustomMarkerTestId).style.left
131-
rerender(<RenderWrapper>
132-
<TimelineMarkers>
133-
<CustomMarker date={2000} />
134-
</TimelineMarkers>
135-
</RenderWrapper>)
136-
const positionLeftAfterChange = getByTestId(defaultCustomMarkerTestId).style.left
137-
expect(positionLeftBeforeChange).not.toEqual(positionLeftAfterChange)
166+
const positionLeftBeforeChange = getByTestId(defaultCustomMarkerTestId).style.left
167+
rerender(<RenderWrapper>
168+
<TimelineStateConsumer>
169+
{({ getTimelineState }) => {
170+
const { canvasTimeStart } = getTimelineState();
171+
return (
172+
<TimelineMarkers>
173+
<CustomMarker date={canvasTimeStart + 2000} />
174+
</TimelineMarkers>
175+
)
176+
}}</TimelineStateConsumer>
177+
</RenderWrapper>)
178+
const positionLeftAfterChange = getByTestId(defaultCustomMarkerTestId).style.left
179+
expect(positionLeftBeforeChange).not.toEqual(positionLeftAfterChange)
180+
})
181+
it('should not render marker outside canvas', () => {
182+
const { queryByTestId } = render(
183+
<RenderWrapper>
184+
<TimelineStateConsumer>
185+
{({ getTimelineState }) => {
186+
const { canvasTimeEnd } = getTimelineState();
187+
return (
188+
<TimelineMarkers>
189+
<CustomMarker date={canvasTimeEnd + 100} />
190+
</TimelineMarkers>
191+
)
192+
}}
193+
</TimelineStateConsumer>
194+
</RenderWrapper>
195+
)
196+
197+
expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDocument()
138198
})
139199
})

0 commit comments

Comments
 (0)