fix: 修复 react 工程的报错 (#1645)

antvis · Nov 15, 2022 · 4418bf3 · 4418bf3
1 parent 8554eef
commit 4418bf3
Show file tree

Hide file tree

Showing 25 changed files with 252 additions and 239 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -1,42 +1,39 @@
-import { JSX } from '../index';
+import { JSX, isEqual, GroupStyleProps } from '@antv/f-engine';
 import { ScaleConfig } from '../deps/f2-scale/src';
 import { each, findIndex, isArray } from '@antv/util';
-import { isEqual } from '@antv/f-engine';
-import { Layout, Component } from '../index';
-import Coord from '../coord';
+import { Component } from '../index';
 import { Children } from '../index';
-// types
-import LayoutController from '../controller/layout';
 import CoordController from '../controller/coord';
 import ScaleController from '../controller/scale';
 
-interface Point {
+export interface Point {
   x: number;
   y: number;
 }
 
-export interface Props {
-  zIndex?: number;
+export interface ChartProps {
   data: any;
   scale?: any;
   coord?: any;
   start?: Point;
   end?: Point;
-  children: any;
+  children?: any;
+  style?: GroupStyleProps;
+  theme?: any;
+}
+
+export interface ChartState {
+  filters: any;
 }
 
 export interface ChartChildProps {
   data?: any;
   chart?: Chart;
-  coord?: Coord;
-  layout?: Layout;
+  coord?: any;
+  layout?: any;
   [k: string]: any;
 }
 
-// type Scales = {
-//   [field: string]: Scale;
-// };
-
 export interface PositionLayout {
   position: 'top' | 'right' | 'bottom' | 'left';
   width: number;
@@ -49,127 +46,88 @@ export interface ComponentPosition {
 }
 
 // 统计图表
-class Chart extends Component {
-  data: any;
-
-  private layout: Layout;
+class Chart extends Component<ChartProps, ChartState> {
   // 坐标系
-  private coord: Coord;
   private componentsPosition: ComponentPosition[] = [];
 
   // controller
-  private layoutController: LayoutController;
-  private coordController: CoordController;
-  private scaleController: ScaleController;
-  scale: ScaleController;
-
-  constructor(props, context?, updater?) {
-    super(props, context, updater);
+  public coord: CoordController;
+  public scale: ScaleController;
 
-    const { data, coord: coordOption, scale = [] } = props;
+  constructor(props: ChartProps) {
+    super(props);
 
-    this.layoutController = new LayoutController();
-    this.coordController = new CoordController();
-    this.scaleController = new ScaleController(data);
-    this.scale = this.scaleController;
-
-    const { coordController, scaleController } = this;
-
-    // 坐标系
-    this.coord = coordController.create(coordOption, {});
-
-    // scale
-    scaleController.create(scale);
+    const { data } = props;
 
-    this.data = data;
+    this.coord = new CoordController();
+    this.scale = new ScaleController(data);
 
     // state
     this.state = {
       filters: {},
     };
   }
 
+  private getStyle(props: ChartProps) {
+    const { context, style } = this;
+    const { theme, px2hd } = context;
+    const { left, top, width, height } = style;
+    const { style: customStyle } = props;
+    return px2hd({
+      left,
+      top,
+      width,
+      height,
+      ...theme.chart,
+      ...customStyle,
+    });
+  }
+
   willMount() {
-    const { props, layoutController, coordController } = this;
+    const { props, coord, scale } = this;
+
+    const { scale: scaleOptions, coord: coordOption } = props;
+
     const style = this.getStyle(props);
-    const layout = layoutController.create(style);
-    coordController.updateLayout(layout);
+    coord.updateLayout(style);
 
-    this.layout = layout;
+    // 初始化 scale
+    scale.create(scaleOptions);
+    // 初始化 coord
+    coord.create(coordOption);
   }
 
   // props 更新
-  willReceiveProps(nextProps) {
-    const { layoutController, coordController, scaleController, props: lastProps } = this;
+  willReceiveProps(nextProps: ChartProps) {
+    const { scale, coord, props: lastProps } = this;
     const { style: nextStyle, data: nextData, scale: nextScale } = nextProps;
     const { style: lastStyle, data: lastData, scale: lastScale } = lastProps;
 
-    // 布局
+    // style 更新
     if (!isEqual(nextStyle, lastStyle)) {
       const style = this.getStyle(nextProps);
-      this.layout = layoutController.create(style);
-      coordController.updateLayout(this.layout);
+      coord.updateLayout(style);
     }
 
     if (nextData !== lastData) {
-      scaleController.changeData(nextData);
+      scale.changeData(nextData);
     }
 
     // scale
     if (!isEqual(nextScale, lastScale)) {
-      scaleController.update(nextScale);
+      scale.update(nextScale);
     }
   }
 
-  willUpdate() {
-    const { coordController, props } = this;
-    // render 时要重置 coord 范围，重置后需要让所有子组件都重新render
-    // 所以这里不比较是否有差异，每次都新建，让所有子组件重新render
-    this.coord = coordController.create(props.coord, this.layout);
-  }
-
-  private getStyle(props) {
-    const { context, style } = this;
-    const { theme, px2hd } = context;
-    const { left, top, width, height } = style;
-    const { style: customStyle } = props;
-    return px2hd({
-      left,
-      top,
-      width,
-      height,
-      ...theme.chart,
-      ...customStyle,
-    });
-  }
-
   // 给需要显示的组件留空
   layoutCoord(layout: PositionLayout) {
-    const { coord } = this;
-    const { position, width: boxWidth, height: boxHeight } = layout;
-    let { left, top, width, height } = coord;
-    switch (position) {
-      case 'left':
-        left += boxWidth;
-        width = Math.max(0, width - boxWidth);
-        break;
-      case 'right':
-        width = Math.max(0, width - boxWidth);
-        break;
-      case 'top':
-        top += boxHeight;
-        height = Math.max(0, height - boxHeight);
-        break;
-      case 'bottom':
-        height = Math.max(0, height - boxHeight);
-        break;
-    }
-    coord.update({ left, top, width, height });
+    this.coord.useLayout(layout);
   }
 
   resetCoordLayout() {
-    const { coord, layout } = this;
-    coord.update(layout);
+    const { coord, props } = this;
+    const style = this.getStyle(props);
+    coord.updateLayout(style);
   }
 
   updateCoordLayout(layout: PositionLayout | PositionLayout[]) {
@@ -264,15 +222,15 @@ class Chart extends Component {
   }
 
   setScale(field: string, option: ScaleConfig) {
-    this.scaleController.setScale(field, option);
+    this.scale.setScale(field, option);
   }
 
   getScale(field: string) {
-    return this.scaleController.getScale(field);
+    return this.scale.getScale(field);
   }
 
   getScales() {
-    return this.scaleController.getScales();
+    return this.scale.getScales();
   }
 
   getXScales() {
@@ -291,8 +249,12 @@ class Chart extends Component {
     });
   }
 
+  getLayout() {
+    return this.coord.layout;
+  }
+
   getCoord() {
-    return this.coord;
+    return this.coord.coord;
   }
 
   filter(field: string, condition) {
@@ -323,17 +285,19 @@ class Chart extends Component {
   }
 
   render(): JSX.Element {
-    const { props, layout, coord } = this;
+    const { props } = this;
     const { children, data: originData } = props;
     if (!originData) return null;
     const data = this._getRenderData();
+    const layout = this.getLayout();
+    const coord = this.getCoord();
 
     return Children.map(children, (child) => {
       return Children.cloneElement(child, {
         chart: this,
+        layout,
         coord,
         data,
-        layout,
       });
     });
   }

diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -1,6 +1,5 @@
 import { deepMix, isFunction, mix, each, clone, isString, isNumber } from '@antv/util';
-import { jsx } from '../../index';
-import { isEqual } from '@antv/f-engine';
+import { jsx, isEqual, ComponentType, ClassComponent } from '@antv/f-engine';
 import { PositionLayout } from '../../chart/index';
 import { Component } from '@antv/f-engine';
 import { Style, Tick, AxisProps } from './types';
@@ -10,7 +9,7 @@ type BBox = {
   width: number;
 };
 
-export default (View) => {
+export default (View: ComponentType<any>): ClassComponent<AxisProps> => {
   return class Axis extends Component<AxisProps, {}> {
     axisStyle: Style = {};
 

diff --git a/packages/f2/src/components/gauge/index.tsx b/packages/f2/src/components/gauge/index.tsx
@@ -1,5 +1,5 @@
-import withGauge from './withGauge';
+import withGauge, { GuageProps } from './withGauge';
 import GaugeView from './gaugeView';
 
-export { withGauge, GaugeView };
+export { GuageProps, withGauge, GaugeView };
 export default withGauge(GaugeView);
diff --git a/packages/f2/src/components/gauge/withGauge.tsx b/packages/f2/src/components/gauge/withGauge.tsx
@@ -1,5 +1,4 @@
-import { jsx } from '../../index';
-import { Component } from '@antv/f-engine';
+import { jsx, Component, ComponentType, ClassComponent } from '@antv/f-engine';
 
 const getPoint = (cener, angle, r) => {
   const x = cener.x + Math.cos(angle) * r;
@@ -31,8 +30,18 @@ const getTicks = (
   return ticks;
 };
 
-export default (View) => {
-  return class Guage extends Component {
+export interface GuageProps {
+  startAngle?: number;
+  endAngle?: number;
+  tickCount?: number;
+  tickOffset?: number;
+  tickLength?: number;
+  r?: number;
+  center?: { x: number; y: number };
+}
+
+export default (View: ComponentType): ClassComponent<GuageProps> => {
+  return class Guage extends Component<GuageProps> {
     render() {
       const { props, context } = this;
       const { startAngle, endAngle, tickCount, center, r, tickOffset, tickLength } = props;

diff --git a/packages/f2/src/components/guide/withGuide.tsx b/packages/f2/src/components/guide/withGuide.tsx
@@ -1,5 +1,5 @@
 import { jsx } from '../../index';
-import { Component, Ref } from '@antv/f-engine';
+import { Component, Ref, ComponentType, ClassComponent } from '@antv/f-engine';
 import { isString, isNil, isFunction } from '@antv/util';
 import Chart from '../../chart';
 import { computeLayout } from '@antv/f-engine';
@@ -10,7 +10,7 @@ function isInBBox(bbox, point) {
   return minX <= x && maxX >= x && minY <= y && maxY >= y;
 }
 
-export default (View) => {
+export default (View: ComponentType): ClassComponent<any> => {
   return class Guide extends Component {
     chart: Chart;
     triggerRef: Ref;

diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
@@ -1,9 +1,9 @@
-import { jsx } from '../../index';
+import { jsx, ClassComponent } from '@antv/f-engine';
 import { deepMix, isFunction, isNil, mix } from '@antv/util';
 import Geometry from '../geometry';
 import * as LabelViews from './label';
 
-export default (Views) => {
+export default (Views): ClassComponent<any> => {
   return class Interval extends Geometry {
     getDefaultCfg() {
       return {