@ecoding/components.antd 0.3.62 → 0.3.64

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.
@@ -0,0 +1,35 @@
1
+ import React from 'react';
2
+ import type { FormListFieldData } from 'antd';
3
+ interface IC {
4
+ type?: "operation";
5
+ title?: string;
6
+ tooltip?: string;
7
+ require?: boolean;
8
+ name?: string;
9
+ rules?: any;
10
+ width?: number;
11
+ hideRemove?: boolean | ((field: FormListFieldData, index: number) => boolean);
12
+ render?: (field: FormListFieldData, index: number, { add, remove }: {
13
+ add: any;
14
+ remove: any;
15
+ }) => React.ReactNode;
16
+ }
17
+ interface IProps {
18
+ columns: IC[];
19
+ name: string | string[];
20
+ rules?: any;
21
+ i18n?: any;
22
+ hideBottom?: boolean;
23
+ hideHeader?: boolean;
24
+ afterRemove?: (index: any) => void;
25
+ afterAdd?: (index: any) => void;
26
+ tStyle?: React.CSSProperties;
27
+ enableSort?: boolean;
28
+ operation?: {
29
+ hide?: boolean;
30
+ width?: number;
31
+ title?: string;
32
+ };
33
+ }
34
+ declare const C: React.FC<IProps>;
35
+ export default C;
@@ -0,0 +1,152 @@
1
+ import React, { useMemo, useRef } from 'react';
2
+ import { Typography, Form, Button, Space, Tooltip } from 'antd';
3
+ import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
4
+ import { DragOutlined } from '@ant-design/icons';
5
+ import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
6
+ import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
7
+ import { CSS } from '@dnd-kit/utilities';
8
+ const SortableItem = (props) => {
9
+ const { columns, i18n, field, index, add, remove, afterRemove, enableSort } = props;
10
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
11
+ id: props.id
12
+ });
13
+ const trStyle = enableSort ? {
14
+ borderBottom: '1px solid #eee',
15
+ transform: CSS.Transform.toString(transform),
16
+ transition,
17
+ opacity: isDragging ? 0.5 : 1,
18
+ cursor: 'grab',
19
+ marginBottom: 16,
20
+ } : {
21
+ borderBottom: '1px solid #eee',
22
+ };
23
+ const tdStyle = {
24
+ verticalAlign: 'top',
25
+ lineHeight: '32px',
26
+ padding: '10px',
27
+ position: 'relative',
28
+ };
29
+ const needDefaultOperation = useMemo(() => {
30
+ return columns.findIndex(column => column.type == "operation") == -1;
31
+ }, []);
32
+ return (React.createElement("tr", { style: trStyle, ref: setNodeRef },
33
+ React.createElement("td", { style: tdStyle },
34
+ React.createElement("div", { style: { width: '100%', height: '100%', position: "relative" } },
35
+ enableSort ? (React.createElement("div", Object.assign({}, attributes, listeners, { style: {
36
+ position: 'absolute',
37
+ top: '4px',
38
+ left: '4px',
39
+ width: '20px',
40
+ height: '20px',
41
+ background: 'rgba(0,0,0,0.1)',
42
+ borderRadius: '50%',
43
+ cursor: 'grab',
44
+ zIndex: 10,
45
+ display: 'flex',
46
+ alignItems: 'center',
47
+ justifyContent: 'center'
48
+ } }),
49
+ React.createElement(DragOutlined, { style: { fontSize: 14 } }))) : null,
50
+ index + 1)),
51
+ columns.map((column, i) => {
52
+ if (column.type == "operation") {
53
+ return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
54
+ React.createElement(Space, null,
55
+ column.render && column.render(field, index, { add, remove }),
56
+ (typeof column.hideRemove == "function" && column.hideRemove(field, index)) || (typeof column.hideRemove == "boolean" && column.hideRemove) ? (React.createElement(Typography.Text, { disabled: true }, i18n ? i18n.$t("global.del", '删除') : '删除')) : (React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
57
+ remove(field.name);
58
+ afterRemove && afterRemove(field.name);
59
+ } }, i18n ? i18n.$t("global.del", '删除') : '删除')))));
60
+ }
61
+ else {
62
+ return (React.createElement("td", { style: tdStyle },
63
+ React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index, { add, remove }))));
64
+ }
65
+ }),
66
+ needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
67
+ React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
68
+ remove(field.name);
69
+ afterRemove && afterRemove(field.name);
70
+ } }, i18n ? i18n.$t("global.del", '删除') : '删除'))) : null));
71
+ };
72
+ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd, enableSort }) => {
73
+ const sensors = useSensors(useSensor(PointerSensor));
74
+ const tbodyRef = useRef(null);
75
+ const thStyle = {
76
+ textAlign: 'left',
77
+ backgroundColor: '#fafafa',
78
+ padding: '8px',
79
+ position: "sticky",
80
+ top: 0,
81
+ zIndex: 1
82
+ };
83
+ const widths = useMemo(() => {
84
+ let w = 60;
85
+ columns.forEach((column) => {
86
+ w += column.width || 200;
87
+ });
88
+ if (operation) {
89
+ w += operation.width || 150;
90
+ }
91
+ else {
92
+ w += 150;
93
+ }
94
+ return w;
95
+ }, []);
96
+ return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove, move }, { errors }) => {
97
+ return (React.createElement("div", { className: 'm-form-list' },
98
+ React.createElement("div", { ref: tbodyRef, className: "m-form-list-table", style: Object.assign({}, { marginBottom: '4px', paddingBottom: '12px', overflow: "auto", position: 'relative' }, tStyle) },
99
+ React.createElement("table", { style: { width: widths } },
100
+ React.createElement("colgroup", null,
101
+ React.createElement("col", { style: Object.assign({}, { width: 60 }) }),
102
+ columns.map((column) => {
103
+ if (column.type == "operation") {
104
+ return null;
105
+ }
106
+ return (React.createElement("col", { style: Object.assign({}, { width: column.width || 200 }) }));
107
+ }),
108
+ (operation === null || operation === void 0 ? void 0 : operation.hide) ? null : (React.createElement("col", { style: Object.assign({}, { width: (operation === null || operation === void 0 ? void 0 : operation.width) || 150 }) }))),
109
+ React.createElement("thead", null, hideHeader ? null : (React.createElement("tr", null,
110
+ React.createElement("th", { style: thStyle }, i18n ? i18n.$t("global.num", "序号") : "序号"),
111
+ columns.map((column, i) => {
112
+ if (column.type == "operation") {
113
+ return null;
114
+ }
115
+ if (column.require) {
116
+ return (React.createElement("th", { style: thStyle },
117
+ React.createElement("span", { style: { color: '#ff4d4f' } }, "*"),
118
+ column.title,
119
+ column.tooltip ? (React.createElement(Tooltip, { placement: "top", title: column.tooltip || undefined },
120
+ React.createElement(QuestionCircleOutlined, { style: { paddingLeft: 4, color: "rgba(0, 0, 0, 0.45)" } }))) : null));
121
+ }
122
+ return (React.createElement("th", { style: thStyle },
123
+ column.title,
124
+ column.tooltip ? (React.createElement(Tooltip, { placement: "top", title: column.tooltip || undefined },
125
+ React.createElement(QuestionCircleOutlined, { style: { paddingLeft: 4, color: "rgba(0, 0, 0, 0.45)" } }))) : null));
126
+ }),
127
+ (operation === null || operation === void 0 ? void 0 : operation.hide) ? null : (React.createElement("th", { style: Object.assign({}, thStyle, { right: 0 }) }, i18n ? i18n.$t("global.operation", "操作") : "操作"))))),
128
+ React.createElement("tbody", null,
129
+ React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: ({ active, over }) => {
130
+ if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
131
+ const oldIndex = fields.findIndex((field) => field.key === active.id);
132
+ const newIndex = fields.findIndex((field) => field.key === (over === null || over === void 0 ? void 0 : over.id));
133
+ move(oldIndex, newIndex);
134
+ }
135
+ } },
136
+ React.createElement(SortableContext, { items: fields.map(field => field.key), strategy: verticalListSortingStrategy }, fields.map((field, index) => {
137
+ return (React.createElement(SortableItem, { columns: columns, index: index, key: field.key, id: field.key, i18n: i18n, field: field, add: add, remove: remove, afterRemove: afterRemove, enableSort: enableSort }));
138
+ })))))),
139
+ hideBottom ? null : (React.createElement("div", null,
140
+ React.createElement(Button, { icon: React.createElement(PlusCircleOutlined, null), type: "dashed", onClick: () => {
141
+ add();
142
+ setTimeout(() => {
143
+ tbodyRef.current.scrollTop = tbodyRef.current.scrollHeight;
144
+ }, 10);
145
+ afterAdd && afterAdd(fields.length);
146
+ } }, i18n ? i18n.$t("global.add", "添加") : "添加")))));
147
+ }));
148
+ };
149
+ C.defaultProps = {
150
+ enableSort: false,
151
+ };
152
+ export default C;
@@ -24,6 +24,7 @@ interface IProps {
24
24
  afterRemove?: (index: any) => void;
25
25
  afterAdd?: (index: any) => void;
26
26
  tStyle?: React.CSSProperties;
27
+ enableSort?: boolean;
27
28
  operation?: {
28
29
  hide?: boolean;
29
30
  width?: number;
@@ -1,13 +1,77 @@
1
1
  import React, { useMemo, useRef } from 'react';
2
2
  import { Typography, Form, Button, Space, Tooltip } from 'antd';
3
3
  import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
4
- const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd }) => {
5
- const tbodyRef = useRef(null);
4
+ import { DragOutlined } from '@ant-design/icons';
5
+ import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
6
+ import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
7
+ import { CSS } from '@dnd-kit/utilities';
8
+ const SortableItem = (props) => {
9
+ const { columns, i18n, field, index, add, remove, afterRemove, enableSort } = props;
10
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
11
+ id: props.id
12
+ });
13
+ const trStyle = enableSort ? {
14
+ borderBottom: '1px solid #eee',
15
+ transform: CSS.Transform.toString(transform),
16
+ transition,
17
+ opacity: isDragging ? 0.5 : 1,
18
+ cursor: 'grab',
19
+ marginBottom: 16,
20
+ } : {
21
+ borderBottom: '1px solid #eee',
22
+ };
6
23
  const tdStyle = {
7
24
  verticalAlign: 'top',
8
25
  lineHeight: '32px',
9
- padding: '10px'
26
+ padding: '10px',
27
+ position: 'relative',
10
28
  };
