Skip to content

Commit efcaaa6

Browse files
IlaiwiIlaiwi
committed
optimizations
1 parent 98677fb commit efcaaa6

File tree

5 files changed

+169
-151
lines changed

5 files changed

+169
-151
lines changed

‎src/lib/Timeline.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -439,7 +439,11 @@ export default class ReactCalendarTimeline extends Component {
439439
(this.state.visibleTimeStart - this.state.canvasTimeStart) /
440440
newZoom
441441
)
442-
const componentScrollLeft = Math.round(this.scrollComponent.scrollLeft)
442+
const componentScrollLeft = Math.round(
443+
prevState.width *
444+
(prevState.visibleTimeStart - prevState.canvasTimeStart) /
445+
oldZoom
446+
)
443447
if (componentScrollLeft !== scrollLeft) {
444448
this.scrollComponent.scrollLeft = scrollLeft
445449
this.scrollHeaderRef.scrollLeft = scrollLeft

‎src/lib/headers/CustomHeader.js‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export class CustomHeader extends React.Component {
1919
showPeriod: PropTypes.func.isRequired,
2020
headerData: PropTypes.object,
2121
getLeftOffsetFromDate: PropTypes.func.isRequired,
22-
height: PropTypes.number.isRequired,
22+
height: PropTypes.number.isRequired
2323
}
2424
constructor(props) {
2525
super(props)
@@ -131,7 +131,7 @@ export class CustomHeader extends React.Component {
131131
style: Object.assign({}, style ? style : {}, {
132132
position: 'relative',
133133
width: this.props.canvasWidth,
134-
height: this.props.height,
134+
height: this.props.height
135135
})
136136
}
137137
}
@@ -172,7 +172,7 @@ export class CustomHeader extends React.Component {
172172
timelineWidth,
173173
visibleTimeStart,
174174
visibleTimeEnd,
175-
headerData,
175+
headerData
176176
} = this.props
177177
//TODO: only evaluate on changing params
178178
return {
@@ -190,50 +190,53 @@ export class CustomHeader extends React.Component {
190190
getRootProps: this.getRootProps,
191191
getIntervalProps: this.getIntervalProps,
192192
showPeriod,
193-
data: headerData,
193+
data: headerData
194194
}
195195
}
196196

197197
render() {
198198
const props = this.getStateAndHelpers()
199199
const Renderer = this.props.children
200-
return <Renderer {...props}/>
200+
return <Renderer {...props} />
201201
}
202202
}
203203

204-
const CustomHeaderWrapper = ({ children, unit, headerData, height }) => (
205-
<TimelineStateConsumer>
206-
{({ getTimelineState, showPeriod, getLeftOffsetFromDate }) => {
207-
const timelineState = getTimelineState()
208-
return (
209-
<TimelineHeadersConsumer>
210-
{({ timeSteps }) => (
211-
<CustomHeader
212-
children={children}
213-
timeSteps={timeSteps}
214-
showPeriod={showPeriod}
215-
unit={unit ? unit : timelineState.timelineUnit}
216-
{...timelineState}
217-
headerData={headerData}
218-
getLeftOffsetFromDate={getLeftOffsetFromDate}
219-
height={height}
220-
/>
221-
)}
222-
</TimelineHeadersConsumer>
223-
)
224-
}}
225-
</TimelineStateConsumer>
226-
)
227-
228-
CustomHeaderWrapper.propTypes = {
229-
children: PropTypes.func.isRequired,
230-
unit: PropTypes.string,
231-
headerData: PropTypes.object,
232-
height: PropTypes.number,
233-
}
234-
235-
CustomHeaderWrapper.defaultProps = {
236-
height: 30,
204+
class CustomHeaderWrapper extends React.Component {
205+
static propTypes = {
206+
children: PropTypes.func.isRequired,
207+
unit: PropTypes.string,
208+
headerData: PropTypes.object,
209+
height: PropTypes.number
210+
}
211+
static defaultProps = {
212+
height: 30
213+
}
214+
render() {
215+
const { children, unit, headerData, height } = this.props
216+
return (
217+
<TimelineStateConsumer>
218+
{({ getTimelineState, showPeriod, getLeftOffsetFromDate }) => {
219+
const timelineState = getTimelineState()
220+
return (
221+
<TimelineHeadersConsumer>
222+
{({ timeSteps }) => (
223+
<CustomHeader
224+
children={children}
225+
timeSteps={timeSteps}
226+
showPeriod={showPeriod}
227+
unit={unit ? unit : timelineState.timelineUnit}
228+
{...timelineState}
229+
headerData={headerData}
230+
getLeftOffsetFromDate={getLeftOffsetFromDate}
231+
height={height}
232+
/>
233+
)}
234+
</TimelineHeadersConsumer>
235+
)
236+
}}
237+
</TimelineStateConsumer>
238+
)
239+
}
237240
}
238241

239242
export default CustomHeaderWrapper

‎src/lib/headers/DateHeader.js‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class DateHeader extends React.Component {
1919
]).isRequired,
2020
intervalRenderer: PropTypes.func,
2121
headerData: PropTypes.object,
22-
height: PropTypes.number,
22+
height: PropTypes.number
2323
}
2424

2525
getHeaderUnit = () => {
@@ -98,50 +98,54 @@ class DateHeader extends React.Component {
9898
}
9999
}
100100

