Unverified Commit 602814cc authored by afc163's avatar afc163

πŸ’Ή Remove unused resize fns in Pie

parent 1b5c3ff1
...@@ -6,7 +6,6 @@ import classNames from 'classnames'; ...@@ -6,7 +6,6 @@ import classNames from 'classnames';
import ReactFitText from 'react-fittext'; import ReactFitText from 'react-fittext';
import Debounce from 'lodash-decorators/debounce'; import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind'; import Bind from 'lodash-decorators/bind';
import ResizeObserver from 'resize-observer-polyfill';
import styles from './index.less'; import styles from './index.less';
/* eslint react/no-danger:0 */ /* eslint react/no-danger:0 */
...@@ -17,17 +16,6 @@ class Pie extends Component { ...@@ -17,17 +16,6 @@ class Pie extends Component {
legendBlock: false, legendBlock: false,
}; };
componentDidMount() {
window.addEventListener(
'resize',
() => {
this.requestRef = requestAnimationFrame(() => this.resize());
},
{ passive: true }
);
this.resizeObserver();
}
componentDidUpdate(preProps) { componentDidUpdate(preProps) {
const { data } = this.props; const { data } = this.props;
if (data !== preProps.data) { if (data !== preProps.data) {
...@@ -37,20 +25,10 @@ class Pie extends Component { ...@@ -37,20 +25,10 @@ class Pie extends Component {
} }
} }
componentWillUnmount() {
window.cancelAnimationFrame(this.requestRef);
window.removeEventListener('resize', this.resize);
this.resize.cancel();
if (this.chartDom) {
this.resizeObserverInstance.unobserve(this.chartDom);
}
}
getG2Instance = chart => { getG2Instance = chart => {
this.chart = chart; this.chart = chart;
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.getLegendData(); this.getLegendData();
this.resize();
}); });
}; };
...@@ -96,23 +74,6 @@ class Pie extends Component { ...@@ -96,23 +74,6 @@ class Pie extends Component {
}); });
}; };
resizeObserver() {
this.resizeObserverInstance = new ResizeObserver(entries => {
const { height } = entries[0].contentRect;
this.setState(preState => {
if (preState.height !== height) {
return {
height,
};
}
return null;
});
});
if (this.chartDom) {
this.resizeObserverInstance.observe(this.chartDom);
}
}
// for window resize auto responsive legend // for window resize auto responsive legend
@Bind() @Bind()
@Debounce(300) @Debounce(300)
...@@ -226,45 +187,39 @@ class Pie extends Component { ...@@ -226,45 +187,39 @@ class Pie extends Component {
return ( return (
<div ref={this.handleRoot} className={pieClassName} style={style}> <div ref={this.handleRoot} className={pieClassName} style={style}>
<div <ReactFitText maxFontSize={25}>
ref={ref => { <div className={styles.chart}>
this.chartDom = ref; <Chart
}} scale={scale}
> height={height || stateHeight}
<ReactFitText maxFontSize={25}> data={dv}
<div className={styles.chart}> padding={padding}
<Chart animate={animate}
scale={scale} onGetG2Instance={this.getG2Instance}
height={height || stateHeight} >
data={dv} {!!tooltip && <Tooltip showTitle={false} />}
padding={padding} <Coord type="theta" innerRadius={inner} />
animate={animate} <Geom
onGetG2Instance={this.getG2Instance} style={{ lineWidth, stroke: '#fff' }}
> tooltip={tooltip && tooltipFormat}
{!!tooltip && <Tooltip showTitle={false} />} type="intervalStack"
<Coord type="theta" innerRadius={inner} /> position="percent"
<Geom color={['x', percent || percent === 0 ? formatColor : defaultColors]}
style={{ lineWidth, stroke: '#fff' }} selected={selected}
tooltip={tooltip && tooltipFormat} />
type="intervalStack" </Chart>
position="percent"
color={['x', percent || percent === 0 ? formatColor : defaultColors]} {(subTitle || total) && (
selected={selected} <div className={styles.total}>
/> {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
</Chart> {/* eslint-disable-next-line */}
{total && (
{(subTitle || total) && ( <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
<div className={styles.total}> )}
{subTitle && <h4 className="pie-sub-title">{subTitle}</h4>} </div>
{/* eslint-disable-next-line */} )}
{total && ( </div>
<div className="pie-stat">{typeof total === 'function' ? total() : total}</div> </ReactFitText>
)}
</div>
)}
</div>
</ReactFitText>
</div>
{hasLegend && ( {hasLegend && (
<ul className={styles.legend}> <ul className={styles.legend}>
{legendData.map((item, i) => ( {legendData.map((item, i) => (
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment