1 | import G2Slider from '@antv/g2-plugin-slider';
|
2 | import React, { Component } from 'react';
|
3 | import ErrorBoundary from './error-boundary';
|
4 |
|
5 | const SliderAttrs = ['width', 'height', 'padding', 'xAis', 'yAxis', 'start', 'end',
|
6 | 'fillerStyle', 'backgroundStyle', 'scales', 'textStyle', 'handleStyle', 'backgroundChart'];
|
7 |
|
8 | function 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 |
|
21 | class 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 |
|
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 |
|
66 | if (!this.container) {
|
67 | this.container = cw;
|
68 | }
|
69 | }
|
70 |
|
71 | render() {
|
72 | return (
|
73 | <div ref={this.refHandle} />
|
74 | );
|
75 | }
|
76 | }
|
77 |
|
78 | class BSlider extends Component {
|
79 | render() {
|
80 | return <ErrorBoundary>
|
81 | <Slider {...this.props}/>
|
82 | </ErrorBoundary>
|
83 | }
|
84 |
|
85 | }
|
86 | exports.default = BSlider;
|
87 | module.exports = exports['default'];
|
88 |
|
\ | No newline at end of file |