101-
const DateHeaderWrapper = ({
102-
unit,
103-
labelFormat,
104-
style,
105-
className,
106-
intervalRenderer,
107-
headerData,
108-
height,
109-
}) => (
110-
<TimelineStateConsumer>
111-
{({ getTimelineState }) => {
112-
const timelineState = getTimelineState()
113-
return (
114-
<DateHeader
115-
timelineUnit={timelineState.timelineUnit}
116-
unit={unit}
117-
labelFormat={labelFormat}
118-
style={style}
119-
className={className}
120-
intervalRenderer={intervalRenderer}
121-
headerData={headerData}
122-
height={height}
123-
/>
124-
)
125-
}}
126-
</TimelineStateConsumer>
127-
)
128-
129-
DateHeaderWrapper.propTypes = {
130-
style: PropTypes.object,
131-
className: PropTypes.string,
132-
unit: PropTypes.string,
133-
labelFormat: PropTypes.oneOfType([
134-
PropTypes.func,
135-
PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
136-
PropTypes.string
137-
]),
138-
intervalRenderer: PropTypes.func,
139-
headerData: PropTypes.object,
140-
height: PropTypes.number,
141-
}
101+
class DateHeaderWrapper extends React.Component {
102+
static propTypes = {
103+
style: PropTypes.object,
104+
className: PropTypes.string,
105+
unit: PropTypes.string,
106+
labelFormat: PropTypes.oneOfType([
107+
PropTypes.func,
108+
PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
109+
PropTypes.string
110+
]),
111+
intervalRenderer: PropTypes.func,
112+
headerData: PropTypes.object,
113+
height: PropTypes.number
114+
}
142115

143-
DateHeaderWrapper.defaultProps = {
144-
labelFormat: formatLabel
116+
static defaultProps = {
117+
labelFormat: formatLabel
118+
}
119+
render() {
120+
const {
121+
unit,
122+
labelFormat,
123+
style,
124+
className,
125+
intervalRenderer,
126+
headerData,
127+
height
128+
} = this.props
129+
return (
130+
<TimelineStateConsumer>
131+
{({ getTimelineState }) => {
132+
const timelineState = getTimelineState()
133+
return (
134+
<DateHeader
135+
timelineUnit={timelineState.timelineUnit}
136+
unit={unit}
137+
labelFormat={labelFormat}
138+
style={style}
139+
className={className}
140+
intervalRenderer={intervalRenderer}
141+
headerData={headerData}
142+
height={height}
143+
/>
144+
)
145+
}}
146+
</TimelineStateConsumer>
147+
)
148+
}
145149
}
146150

147151
function formatLabel(

‎src/lib/headers/SidebarHeader.js‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,52 +21,56 @@ class SidebarHeader extends React.PureComponent {
2121
return {
2222
style: {
2323
...style,
24-
width,
24+
width
2525
}
2626
}
2727
}
2828

2929
getStateAndHelpers = () => {
3030
return {
3131
getRootProps: this.getRootProps,
32-
data: this.props.headerData,
32+
data: this.props.headerData
3333
}
3434
}
3535

3636
render() {
3737
const props = this.getStateAndHelpers()
3838
const Renderer = this.props.children
39-
return <Renderer {...props}/>
39+
return <Renderer {...props} />
4040
}
4141
}
4242

43-
const SidebarWrapper = ({ children, variant, headerData }) => (
44-
<TimelineHeadersConsumer>
45-
{({ leftSidebarWidth, rightSidebarWidth }) => {
46-
return (
47-
<SidebarHeader
48-
leftSidebarWidth={leftSidebarWidth}
49-
rightSidebarWidth={rightSidebarWidth}
50-
children={children}
51-
variant={variant}
52-
headerData={headerData}
53-
/>
54-
)
55-
}}
56-
</TimelineHeadersConsumer>
57-
)
58-
59-
SidebarWrapper.propTypes = {
60-
children: PropTypes.func.isRequired,
61-
variant: PropTypes.string,
62-
headerData: PropTypes.object
63-
}
64-
65-
SidebarWrapper.defaultProps = {
66-
variant: LEFT_VARIANT,
67-
children: ({ getRootProps }) => <div data-testid="sidebarHeader" {...getRootProps()} />
43+
class SidebarWrapper extends React.Component {
44+
static propTypes = {
45+
children: PropTypes.func.isRequired,
46+
variant: PropTypes.string,
47+
headerData: PropTypes.object
48+
}
49+
static defaultProps = {
50+
variant: LEFT_VARIANT,
51+
children: ({ getRootProps }) => (
52+
<div data-testid="sidebarHeader" {...getRootProps()} />
53+
)
54+
}
55+
static secretKey = 'SidebarHeader'
56+
render() {
57+
const { children, variant, headerData } = this.props
58+
return (
59+
<TimelineHeadersConsumer>
60+
{({ leftSidebarWidth, rightSidebarWidth }) => {
61+
return (
62+
<SidebarHeader
63+
leftSidebarWidth={leftSidebarWidth}
64+
rightSidebarWidth={rightSidebarWidth}
65+
children={children}
66+
variant={variant}
67+
headerData={headerData}
68+
/>
69+
)
70+
}}
71+
</TimelineHeadersConsumer>
72+
)
73+
}
6874
}
6975

70-
SidebarWrapper.secretKey = "SidebarHeader"
71-
7276
export default SidebarWrapper

0 commit comments

Comments
 (0)