Skip to content

Commit 9fd0f57

Browse files
IlaiwiIlaiwi
authored
Merge pull request namespace-ee#863 from namespace-ee/0.28.0
2 parents 44bed94 + c6b8b83 commit 9fd0f57

File tree

14 files changed

+2747
-2633
lines changed

14 files changed

+2747
-2633
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
77

88
## Unreleased
99

10-
* Add unit argument to onZoom and onTimeChange callbacks
10+
11+
## 0.28.0
12+
13+
* Add unit argument to onZoom and onTimeChange callbacks @hckr #655
1114
* Add `className` prop to Timeline component to override `react-calendar-timeline` class #682
12-
* Fix injecting custom vertical line's class names for time periods longer than day
15+
* support zoom level seconds #835 @horizon-plaza
16+
* custom buffer prop (help with controlled scrolling) @Ilaiwi
17+
* Fix injecting custom vertical line's class names for time periods longer than day @RafikiTiki
18+
* fix Context Menu unintentionally disabled by default @dsgipe #769
19+
* delete props `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
20+
1321

1422
## 0.26.7
1523

‎README.md

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# ⚠️⚠️⚠️⚠️ HELP WANTED
2+
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.
3+
14
# React Calendar Timeline
25

36
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
140143

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

146+
## buffer
147+
148+
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.
149+
150+
more explication in section [behind the scenes](#behind-the-scenes)
151+
152+
Note: setting buffer to 1 will disable the scrolling on the timeline
153+
143154
## selected
144155

145156
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`
202213

203214
Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour)
204215

216+
__notes__: please note than second won't show up unless you change this to `60 * 1000`
205217
## maxZoom
206218

207219
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
915927
mediumLong: 'HH:mm',
916928
medium: 'HH:mm',
917929
short: 'mm',
918-
}
930+
},
931+
second: {
932+
"long": 'mm:ss',
933+
mediumLong: 'mm:ss',
934+
medium: 'mm:ss',
935+
"short": 'ss'
936+
}
919937
}
920938
```
921939

@@ -1236,6 +1254,8 @@ This results in a visually endless scrolling canvas with optimal performance.
12361254

12371255
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.
12381256

1257+
Note: 3x can be controlled by changing the buffer
1258+
12391259
## Interaction
12401260

12411261
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)