-
Notifications
You must be signed in to change notification settings - Fork 1
/
TimelineStateContext.js
112 lines (101 loc) · 2.9 KB
/
TimelineStateContext.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React from 'react'
import PropTypes from 'prop-types'
import createReactContext from 'create-react-context'
import {
calculateXPositionForTime,
calculateTimeForXPosition
} from '../utility/calendar'
/* this context will hold all information regarding timeline state:
1. timeline width
2. visible time start and end
3. canvas time start and end
4. helpers for calculating left offset of items (and really...anything)
*/
/* eslint-disable no-console */
const defaultContextState = {
getTimelineState: () => {
console.warn('"getTimelineState" default func is being used')
},
getLeftOffsetFromDate: () => {
console.warn('"getLeftOffsetFromDate" default func is being used')
},
getDateFromLeftOffsetPosition: () => {
console.warn('"getDateFromLeftOffsetPosition" default func is being used')
},
showPeriod: () => {
console.warn('"showPeriod" default func is being used')
}
}
/* eslint-enable */
const { Consumer, Provider } = createReactContext(defaultContextState)
export class TimelineStateProvider extends React.Component {
/* eslint-disable react/no-unused-prop-types */
static propTypes = {
children: PropTypes.element.isRequired,
visibleTimeStart: PropTypes.number.isRequired,
visibleTimeEnd: PropTypes.number.isRequired,
canvasTimeStart: PropTypes.number.isRequired,
canvasTimeEnd: PropTypes.number.isRequired,
canvasWidth: PropTypes.number.isRequired,
showPeriod: PropTypes.func.isRequired,
timelineUnit: PropTypes.string.isRequired,
timelineWidth: PropTypes.number.isRequired,
}
constructor(props) {
super(props)
this.state = {
timelineContext: {
getTimelineState: this.getTimelineState,
getLeftOffsetFromDate: this.getLeftOffsetFromDate,
getDateFromLeftOffsetPosition: this.getDateFromLeftOffsetPosition,
showPeriod: this.props.showPeriod,
}
}
}
getTimelineState = () => {
const {
visibleTimeStart,
visibleTimeEnd,
canvasTimeStart,
canvasTimeEnd,
canvasWidth,
timelineUnit,
timelineWidth,
} = this.props
return {
visibleTimeStart,
visibleTimeEnd,
canvasTimeStart,
canvasTimeEnd,
canvasWidth,
timelineUnit,
timelineWidth,
} // REVIEW,
}
getLeftOffsetFromDate = date => {
const { canvasTimeStart, canvasTimeEnd, canvasWidth } = this.props
return calculateXPositionForTime(
canvasTimeStart,
canvasTimeEnd,
canvasWidth,
date
)
}
getDateFromLeftOffsetPosition = leftOffset => {
const { canvasTimeStart, canvasTimeEnd, canvasWidth } = this.props
return calculateTimeForXPosition(
canvasTimeStart,
canvasTimeEnd,
canvasWidth,
leftOffset
)
}
render() {
return (
<Provider value={this.state.timelineContext}>
{this.props.children}
</Provider>
)
}
}
export const TimelineStateConsumer = Consumer