feat: component 支持外部定义的 props 类型传入 (#1685)

antvis · Dec 15, 2022 · 7a90906 · 7a90906
1 parent e1a84a5
commit 7a90906
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 42 deletions.
diff --git a/packages/f2/src/chart/index.ts b/packages/f2/src/chart/index.ts
@@ -46,18 +46,18 @@ export interface ComponentPosition {
 }
 
 // 统计图表
-class Chart<TRecord extends DataRecord = DataRecord> extends Component<
-  ChartProps<TRecord>,
-  ChartState
-> {
+class Chart<
+  TRecord extends DataRecord = DataRecord,
+  IProps extends ChartProps<TRecord> = ChartProps<TRecord>
+> extends Component<IProps, ChartState> {
   // 坐标系
   private componentsPosition: ComponentPosition[] = [];
 
   // controller
   public coord: CoordController;
   public scale: ScaleController;
 
-  constructor(props: ChartProps<TRecord>, context: IContext) {
+  constructor(props: IProps, context: IContext) {
     super(props);
 
     const { theme, px2hd } = context;
@@ -77,7 +77,7 @@ class Chart<TRecord extends DataRecord = DataRecord> extends Component<
     };
   }
 
-  private getStyle(props: ChartProps<TRecord>) {
+  private getStyle(props: IProps) {
     const { context, layout } = this;
     const { theme, px2hd } = context;
     const { left, top, width, height } = layout;
@@ -107,7 +107,7 @@ class Chart<TRecord extends DataRecord = DataRecord> extends Component<
   }
 
   // props 更新
-  willReceiveProps(nextProps: ChartProps<TRecord>) {
+  willReceiveProps(nextProps: IProps) {
     const { scale, coord, props: lastProps } = this;
     const { style: nextStyle, data: nextData, scale: nextScale } = nextProps;
     const { style: lastStyle, data: lastData, scale: lastScale } = lastProps;

diff --git a/packages/f2/src/components/area/withArea.tsx b/packages/f2/src/components/area/withArea.tsx
@@ -4,7 +4,10 @@ import { DataRecord } from '../../chart/Data';
 export type AreaProps<TRecord extends DataRecord = DataRecord> = LineProps<TRecord>;
 
 export default (View) => {
-  return class Area<TRecord extends DataRecord = DataRecord> extends withLine(View)<TRecord> {
+  return class Area<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends AreaProps<TRecord> = AreaProps<TRecord>
+  > extends withLine(View)<TRecord, IProps> {
     getDefaultCfg() {
       return {
         geomType: 'area',

diff --git a/packages/f2/src/components/axis/withAxis.tsx b/packages/f2/src/components/axis/withAxis.tsx
@@ -12,21 +12,21 @@ type BBox = {
 export { AxisProps };
 
 export default (View) => {
-  return class Axis<TRecord extends DataRecord = DataRecord> extends Component<
-    AxisProps<TRecord> & ChartChildProps,
-    {}
-  > {
+  return class Axis<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends AxisProps<TRecord> = AxisProps<TRecord>
+  > extends Component<IProps & ChartChildProps, {}> {
     axisStyle: Style = {};
 
-    constructor(props: AxisProps<TRecord> & ChartChildProps) {
+    constructor(props: IProps & ChartChildProps) {
       super(props);
       const { chart, field } = props;
 
       const scaleOption = this.getScaleOption(props);
       chart.setScale(field as string, scaleOption);
     }
 
-    willReceiveProps(nextProps: AxisProps<TRecord> & ChartChildProps) {
+    willReceiveProps(nextProps: IProps & ChartChildProps) {
       const { props: lastProps } = this;
       const { chart, field } = nextProps;
 
@@ -45,7 +45,7 @@ export default (View) => {
       this.updateCoord();
     }
 
-    getScaleOption(props: AxisProps<TRecord>) {
+    getScaleOption(props: IProps) {
       const { type, tickCount, range, mask, formatter, ticks, min, max, nice } = props;
 
       return {

diff --git a/packages/f2/src/components/gauge/withGauge.tsx b/packages/f2/src/components/gauge/withGauge.tsx
@@ -44,7 +44,7 @@ export interface GuageProps {
 }
 
 export default (View: ComponentType) => {
-  return class Guage extends Component<GuageProps> {
+  return class Guage<IProps extends GuageProps = GuageProps> extends Component<IProps> {
     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
@@ -18,12 +18,14 @@ export interface GuideProps {
 }
 
 export default (View: ComponentType) => {
-  return class Guide extends Component<GuideProps & ChartChildProps> {
+  return class Guide<IProps extends GuideProps = GuideProps> extends Component<
+    IProps & ChartChildProps
+  > {
     chart: Chart;
     triggerRef: Ref;
     guideBBox: any;
 
-    constructor(props: GuideProps & ChartChildProps) {
+    constructor(props: IProps & ChartChildProps) {
       super(props);
       // 创建ref
       this.triggerRef = {};

diff --git a/packages/f2/src/components/interval/withInterval.tsx b/packages/f2/src/components/interval/withInterval.tsx
@@ -15,10 +15,10 @@ export interface IntervalProps<TRecord extends DataRecord = DataRecord>
 }
 
 export default (Views) => {
-  return class Interval<TRecord extends DataRecord = DataRecord> extends Geometry<
-    TRecord,
-    IntervalProps<TRecord>
-  > {
+  return class Interval<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends IntervalProps<TRecord> = IntervalProps<TRecord>
+  > extends Geometry<TRecord, IProps> {
     getDefaultCfg() {
       return {
         geomType: 'interval',

diff --git a/packages/f2/src/components/legend/withLegend.tsx b/packages/f2/src/components/legend/withLegend.tsx
@@ -78,7 +78,9 @@ export interface LegendProps {
 }
 
 export default (View) => {
-  return class Legend extends Component<LegendProps & ChartChildProps> {
+  return class Legend<IProps extends LegendProps = LegendProps> extends Component<
+    IProps & ChartChildProps
+  > {
     legendStyle: GroupStyleProps;
     itemWidth: Number;
     constructor(props) {

diff --git a/packages/f2/src/components/line/withLine.tsx b/packages/f2/src/components/line/withLine.tsx
@@ -9,10 +9,10 @@ export interface LineProps<TRecord extends DataRecord = DataRecord> extends Geom
 }
 
 export default (View) => {
-  return class Line<TRecord extends DataRecord = DataRecord> extends Geometry<
-    TRecord,
-    LineProps<TRecord>
-  > {
+  return class Line<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends LineProps<TRecord> = LineProps<TRecord>
+  > extends Geometry<TRecord, IProps> {
     getDefaultCfg() {
       return {
         geomType: 'line',

diff --git a/packages/f2/src/components/pieLabel/withPieLabel.tsx b/packages/f2/src/components/pieLabel/withPieLabel.tsx
@@ -85,7 +85,9 @@ export interface PieLabelProps {
 }
 
 export default (View) => {
-  return class PieLabel extends Component<PieLabelProps & ChartChildProps> {
+  return class PieLabel<IProps extends PieLabelProps = PieLabelProps> extends Component<
+    IProps & ChartChildProps
+  > {
     triggerRef: Ref;
     labels: [];
     constructor(props) {

diff --git a/packages/f2/src/components/point/withPoint.tsx b/packages/f2/src/components/point/withPoint.tsx
@@ -5,10 +5,10 @@ import { DataRecord } from '../../chart/Data';
 export type PointProps<TRecord extends DataRecord = DataRecord> = GeometryProps<TRecord>;
 
 export default (View) => {
-  return class Point<TRecord extends DataRecord = DataRecord> extends Geometry<
-    TRecord,
-    PointProps
-  > {
+  return class Point<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends PointProps<TRecord> = PointProps<TRecord>
+  > extends Geometry<TRecord, IProps> {
     getDefaultCfg() {
       return {
         geomType: 'point',

diff --git a/packages/f2/src/components/sunburst/withSunburst.tsx b/packages/f2/src/components/sunburst/withSunburst.tsx
@@ -31,14 +31,15 @@ export interface SunburstProps<TRecord extends DataRecord = DataRecord> {
 }
 
 export default (View) => {
-  return class Sunburst<TRecord extends DataRecord = DataRecord> extends Component<
-    SunburstProps<TRecord>
-  > {
+  return class Sunburst<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends SunburstProps<TRecord> = SunburstProps<TRecord>
+  > extends Component<IProps> {
     coord: CoordController;
     color: Category;
     triggerRef: Ref[];
 
-    constructor(props: SunburstProps<TRecord>, context) {
+    constructor(props: IProps, context) {
       super(props, context);
       const { color, data } = props;
 

diff --git a/packages/f2/src/components/tooltip/withTooltip.tsx b/packages/f2/src/components/tooltip/withTooltip.tsx
@@ -80,8 +80,11 @@ export interface TooltipState {
 }
 
 export default (View) => {
-  return class Tooltip extends Component<TooltipProps & ChartChildProps, TooltipState> {
-    constructor(props: TooltipProps & ChartChildProps) {
+  return class Tooltip<IProps extends TooltipProps = TooltipProps> extends Component<
+    IProps & ChartChildProps,
+    TooltipState
+  > {
+    constructor(props: IProps & ChartChildProps) {
       super(props);
       this.state = {
         records: null,

diff --git a/packages/f2/src/components/treemap/withTreemap.tsx b/packages/f2/src/components/treemap/withTreemap.tsx
@@ -20,14 +20,15 @@ export interface TreemapProps<TRecord extends DataRecord = DataRecord> {
 }
 
 export default (View) => {
-  return class Treemap<TRecord extends DataRecord = DataRecord> extends Component<
-    TreemapProps<TRecord>
-  > {
+  return class Treemap<
+    TRecord extends DataRecord = DataRecord,
+    IProps extends TreemapProps<TRecord> = TreemapProps<TRecord>
+  > extends Component<IProps> {
     coord: CoordController;
     color: Category;
     triggerRef: Ref[];
 
-    constructor(props: TreemapProps<TRecord>, context) {
+    constructor(props: IProps, context) {
       super(props, context);
       const { color, data } = props;
       this.coord = new CoordController();