bi-sdk-react 0.0.3 → 0.0.5

package/src/components/plugins/@antd/item-props/CheckboxProps.tsx

@@ -1,75 +1,123 @@
-import React from 'react'
-import { Form, Input, Radio, InputNumber, Table, Button, Space, Switch } from 'antd'
-import type { PropEditorProps } from './types'
-import { DeleteOutlined } from '@ant-design/icons';
+import React from "react";
+import {
+  Form,
+  Input,
+  Radio,
+  InputNumber,
+  Table,
+  Button,
+  Space,
+  Switch,
+} from "antd";
+import type { PropEditorProps } from "./types";
+import { DeleteOutlined } from "@ant-design/icons";
 
-export type CheckboxOption = { label: string; value: any }
+export type CheckboxOption = { label: string; value: any };
 export type CheckboxModel = {
-  var?: string
-  layout?: 'horizontal' | 'vertical' | 'grid'
-  lineNumber?: number
-  options: CheckboxOption[]
-}
+  var?: string;
+  layout?: "horizontal" | "vertical" | "grid";
+  lineNumber?: number;
+  options: CheckboxOption[];
+};
 
-export const CheckboxProps: React.FC<PropEditorProps<CheckboxModel>> = ({ model, onChange }) => {
-  const trigger = (key: keyof CheckboxModel, value: any) => onChange && onChange({ ...model, [key]: value })
+export const CheckboxProps: React.FC<PropEditorProps<CheckboxModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof CheckboxModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
   const setOption = (index: number, key: keyof CheckboxOption, value: any) => {
-    const options = [...(model.options || [])]
-    options[index] = { ...options[index], [key]: value }
-    trigger('options', options)
-  }
+    const options = [...(model.options || [])];
+    options[index] = { ...options[index], [key]: value };
+    trigger("options", options);
+  };
   const removeOption = (index: number) => {
-    const options = [...(model.options || [])]
-    options.splice(index, 1)
-    trigger('options', options)
-  }
+    const options = [...(model.options || [])];
+    options.splice(index, 1);
+    trigger("options", options);
+  };
   const addOption = () => {
-    trigger('options', [...(model.options || []), { label: '', value: '' }])
-  }
+    trigger("options", [...(model.options || []), { label: "", value: "" }]);
+  };
   const columns = [
     {
-      title: '选项标签',
-      dataIndex: 'label',
-      render: (_: any, r: CheckboxOption, i: number) => <Input size="small" value={r.label} onChange={e => setOption(i, 'label', e.target.value)} />
+      title: "选项标签",
+      dataIndex: "label",
+      render: (_: any, r: CheckboxOption, i: number) => (
+        <Input
+          size="small"
+          value={r.label}
+          onChange={(e) => setOption(i, "label", e.target.value)}
+        />
+      ),
     },
     {
-      title: '选项值',
-      dataIndex: 'value',
-      render: (_: any, r: CheckboxOption, i: number) => <Input size="small" value={r.value} onChange={e => setOption(i, 'value', e.target.value)} />
+      title: "选项值",
+      dataIndex: "value",
+      render: (_: any, r: CheckboxOption, i: number) => (
+        <Input
+          size="small"
+          value={r.value}
+          onChange={(e) => setOption(i, "value", e.target.value)}
+        />
+      ),
     },
     {
-      title: '操作',
+      title: "操作",
       render: (_: any, r: CheckboxOption, i: number) => (
         <Space>
           <Button danger size="small" onClick={() => removeOption(i)}>
             <DeleteOutlined />
           </Button>
         </Space>
-      )
-    }
-  ]
+      ),
+    },
+  ];
   return (
     <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
       <Form.Item label="变量名">
-        <Input size="small" value={model.var} onChange={e => trigger('var', e.target.value)} placeholder="请输入变量名" />
+        <Input
+          size="small"
+          value={model.var}
+          onChange={(e) => trigger("var", e.target.value)}
+          placeholder="请输入变量名"
+        />
       </Form.Item>
       <Form.Item label="布局">
-        <Radio.Group size="small" value={model.layout} onChange={e => trigger('layout', e.target.value)}>
+        <Radio.Group
+          size="small"
+          value={model.layout}
+          onChange={(e) => trigger("layout", e.target.value)}
+        >
           <Radio.Button value="horizontal">水平</Radio.Button>
           <Radio.Button value="vertical">垂直</Radio.Button>
           <Radio.Button value="grid">网格</Radio.Button>
         </Radio.Group>
       </Form.Item>
-      {model.layout === 'grid' && (
+      {model.layout === "grid" && (
         <Form.Item label="网格行数">
-          <InputNumber size="small" value={model.lineNumber} onChange={v => trigger('lineNumber', v)} min={1} max={10} />
+          <InputNumber
+            size="small"
+            value={model.lineNumber}
+            onChange={(v) => trigger("lineNumber", v)}
+            min={1}
+            max={10}
+          />
         </Form.Item>
       )}
-      <Form.Item>
-        <Table size="small" dataSource={model.options} columns={columns as any} pagination={false} rowKey={(_, i) => String(i)} bordered />
-        <Button size="small" block onClick={addOption}>添加选项</Button>
+      <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+        <Table
+          size="small"
+          dataSource={model.options}
+          columns={columns as any}
+          pagination={false}
+          rowKey={(_, i) => String(i)}
+          bordered
+        />
+        <Button size="small" block onClick={addOption}>
+          添加选项
+        </Button>
       </Form.Item>
     </Form>
-  )
-}
-
+  );
+};

