bi-sdk-react 0.0.55 → 0.0.56

package/package.json

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

package/src/components/example.ts

@@ -539,22 +539,21 @@ return {
                 {
                   type: "b-table",
                   name: "数据表格",
+                  datasource: {
+                    source: "custom",
+                    custom:
+                      '[\r\n  {\r\n    "name": "汉族",\r\n    "count": 1204\r\n  },\r\n  {\r\n    "name": "少数民族",\r\n    "count": 80\r\n  }\r\n]',
+                  },
                   props: {
                     title: "民族分布",
                     size: "small",
                     bordered: true,
                     showHeader: true,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                    hideOnSinglePage: true,
+                    showTotal: true,
                     pageSize: 10,
-                    dataSource: [
-                      {
-                        name: "汉族",
-                        count: 1204,
-                      },
-                      {
-                        name: "少数民族",
-                        count: 80,
-                      },
-                    ],
                     columns: [
                       {
                         title: "民族",

package/src/components/hooks/datasource.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { PageContext } from "../context/PageContext";
 import { SchemaItemType } from "../typing";
 
@@ -7,9 +7,10 @@ export type Signal = string | number;
 type Props = {
   item: SchemaItemType;
   signal?: Signal;
+  query?: Record<string, any>;
 };
 
-export const useDatasource = ({ item, signal }: Props): any => {
+export const useDatasource = ({ item, signal, query }: Props): any => {
   const { fetch, getVars, setItemData } = useContext(PageContext);
   const [datasource, setDatasource] = useState<any>(null);
   useEffect(() => {
@@ -44,7 +45,7 @@ export const useDatasource = ({ item, signal }: Props): any => {
         }
         const vars = getVars(item.id || "");
         fetch
-          .dataset(item?.datasource.dataset.id, vars)
+          .dataset(item?.datasource.dataset.id, { ...vars, ...query })
           .then((res) => {
             setDatasource(res || null);
             setItemData?.(item.id || "", res || null);
@@ -60,7 +61,7 @@ export const useDatasource = ({ item, signal }: Props): any => {
         setItemData?.(item.id || "", null);
         break;
     }
-  }, [item?.datasource, signal]);
+  }, [item?.datasource, signal, query]);
 
   return datasource;
 };

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

@@ -140,19 +140,17 @@ export const TablePlugin: PluginType = {
       source: "custom",
       datasourceId: null,
       scriptId: null,
-      custom: null,
+      custom: "[{\"name\":\"苹果\",\"count\":12},{\"name\":\"华为\",\"count\":803},{\"name\":\"OPPO\",\"count\":654},{\"name\":\"vivo\",\"count\":719}]",
     },
     props: {
       size: "default",
       bordered: true,
       showHeader: true,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      hideOnSinglePage: true,
+      showTotal: true,
       pageSize: 10,
-      dataSource: [
-        { name: "苹果", count: 12 },
-        { name: "华为", count: 803 },
-        { name: "OPPO", count: 654 },
-        { name: "vivo", count: 719 },
-      ],
       columns: [
         { title: "品牌", dataIndex: "name" },
         { title: "日销量（件）", dataIndex: "count" },

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

@@ -11,6 +11,7 @@ import {
   Modal,
   Input,
   type TableProps as AntTableProps,
+  Select,
 } from "antd";
 import type { PropEditorProps } from "./types";
 import {
@@ -31,6 +32,15 @@ export type TableColumnModel = {
 export type TableModel = {
   pageSize?: number;
   columns: TableColumnModel[];
+  dataKey?: string;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  hideOnSinglePage?: boolean;
+  showTotal?: boolean;
+  headerCellClassNames?: string[];
+  bodyCellClassNames?: string[];
+  paginationRootClassNames?: string[];
+  paginationItemClassNames?: string[];
 } & Pick<AntTableProps, "bordered" | "showHeader" | "size">;
 
 export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
@@ -88,6 +98,13 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
   return (
     <div>
       <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
+        <Form.Item label="数据键" tooltip="数据键用于指定数据来源中的数据项，例如：'data.items'">
+          <Input
+            size="small"
+            value={model.dataKey}
+            onChange={(e) => trigger("dataKey", e.target.value)}
+          />
+        </Form.Item>
         <Form.Item label="大小">
           <Radio.Group
             size="small"
@@ -113,6 +130,34 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
             onChange={(v) => trigger("showHeader", v)}
           />
         </Form.Item>
+        <Form.Item label="显示分页大小选择器">
+          <Switch
+            size="small"
+            checked={!!model.showSizeChanger}
+            onChange={(v) => trigger("showSizeChanger", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示快速跳转">
+          <Switch
+            size="small"
+            checked={!!model.showQuickJumper}
+            onChange={(v) => trigger("showQuickJumper", v)}
+          />
+        </Form.Item>
+        <Form.Item label="隐藏单页分页">
+          <Switch
+            size="small"
+            checked={!!model.hideOnSinglePage}
+            onChange={(v) => trigger("hideOnSinglePage", v)}
+          />
+        </Form.Item>
+        <Form.Item label="显示分页总数">
+          <Switch
+            size="small"
+            checked={!!model.showTotal}
+            onChange={(v) => trigger("showTotal", v)}
+          />
+        </Form.Item>
         <Form.Item label="分页大小">
           <InputNumber
             size="small"
@@ -133,6 +178,47 @@ export const TableProps: React.FC<PropEditorProps<TableModel>> = ({
       <Button size="small" onClick={addColumn} block>
         添加列
       </Button>
+      <Divider style={{marginTop: 10}}>样式设置</Divider>
+      <Form.Item label="表头单元格类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.headerCellClassNames || [])}
+          onChange={(e) =>
+            trigger("headerCellClassNames", e)
+          }
+        />
+      </Form.Item>
+      <Form.Item label="表格单元格类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.bodyCellClassNames || [])}
+          onChange={(e) =>
+            trigger("bodyCellClassNames", e)
+          }
+        />
+      </Form.Item>
+      <Form.Item label="分页根类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.paginationRootClassNames || [])}
+          onChange={(e) =>
+            trigger("paginationRootClassNames", e)
+          }
+        />
+      </Form.Item>
+      <Form.Item label="分页项类名" layout="vertical">
+        <Select
+          mode="tags"
+          size="small"
+          value={(model.paginationItemClassNames || [])}
+          onChange={(e) =>
+            trigger("paginationItemClassNames", e)
+          }
+        />
+      </Form.Item>
       <Modal
         title="编辑列"
         open={editVisible}

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

@@ -1,45 +1,54 @@
-import { Table, type TableProps } from "antd";
-import React, { useContext, useEffect } from "react";
+import { PaginationProps, Table, type TableProps } from "antd";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps } from "../../../typing";
+import { useDatasource } from "../../../hooks/datasource";
 
 export type TableRenderProps = {
-  dataSource?: any[];
   columns?: any[];
+  dataKey?: string;
   pageSize?: number;
   bordered?: boolean;
   size?: TableProps["size"];
   showHeader?: boolean;
   item: any;
+  showSizeChanger?: boolean;
+  showQuickJumper?: boolean;
+  hideOnSinglePage?: boolean;
+  showTotal?: boolean;
+  headerCellClassNames?: string[];
+  bodyCellClassNames?: string[];
+  paginationRootClassNames?: string[];
+  paginationItemClassNames?: string[];
 } & HtmlBaseProps;
 
 export const TableRender: React.FC<TableRenderProps> = ({
   id,
   item,
-  dataSource = [],
   columns = [],
+  dataKey = "",
   pageSize = 10,
   bordered = true,
   size,
   showHeader = true,
+  showSizeChanger = true,
+  showQuickJumper = true,
+  hideOnSinglePage = true,
+  showTotal = true,
   style = {},
   className,
+  headerCellClassNames = [],
+  bodyCellClassNames = [],
+  paginationRootClassNames = [],
+  paginationItemClassNames = [],
 }) => {
   const { initCallback } = useContext(PageContext);
-  const pagination =
-    !pageSize || pageSize <= dataSource.length
-      ? false
-      : {
-          total: dataSource.length,
-          pageSize,
-          size,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          hideOnSinglePage: true,
-          pageSizeOptions: ["10", "20", "30", "40"],
-          showTotal: (total: number, range: [number, number]) =>
-            `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`,
-        };
+  const [page, setPage] = useState<{
+    current: number;
+    pageSize: number;
+  }>({ current: 1, pageSize });
+
+  const dataSource = useDatasource({ item, query: page });
   const realColumns = columns.map((item: any) => ({
     ...item,
     render:
@@ -69,7 +78,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
               const module = undefined;
               const exports = undefined;
               ${item.customRender}
-            `
+            `,
             );
             return (safeEval as any)(
               console,
@@ -82,15 +91,68 @@ export const TableRender: React.FC<TableRenderProps> = ({
               Boolean,
               text,
               record,
-              index
+              index,
             );
           },
   }));
 
+  const data = useMemo(() => {
+    if (!dataKey || dataKey.trim() === "") {
+      return dataSource || [];
+    }
+    const keys = dataKey.split(".");
+    let result = dataSource || [];
+    for (const key of keys) {
+      if (result[key]) {
+        result = result[key];
+      } else {
+        result = [];
+        break;
+      }
+    }
+    return result || [];
+  }, [dataKey, dataSource]);
+
+  const pagination = useMemo(
+    () =>
+      !pageSize || pageSize >= (data || []).length
+        ? false
+        : ({
+            total: (data || []).length,
+            current: page.current,
+            pageSize: page.pageSize,
+            size,
+            showSizeChanger,
+            showQuickJumper,
+            hideOnSinglePage,
+            pageSizeOptions: ["10", "20", "30", "40"],
+            showTotal: showTotal
+              ? (total: number, range: [number, number]) =>
+                  `共 ${total} 条记录，显示第 ${range[0]}-${range[1]} 条`
+              : undefined,
+            locale: {
+              items_per_page: "/ 页",
+              jump_to: "跳转至第",
+              page: "页",
+            },
+            onChange: (page: number, pageSize: number) => {
+              setPage({ current: page, pageSize });
+            },
+            onShowSizeChange: (current: number, size: number) => {
+              setPage({ current, pageSize: size });
+            },
+          } as PaginationProps),
+    [data, page, pageSize, size, showSizeChanger, showQuickJumper, hideOnSinglePage, showTotal],
+  );
+
   const callback = () => {
     console.log("callback table");
   };
 
+  useEffect(() => {
+    setPage({ current: 1, pageSize });
+  }, [pageSize]);
+
   useEffect(() => {
     initCallback({ id: item.id, callback });
   }, []);
@@ -98,7 +160,7 @@ export const TableRender: React.FC<TableRenderProps> = ({
   return (
     <Table
       id={id}
-      dataSource={dataSource}
+      dataSource={data || []}
       columns={realColumns as any}
       pagination={pagination as any}
       bordered={bordered}
@@ -107,6 +169,18 @@ export const TableRender: React.FC<TableRenderProps> = ({
       rowKey={(_, index) => String(index)}
       style={{ padding: 1, ...style }}
       className={className}
+      classNames={{
+        header: {
+          cell: (headerCellClassNames || []).join(" "),
+        },
+        body: {
+          cell: (bodyCellClassNames || []).join(" "),
+        },
+        pagination: {
+          root: (paginationRootClassNames || []).join(" "),
+          item: (paginationItemClassNames || []).join(" "),
+        },
+      }}
     />
   );
 };