29
+ const needDefaultOperation = useMemo(() => {
30
+ return columns.findIndex(column => column.type == "operation") == -1;
31
+ }, []);
32
+ return (React.createElement("tr", { style: trStyle, ref: setNodeRef },
33
+ React.createElement("td", { style: tdStyle },
34
+ React.createElement("div", { style: { width: '100%', height: '100%', position: "relative" } },
35
+ enableSort ? (React.createElement("div", Object.assign({}, attributes, listeners, { style: {
36
+ position: 'absolute',
37
+ top: '4px',
38
+ left: '4px',
39
+ width: '20px',
40
+ height: '20px',
41
+ background: 'rgba(0,0,0,0.1)',
42
+ borderRadius: '50%',
43
+ cursor: 'grab',
44
+ zIndex: 10,
45
+ display: 'flex',
46
+ alignItems: 'center',
47
+ justifyContent: 'center'
48
+ } }),
49
+ React.createElement(DragOutlined, { style: { fontSize: 14 } }))) : null,
50
+ index + 1)),
51
+ columns.map((column, i) => {
52
+ if (column.type == "operation") {
53
+ return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
54
+ React.createElement(Space, null,
55
+ column.render && column.render(field, index, { add, remove }),
56
+ (typeof column.hideRemove == "function" && column.hideRemove(field, index)) || (typeof column.hideRemove == "boolean" && column.hideRemove) ? (React.createElement(Typography.Text, { disabled: true }, i18n ? i18n.$t("global.del", '删除') : '删除')) : (React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
57
+ remove(field.name);
58
+ afterRemove && afterRemove(field.name);
59
+ } }, i18n ? i18n.$t("global.del", '删除') : '删除')))));
60
+ }
61
+ else {
62
+ return (React.createElement("td", { style: tdStyle },
63
+ React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index, { add, remove }))));
64
+ }
65
+ }),
66
+ needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
67
+ React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
68
+ remove(field.name);
69
+ afterRemove && afterRemove(field.name);
70
+ } }, i18n ? i18n.$t("global.del", '删除') : '删除'))) : null));
71
+ };
72
+ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i18n, afterRemove, afterAdd, enableSort }) => {
73
+ const sensors = useSensors(useSensor(PointerSensor));
74
+ const tbodyRef = useRef(null);
11
75
  const thStyle = {
12
76
  textAlign: 'left',
13
77
  backgroundColor: '#fafafa',
@@ -16,9 +80,6 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
16
80
  top: 0,
17
81
  zIndex: 1
18
82
  };
19
- const trStyle = {
20
- borderBottom: '1px solid #eee'
21
- };
22
83
  const widths = useMemo(() => {
23
84
  let w = 60;
24
85
  columns.forEach((column) => {
@@ -32,10 +93,7 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
32
93
  }
33
94
  return w;
34
95
  }, []);
35
- const needDefaultOperation = useMemo(() => {
36
- return columns.findIndex(column => column.type == "operation") == -1;
37
- }, []);
38
- return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove }, { errors }) => {
96
+ return (React.createElement(Form.List, { name: name, rules: rules || [] }, (fields, { add, remove, move }, { errors }) => {
39
97
  return (React.createElement("div", { className: 'm-form-list' },
40
98
  React.createElement("div", { ref: tbodyRef, className: "m-form-list-table", style: Object.assign({}, { marginBottom: '4px', paddingBottom: '12px', overflow: "auto", position: 'relative' }, tStyle) },
41
99
  React.createElement("table", { style: { width: widths } },
@@ -67,30 +125,17 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
67
125
  React.createElement(QuestionCircleOutlined, { style: { paddingLeft: 4, color: "rgba(0, 0, 0, 0.45)" } }))) : null));
68
126
  }),
69
127
  (operation === null || operation === void 0 ? void 0 : operation.hide) ? null : (React.createElement("th", { style: Object.assign({}, thStyle, { right: 0 }) }, i18n ? i18n.$t("global.operation", "操作") : "操作"))))),
