bi-sdk-react 0.0.51 → 0.0.52

package/src/components/plugins/@antd/items/DrawerRender.tsx

@@ -15,7 +15,6 @@ const Placeholder = styled.div`
   font-size: 12px;
 `;
 
-
 export type DrawerRenderProps = {
   item: any;
   title?: string;
@@ -46,8 +45,13 @@ export const DrawerRender: React.FC<DrawerRenderProps> = ({
   resizable = true,
   ...rest
 }) => {
-  const { designable, selectedItem, setSelectedItem, initCallback } =
-    useContext(PageContext);
+  const {
+    designable,
+    selectedItem,
+    setSelectedItem,
+    initCallback,
+    initMethod,
+  } = useContext(PageContext);
   const [open, setOpen] = useState(false);
   const [localChildren, setLocalChildren] = useState(item.children || []);
   const [size, setSize] = useState(rest.size || 400);
@@ -105,6 +109,13 @@ export const DrawerRender: React.FC<DrawerRenderProps> = ({
 
   useEffect(() => {
     initCallback({ id: item.id, callback });
+    initMethod({
+      id: item.id,
+      method: {
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+      },
+    });
   }, []);
 
   const classes = [
@@ -145,9 +156,7 @@ export const DrawerRender: React.FC<DrawerRenderProps> = ({
           footer ? (
             <Space>
               <Button onClick={() => setOpen(false)}>{cancelText}</Button>
-              <Button type={okType}>
-                {okText}
-              </Button>
+              <Button type={okType}>{okText}</Button>
             </Space>
           ) : null
         }

package/src/components/plugins/@antd/items/EchartsRender.tsx

@@ -8,10 +8,11 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 echarts.registerMap("china", chinaJson as any);
 import { PageContext } from "../../../context/PageContext";
 import { useDatasource } from "../../../hooks/datasource";
-import { CallbackType, HtmlBaseProps } from "../../../typing";
+import { CallbackType, HtmlBaseProps, SchemaItemType } from "../../../typing";
+import { useEvent } from "../../../hooks/event";
 
 export type EchartsRenderProps = {
-  item: any;
+  item: SchemaItemType;
   title?: string;
   script?: string;
   height?: number;
@@ -36,6 +37,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
   const [chart, setChart] = useState<echarts.ECharts | null>(null);
   const [signal, setSignal] = useState<number>(0);
   const datasource = useDatasource({ item, signal });
+  const { handleEvent } = useEvent(item);
 
   /**
    * 解析配置脚本
@@ -96,6 +98,25 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
     };
   };
 
+  const initEvent = () => {
+    if (!chart) return;
+    const events = (item.events || []).reduce(
+      (acc, cur) => {
+        acc[cur.name] = cur.script;
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+    ["click", "dblclick", "selectchanged"].forEach((eventName) => {
+      chart.off(eventName);
+      if (events[eventName]?.length) {
+        chart.on(eventName, (params) => {
+          handleEvent(eventName, params);
+        });
+      }
+    });
+  };
+
   useEffect(() => {
     const opt = parseConfig(script);
     if (chart && opt) {
@@ -108,13 +129,19 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
     }
   }, [chart, script, datasource]);
 
+  useEffect(() => {
+    if (!chart) return;
+    initEvent();
+  }, [chart, item.events]);
+
   useEffect(() => {
     if (!chartRef.current) return;
     const next = echarts.init(chartRef.current);
     setChart(next);
+
     const onResize = () => next.resize();
     window.addEventListener("resize", onResize);
-    initCallback({ id: item.id, callback });
+    initCallback({ id: item.id!, callback });
     return () => {
       window.removeEventListener("resize", onResize);
       next.dispose();

package/src/components/plugins/@antd/items/ModalRender.tsx

@@ -39,8 +39,13 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
   footer = true,
   ...rest
 }) => {
-  const { designable, selectedItem, setSelectedItem, initCallback } =
-    useContext(PageContext);
+  const {
+    designable,
+    selectedItem,
+    setSelectedItem,
+    initCallback,
+    initMethod,
+  } = useContext(PageContext);
   const [open, setOpen] = useState(false);
   const [localChildren, setLocalChildren] = useState(item.children || []);
 
@@ -93,6 +98,13 @@ export const ModalRender: React.FC<ModalRenderProps> = ({
 
   useEffect(() => {
     initCallback({ id: item.id, callback });
+    initMethod({
+      id: item.id,
+      method: {
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+      },
+    });
   }, []);
 
   const classes = [

package/src/components/typing.ts

@@ -105,6 +105,10 @@ export type SchemaItemType = {
     custom?: string | null;
     dataset?: DataSetType;
   };
+  events?: {
+    name: string;
+    script: string;
+  }[]
 };
 
 export type PluginType = {
@@ -116,8 +120,16 @@ export type PluginType = {
   formComponent?: React.FC<any>;
   defaultOptions?: Pick<
     SchemaItemType,
-    "props" | "children" | "cascadeIds" | "datasource" | "style"
+    "props" | "children" | "cascadeIds" | "datasource" | "events" | "style"
   >;
+  events?: {
+    name: string;
+    handler: string;
+  }[];
+  methods?: {
+    name: string;
+    handler: string;
+  }[];
 };
 type NameValue = { name?: string; value?: string };
 export type ScriptItem = { id?: string; name: string; script: string };