@hzab/list-render 1.12.0 → 1.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/src/card-render/index.jsx +131 -123
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ # @hzab/list-render@1.12.2
2
+
3
+ fix: card 模式无数据时显示优化
4
+
5
+ # @hzab/list-render@1.12.1
6
+
7
+ fix: card 模式添加 loading
8
+
1
9
  # @hzab/list-render@1.12.0
2
10
 
3
11
  feat: 处理 list-render 表头有 children 的情况，接入 edit-table
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hzab/list-render",
3
- "version": "1.12.0",
3
+ "version": "1.12.2",
4
4
  "description": "",
5
5
  "main": "src",
6
6
  "scripts": {
package/src/card-render/index.jsx CHANGED
@@ -1,123 +1,131 @@
1
- import { useEffect, useState, useMemo, useCallback, useRef } from "react";
2
- import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
3
- import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
4
- import _ from "lodash";
5
- import DetailRender from "@hzab/schema-descriptions";
6
- import { removeInTableFalseFields } from "../common/utils";
7
- import "./index.less";
8
- import { use } from "react";
9
-
10
- const scenario = "table-render";
11
-
12
- function CardRender(props) {
13
- const [schema, setSchema] = useState({});
14
-
15
- const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {} } = props;
16
- const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
17
- const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
18
-
19
- const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
20
-
21
- useEffect(() => {
22
- const schemas = removeInTableFalseFields(props?.schema);
23
- setSchema(schemas);
24
- }, [props?.schema, props?.schema?.schema]);
25
-
26
- const getColRender = (record, index) => {
27
- const _colConf = props.config?.colConf?._$actions || {};
28
-
29
- const slotProps = { record, index, ...functionProps };
30
-
31
- if (Slots?.tableActionsSlot) {
32
- return <Slots.tableActionsSlot {...slotProps} />;
33
- }
34
-
35
- //编辑按钮权限
36
- const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
37
-
38
- //详情按钮权限
39
- const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
40
-
41
- //删除按钮权限
42
- const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
43
-
44
- //删除按钮提示
45
- const delTips =
46
- hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
47
-
48
- return (
49
- <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
50
- {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
51
- {_hasDetail ? (
52
- <Button
53
- type="link"
54
- onClick={() => {
55
- props.onDetail && props.onDetail(record, index);
56
- }}
57
- >
58
- {tableDetail}
59
- </Button>
60
- ) : null}
61
- {_hasEdit ? (
62
- <Button
63
- type="link"
64
- onClick={() => {
65
- props.onEdit && props.onEdit(record, index);
66
- }}
67
- >
68
- {tableEdit}
69
- </Button>
70
- ) : null}
71
- {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
72
- {_hasDel ? (
73
- <Popconfirm
74
- placement="topRight"
75
- title={delTips}
76
- onConfirm={() => {
77
- props.onDel && props.onDel(record, index);
78
- }}
79
- >
80
- <Button type="link" danger>
81
- {tableDel}
82
- </Button>
83
- </Popconfirm>
84
- ) : null}
85
- {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
86
- </div>
87
- );
88
- };
89
-
90
- const ItemRender = ({ item, index }) => {
91
- return CardItemRender ? (
92
- <CardItemRender item={item} index={index} functionProps={functionProps} />
93
- ) : (
94
- <DetailRender
95
- config={props.config}
96
- schema={schema}
97
- bordered={false}
98
- data={item}
99
- schemaScope={{ scenario: "table-render", ...props.schemaScope }}
100
- components={props.components}
101
- {...cardProps}
102
- />
103
- );
104
- };
105
- return (
106
- <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
107
- {props.list?.map((item, index) => {
108
- return (
109
- <div key={item["id"]} className="item-render-card">
110
- {props.hasAction !== false ? (
111
- <div className="item-render-card-title">{getColRender(item, index)}</div>
112
- ) : null}
113
- <div className="item-render-card-content">
114
- <ItemRender item={item} index={index} />
115
- </div>
116
- </div>
117
- );
118
- })}
119
- </div>
120
- );
121
- }
122
-
123
- export default CardRender;
1
+ import { useEffect, useState, useMemo, useCallback, useRef } from "react";
2
+ import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover, Spin, Empty } from "antd";
3
+ import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
4
+ import _ from "lodash";
5
+ import DetailRender from "@hzab/schema-descriptions";
6
+ import { removeInTableFalseFields } from "../common/utils";
7
+ import "./index.less";
8
+
9
+ const scenario = "table-render";
10
+
11
+ function CardRender(props) {
12
+ const [schema, setSchema] = useState({});
13
+
14
+ const { config = {}, cardProps = {}, query = {}, i18n, onEdit, onDel, onSearch, getList, Slots = {}, loading } = props;
15
+ const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
16
+ const { columns = 3, CardItemRender, hasEdit, hasDel, hasDelTips, hasDetail = false } = config || {};
17
+
18
+ const functionProps = { onEdit: onEdit, onDel: onDel, onSearch, getList };
19
+
20
+ useEffect(() => {
21
+ const schemas = removeInTableFalseFields(props?.schema);
22
+ setSchema(schemas);
23
+ }, [props?.schema, props?.schema?.schema]);
24
+
25
+ const getColRender = (record, index) => {
26
+ const _colConf = props.config?.colConf?._$actions || {};
27
+
28
+ const slotProps = { record, index, ...functionProps };
29
+
30
+ if (Slots?.tableActionsSlot) {
31
+ return <Slots.tableActionsSlot {...slotProps} />;
32
+ }
33
+
34
+ //编辑按钮权限
35
+ const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
36
+
37
+ //详情按钮权限
38
+ const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
39
+
40
+ //删除按钮权限
41
+ const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
42
+
43
+ //删除按钮提示
44
+ const delTips =
45
+ hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
46
+
47
+ return (
48
+ <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
49
+ {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
50
+ {_hasDetail ? (
51
+ <Button
52
+ type="link"
53
+ onClick={() => {
54
+ props.onDetail && props.onDetail(record, index);
55
+ }}
56
+ >
57
+ {tableDetail}
58
+ </Button>
59
+ ) : null}
60
+ {_hasEdit ? (
61
+ <Button
62
+ type="link"
63
+ onClick={() => {
64
+ props.onEdit && props.onEdit(record, index);
65
+ }}
66
+ >
67
+ {tableEdit}
68
+ </Button>
69
+ ) : null}
70
+ {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
71
+ {_hasDel ? (
72
+ <Popconfirm
73
+ placement="topRight"
74
+ title={delTips}
75
+ onConfirm={() => {
76
+ props.onDel && props.onDel(record, index);
77
+ }}
78
+ >
79
+ <Button type="link" danger>
80
+ {tableDel}
81
+ </Button>
82
+ </Popconfirm>
83
+ ) : null}
84
+ {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
85
+ </div>
86
+ );
87
+ };
88
+
89
+ const ItemRender = ({ item, index }) => {
90
+ return CardItemRender ? (
91
+ <CardItemRender item={item} index={index} functionProps={functionProps} />
92
+ ) : (
93
+ <DetailRender
94
+ config={props.config}
95
+ schema={schema}
96
+ bordered={false}
97
+ data={item}
98
+ schemaScope={{ scenario: "table-render", ...props.schemaScope }}
99
+ components={props.components}
100
+ {...cardProps}
101
+ />
102
+ );
103
+ };
104
+
105
+ return (
106
+ <Spin spinning={loading}>
107
+ {
108
+ props.list?.length > 0 ?
109
+ <div className="card-render-wrap" style={{ gridTemplateColumns: `repeat(${columns}, 1fr` }}>
110
+ {props.list?.map((item, index) => {
111
+ return (
112
+ <div key={item["id"]} className="item-render-card">
113
+ {props.hasAction !== false ? (
114
+ <div className="item-render-card-title">{getColRender(item, index)}</div>
115
+ ) : null}
116
+ <div className="item-render-card-content">
117
+ <ItemRender item={item} index={index} />
118
+ </div>
119
+ </div>
120
+ );
121
+ })}
122
+ </div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
123
+ }
124
+
125
+
126
+ </Spin>
127
+
128
+ );
129
+ }
130
+
131
+ export default CardRender;