perf(GISDK): SDK 支持传入额外的props

antvis · Jul 22, 2024 · 1bba97c · 1bba97c
1 parent 0847a16
commit 1bba97c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/packages/gi-sdk-app/src/index.tsx b/packages/gi-sdk-app/src/index.tsx
@@ -42,18 +42,20 @@ export interface StudioProps {
   service: (id: string) => Promise<{ data: Project }>;
   loadingText?: string;
   loadingComponent?: React.ReactElement;
+  extraParams?: Record<string, any>;
 }
 
 const Studio: React.FunctionComponent<StudioProps> = props => {
   // @ts-ignore
-  const { id, service, loadingText = '正在加载图应用...', loadingComponent } = props;
+  const { id, service, loadingText = '正在加载图应用...', loadingComponent, extraParams } = props;
   const [state, setState] = React.useState({
     isReady: false,
     assets: null,
     config: {},
     services: [],
     ThemeComponent: () => null,
     GISDK: () => <></>,
+    extraParams: {},
   });
 
   const startStudio = async () => {
@@ -118,7 +120,7 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
   }, []);
   const { assets, isReady, config, services, ThemeComponent, GISDK } = state;
   if (!isReady) {
-     // 支持传入自定义loading组件
+    // 支持传入自定义loading组件
     return loadingComponent ?? <Loading title={loadingText} />;
   }
 
@@ -127,7 +129,7 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
       {/** @ts-ignore */}
       <ThemeComponent style={{ visibility: 'hidden', position: 'absolute' }} />
       {/** @ts-ignore */}
-      <GISDK config={config} assets={assets} services={services} id={`GI_STUDIO_${id}`} />
+      <GISDK config={config} assets={assets} services={services} id={`GI_STUDIO_${id}`} extraParams={extraParams} />
     </>
   );
 };

diff --git a/packages/gi-sdk/src/GISDK.tsx b/packages/gi-sdk/src/GISDK.tsx
@@ -20,9 +20,8 @@ let updateHistoryTimer: number;
 const GISDK = (props: Props) => {
   const graphinRef = React.useRef<null | Graphin>(null);
   // @ts-ignore
-  const { children, assets, id, services, config, locales } = props;
+  const { children, assets, id, services, config, locales, extraParams = {} } = props;
   const { language = 'zh-CN', ...localeMessages } = locales || {};
-
   const GISDK_ID = React.useMemo(() => {
     if (!id) {
       const defaultId = `${Math.random().toString(36).substr(2)}`;
@@ -63,6 +62,7 @@ const GISDK = (props: Props) => {
     },
     //@ts-ignore
     GISDK_ID,
+    extraParams: {}
   });
 
   React.useEffect(() => {
@@ -71,6 +71,13 @@ const GISDK = (props: Props) => {
     });
   }, [props.config]);
 
+  // 更新参数
+  React.useEffect(() => {
+    updateState(draft => {
+      draft.extraParams = props.extraParams?.GISDK;
+    });
+  }, [props.extraParams]);
+
   const {
     layout: layoutCfg,
     components: componentsCfg = [],
@@ -361,8 +368,9 @@ const GISDK = (props: Props) => {
     return null;
   }
 
+  const { GISDK: GISDKExtraParams, ...componentExtraProps } = extraParams;
   const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } =
-    getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets);
+    getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets, componentExtraProps);
 
   const graphData = useMemo(() => {
     const nodeMap = {};

diff --git a/packages/gi-sdk/src/hooks/useComponents.tsx b/packages/gi-sdk/src/hooks/useComponents.tsx
@@ -10,7 +10,7 @@ const DEFAULT_GICC_LAYOUT = {
   },
 };
 
-const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
+const useComponents = (state, propsComponentsCfg, ComponentAssets, componentExtraProps = {}) => {
   const { config, initializer, GICC_LAYOUT, components, GISDK_ID } = state;
   const { components: stateComponentsCfg } = config;
   const ComponentCfgMap = propsComponentsCfg.concat(stateComponentsCfg).reduce((acc, curr) => {
@@ -74,6 +74,9 @@ const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
         };
       }
 
+      // 传入的额外组件props
+      const extraProps = componentExtraProps?.[id] || {};
+
       return (
         <Component
           key={id}
@@ -82,6 +85,7 @@ const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
           ComponentCfgMap={ComponentCfgMap}
           {...itemProps}
           {...GIProps}
+          {...extraProps}
         />
       );
     });

diff --git a/packages/gi-sdk/src/typing.ts b/packages/gi-sdk/src/typing.ts
@@ -73,6 +73,8 @@ export interface State<
 
   /** 是否使用缓存的布局 */
   layoutCache: boolean;
+  /** 额外参数 */
+  extraParams: Record<string, any>;
 }
 
 export interface Props {
@@ -102,6 +104,8 @@ export interface Props {
   style?: React.CSSProperties;
   className?: string;
   children?: React.ReactChildren | JSX.Element | JSX.Element[];
+  /** 额外参数 */
+  extraParams?: Record<string, any>;
 }
 
 export type AssetType =