docs: 移除 chartRef 相关配置 (#820)

ant-design · Aug 20, 2021 · 77a8dc6 · 77a8dc6
1 parent 3a08a2b
commit 77a8dc6
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 80 deletions.
diff --git a/docs/demos/gauge.md b/docs/demos/gauge.md
@@ -52,7 +52,6 @@ import { Gauge } from '@ant-design/charts';
 
 const DemoGauge: React.FC = () => {
   var [percent, setPercent] = useState(0);
-  var ref;
   var ticks = [0, 1 / 3, 2 / 3, 1];
   var color = ['#F4664A', '#FAAD14', '#30BF78'];
   var config = {
@@ -108,7 +107,7 @@ const DemoGauge: React.FC = () => {
       setPercent(data);
     }, 1000);
   }, []);
-  return <Gauge {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Gauge {...config} />;
 };
 
 export default DemoGauge;
@@ -154,7 +153,6 @@ import { Gauge } from '@ant-design/charts';
 
 const DemoGauge: React.FC = () => {
   var [percent, setPercent] = useState(0);
-  var ref;
   var ticks = [0, 1 / 3, 2 / 3, 1];
   var color = ['#F4664A', '#FAAD14', '#30BF78'];
   var config = {
@@ -218,7 +216,7 @@ const DemoGauge: React.FC = () => {
     }, 1000);
   }, []);
 
-  return <Gauge {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Gauge {...config} />;
 };
 
 export default DemoGauge;

diff --git a/docs/demos/gauge.zh-CN.md b/docs/demos/gauge.zh-CN.md
@@ -52,7 +52,6 @@ import { Gauge } from '@ant-design/charts';
 
 const DemoGauge: React.FC = () => {
   var [percent, setPercent] = useState(0);
-  var ref;
   var ticks = [0, 1 / 3, 2 / 3, 1];
   var color = ['#F4664A', '#FAAD14', '#30BF78'];
   var config = {
@@ -108,7 +107,7 @@ const DemoGauge: React.FC = () => {
       setPercent(data);
     }, 1000);
   }, []);
-  return <Gauge {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Gauge {...config} />;
 };
 
 export default DemoGauge;
@@ -154,7 +153,6 @@ import { Gauge } from '@ant-design/charts';
 
 const DemoGauge: React.FC = () => {
   var [percent, setPercent] = useState(0);
-  var ref;
   var ticks = [0, 1 / 3, 2 / 3, 1];
   var color = ['#F4664A', '#FAAD14', '#30BF78'];
   var config = {
@@ -218,7 +216,7 @@ const DemoGauge: React.FC = () => {
     }, 1000);
   }, []);
 
-  return <Gauge {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Gauge {...config} />;
 };
 
 export default DemoGauge;

diff --git a/docs/demos/general.md b/docs/demos/general.md
@@ -236,7 +236,7 @@ const DemoGeneral: React.FC = () => {
     }
   }, [data]);
 
-  return <Line {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Line {...config} onReady={(plot) => (ref = plot)} />;
 };
 
 export default DemoGeneral;
@@ -497,8 +497,15 @@ const DemoGeneral: React.FC = () => {
     if (ref.current) {
       ref.current.setState('selected', (data) => data.type === '分类一' || data.type === '分类二');
     }
-  }, []);
-  return <Pie {...config} chartRef={ref} />;
+  }, [ref]);
+  return (
+    <Pie
+      {...config}
+      onReady={(plot) => {
+        ref.current = plot;
+      }}
+    />
+  );
 };
 
 export default DemoGeneral;

diff --git a/docs/demos/general.zh-CN.md b/docs/demos/general.zh-CN.md
@@ -57,8 +57,7 @@ const DemoGeneral: React.FC = () => {
     annotations: [
       {
         type: 'image',
-        src:
-          'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ELYbTIVCgPoAAAAAAAAAAABkARQnAQ',
+        src: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ELYbTIVCgPoAAAAAAAAAAABkARQnAQ',
         /** 位置 */
         position: ['50%', '50%'],
         /** 图形样式属性 */
@@ -235,9 +234,9 @@ const DemoGeneral: React.FC = () => {
         },
       ]);
     }