package/src/components/plugins/@antd/item-props/ColProps.tsx

@@ -1,43 +1,157 @@
-import React from 'react'
-import { Form, InputNumber, Tooltip } from 'antd'
-import type { PropEditorProps } from './types'
-import { InfoCircleOutlined } from '@ant-design/icons';
-import styled from 'styled-components';
+import React from "react";
+import { Form, InputNumber, Tooltip } from "antd";
+import type { PropEditorProps } from "./types";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import styled from "styled-components";
 
 const HelpIcon = styled(InfoCircleOutlined)`
   vertical-align: middle;
   margin-left: 2px;
   color: var(--ant-color-text-description);
-`
+`;
 
-export type ColModel = { span?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number }
+export type ColModel = {
+  span?: number;
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  xxl?: number;
+};
 
-export const ColProps: React.FC<PropEditorProps<ColModel>> = ({ model, onChange }) => {
-  const trigger = (key: keyof ColModel, value: any) => onChange && onChange({ ...model, [key]: value })
+export const ColProps: React.FC<PropEditorProps<ColModel>> = ({
+  model,
+  onChange,
+}) => {
+  const trigger = (key: keyof ColModel, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
   return (
     <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
       <Form.Item label="默认列数">
-        <InputNumber size="small" value={model.span} min={0} max={24} step={4} onChange={v => trigger('span', v || 0)} />
+        <InputNumber
+          size="small"
+          value={model.span}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("span", v || 0)}
+        />
       </Form.Item>
-      <Form.Item label={<>xs <Tooltip title="<576px 响应式栅格"><HelpIcon /></Tooltip></>}>
-        <InputNumber size="small" value={model.xs} min={0} max={24} step={4} onChange={v => trigger('xs', v || 0)} />
+      <Form.Item
+        label={
+          <>
+            xs{" "}
+            <Tooltip title="<576px 响应式栅格">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <InputNumber
+          size="small"
+          value={model.xs}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("xs", v || 0)}
+        />
       </Form.Item>
-      <Form.Item label={<>sm <Tooltip title="≥576px 响应式栅格"><HelpIcon /></Tooltip></>}>
-        <InputNumber size="small" value={model.sm} min={0} max={24} step={4} onChange={v => trigger('sm', v || 0)} />
+      <Form.Item
+        label={
+          <>
+            sm{" "}
+            <Tooltip title="≥576px 响应式栅格">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <InputNumber
+          size="small"
+          value={model.sm}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("sm", v || 0)}
+        />
       </Form.Item>
-      <Form.Item label={<>md <Tooltip title="≥768px 响应式栅格"><HelpIcon /></Tooltip></>}>
-        <InputNumber size="small" value={model.md} min={0} max={24} step={4} onChange={v => trigger('md', v || 0)} />
+      <Form.Item
+        label={
+          <>
+            md{" "}
+            <Tooltip title="≥768px 响应式栅格">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <InputNumber
+          size="small"
+          value={model.md}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("md", v || 0)}
+        />
       </Form.Item>
-      <Form.Item label={<>lg <Tooltip title="≥992px 响应式栅格"><HelpIcon /></Tooltip></>}>
-        <InputNumber size="small" value={model.lg} min={0} max={24} step={4} onChange={v => trigger('lg', v || 0)} />
+      <Form.Item
+        label={
+          <>
+            lg{" "}
+            <Tooltip title="≥992px 响应式栅格">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <InputNumber
+          size="small"
+          value={model.lg}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("lg", v || 0)}
+        />
       </Form.Item>
-      <Form.Item label={<>xl <Tooltip title="≥1200px 响应式栅格"><HelpIcon /></Tooltip></>}>
-        <InputNumber size="small" value={model.xl} min={0} max={24} step={4} onChange={v => trigger('xl', v || 0)} />
+      <Form.Item
+        label={
+          <>
+            xl{" "}
+            <Tooltip title="≥1200px 响应式栅格">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <InputNumber
+          size="small"
+          value={model.xl}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("xl", v || 0)}
+        />
       </Form.Item>
-      <Form.Item label={<>xxl <Tooltip title="≥1600px 响应式栅格"><HelpIcon /></Tooltip></>}>
-        <InputNumber size="small" value={model.xxl} min={0} max={24} step={4} onChange={v => trigger('xxl', v || 0)} />
+      <Form.Item
+        label={
+          <>
+            xxl{" "}
+            <Tooltip title="≥1600px 响应式栅格">
+              <HelpIcon />
+            </Tooltip>
+          </>
+        }
+      >
+        <InputNumber
+          size="small"
+          value={model.xxl}
+          min={0}
+          max={24}
+          step={4}
+          onChange={(v) => trigger("xxl", v || 0)}
+        />
       </Form.Item>
     </Form>
-  )
-}
-
+  );
+};

package/src/components/plugins/@antd/item-props/EchartsProps.tsx

@@ -1,35 +1,65 @@
-import React, { useRef } from 'react'
-import { Form } from 'antd'
-import Editor from '@monaco-editor/react'
-import type { PropEditorProps } from './types'
+import React, { useRef } from "react";
+import { Form } from "antd";
+import Editor from "@monaco-editor/react";
+import type { PropEditorProps } from "./types";
+import { IconFont } from "../../../icon/IconFont";
 
-export type EchartsModel = { script: string }
+export type EchartsModel = { script: string };
 
-export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({ model, onChange }) => {
-  const ref = useRef<any>(null)
-  const setScript = (v?: string) => onChange && onChange({ ...model, script: v || '' })
+export const EchartsProps: React.FC<PropEditorProps<EchartsModel>> = ({
+  model,
+  onChange,
+}) => {
+  const ref = useRef<any>(null);
+  const setScript = (v?: string) =>
+    onChange && onChange({ ...model, script: v || "" });
   const format = () => {
     // Monaco-react does not expose format directly; relying on editor action
-    const editor = (ref.current as any)?.editor
-    editor?.getAction('editor.action.formatDocument')?.run()
-  }
+    const editor = (ref.current as any)?.editor;
+    editor?.getAction("editor.action.formatDocument")?.run();
+  };
   return (
-    <Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-      <Form.Item label={<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>Echarts 渲染脚本 <a onClick={format}>格式化</a></div>}>
-        <div style={{ border: '1px solid #d9d9d9', borderRadius: 4, textAlign: 'left' }}>
-          <div style={{ color: '#0000ff', fontSize: 14, padding: '0 50px' }}>function getOptions(data) {'{'} </div>
+    <Form layout="vertical">
+      <Form.Item
+        label={
+          <>
+            Echarts 渲染脚本{" "}
+            <a onClick={format}>
+              <IconFont type="icon-formate" /> 格式化
+            </a>
+          </>
+        }
+        className="ant-form-item-label-space"
+      >
+        <div
+          style={{
+            border: "1px solid #d9d9d9",
+            borderRadius: 4,
+            textAlign: "left",
+          }}
+        >
+          <div style={{ color: "#0000ff", fontSize: 14, padding: "0 50px" }}>
+            function getOptions(data) {"{"}{" "}
+          </div>
           <Editor
-            onMount={(editor) => { (ref.current as any) = { editor } }}
+            onMount={(editor) => {
+              (ref.current as any) = { editor };
+            }}
             height="400px"
             defaultLanguage="javascript"
             value={model.script}
-            onChange={(v) => setScript(v || '')}
-            options={{ minimap: { enabled: false }, scrollBeyondLastLine: false, tabSize: 2 }}
+            onChange={(v) => setScript(v || "")}
+            options={{
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              tabSize: 2,
+            }}
           />
-          <div style={{ color: '#0000ff', fontSize: 14, padding: '0 50px' }}>{'}'}</div>
+          <div style={{ color: "#0000ff", fontSize: 14, padding: "0 50px" }}>
+            {"}"}
+          </div>
         </div>
       </Form.Item>
     </Form>
-  )
-}
-
+  );
+};

package/src/components/plugins/@antd/item-props/HtmlProps.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import { Form } from "antd";
 import Editor from "@monaco-editor/react";
 import type { PropEditorProps } from "./types";
+import { IconFont } from "../../../icon/IconFont";
 
 export type HtmlModel = { template: string };
 
@@ -21,16 +22,14 @@ export const HtmlProps: React.FC<PropEditorProps<HtmlModel>> = ({
       <Form layout="vertical">
         <Form.Item
           label={
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-            >
-              模板 <a onClick={format}>格式化</a>
-            </div>
+            <>
+              模板
+              <a onClick={format}>
+                <IconFont type="icon-formate" /> 格式化
+              </a>
+            </>
           }
+          className="ant-form-item-label-space"
         >
           <div
             style={{

package/src/components/plugins/@antd/item-props/SelectProps.tsx

@@ -118,7 +118,7 @@ export const SelectProps: React.FC<PropEditorProps<SelectModel>> = ({
           onChange={(v) => trigger("multiple", v)}
         />
       </Form.Item>
-      <Form.Item>
+      <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
         <Table
           size="small"
           dataSource={model.options}

package/src/components/plugins/@antd/item-props/TextProps.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import { Form, Input, Select, Button, Space, ColorPicker } from "antd";
 import type { PropEditorProps } from "./types";
 
-export type TextModel = { text?: string; customStyle?: React.CSSProperties };
+export type TextModel = {
+  text?: string;
+  customStyle?: React.CSSProperties;
+  classNames?: string[];
+};
 
 export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
   model,
@@ -15,7 +19,7 @@ export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
     onChange && onChange({ ...model, customStyle: next } as any);
   };
   return (
-    <Form>
+    <Form layout="vertical">
       <Form.Item label="文本内容">
         <Input.TextArea
           size="small"
@@ -23,6 +27,14 @@ export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
           onChange={(e) => triggerModel("text", e.target.value)}
         />
       </Form.Item>
+      <Form.Item label="类名">
+        <Select
+          size="small"
+          value={model.classNames}
+          mode="tags"
+          onChange={(value) => triggerModel("classNames", value)}
+        />
+      </Form.Item>
       <div
         style={{
           display: "flex",
@@ -72,7 +84,6 @@ export const TextProps: React.FC<PropEditorProps<TextModel>> = ({
             size="small"
             value={model.customStyle?.color}
             onChange={(v) => setStyle("color", v.toHexString())}
-            style={{ width: 90 }}
             allowClear={true}
           />
         </Space.Compact>

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

@@ -1,7 +1,9 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import * as echarts from "echarts";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { EnvContext } from "../../../context/EnvContext";
+import { getVars } from "../../../utils";
 
 export type EchartsRenderProps = {
   item: any;
@@ -19,6 +21,7 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
   style,
   className,
 }) => {
+  const { initCallback, env } = useContext(EnvContext);
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [chart, setChart] = useState<echarts.ECharts | null>(null);
   const datasource = useDatasource(id, item.datasource);
@@ -68,12 +71,17 @@ export const EchartsRender: React.FC<EchartsRenderProps> = ({
       }
     }
   };
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback echarts", vars);
+  };
   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 });
     return () => {
       window.removeEventListener("resize", onResize);
       next.dispose();

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

@@ -1,6 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { getVars } from "../../../utils";
+import { EnvContext } from "../../../context/EnvContext";
 
 export type HtmlRenderProps = {
   dataSource?: Record<string, any>;
@@ -27,6 +29,7 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
   style,
   className,
 }) => {
+  const { env, initCallback } = useContext(EnvContext);
   const datasource = useDatasource(id, item.datasource);
   const keys = useMemo(() => Object.keys(datasource || {}), [datasource]);
   const func = (path: string) =>
@@ -63,6 +66,15 @@ export const HtmlRender: React.FC<HtmlRenderProps> = ({
     [template, args]
   );
 
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback html", vars);
+  };
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
+
   return (
     <div
       id={id}

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

@@ -1,8 +1,15 @@
-import React, { MouseEventHandler, useMemo } from "react";
+import React, {
+  MouseEventHandler,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
 import { Avatar, Pagination } from "antd";
 import styled, { css } from "styled-components";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { getVars } from "../../../utils";
+import { EnvContext } from "../../../context/EnvContext";
 
 type DataItem = {
   title?: string;
@@ -184,6 +191,7 @@ export const ListRender: React.FC<ListRenderProps> = ({
   style = {},
   className,
 }) => {
+  const { env, initCallback } = useContext(EnvContext);
   const datasource = useDatasource(id, item.datasource);
   const list = datasource || [];
   const pagination = useMemo(() => {
@@ -208,6 +216,15 @@ export const ListRender: React.FC<ListRenderProps> = ({
     bordered ? "p-list--bordered" : undefined,
     className,
   ];
+
+  const callback = () => {
+    const vars = getVars(env, item);
+    console.log("callback list", vars);
+  };
+
+  useEffect(() => {
+    initCallback({ id: item.id, callback });
+  }, []);
   return (
     <div
       id={id}