@hzab/list-render 1.12.0 → 1.12.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.12.1
+
+fix: card 模式添加 loading
+
 # @hzab/list-render@1.12.0
 
 feat: 处理 list-render 表头有 children 的情况，接入 edit-table

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "",
   "main": "src",
   "scripts": {

package/src/card-render/index.jsx

@@ -1,123 +1,127 @@
-import { useEffect, useState, useMemo, useCallback, useRef } from "react";
-import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
-import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
-import _ from "lodash";
-import DetailRender from "@hzab/schema-descriptions";
-import { removeInTableFalseFields } from "../common/utils";
-import "./index.less";
-import { use } from "react";
-
-const scenario = "table-render";
-
-function CardRender(props) {
-  const [schema, setSchema] = useState({});
-
-  const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {} } = props;
-  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
-  const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
-
-  const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
-
-  useEffect(() => {
-    const schemas = removeInTableFalseFields(props?.schema);
-    setSchema(schemas);
-  }, [props?.schema, props?.schema?.schema]);
-
-  const getColRender = (record, index) => {
-    const _colConf = props.config?.colConf?._$actions || {};
-
-    const slotProps = { record, index, ...functionProps };
-
-    if (Slots?.tableActionsSlot) {
-      return <Slots.tableActionsSlot {...slotProps} />;
-    }
-
-    //编辑按钮权限
-    const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
-
-    //详情按钮权限
-    const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
-
-    //删除按钮权限
-    const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
-
-    //删除按钮提示
-    const delTips =
-      hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
-
-    return (
-      <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
-        {_hasDetail ? (
-          <Button
-            type="link"
-            onClick={() => {
-              props.onDetail && props.onDetail(record, index);
-            }}
-          >
-            {tableDetail}
-          </Button>
-        ) : null}
-        {_hasEdit ? (
-          <Button
-            type="link"
-            onClick={() => {
-              props.onEdit && props.onEdit(record, index);
-            }}
-          >
-            {tableEdit}
-          </Button>
-        ) : null}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
-        {_hasDel ? (
-          <Popconfirm
-            placement="topRight"
-            title={delTips}
-            onConfirm={() => {
-              props.onDel && props.onDel(record, index);
-            }}
-          >
-            <Button type="link" danger>
-              {tableDel}
-            </Button>
-          </Popconfirm>
-        ) : null}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
-      </div>
-    );
-  };
-
-  const ItemRender = ({ item, index }) => {
-    return CardItemRender ? (
-      <CardItemRender item={item} index={index} functionProps={functionProps} />
-    ) : (
-      <DetailRender
-        config={props.config}
-        schema={schema}
-        bordered={false}
-        data={item}
-        schemaScope={{ scenario: "table-render", ...props.schemaScope }}
-        components={props.components}
-        {...cardProps}
-      />
-    );
-  };
-  return (
-    <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
-      {props.list?.map((item, index) => {
-        return (
-          <div key={item["id"]} className="item-render-card">
-            {props.hasAction !== false ? (
-              <div className="item-render-card-title">{getColRender(item, index)}</div>
-            ) : null}
-            <div className="item-render-card-content">
-              <ItemRender item={item} index={index} />
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default CardRender;
+import { useEffect, useState, useMemo, useCallback, useRef } from "react";
+import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover, Spin } from "antd";
+import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
+import _ from "lodash";
+import DetailRender from "@hzab/schema-descriptions";
+import { removeInTableFalseFields } from "../common/utils";
+import "./index.less";
+import { use } from "react";
+
+const scenario = "table-render";
+
+function CardRender(props) {
+  const [schema, setSchema] = useState({});
+
+  const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {}, loading } = props;
+  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
+  const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
+
+  const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
+
+  useEffect(() => {
+    const schemas = removeInTableFalseFields(props?.schema);
+    setSchema(schemas);
+  }, [props?.schema, props?.schema?.schema]);
+
+  const getColRender = (record, index) => {
+    const _colConf = props.config?.colConf?._$actions || {};
+
+    const slotProps = { record, index, ...functionProps };
+
+    if (Slots?.tableActionsSlot) {
+      return <Slots.tableActionsSlot {...slotProps} />;
+    }
+
+    //编辑按钮权限
+    const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+
+    //详情按钮权限
+    const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
+
+    //删除按钮权限
+    const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
+
+    //删除按钮提示
+    const delTips =
+      hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
+
+    return (
+      <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
+        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
+        {_hasDetail ? (
+          <Button
+            type="link"
+            onClick={() => {
+              props.onDetail && props.onDetail(record, index);
+            }}
+          >
+            {tableDetail}
+          </Button>
+        ) : null}
+        {_hasEdit ? (
+          <Button
+            type="link"
+            onClick={() => {
+              props.onEdit && props.onEdit(record, index);
+            }}
+          >
+            {tableEdit}
+          </Button>
+        ) : null}
+        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
+        {_hasDel ? (
+          <Popconfirm
+            placement="topRight"
+            title={delTips}
+            onConfirm={() => {
+              props.onDel && props.onDel(record, index);
+            }}
+          >
+            <Button type="link" danger>
+              {tableDel}
+            </Button>
+          </Popconfirm>
+        ) : null}
+        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
+      </div>
+    );
+  };
+
+  const ItemRender = ({ item, index }) => {
+    return CardItemRender ? (
+      <CardItemRender item={item} index={index} functionProps={functionProps} />
+    ) : (
+      <DetailRender
+        config={props.config}
+        schema={schema}
+        bordered={false}
+        data={item}
+        schemaScope={{ scenario: "table-render", ...props.schemaScope }}
+        components={props.components}
+        {...cardProps}
+      />
+    );
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
+        {props.list?.map((item, index) => {
+          return (
+            <div key={item["id"]} className="item-render-card">
+              {props.hasAction !== false ? (
+                <div className="item-render-card-title">{getColRender(item, index)}</div>
+              ) : null}
+              <div className="item-render-card-content">
+                <ItemRender item={item} index={index} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Spin>
+
+  );
+}
+
+export default CardRender;