-
Notifications
You must be signed in to change notification settings - Fork 94
/
Navigator.js
67 lines (54 loc) · 1.65 KB
/
Navigator.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
import React, {
useState,
useEffect,
Children,
cloneElement,
isValidElement
} from 'react';
import PropTypes from 'prop-types';
import { attempt } from 'lodash-es';
import {
useModifiedProps,
useChart,
useHighcharts
} from 'react-jsx-highcharts';
import NavigatorXAxis from './NavigatorXAxis';
const Navigator = ({ enabled = true, ...restProps }) => {
const props = { enabled, ...restProps };
const [rendered, setRendered] = useState(false);
const chart = useChart();
const Highcharts = useHighcharts();
useEffect(() => {
const { children, ...rest } = props;
// Workaround from http://jsfiddle.net/x40me94t/2/
const chartObj = chart.object;
chartObj.options.navigator.enabled = true;
// Initialise Navigator https://github.com/highcharts/highcharts/blob/dd730ab/js/parts/Navigator.js#L1837-L1844
Highcharts.fireEvent(chartObj, 'beforeRender');
updateNavigator(rest, chart);
setRendered(true);
return () => {
attempt(updateNavigator, { enabled: false }, chart);
};
}, []);
const modifiedProps = useModifiedProps(props);
useEffect(() => {
if (modifiedProps !== false) {
updateNavigator(modifiedProps, chart);
}
});
const { children } = props;
if (!children || !rendered) return null;
const navChildren = Children.map(children, child => {
if (isValidElement(child) === false) return child;
return cloneElement(child, { rendered });
});
return <NavigatorXAxis>{navChildren}</NavigatorXAxis>;
};
const updateNavigator = (config, chart) => {
chart.update({ navigator: config }, true);
};
Navigator.propTypes = {
enabled: PropTypes.bool
};
export default Navigator;