-  }, [data]);
+  }, [data, ref]);
 
-  return <Line {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Line {...config} onReady={(plot) => (ref = plot)} />;
 };
 
 export default DemoGeneral;
@@ -498,8 +497,15 @@ const DemoGeneral: React.FC = () => {
     if (ref.current) {
       ref.current.setState('selected', (data) => data.type === '分类一' || data.type === '分类二');
     }
-  }, []);
-  return <Pie {...config} chartRef={ref} />;
+  }, [ref]);
+  return (
+    <Pie
+      {...config}
+      onReady={(plot) => {
+        ref.current = plot;
+      }}
+    />
+  );
 };
 
 export default DemoGeneral;

diff --git a/docs/demos/liquid.md b/docs/demos/liquid.md
@@ -154,7 +154,6 @@ import { Liquid, measureTextWidth } from '@ant-design/charts';
 
 const DemoLiquid: React.FC = () => {
   var [percent, setPercent] = useState(0.26);
-  var ref;
   var config = {
     percent,
     radius: 0.8,
@@ -216,7 +215,7 @@ const DemoLiquid: React.FC = () => {
       }
     }, 500);
   }, []);
-  return <Liquid {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Liquid {...config} />;
 };
 
 export default DemoLiquid;

diff --git a/docs/demos/liquid.zh-CN.md b/docs/demos/liquid.zh-CN.md
@@ -154,7 +154,6 @@ import { Liquid, measureTextWidth } from '@ant-design/charts';
 
 const DemoLiquid: React.FC = () => {
   var [percent, setPercent] = useState(0.26);
-  var ref;
   var config = {
     percent,
     radius: 0.8,
@@ -216,7 +215,7 @@ const DemoLiquid: React.FC = () => {
       }
     }, 500);
   }, []);
-  return <Liquid {...config} chartRef={(chartRef) => (ref = chartRef)} />;
+  return <Liquid {...config} />;
 };
 
 export default DemoLiquid;

diff --git a/docs/guide/case.md b/docs/guide/case.md
@@ -90,7 +90,12 @@ const DemoLine: React.FC = () => {
       <button type="button" onClick={toDataURL}>
         Get base64
       </button>
-      <Line {...config} chartRef={ref} />
+      <Line
+        {...config}
+        onReady={(plot) => {
+          ref.current = plot;
+        }}
+      />
     </div>
   );
 };
@@ -291,22 +296,7 @@ const Page: React.FC = () => {
 export default Page;
 ```
 
-Plan 2: chartRef callback
-
-```typescript
-import React from 'react';
-import { Line } from '@ant-design/charts';
-
-const Page: React.FC = () => {
-  const data = [];
-  const config = {};
-  return <Line {...config} chartRef={(chart) => console.log(chart)} />;
-};
-
-export default Page;
-```
-
-plan 3: Mount it on ref
+plan 2: Mount it on ref
 
 ```typescript
 import React from 'react';

diff --git a/docs/guide/case.zh-CN.md b/docs/guide/case.zh-CN.md
@@ -90,7 +90,12 @@ const DemoLine: React.FC = () => {
       <button type="button" onClick={toDataURL}>
         获取图表信息
       </button>
-      <Line {...config} chartRef={ref} />
+      <Line
+        {...config}
+        onReady={(plot) => {
+          ref.current = plot;
+        }}
+      />
     </div>
   );
 };