70
- React.createElement("tbody", null, fields.map((field, index) => {
71
- return (React.createElement("tr", { style: trStyle },
72
- React.createElement("td", { style: tdStyle }, index + 1),
73
- columns.map((column, i) => {
74
- if (column.type == "operation") {
75
- return (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
76
- React.createElement(Space, null,
77
- column.render && column.render(field, index, { add, remove }),
78
- (typeof column.hideRemove == "function" && column.hideRemove(field, index)) || (typeof column.hideRemove == "boolean" && column.hideRemove) ? (React.createElement(Typography.Text, { disabled: true }, i18n ? i18n.$t("global.del", '删除') : '删除')) : (React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
79
- remove(field.name);
80
- afterRemove && afterRemove(field.name);
81
- } }, i18n ? i18n.$t("global.del", '删除') : '删除')))));
82
- }
83
- else {
84
- return (React.createElement("td", { style: tdStyle },
85
- React.createElement(Form.Item, { style: { marginBottom: 0 }, name: [field.name, column.name], rules: column.rules || [] }, column.render(field, index, { add, remove }))));
128
+ React.createElement("tbody", null,
129
+ React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: ({ active, over }) => {
130
+ if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
131
+ const oldIndex = fields.findIndex((field) => field.key === active.id);
132
+ const newIndex = fields.findIndex((field) => field.key === (over === null || over === void 0 ? void 0 : over.id));
133
+ move(oldIndex, newIndex);
86
134
  }
87
- }),
88
- needDefaultOperation ? (React.createElement("td", { style: Object.assign({}, tdStyle, { right: 0, position: "sticky", backgroundColor: "#fff" }) },
89
- React.createElement(Typography.Text, { style: { cursor: 'pointer' }, type: "danger", onClick: () => {
90
- remove(field.name);
91
- afterRemove && afterRemove(field.name);
92
- } }, i18n ? i18n.$t("global.del", '删除') : '删除'))) : null));
93
- })))),
135
+ } },
136
+ React.createElement(SortableContext, { items: fields.map(field => field.key), strategy: verticalListSortingStrategy }, fields.map((field, index) => {
137
+ return (React.createElement(SortableItem, { columns: columns, index: index, key: field.key, id: field.key, i18n: i18n, field: field, add: add, remove: remove, afterRemove: afterRemove, enableSort: enableSort }));
138
+ })))))),
94
139
  hideBottom ? null : (React.createElement("div", null,
95
140
  React.createElement(Button, { icon: React.createElement(PlusCircleOutlined, null), type: "dashed", onClick: () => {
96
141
  add();
@@ -101,4 +146,7 @@ const C = ({ columns, rules, tStyle, name, hideHeader, hideBottom, operation, i1
101
146
  } }, i18n ? i18n.$t("global.add", "添加") : "添加")))));
