feat: event for data communicate

antvis · Dec 23, 2024 · daf88e9 · daf88e9
1 parent fb03a76
commit daf88e9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/src/GPTVis/Lite.tsx b/src/GPTVis/Lite.tsx
@@ -20,33 +20,33 @@ export interface GPTVisLiteProps extends Options {
    * 🧪 订阅组件事件，实验性属性
    * 用于子组件与容器组件通信
    */
-  eventSubscribe?: Record<string, (data?: any) => void>;
+  eventSubs?: Record<string, (data?: any) => void>;
 }
 
 const GPTVisLite: React.FC<GPTVisLiteProps> = ({
   children,
   components,
   rehypePlugins,
   remarkPlugins,
-  eventSubscribe: onEvent,
+  eventSubs,
   ...rest
 }) => {
   const eventBus = useMemo(() => new EventEmitter(), []);
   const contextValue = useMemo(() => ({ eventBus }), [eventBus]);
 
   useEffect(() => {
-    if (onEvent) {
-      const events = Object.keys(onEvent);
+    if (eventSubs) {
+      const events = Object.keys(eventSubs);
       for (const eventName of events) {
-        eventBus.on(eventName, onEvent[eventName]);
+        eventBus.on(eventName, eventSubs[eventName]);
       }
       return () => {
         for (const eventName of events) {
-          eventBus.off(eventName, onEvent[eventName]);
+          eventBus.off(eventName, eventSubs[eventName]);
         }
       };
     }
-  }, [eventBus, onEvent]);
+  }, [eventBus, eventSubs]);
 
   return (
     <GPTVisContext.Provider value={contextValue}>

diff --git a/src/GPTVis/demos/context-provider.tsx b/src/GPTVis/demos/context-provider.tsx
@@ -32,6 +32,7 @@ const customRenderers = { 'my-ui': MyUIRenderer };
 const components = {
   code: withChartCode({
     languageRenderers: customRenderers, // register custom block renderer
+    components: {},
   }),
 };
 

diff --git a/src/GPTVis/demos/event.tsx b/src/GPTVis/demos/event.tsx
@@ -1,19 +1,18 @@
 import type { CodeBlockComponent } from '@antv/gpt-vis';
 import { GPTVisLite, useEventPublish, withChartCode } from '@antv/gpt-vis';
-import React from 'react';
+import React, { useState } from 'react';
 
 /**
  * 自定义代码块渲染器
  */
 const MyUIRenderer: CodeBlockComponent = ({ children }) => {
-  const dispatch = useEventPublish();
-  console.log('dispatch: ', dispatch);
+  const eventPublish = useEventPublish();
   return (
     <div style={{ backgroundColor: '#f0f0f0', padding: '10px' }}>
       <p>{children}</p>
       <button
         onClick={() => {
-          dispatch('click', {});
+          eventPublish('xxxclick', {});
         }}
         type="button"
       >
@@ -25,7 +24,8 @@ const MyUIRenderer: CodeBlockComponent = ({ children }) => {
 const customRenderers = { 'my-ui': MyUIRenderer };
 const components = {
   code: withChartCode({
-    languageRenderers: customRenderers, // register custom block renderer
+    languageRenderers: customRenderers,
+    components: {},
   }),
 };
 
@@ -35,15 +35,19 @@ my ui data ...
 \`\`\`
 `;
 export default () => {
+  const [count, setCount] = useState(0);
   const onClick = (data: any) => {
     console.log('data: ', data);
-    console.log('handleClick');
+    setCount((pre) => pre + 1);
     // do something
   };
 
   return (
-    <GPTVisLite eventSubscribe={{ click: onClick }} components={components}>
-      {content}
-    </GPTVisLite>
+    <>
+      <p>count: {count}</p>
+      <GPTVisLite eventSubs={{ xxxclick: onClick }} components={components}>
+        {content}
+      </GPTVisLite>
+    </>
   );
 };
diff --git a/src/GPTVis/index.md b/src/GPTVis/index.md
@@ -4,6 +4,7 @@ group:
   order: 10
   title: 其他
 toc: content
+demo: { cols: 2 }
 ---
 
 # GPTVis 协议渲染器
@@ -28,10 +29,10 @@ GPTVis 协议的 Markdown 渲染器，基于 Markdown 语法扩展 `vis-chart`
 
 ## 容器组件通信
 
-传递组件上下文数据，用于子组件与容器组件通信
+通过发布订阅组件事件与 Context 传递数据，来用于子组件与容器组件通信。
 
-<code src="./demos/event"></code>
-<code src="./demos/context-provider"></code>
+<code src="./demos/event">订阅组件事件</code>
+<code src="./demos/context-provider">Context 传递数据</code>
 
 ## API