bi-sdk-react 0.0.70 → 0.0.72

package/package.json

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

package/src/components/hooks/event.ts

@@ -14,22 +14,22 @@ export const useEvent = (item: SchemaItemType) => {
 
   const handleEvent = (eventName: string, arg?: any) => {
     const script = events[eventName];
+
     if (script) {
-      if (script) {
-        try {
-          const safeEval = new Function(
-            "console",
-            "Math",
-            "Date",
-            "Array",
-            "Object",
-            "String",
-            "Number",
-            "Boolean",
-            "callMethod",
-            "updateEnv",
-            "param",
-            `
+      try {
+        const safeEval = new Function(
+          "console",
+          "Math",
+          "Date",
+          "Array",
+          "Object",
+          "String",
+          "Number",
+          "Boolean",
+          "callMethod",
+          "updateEnv",
+          "param",
+          `
           "use strict";
           const window = undefined;
           const document = undefined;
@@ -43,28 +43,27 @@ export const useEvent = (item: SchemaItemType) => {
           const sessionStorage = undefined;
           ${script}
           `,
-          );
-          return (safeEval as any)(
-            console,
-            Math,
-            Date,
-            Array,
-            Object,
-            String,
-            Number,
-            Boolean,
-            callMethod,
-            updateEnv,
-            {
-              item,
-              sourceId: item.id,
-              arg,
-            },
-          );
-        } catch (evalError) {
-          console.error("点击事件脚本执行失败:", evalError);
-          return null;
-        }
+        );
+        return (safeEval as any)(
+          console,
+          Math,
+          Date,
+          Array,
+          Object,
+          String,
+          Number,
+          Boolean,
+          callMethod,
+          updateEnv,
+          {
+            item,
+            sourceId: item.id,
+            arg,
+          },
+        );
+      } catch (evalError) {
+        console.error("点击事件脚本执行失败:", evalError);
+        return null;
       }
     }
   };

package/src/components/layout/PageItem.tsx

@@ -107,6 +107,24 @@ const Toolbar: React.FC<{
             margin: "0 -24px",
           },
         }}
+        modalRender={(node) => (
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+            }}
+            onMouseUp={(e) => {
+              e.stopPropagation();
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {node}
+          </div>
+        )}
         footer={
           <Space>
             <Button
@@ -158,7 +176,11 @@ const Toolbar: React.FC<{
           }}
         />
       </Modal>
-      <ToolbarWrap>
+      <ToolbarWrap
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
         {!!ancestors?.length ? (
           <Dropdown
             placement="topLeft"

package/src/components/plugins/@antd/index.ts

@@ -160,6 +160,10 @@ export const TablePlugin: PluginType = {
       ],
     },
   },
+  events: [
+    { name: "分页切换/分页大小变化", handler: "onPageChange" },
+    { name: "点击单元格", handler: "columnClick" },
+  ],
 };
 
 export const ListPlugin: PluginType = {

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

@@ -1,26 +1,28 @@
-import React, { useState } from "react";
 import {
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  AlignRightOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  ThunderboltOutlined
+} from "@ant-design/icons";
+import {
+  Button,
+  Descriptions,
+  Divider,
   Form,
+  Input,
+  InputNumber,
+  Modal,
   Radio,
+  Select,
+  Space,
   Switch,
-  InputNumber,
-  Divider,
   Table,
-  Space,
-  Button,
-  Modal,
-  Input,
   type TableProps as AntTableProps,
-  Select,
 } from "antd";
+import React, { useState } from "react";
 import type { PropEditorProps } from "./types";
-import {
-  AlignCenterOutlined,
-  AlignLeftOutlined,
-  AlignRightOutlined,
-  DeleteOutlined,
-  EditOutlined,
-} from "@ant-design/icons";
 
 export type TableColumnModel = {
   title: string;
@@ -72,13 +74,22 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
   const editingForm =
     editingIndex != null && model.columns[editingIndex]
       ? model.columns[editingIndex]
-      : { title: "", dataIndex: "", width: "", align: "left", ellipsis: false, customRender: "", className: "" };
+      : {
+          title: "",
+          dataIndex: "",
+          width: "",
+          align: "left",
+          ellipsis: false,
+          customRender: "",
+          className: "",
+        };
   const columns = [
     { title: "列名", dataIndex: "title" },
     {
       title: "数据索引",
       dataIndex: "dataIndex",
-      render: (v: string | string[]) => (typeof v === "string" ? v : v.join(".")),
+      render: (v: string | string[]) =>
+        typeof v === "string" ? v : v.join("."),
     },
     {
       title: "操作",
@@ -220,6 +231,41 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
           onChange={(e) => trigger("paginationItemClassNames", e)}
         />
       </Form.Item>
+      <Divider>组件事件</Divider>
+      <Descriptions
+        size="small"
+        layout="vertical"
+        column={1}
+        colon={false}
+        items={[
+          {
+            key: "onPageChange",
+            label: <><ThunderboltOutlined /> onPageChange：分页切换/分页大小变化</>,
+            children: (
+              <div>
+                <label>事件参数取值：</label>
+                <div>const {`{sourceId, item, arg}`} = param;</div>
+                <div>const {`{current, size}`} = arg;</div>
+              </div>
+            ),
+          },
+          {
+            key: "columnClick",
+            label: <><ThunderboltOutlined /> columnClick：点击单元格</>,
+            children: (
+              <div>
+                事件参数取值：
+                <div>const {`{sourceId, item, arg}`} = param;</div>
+                <div>const {`{column, rowData}`} = arg;</div>
+              </div>
+            ),
+          },
+        ]}
+        styles={{
+          label: { color: "var(--ant-color-text)", alignItems: "center" },
+          content: { color: "var(--ant-color-text-label)" },
+        }}
+      />
       <Modal
         title="编辑列"
         open={editVisible}
@@ -231,7 +277,7 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
           <div
             style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}
           >
-            <Form.Item label="列名" style={{marginBottom: 10}}>
+            <Form.Item label="列名" style={{ marginBottom: 10 }}>
               <Input
                 value={editingForm.title}
                 onChange={(e) =>
@@ -239,7 +285,7 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 }
               />
             </Form.Item>
-            <Form.Item label="数据索引" style={{marginBottom: 10}}>
+            <Form.Item label="数据索引" style={{ marginBottom: 10 }}>
               <Select
                 mode="tags"
                 value={
@@ -250,7 +296,7 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 onChange={(e) => setColumn(editingIndex!, { dataIndex: e })}
               />
             </Form.Item>
-            <Form.Item label="宽度" style={{marginBottom: 10}}>
+            <Form.Item label="宽度" style={{ marginBottom: 10 }}>
               <Input
                 value={editingForm.width}
                 onChange={(e) =>
@@ -258,7 +304,7 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 }
               />
             </Form.Item>
-            <Form.Item label="对齐" style={{marginBottom: 10}}>
+            <Form.Item label="对齐" style={{ marginBottom: 10 }}>
               <Radio.Group
                 value={editingForm.align}
                 onChange={(e) =>
@@ -276,13 +322,17 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 </Radio.Button>
               </Radio.Group>
             </Form.Item>
-            <Form.Item label="省略" style={{marginBottom: 10}}>
+            <Form.Item label="省略" style={{ marginBottom: 10 }}>
               <Switch
                 checked={!!editingForm.ellipsis}
                 onChange={(v) => setColumn(editingIndex!, { ellipsis: v })}
               />
             </Form.Item>
-            <Form.Item label="自定义渲染" tooltip="支持自定义渲染，使用{{}}包裹表达式，例如：{{text}}，{{record.变量名}}，{{index}}，{{$g.变量名}}，{{$e.变量名}}" style={{gridColumn: "span 2 / span 2", marginBottom: 10}}>
+            <Form.Item
+              label="自定义渲染"
+              tooltip="支持自定义渲染，使用{{}}包裹表达式，例如：{{text}}，{{record.变量名}}，{{index}}，{{$g.变量名}}，{{$e.变量名}}"
+              style={{ gridColumn: "span 2 / span 2", marginBottom: 10 }}
+            >
               <Input.TextArea
                 value={editingForm.customRender}
                 onChange={(e) =>
@@ -290,7 +340,10 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
                 }
               />
             </Form.Item>
-            <Form.Item label="类名" style={{gridColumn: "span 2 / span 2", marginBottom: 10}}>
+            <Form.Item
+              label="类名"
+              style={{ gridColumn: "span 2 / span 2", marginBottom: 10 }}
+            >
               <Input
                 value={editingForm.className}
                 onChange={(e) =>

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

@@ -3,6 +3,7 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps } from "../../../typing";
 import { useDatasource } from "../../../hooks/datasource";
+import { useEvent } from "../../../hooks/event";
 
 export type TableRenderProps = {
   columns?: any[];
@@ -43,6 +44,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
   paginationItemClassNames = [],
 }) => {
   const { initCallback, globalVars, env } = useContext(PageContext);
+  const { handleEvent } = useEvent(item);
   const [page, setPage] = useState<{
     current: number;
     pageSize: number;
@@ -79,40 +81,60 @@ export const TableRender: React.FC<TableRenderProps> = ({
   const dataSource = useDatasource({ item, query: page });
   const realColumns = columns.map((item: any) => ({
     ...item,
-    render:
-      !item.customRender ||
-      (typeof item.customRender === "string" && item.customRender.trim() === "")
-        ? item.render
-        : (text: any, record: any, index: number) => {
-            const html = (item.customRender || "").replace(
-              /{\s*{\s*([^}]+)\s*}\s*}/g,
-              (_match: any, p1: string) => {
-                try {
-                  return (func(p1) as any)(
-                    console,
-                    Math,
-                    Date,
-                    Array,
-                    Object,
-                    String,
-                    Number,
-                    Boolean,
-                    globalVars,
-                    env.global,
-                    text,
-                    record,
-                    index,
-                  );
-                } catch {
-                  return "";
-                }
-              },
+    render: (text: any, record: any, index: number) => {
+      if (
+        !item.customRender ||
+        (typeof item.customRender === "string" &&
+          item.customRender.trim() === "")
+      ) {
+        return item.dataIndex?.length ? (
+          <div
+            onClick={() =>
+              handleEvent("columnClick", { column: item, rowData: record })
+            }
+          >
+            {text}
+          </div>
+        ) : (
+          <></>
+        );
+      }
+      const html = (item.customRender || "").replace(
+        /{\s*{\s*([^}]+)\s*}\s*}/g,
+        (_match: any, p1: string) => {
+          try {
+            return (func(p1) as any)(
+              console,
+              Math,
+              Date,
+              Array,
+              Object,
+              String,
+              Number,
+              Boolean,
+              globalVars,
+              env.global,
+              text,
+              record,
+              index,
             );
-            return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
-          },
+          } catch {
+            return "";
+          }
+        },
+      );
+      return (
+        <div
+          dangerouslySetInnerHTML={{ __html: html }}
+          onClick={() =>
+            handleEvent("columnClick", { column: item, rowData: record })
+          }
+        ></div>
+      );
+    },
   }));
 
-  const data: {total: number, records: any[]} = useMemo(() => {
+  const data: { total: number; records: any[] } = useMemo(() => {
     let ds;
     if (!dataKey || dataKey.trim() === "") {
       ds = dataSource || [];
@@ -189,9 +211,11 @@ export const TableRender: React.FC<TableRenderProps> = ({
             },
             onChange: (page: number, pageSize: number) => {
               setPage({ current: page, pageSize });
+              handleEvent("onPageChange", { current: page, size: pageSize });
             },
             onShowSizeChange: (current: number, size: number) => {
               setPage({ current, pageSize: size });
+              handleEvent("onPageChange", { current, size });
             },
           } as PaginationProps),
     [