feat: 优化 withGuide ts 定义

packages/f2/src/components/guide/views/Arc.tsx

@@ -1,11 +1,12 @@
 import { jsx, ArcStyleProps } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
+import { GuideProps } from '../withGuide';
 
-type ArcGuideProps = {
+export interface ArcGuideProps extends GuideProps {
   points?: { x: number; y: number }[] | null;
-  style?: ArcStyleProps;
+  style?: Partial<ArcStyleProps> | ((record?) => Partial<ArcStyleProps>);
   theme?: any;
-};
+}
 
 export default (props: ArcGuideProps) => {
   const { theme = {} } = props;

packages/f2/src/components/guide/views/Image.tsx

@@ -1,16 +1,17 @@
 import { jsx, ImageStyleProps } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
+import { GuideProps } from '../withGuide';
 
-type ImageGuideProps = {
+export interface ImageGuideProps extends GuideProps {
   src: string;
   points?: { x: number; y: number }[] | null;
   attrs?: ImageStyleProps;
-  style?: ImageStyleProps;
-  offsetX?: number;
-  offsetY?: number;
-};
+  style?: Partial<ImageStyleProps> | ((record?) => Partial<ImageStyleProps>);
+  offsetX?: number | string;
+  offsetY?: number | string;
+}
 
-const defaultProps: ImageGuideProps = {
+const defaultProps: Omit<ImageGuideProps, "records"> = {
   offsetX: 0,
   offsetY: 0,
   points: [],

packages/f2/src/components/guide/views/Line.tsx

@@ -1,13 +1,14 @@
 import { jsx, LineStyleProps } from '@antv/f-engine';
+import { GuideProps } from '../withGuide';
 import { isArray, deepMix } from '@antv/util';
 
-type LineGuideProps = {
+export interface LineGuideProps extends GuideProps {
   points?: { x: number; y: number }[] | null;
-  style?: LineStyleProps;
-  offsetX?: number | number[];
-  offsetY?: number | number[];
+  style?: Partial<LineStyleProps> | ((record?) => Partial<LineStyleProps>);
+  offsetX?: number | string | (number | string)[];
+  offsetY?: number | string | (number | string)[];
   theme?: any;
-};
+}
 
 export default (props: LineGuideProps, context) => {
   const { theme = {} } = props;

packages/f2/src/components/guide/views/Lottie.tsx

@@ -1,20 +1,21 @@
 import { jsx, AnimationProps } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
 import Lottie from '@antv/f-lottie';
+import { GuideProps } from '../withGuide';
 
-type LottieGuideProps = {
+export interface LottieGuideProps extends GuideProps {
   points?: { x: number; y: number }[] | null;
   data?: string;
-  offsetX?: number | number[];
-  offsetY?: number | number[];
-  animation: AnimationProps;
-  options: {
+  offsetX?: number | string | (string | number)[];
+  offsetY?: number | string | (string | number)[];
+  animation: AnimationProps | ((points?, chart?) => AnimationProps);
+  options?: {
     loop: boolean | number;
     autoplay: boolean;
   };
-};
+}
 
-const defaultProps: LottieGuideProps = {
+const defaultProps: Omit<LottieGuideProps, 'records'> = {
   offsetX: 0,
   offsetY: 0,
   points: [],

packages/f2/src/components/guide/views/Point.tsx

@@ -1,13 +1,14 @@
 import { jsx, CircleStyleProps } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
+import { GuideProps } from '../withGuide';
 
-type PointGuideProps = {
-  style?: CircleStyleProps;
-  offsetX?: number;
-  offsetY?: number;
+export interface PointGuideProps extends GuideProps {
+  style?: Partial<CircleStyleProps> | ((record?) => Partial<CircleStyleProps>);
+  offsetX?: number | string;
+  offsetY?: number | string;
   points?: { x: number; y: number }[] | null;
   theme?: any;
-};
+}
 
 export default (props: PointGuideProps, context) => {
   const { theme } = props;

packages/f2/src/components/guide/views/Rect.tsx

@@ -1,11 +1,12 @@
 import { jsx, RectStyleProps } from '@antv/f-engine';
 import { deepMix } from '@antv/util';
+import { GuideProps } from '../withGuide';
 
-type RectGuideProps = {
+export interface RectGuideProps extends GuideProps {
   points?: { x: number; y: number }[] | null;
-  style?: RectStyleProps;
+  style?: Partial<RectStyleProps> | ((record?) => Partial<RectStyleProps>);
   theme?: any;
-};
+}
 
 export default (props: RectGuideProps) => {
   const { theme = {} } = props;

packages/f2/src/components/guide/views/Tag.tsx

@@ -1,11 +1,12 @@
 import { jsx, Component, computeLayout } from '@antv/f-engine';
+import { GuideProps } from '../withGuide';
 
-interface TagGuideProps {
+export interface TagGuideProps extends GuideProps {
   points?: { x: number; y: number }[] | null;
   canvasWidth?: number;
   canvasHeight?: number;
-  offsetX?: number;
-  offsetY?: number;
+  offsetX?: number | string;
+  offsetY?: number | string;
   autoAdjust?: boolean;
   /**
    * 箭头的方向
@@ -29,7 +30,7 @@ interface TagGuideProps {
   textStyle?: any;
 }
 
-const defaultProps: TagGuideProps = {
+const defaultProps: Omit<TagGuideProps, "records"> = {
   offsetX: 0,
   offsetY: 0,
   points: [],
@@ -75,7 +76,7 @@ const Label = ({ content, background, textStyle }) => {
     </rect>
   );
 };
-export default class Tag extends Component {
+export default class Tag extends Component<TagGuideProps> {
   render() {
     const { props, context } = this;
     const { px2hd } = context;

packages/f2/src/components/guide/views/Text.tsx

@@ -1,14 +1,15 @@
 import { jsx, TextStyleProps } from '@antv/f-engine';
+import { GuideProps } from '../withGuide';
 import { deepMix } from '@antv/util';
 
-type TextGuideProps = {
+export interface TextGuideProps extends GuideProps {
   points?: { x: number; y: number }[] | null;
   content: string | number;
-  style?: TextStyleProps;
-  offsetX?: number;
-  offsetY?: number;
+  style?: Partial<TextStyleProps> | ((record?) => Partial<TextStyleProps>);
+  offsetX?: number | string;
+  offsetY?: number | string;
   theme?: any;
-};
+}
 
 export default (props: TextGuideProps, context) => {
   const { theme = {} } = props;

packages/f2/src/components/guide/withGuide.tsx

@@ -10,10 +10,10 @@ export interface GuideProps {
   [key: string]: any;
 }
 
-export default (View: ComponentType) => {
-  return class Guide<IProps extends GuideProps = GuideProps> extends Component<
-    IProps & ChartChildProps
-  > {
+export default function<IProps extends GuideProps = GuideProps>(
+  View: ComponentType<IProps & ChartChildProps>
+): ComponentType<IProps & ChartChildProps> {
+  return class Guide extends Component<IProps & ChartChildProps> {
     chart: Chart;
 
     constructor(props: IProps & ChartChildProps) {
@@ -101,4 +101,4 @@ export default (View: ComponentType) => {
       );
     }
   };
-};
+}