@@ -291,28 +296,7 @@ const Page: React.FC = () => {
 export default Page;
 ```
 
-方案 2: 挂载到 chartRef 上
-
-```typescript
-import React from 'react';
-import { Line } from '@ant-design/charts';
-
-const Page: React.FC = () => {
-  const data = [];
-  const config = {};
-  // chart实例
-  const ref = React.useRef();
-  React.useEffect(() => {
-    console.log(ref.current);
-  }, []);
-
-  return <Line {...config} chartRef={ref} />;
-};
-
-export default Page;
-```
-
-方案 3: 挂载到 ref 上
+方案 2: 挂载到 ref 上
 
 ```typescript
 import React from 'react';

diff --git a/docs/guide/common.md b/docs/guide/common.md
@@ -17,7 +17,6 @@ nav:
 | errorTemplate | Template rendered when the chart load error occurs | (e: Error) => React.ReactNode | - |
 | className | The chart container class | string | - |
 | style | The chart container style | React.CSSProperties | - |
-| chartRef | Chart instance | (React.MutableRefObject&lt;Chart&gt;)=> void | - |
 
 ## Event
 

diff --git a/docs/guide/common.zh-CN.md b/docs/guide/common.zh-CN.md
@@ -8,16 +8,15 @@ nav:
 
 ## 通用配置
 
-| 配置项 | 描述 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| onReady | 图表加载回调 | (plot)=> void | - |
-| onEvent | 图表事件绑定 | (chart, event)=> void | - |
-| loading | 是否显示加载状态，异步获取数据时使用 | boolean | false |
-| loadingTemplate | 自定义 loading 组件 | React.ReactElement | - |
-| errorTemplate | 图表加载出错时呈现的模板 | (e: Error) => React.ReactNode | - |
-| className | 图表容器 class | string | - |
-| style | 图表容器 style | React.CSSProperties | - |
-| chartRef | 图表实例引用 | (React.MutableRefObject&lt;Chart&gt;)=> void | - |
+| 配置项          | 描述                                 | 类型                          | 默认值 |
+| --------------- | ------------------------------------ | ----------------------------- | ------ |
+| onReady         | 图表加载回调                         | (plot)=> void                 | -      |
+| onEvent         | 图表事件绑定                         | (chart, event)=> void         | -      |
+| loading         | 是否显示加载状态，异步获取数据时使用 | boolean                       | false  |
+| loadingTemplate | 自定义 loading 组件                  | React.ReactElement            | -      |
+| errorTemplate   | 图表加载出错时呈现的模板             | (e: Error) => React.ReactNode | -      |
+| className       | 图表容器 class                       | string                        | -      |
+| style           | 图表容器 style                       | React.CSSProperties           | -      |
 
 ## 事件
 

diff --git a/template/chart/index.ejs b/template/chart/index.ejs
@@ -2,17 +2,14 @@ import React, {  useEffect, useImperativeHandle, forwardRef } from 'react';
 import { <%= chartName %> as G2plot<%= chartName %>, <%= chartName %>Options as G2plotConfig } from '@antv/g2plot';
 import useChart from '../hooks/useChart';
 import { getChart } from '../util';
-import { ChartRefConfig, ContainerConfig } from '../interface';
+import { ContainerConfig } from '../interface';
 import { ErrorBoundary } from '../base';
 import ChartLoading from '../util/createLoading';
 
-export interface <%= chartName %>Config extends G2plotConfig, ContainerConfig <G2plotConfig>{
-  chartRef?: ChartRefConfig;
-}
+export interface <%= chartName %>Config extends G2plotConfig, ContainerConfig <G2plotConfig>{}
 
 const <%= chartName %>Chart = forwardRef((props: <%= chartName %>Config, ref) => {
   const {
-    chartRef,
     style = {
       height: 'inherit'
     },
@@ -23,9 +20,6 @@ const <%= chartName %>Chart = forwardRef((props: <%= chartName %>Config, ref) =>
     ...rest
   } = props;
   const { chart, container } = useChart<G2plot<%= chartName %>, <%= chartName %>Config>(G2plot<%= chartName %>, rest);
-  useEffect(() => {
-     getChart(chartRef, chart.current);
-  }, [chart.current]);
   useImperativeHandle(ref, () => ({
     getChart: () => chart.current,
   }));