UNPKG

1.96 kBJSXView Raw
1import G2Slider from '@antv/g2-plugin-slider';
2import React, { Component } from 'react';
3import ErrorBoundary from './error-boundary';
4
5const SliderAttrs = ['width', 'height', 'padding', 'xAis', 'yAxis', 'start', 'end',
6 'fillerStyle', 'backgroundStyle', 'scales', 'textStyle', 'handleStyle', 'backgroundChart'];
7
8function sliderNeedRebuild(props, nextProps) {
9 if (props.onChange !== nextProps.onChange) { return true; }
10
11 for (let i = 0; i < SliderAttrs.length; i += 1) {
12 const attr = SliderAttrs[i];
13 if (!window.G2.Util.isEqual(props[attr], nextProps[attr])) {
14 return true;
15 }
16 }
17
18 return false;
19}
20
21class Slider extends Component {
22 constructor() {
23 super();
24 this.reBuild = false;
25 }
26
27 componentDidMount() {
28 const slider = this.createG2Instance();
29 slider.render();
30 }
31
32 componentWillReceiveProps(nextProps) {
33 const { data, ...others } = this.props;
34 const { data: nextData, ...nextOthers } = nextProps;
35 // refrence compare
36 if (data !== nextData) {
37 this.slider.changeData(nextData);
38 this.slider.repaint();
39 }
40
41 if (sliderNeedRebuild(others, nextOthers)) {
42 this.reBuild = true;
43 }
44 }
45
46 componentDidUpdate() {
47 if (!this.reBuild) { return; }
48
49 this.slider.destroy();
50 const slider = this.createG2Instance();
51 slider.render();
52 this.reBuild = false;
53 }
54
55 componentWillUnmount() {
56 this.slider.destroy();
57 }
58
59 createG2Instance() {
60 this.slider = new G2Slider({ container: this.container, ...this.props });
61 return this.slider;
62 }
63
64 refHandle = (cw) => {
65 // chart container wrap for reset operation
66 if (!this.container) {
67 this.container = cw;
68 }
69 }
70
71 render() {
72 return (
73 <div ref={this.refHandle} />
74 );
75 }
76}
77
78class BSlider extends Component {
79 render() {
80 return <ErrorBoundary>
81 <Slider {...this.props}/>
82 </ErrorBoundary>
83 }
84
85}
86exports.default = BSlider;
87module.exports = exports['default'];
88
\No newline at end of file