102
147
  }));
103
148
  };
149
+ C.defaultProps = {
150
+ enableSort: false,
151
+ };
104
152
  export default C;
@@ -96,7 +96,7 @@ const MultipleImgUpload = (props) => {
96
96
  setPreviewImage(file.url || file.preview);
97
97
  setPreviewOpen(true);
98
98
  });
99
- const uploadButton = (React.createElement("button", { style: { border: 0, background: 'none' }, type: "button" },
99
+ const uploadButton = (React.createElement("button", { style: Object.assign({ border: 0, background: 'none' }, disabled ? { cursor: 'not-allowed', opacity: 0.4 } : {}), type: "button" },
100
100
  React.createElement(PlusOutlined, null),
101
101
  React.createElement("div", { style: { marginTop: 8 } }, buttonText ? buttonText : '上传')));
102
102
  const sensor = useSensor(PointerSensor, {
@@ -23,7 +23,7 @@ const SortableItem = (props) => {
23
23
  updateItems(newItems);
24
24
  };
25
25
  return (React.createElement("div", { ref: setNodeRef, style: style },
26
- React.createElement("div", Object.assign({}, attributes, listeners, { style: {
26
+ props.disabled ? null : (React.createElement("div", Object.assign({}, attributes, listeners, { style: {
27
27
  position: 'absolute',
28
28
  top: '4px',
29
29
  left: '4px',
@@ -37,7 +37,7 @@ const SortableItem = (props) => {
37
37
  alignItems: 'center',
38
38
  justifyContent: 'center'
39
39
  } }),
40
- React.createElement(DragOutlined, { style: { fontSize: 14 } })),
40
+ React.createElement(DragOutlined, { style: { fontSize: 14 } }))),
41
41
  index == 0 ? (React.createElement("div", { style: {
42
42
  position: 'absolute',
43
43
  bottom: 0,
@@ -36,9 +36,9 @@ const C = (props) => {
36
36
  setInputVisible(true);
37
37
  };
38
38
  const handleInputChange = (e) => {
39
- setInputValue(e.target.value);
39
+ setInputValue(e.target.value.trim());
40
40
  };
41
- const handleInputConfirm = () => {
41
+ const handleInputConfirm = (e) => {
42
42
  if (inputValue) {
43
43
  if (!tags.includes(inputValue.trim())) {
44
44
  const values = [...tags, inputValue.trim()];
@@ -53,17 +53,20 @@ const C = (props) => {
53
53
  setInputValue('');
54
54
  };
55
55
  const handleEditInputChange = (e) => {
56
- setEditInputValue(e.target.value);
56
+ const v = e.target.value.trim();
57
+ setEditInputValue(v);
57
58
  };
58
- const handleEditInputConfirm = () => {
59
+ const handleEditInputConfirm = (e) => {
59
60
  const newTags = [...(tags || [])];
60
- if (!newTags.includes(editInputValue.trim())) {
61
- newTags[editInputIndex] = editInputValue.trim();
61
+ if (!newTags.includes(editInputValue)) {
62
+ newTags[editInputIndex] = editInputValue;
62
63
  setTags(newTags);
63
64
  props.onChange && props.onChange(newTags && newTags.length > 0 ? newTags : undefined);
64
65
  }
65
66
  else {
66
- message.error(props.multipleError || '标签已存在');
67
+ if (newTags[editInputIndex] != editInputValue) {
68
+ message.error(props.multipleError || '标签已存在');
69
+ }
67
70
  }
68
71
  setEditInputIndex(-1);
69
72
  setEditInputValue('');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ecoding/components.antd",
3
- "version": "0.3.62",
3
+ "version": "0.3.64",
4
4
  "author": "cxc",
5
5
  "homepage": "",
6
6
  "license": "MIT",
@@ -47,5 +47,5 @@
47
47
  "antd": "5.27.0",
48
48
  "axios": "^1.1.2"
49
49
  },
50
- "gitHead": "08d74aa3e9086a168e7482332a68a209d1dce911"
50
+ "gitHead": "ef14924dda25dc0d39c6256047e7e3111dcd57bf"
51
51
  }