bi-sdk-react 0.0.26 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "private": false,
   "type": "module",
   "main": "dist/umd/js/bi-sdk.umd.min.js",

package/src/components/PageDesigner.tsx

@@ -708,7 +708,6 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                   <PageCanvas
                     ref={pageCanvasRef}
                     device={deviceType}
-                    fetch={fetch}
                   />
                 </div>
               </div>

package/src/components/context/PageContext.tsx

@@ -1,5 +1,20 @@
-import { createContext, useState } from "react";
-import { DatasetAddFunction, DatasetSelectorFunction, FetchType, PageSchema, PluginType, SchemaItemType } from "../typing";
+import { createContext, useEffect, useState } from "react";
+import {
+  CallbacksType,
+  CallbackType,
+  DatasetAddFunction,
+  DatasetSelectorFunction,
+  EnvType,
+  FetchType,
+  PageSchema,
+  PluginType,
+  SchemaItemType,
+} from "../typing";
+
+type InitCallbackParams = {
+  id: string;
+  callback: CallbackType;
+};
 
 type PageContextType = {
   pageId: string;
@@ -17,6 +32,17 @@ type PageContextType = {
   onAddAtItem?: (item: SchemaItemType) => void;
   onRemoveAtItem?: (item: SchemaItemType, index?: number) => void;
   fetch?: FetchType;
+
+  deviceWidth: number;
+  setDeviceWidth: (width: number) => void;
+  initCallback: ({ id, callback }: InitCallbackParams) => any;
+  handleCallback: (
+    item: SchemaItemType,
+    refresh?: boolean,
+    consume?: (item: Omit<SchemaItemType, "children">, data: any) => void,
+  ) => void;
+  getVars: (id: string) => Record<string, any>;
+  setVar: (item: SchemaItemType, key: string, value: any) => void;
 };
 
 export const PageContext = createContext<PageContextType>({
@@ -41,12 +67,27 @@ export const PageContext = createContext<PageContextType>({
   datasetSelector: undefined,
   datasetAdd: undefined,
   fetch: undefined,
+
+  deviceWidth: 0,
+  setDeviceWidth: () => {},
+  initCallback: () => {},
+  handleCallback: () => {},
+  getVars: () => ({}),
+  setVar: () => {},
 });
 
 type PageProviderProps = React.PropsWithChildren<
   Omit<
     Partial<PageContextType>,
-    "updateSelectedItem" | "schema" | "forceUpdate"
+    | "updateSelectedItem"
+    | "schema"
+    | "forceUpdate"
+    | "deviceWidth"
+    | "setDeviceWidth"
+    | "initCallback"
+    | "handleCallback"
+    | "getVars"
+    | "setVar"
   > &
     Pick<PageContextType, "schema" | "pageId">
 >;
@@ -64,6 +105,7 @@ export const PageProvider: React.FC<PageProviderProps> = ({
   fetch,
   children,
 }) => {
+  const [deviceWidth, setDeviceWidth] = useState<number>(0);
   const updateSelectedItem = (props?: Partial<SchemaItemType> | null) => {
     setSelectedItem?.(Object.assign(selectedItem!, props || {}));
     setSchema?.({ ...schema });
@@ -76,6 +118,60 @@ export const PageProvider: React.FC<PageProviderProps> = ({
   const onRemoveAtItem = (item: SchemaItemType) => {
     setAtItems(atItems!.filter((i) => i !== item));
   };
+
+  const [env, setEnv] = useState<EnvType>({ global: {}, local: {} });
+  const [callbacks, setCallbacks] = useState<CallbacksType>({});
+
+  const initCallback = ({
+    id,
+    callback,
+  }: {
+    id: string;
+    callback: (v: any) => void;
+  }) => {
+    setCallbacks((c) => ({ ...c, [id]: callback }));
+  };
+
+  const handleCallback = (
+    item: SchemaItemType,
+    refresh?: boolean,
+    consume?: (item: Omit<SchemaItemType, "children">, data: any) => void,
+  ) => {
+    (item.cascadeIds || []).forEach((id) => {
+      const cb = callbacks[id];
+      if (typeof cb === "function") {
+        const vars = getVars(id);
+        const res = cb(refresh, vars);
+        if (res) {
+          const { target: cbItem, data: cbData } = res;
+          consume?.(cbItem, cbData);
+        }
+      }
+    });
+  };
+
+  const getVars = (id: string) => {
+    return {
+      ...env.global,
+      ...(env.local[id || ""] || {}),
+    };
+  };
+
+  const setVar = (item: SchemaItemType, key: string, value: any) => {
+    const next = { ...env };
+    (item.cascadeIds || []).forEach((id) => {
+      next.local[id] = next.local[id] || {};
+      next.local[id][key] = value;
+    });
+  };
+
+  useEffect(() => {
+    const nextGlobal: Record<string, any> = {};
+    (schema.variables || []).forEach((item) => {
+      nextGlobal[item.name] = item.value;
+    });
+    setEnv((e: EnvType) => ({ ...e, global: nextGlobal }));
+  }, [schema.variables]);
   return (
     <PageContext.Provider
       value={{
@@ -96,6 +192,13 @@ export const PageProvider: React.FC<PageProviderProps> = ({
         },
         onAddAtItem,
         onRemoveAtItem,
+
+        deviceWidth,
+        setDeviceWidth: setDeviceWidth || (() => {}),
+        initCallback,
+        handleCallback,
+        getVars,
+        setVar,
       }}
     >
       {children}

package/src/components/hooks/datasource.ts

@@ -1,24 +1,43 @@
-import { useMemo } from "react";
+import { useContext, useEffect, useState } from "react";
+import { PageContext } from "../context/PageContext";
 import { SchemaItemType } from "../typing";
 
-export const useDatasource = (id?: string, datasource?: SchemaItemType["datasource"]) => {
-  return useMemo(() => {
-    if (!datasource) {
-      return null;
+export type Signal = string | number;
+
+export const useDatasource = (item: SchemaItemType, signal?: Signal): any => {
+  const [datasource, setDatasource] = useState<any>(null);
+  const { fetch, getVars } = useContext(PageContext);
+  useEffect(() => {
+    if (!item?.datasource) {
+      return setDatasource(null);
     }
-    const source = datasource.source || "custom";
+    const source = item?.datasource.source || "custom";
     switch (source) {
       case "custom":
         try {
-          return JSON.parse(datasource.custom || "[]");
+          return setDatasource(JSON.parse(item?.datasource.custom || "[]"));
         } catch (e) {
-          return null;
+          return setDatasource(null);
+        }
+      case "dataset":
+        if (!item?.datasource.dataset || !fetch?.dataset) {
+          return setDatasource(null);
         }
+        const vars = getVars(item.id || "");
+        fetch
+          .dataset(item?.datasource.dataset.id, vars)
+          .then((res) => setDatasource(res?.data || null))
+          .catch((err) => {
+            console.error(err);
+            setDatasource(null);
+          });
       case "define":
         break;
       default:
         break;
     }
-    return null;
-  }, [id, datasource]);
+    return setDatasource(null);
+  }, [item?.datasource, signal]);
+
+  return datasource;
 };

package/src/components/index.ts

@@ -9,22 +9,16 @@ import DropContainer from "./dnd/DropContainer";
 
 import { PageContext, PageProvider } from "./context/PageContext";
 
-import { EnvContext } from "./context/EnvContext";
-
-import { handleCallback } from "./utils";
-
 import { PluginType } from "./typing";
 
 export {
-  PageCanvas,
-  PageDesigner,
-  PageSchema,
   DropContainer,
+  PageCanvas,
   PageContext,
+  PageDesigner,
   PageProvider,
-  EnvContext,
+  PageSchema,
   plugins,
-  PropEditorProps,
   PluginType,
-  handleCallback,
+  PropEditorProps,
 };

package/src/components/layout/PageCanvas.tsx

@@ -7,14 +7,11 @@ import React, {
   useState,
 } from "react";
 import styled from "styled-components";
-import { DropContainer } from "../dnd/DropContainer";
-import { CallbacksType, EnvType, FetchType } from "../typing";
 import { PageContext } from "../context/PageContext";
-import { EnvProvider } from "../context/EnvContext";
+import { DropContainer } from "../dnd/DropContainer";
 
 export type PageCanvasProps = {
   device?: "desktop" | "mobile" | "tablet";
-  fetch?: FetchType;
 };
 
 const Wrapper = styled.div`
@@ -53,12 +50,9 @@ const Wrapper = styled.div`
 `;
 
 export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
-  ({ device = "desktop", fetch }, ref) => {
-    const { schema, forceUpdate } = useContext(PageContext);
+  ({ device = "desktop" }, ref) => {
+    const { schema, forceUpdate, setDeviceWidth } = useContext(PageContext);
     const rootRef = useRef<HTMLDivElement | null>(null);
-    const [canvasWidth, setCanvasWidth] = useState(0);
-    const [callbacks, setCallbacks] = useState<CallbacksType>({});
-    const [env, setEnv] = useState<EnvType>({ global: {}, local: {} });
 
     const items = useMemo(() => schema.items || [], [schema.items]);
 
@@ -75,14 +69,6 @@ export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
       forceUpdate?.();
     };
 
-    useEffect(() => {
-      const nextGlobal: Record<string, any> = {};
-      (schema.variables || []).forEach((item) => {
-        nextGlobal[item.name] = item.value;
-      });
-      setEnv((e) => ({ ...e, global: nextGlobal }));
-    }, [schema.variables]);
-
     const computeCanvasWidth = () => {
       const parent = rootRef.current?.parentElement;
       const rect = parent?.getBoundingClientRect();
@@ -91,17 +77,7 @@ export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
         setTimeout(computeCanvasWidth, 10);
         return;
       }
-      setCanvasWidth(width ? width - 36 : 0);
-    };
-
-    const initCallback = ({
-      id,
-      callback,
-    }: {
-      id: string;
-      callback: (v: any) => void;
-    }) => {
-      setCallbacks((c) => ({ ...c, [id]: callback }));
+      setDeviceWidth(width ? width - 36 : 0);
     };
 
     useEffect(() => {
@@ -124,24 +100,16 @@ export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
     }));
 
     return (
-      <EnvProvider
-        deviceWidth={canvasWidth}
-        env={env}
-        callbacks={callbacks}
-        initCallback={initCallback}
-        fetch={fetch}
-      >
-        <Wrapper ref={rootRef}>
-          <DropContainer
-            ancestors={[]}
-            list={localList}
-            onListChange={onLocalListChange}
-            className="page-canvas"
-          />
-        </Wrapper>
-      </EnvProvider>
+      <Wrapper ref={rootRef}>
+        <DropContainer
+          ancestors={[]}
+          list={localList}
+          onListChange={onLocalListChange}
+          className="page-canvas"
+        />
+      </Wrapper>
     );
-  }
+  },
 );
 
 export default PageCanvas;

package/src/components/panel/LayerPanel.tsx

@@ -137,7 +137,6 @@ export const LayerPanel: React.FC = () => {
     if (!info.dropToGap) {
       if (info.node.dataRef.type === "slot") {
         const { slot, origin } = info.node.dataRef;
-        console.log(slot, JSON.stringify(origin));
         origin[slot] = origin[slot] || [];
         origin[slot].push(dragObj);
       }
@@ -184,7 +183,6 @@ export const LayerPanel: React.FC = () => {
 
   const treeData = useMemo(() => {
     const computeTreeData = (list: any[] = []): any[] => {
-      console.log(list)
       return list.map((item) => ({
         key: item.key,
         title: <>{item?.title || formatType(item.type, (item as any).slot)}</>,

package/src/components/panel/PropertiesPanel.tsx

@@ -531,7 +531,7 @@ export const PropertiesPanel: React.FC<{
         )}
       </div>
 
-      {!!datasetSelector && (
+      {!!datasetSelector && selectedItem && (
         <Drawer
           title="选择数据集"
           size={800}
@@ -542,15 +542,25 @@ export const PropertiesPanel: React.FC<{
         >
           {datasetSelector((dataset) => {
             datasource!.dataset = dataset;
+            onUpdateSelectedItem({
+              ...selectedItem,
+              datasource: {...selectedItem.datasource, dataset},
+            });
             setDatasetSelectorOpen(false);
           })}
         </Drawer>
       )}
       {!!datasetAdd &&
+        selectedItem &&
         datasetAddOpen &&
         datasetAdd(
+          selectedItem,
           (dataset) => {
             datasource!.dataset = dataset;
+            onUpdateSelectedItem({
+              ...selectedItem,
+              datasource: {...selectedItem.datasource, dataset},
+            });
             setDatasetAddOpen(false);
           },
           () => {

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

@@ -1,9 +1,8 @@
 import { Button, type ButtonProps } from "antd";
 import React, { MouseEventHandler, useContext } from "react";
-import { HtmlBaseProps, SchemaItemType } from "../../../typing";
-import { EnvContext } from "../../../context/EnvContext";
+import { PageContext } from "../../../context/PageContext";
 import { IconFont } from "../../../icon/IconFont";
-import { handleCallback } from "../../../utils";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
 
 export type ButtonRenderProps = {
   text?: string;
@@ -13,7 +12,7 @@ export type ButtonRenderProps = {
   block?: ButtonProps["block"];
   shape?: ButtonProps["shape"];
   ghost?: ButtonProps["ghost"];
-  item?: SchemaItemType;
+  item: SchemaItemType;
 } & HtmlBaseProps;
 
 export const ButtonRender: React.FC<ButtonRenderProps> = ({
@@ -29,11 +28,13 @@ export const ButtonRender: React.FC<ButtonRenderProps> = ({
   style,
   className,
 }) => {
-  const { env, callbacks } = useContext(EnvContext);
+  const { handleCallback } = useContext(PageContext);
   const danger = type === "danger";
   const realType = danger ? "default" : type;
   const click: MouseEventHandler = () => {
-    if (env && item && callbacks) handleCallback(env, item, callbacks);
+    handleCallback(item, false, (target, data) => {
+      console.log("点击回调:", { target, data });
+    });
   };
   const iconNode =
     typeof icon === "string" ? (

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

@@ -1,14 +1,14 @@
 import { Radio, type RadioGroupProps } from "antd";
 import React, { useContext } from "react";
+import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps, SchemaItemType } from "../../../typing";
-import { EnvContext } from "../../../context/EnvContext";
-import { handleCallback, setVar } from "../../../utils";
+
 
 export type CapsuleRenderProps = {
   var?: string;
   size?: RadioGroupProps['size']
   options?: { label: string; value: any }[];
-  item?: SchemaItemType;
+  item: SchemaItemType;
   onChange?: (v: any) => void;
 } & HtmlBaseProps;
 
@@ -22,11 +22,11 @@ export const CapsuleRender: React.FC<CapsuleRenderProps> = ({
   style,
   className,
 }) => {
-  const { env, callbacks } = useContext(EnvContext);
+  const { handleCallback, setVar } = useContext(PageContext);
   const change = (v: any) => {
     if (onChange) onChange(v);
-    if (env && item && varName) setVar(env, item, varName, v);
-    if (env && item && callbacks) handleCallback(env, item, callbacks);
+    if (item && varName) setVar(item, varName, v);
+    handleCallback(item);
   };
   return (
     <span id={id}>

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

@@ -1,15 +1,15 @@
 import { Checkbox } from "antd";
 import React, { useContext } from "react";
+import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps, SchemaItemType } from "../../../typing";
-import { EnvContext } from "../../../context/EnvContext";
-import { handleCallback, setVar } from "../../../utils";
+
 
 export type CheckboxRenderProps = {
   var?: string;
   layout?: "horizontal" | "vertical" | "grid";
   lineNumber?: number;
   options?: { label: string; value: any }[];
-  item?: SchemaItemType;
+  item: SchemaItemType;
   onChange?: (value: any[]) => void;
 } & HtmlBaseProps;
 
@@ -24,7 +24,7 @@ export const CheckboxRender: React.FC<CheckboxRenderProps> = ({
   style,
   className,
 }) => {
-  const { env, callbacks } = useContext(EnvContext);
+  const { handleCallback, setVar } = useContext(PageContext);
   const groupStyle: React.CSSProperties = {
     ...style,
     display: layout === "grid" ? "grid" : "flex",
@@ -35,8 +35,8 @@ export const CheckboxRender: React.FC<CheckboxRenderProps> = ({
   };
   const change = (v: any[]) => {
     if (onChange) onChange(v);
-    if (env && item && varName) setVar(env, item, varName, v);
-    if (env && item && callbacks) handleCallback(env, item, callbacks);
+    if (item && varName) setVar(item, varName, v);
+    handleCallback(item);
   };
   return (
     <span id={id}>

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

@@ -1,10 +1,8 @@
 import { Col } from "antd";
 import React, { useContext, useEffect, useMemo, useState } from "react";
-import { PageItem } from "../../../layout/PageItem";
+import { PageContext } from "../../../context/PageContext";
 import { DropContainer } from "../../../dnd/DropContainer";
 import { HtmlBaseProps, SchemaItemType } from "../../../typing";
-import { PageContext } from "../../../context/PageContext";
-import { EnvContext } from "../../../context/EnvContext";
 
 export type ColRenderProps = {
   span?: number;
@@ -32,7 +30,7 @@ export const ColRender: React.FC<ColRenderProps> = ({
   style = {},
   className,
 }) => {
-  const { deviceWidth } = useContext(EnvContext);
+  const { deviceWidth } = useContext(PageContext);
   const [localChildren, setLocalChildren] = useState(item.children || []);
 
   const onLocalChildrenChange = (list: any[]) => {

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

@@ -1,18 +1,18 @@
 import { DatePicker, type DatePickerProps, TimePicker } from "antd";
 import dayjs, { Dayjs } from "dayjs";
 import React, { useContext } from "react";
-import { HtmlBaseProps } from "../../../typing";
-import { EnvContext } from "../../../context/EnvContext";
-import { handleCallback, setVar } from "../../../utils";
+import { PageContext } from "../../../context/PageContext";
+import { HtmlBaseProps, SchemaItemType } from "../../../typing";
+
 
 export type DatePickerRenderProps = {
   var?: string;
-  size?: DatePickerProps['size']
+  size?: DatePickerProps["size"];
   allowClear?: boolean;
   type?: "date" | "time" | "month" | "year" | "range";
   showTime?: boolean;
   value?: string | [string, string];
-  item?: any;
+  item: SchemaItemType;
   onChange?: (value?: string | [string, string]) => void;
 } & HtmlBaseProps;
 
@@ -29,11 +29,11 @@ export const DatePickerRender: React.FC<DatePickerRenderProps> = ({
   style = {},
   className,
 }) => {
-  const { env, callbacks } = useContext(EnvContext);
+  const { handleCallback, setVar } = useContext(PageContext);
   const change = (val?: string | [string, string]) => {
     if (onChange) onChange(val);
-    if (env && item && varName) setVar(env, item, varName, val as any);
-    if (env && item && callbacks) handleCallback(env, item, callbacks);
+    if (item && varName) setVar(item, varName, val as any);
+    handleCallback(item);
   };
   if (type === "time") {
     const v =

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

@@ -1,9 +1,8 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
 import * as echarts from "echarts";
-import { HtmlBaseProps } from "../../../typing";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { PageContext } from "../../../context/PageContext";
 import { useDatasource } from "../../../hooks/datasource";
-import { EnvContext } from "../../../context/EnvContext";
-import { getVars } from "../../../utils";
+import { CallbackType, HtmlBaseProps } from "../../../typing";
 
 export type EchartsRenderProps = {
   item: any;
@@ -21,10 +20,16 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
   style,
   className,
 }) => {
-  const { initCallback, env } = useContext(EnvContext);
+  const { initCallback } = useContext(PageContext);
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [chart, setChart] = useState<echarts.ECharts | null>(null);
-  const datasource = useDatasource(id, item.datasource);
+  const [signal, setSignal] = useState<number>(0);
+  const datasource = useDatasource(item, signal);
+  const datasourceRef = useRef(datasource);
+  useEffect(() => {
+    datasourceRef.current = datasource;
+  }, [datasource]);
+
   const parseConfig = (configStr: string): echarts.EChartsOption | null => {
     try {
       return JSON.parse(configStr);
@@ -51,7 +56,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
           const module = undefined;
           const exports = undefined;
           ${configStr}
-        `
+        `,
         );
         return (safeEval as any)(
           echarts,
@@ -63,7 +68,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
           String,
           Number,
           Boolean,
-          datasource
+          datasource,
         );
       } catch (evalError) {
         console.error("ECharts 配置解析失败:", evalError);
@@ -71,10 +76,22 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
       }
     }
   };
-  const callback = () => {
-    const vars = getVars(env, item);
-    console.log("callback echarts", vars);
+  const callback: CallbackType = (refresh = true, args?: any) => {
+    if (refresh) setSignal((s) => s + 1);
+    return {
+      target: item,
+      data: datasourceRef.current,
+    };
+  };
+
+  const initOption = () => {
+    const opt = parseConfig(script);
+    if (chart && opt) {
+      chart.setOption(opt);
+      setTimeout(() => chart.resize(), 50);
+    }
   };
+
   useEffect(() => {
     if (!chartRef.current) return;
     const next = echarts.init(chartRef.current);
@@ -87,13 +104,11 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
       next.dispose();
     };
   }, []);
+
   useEffect(() => {
-    const opt = parseConfig(script);
-    if (chart && opt) {
-      chart.setOption(opt);
-      setTimeout(() => chart.resize(), 50);
-    }
+    initOption();
   }, [chart, script, datasource]);
+
   return (
     <div
       id={id}