linkmore-design 1.0.32 → 1.0.33
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.
- package/dist/index.umd.js +639 -15
- package/dist/index.umd.min.js +5 -5
- package/es/CustomTableOption/columnsSort.d.ts +4 -0
- package/es/CustomTableOption/columnsSort.js +317 -0
- package/es/CustomTableOption/filterSort.d.ts +4 -0
- package/es/CustomTableOption/filterSort.js +193 -0
- package/es/CustomTableOption/index.d.ts +12 -0
- package/es/CustomTableOption/index.js +122 -0
- package/es/CustomTableOption/style/index.css +548 -0
- package/es/CustomTableOption/style/index.d.ts +1 -0
- package/es/CustomTableOption/style/index.js +1 -0
- package/es/LmTable/Table.js +27 -13
- package/es/LmTable/style/style.css +4 -0
- package/es/Radio/style/style.css +2 -1
- package/es/Tag/index.js +2 -2
- package/es/Tag/style/index.css +4 -0
- package/es/index.js +9 -1
- package/es/message/style/index.css +1 -1
- package/lib/CustomTableOption/columnsSort.d.ts +4 -0
- package/lib/CustomTableOption/columnsSort.js +336 -0
- package/lib/CustomTableOption/filterSort.d.ts +4 -0
- package/lib/CustomTableOption/filterSort.js +213 -0
- package/lib/CustomTableOption/index.d.ts +12 -0
- package/lib/CustomTableOption/index.js +140 -0
- package/lib/CustomTableOption/style/index.css +548 -0
- package/lib/CustomTableOption/style/index.d.ts +1 -0
- package/lib/CustomTableOption/style/index.js +3 -0
- package/lib/LmTable/Table.js +27 -13
- package/lib/LmTable/style/style.css +4 -0
- package/lib/Radio/style/style.css +2 -1
- package/lib/Tag/index.js +2 -2
- package/lib/Tag/style/index.css +4 -0
- package/lib/index.js +9 -1
- package/lib/message/style/index.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React, { useState, useMemo, useEffect, useImperativeHandle, forwardRef } from 'react';
|
|
3
|
+
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
4
|
+
import { arrayMove, useSortable, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
5
|
+
import { IconFont, Checkbox } from 'linkmore-design';
|
|
6
|
+
import { HolderOutlined } from '@ant-design/icons';
|
|
7
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
8
|
+
import { cloneDeep } from 'lodash';
|
|
9
|
+
|
|
10
|
+
var SortItem = function SortItem(props) {
|
|
11
|
+
var _a, _b, _c, _d;
|
|
12
|
+
|
|
13
|
+
var _useSortable = useSortable({
|
|
14
|
+
id: "".concat(props.id)
|
|
15
|
+
}),
|
|
16
|
+
attributes = _useSortable.attributes,
|
|
17
|
+
listeners = _useSortable.listeners,
|
|
18
|
+
setNodeRef = _useSortable.setNodeRef,
|
|
19
|
+
transform = _useSortable.transform,
|
|
20
|
+
transition = _useSortable.transition;
|
|
21
|
+
|
|
22
|
+
var style = {
|
|
23
|
+
transform: CSS.Transform.toString(transform),
|
|
24
|
+
transition: transition
|
|
25
|
+
};
|
|
26
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
27
|
+
ref: setNodeRef,
|
|
28
|
+
className: 'lm_custom_item',
|
|
29
|
+
style: style
|
|
30
|
+
}, attributes), /*#__PURE__*/React.createElement(Checkbox, {
|
|
31
|
+
checked: ((_a = props.item) === null || _a === void 0 ? void 0 : _a.show) === false ? false : true,
|
|
32
|
+
onChange: function onChange(e) {
|
|
33
|
+
return props.toggleShow(e.target.checked, props.id);
|
|
34
|
+
},
|
|
35
|
+
className: "filter_item-content"
|
|
36
|
+
}, (_b = props.item) === null || _b === void 0 ? void 0 : _b.title), /*#__PURE__*/React.createElement("div", null, ((_c = props.item) === null || _c === void 0 ? void 0 : _c.fixed) && /*#__PURE__*/React.createElement(IconFont, {
|
|
37
|
+
type: "lmweb-vertical-align-middl",
|
|
38
|
+
className: "lm_custom_icon hover_show",
|
|
39
|
+
onClick: function onClick(e) {
|
|
40
|
+
e.stopPropagation();
|
|
41
|
+
props.clearFiexd(props.id);
|
|
42
|
+
}
|
|
43
|
+
}), !((_d = props.item) === null || _d === void 0 ? void 0 : _d.fixed) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
|
|
44
|
+
type: "lmweb-vertical-align-top",
|
|
45
|
+
className: "lm_custom_icon hover_show icon_top",
|
|
46
|
+
onClick: function onClick(e) {
|
|
47
|
+
console.log(e, 'eee');
|
|
48
|
+
e.stopPropagation();
|
|
49
|
+
props.addFiexd(props.id, 'left');
|
|
50
|
+
}
|
|
51
|
+
}), /*#__PURE__*/React.createElement(IconFont, {
|
|
52
|
+
type: "lmweb-vertical-align-botto",
|
|
53
|
+
className: "lm_custom_icon hover_show icon_bottom",
|
|
54
|
+
onClick: function onClick(e) {
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
props.addFiexd(props.id, 'right');
|
|
57
|
+
}
|
|
58
|
+
})), /*#__PURE__*/React.createElement(HolderOutlined, Object.assign({}, listeners, {
|
|
59
|
+
className: 'lm_custom_icon sort_item',
|
|
60
|
+
style: {
|
|
61
|
+
color: 'var(--tip-text-color)'
|
|
62
|
+
}
|
|
63
|
+
}))));
|
|
64
|
+
};
|
|
65
|
+
/** order show fixed */
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
var ColumnsSort = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
69
|
+
var _ref$columns = _ref.columns,
|
|
70
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
71
|
+
_ref$ColumnsStateValu = _ref.ColumnsStateValue,
|
|
72
|
+
ColumnsStateValue = _ref$ColumnsStateValu === void 0 ? {} : _ref$ColumnsStateValu;
|
|
73
|
+
|
|
74
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
75
|
+
|
|
76
|
+
var _useState = useState([]),
|
|
77
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
78
|
+
localColumns = _useState2[0],
|
|
79
|
+
setLocalColumns = _useState2[1];
|
|
80
|
+
|
|
81
|
+
var _useState3 = useState({}),
|
|
82
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
83
|
+
colStateValue = _useState4[0],
|
|
84
|
+
setColStateValue = _useState4[1];
|
|
85
|
+
|
|
86
|
+
var sortMenu = useMemo(function () {
|
|
87
|
+
var cloneCol = cloneDeep(localColumns);
|
|
88
|
+
cloneCol.forEach(function (item, index) {
|
|
89
|
+
var _a, _b;
|
|
90
|
+
|
|
91
|
+
var fixed = (_a = ColumnsStateValue[item.dataIndex]) === null || _a === void 0 ? void 0 : _a.fixed;
|
|
92
|
+
var order = (_b = ColumnsStateValue[item.dataIndex]) === null || _b === void 0 ? void 0 : _b.order;
|
|
93
|
+
|
|
94
|
+
if (!!fixed) {
|
|
95
|
+
item.fixed = fixed;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
item.order = order !== undefined && order !== null ? order : index;
|
|
99
|
+
});
|
|
100
|
+
var leftSortItem = [];
|
|
101
|
+
var rigthSortItem = [];
|
|
102
|
+
var items = [];
|
|
103
|
+
cloneCol === null || cloneCol === void 0 ? void 0 : cloneCol.forEach(function (item) {
|
|
104
|
+
if ((item === null || item === void 0 ? void 0 : item.fixed) === 'right') {
|
|
105
|
+
rigthSortItem.push(item);
|
|
106
|
+
} else if (!(item === null || item === void 0 ? void 0 : item.fixed)) {
|
|
107
|
+
items.push(item);
|
|
108
|
+
} else {
|
|
109
|
+
leftSortItem.push(item);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
return {
|
|
113
|
+
leftSortItem: leftSortItem,
|
|
114
|
+
rigthSortItem: rigthSortItem,
|
|
115
|
+
items: items
|
|
116
|
+
};
|
|
117
|
+
}, [localColumns, colStateValue]);
|
|
118
|
+
var isCheckAll = useMemo(function () {
|
|
119
|
+
var showLength = localColumns.filter(function (item) {
|
|
120
|
+
return item.show !== false;
|
|
121
|
+
});
|
|
122
|
+
return {
|
|
123
|
+
indeterminate: (showLength === null || showLength === void 0 ? void 0 : showLength.length) && showLength.length !== localColumns.length ? true : false,
|
|
124
|
+
checkAll: showLength.length === localColumns.length
|
|
125
|
+
};
|
|
126
|
+
}, [localColumns]);
|
|
127
|
+
useEffect(function () {
|
|
128
|
+
setLocalColumns(columns);
|
|
129
|
+
setColStateValue(ColumnsStateValue);
|
|
130
|
+
}, []);
|
|
131
|
+
var leftSensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
132
|
+
coordinateGetter: sortableKeyboardCoordinates
|
|
133
|
+
}));
|
|
134
|
+
var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
135
|
+
coordinateGetter: sortableKeyboardCoordinates
|
|
136
|
+
}));
|
|
137
|
+
var rightSensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
138
|
+
coordinateGetter: sortableKeyboardCoordinates
|
|
139
|
+
}));
|
|
140
|
+
/** 排序结束回调 */
|
|
141
|
+
|
|
142
|
+
var handleDragEnd = function handleDragEnd(event) {
|
|
143
|
+
var active = event.active,
|
|
144
|
+
over = event.over;
|
|
145
|
+
|
|
146
|
+
if (active.id !== over.id) {
|
|
147
|
+
setLocalColumns(function (items) {
|
|
148
|
+
var oldIndex = items.findIndex(function (s) {
|
|
149
|
+
return s.dataIndex === active.id;
|
|
150
|
+
});
|
|
151
|
+
var newIndex = items.findIndex(function (s) {
|
|
152
|
+
return s.dataIndex === over.id;
|
|
153
|
+
});
|
|
154
|
+
console.log(arrayMove(items, oldIndex, newIndex), 77);
|
|
155
|
+
return arrayMove(items, oldIndex, newIndex).map(function (item, index) {
|
|
156
|
+
return Object.assign(Object.assign({}, item), {
|
|
157
|
+
order: index
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
/** 取消固定 */
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
var clearFiexd = function clearFiexd(id) {
|
|
167
|
+
var resultColumns = localColumns.map(function (item) {
|
|
168
|
+
if (item.dataIndex === id) {
|
|
169
|
+
return Object.assign(Object.assign({}, item), {
|
|
170
|
+
fixed: undefined
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
return Object.assign({}, item);
|
|
175
|
+
});
|
|
176
|
+
setLocalColumns(resultColumns);
|
|
177
|
+
};
|
|
178
|
+
/** 添加是否显示 */
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
var toggleShow = function toggleShow(value, id) {
|
|
182
|
+
var resultColumns = localColumns.map(function (item) {
|
|
183
|
+
if (item.dataIndex === id) {
|
|
184
|
+
return Object.assign(Object.assign({}, item), {
|
|
185
|
+
show: item.show === false ? true : false
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
return Object.assign({}, item);
|
|
190
|
+
});
|
|
191
|
+
setLocalColumns(resultColumns);
|
|
192
|
+
};
|
|
193
|
+
/** 添加左右固定 */
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
var addFiexd = function addFiexd(id, type) {
|
|
197
|
+
var resultColumns = localColumns.map(function (item) {
|
|
198
|
+
if (item.dataIndex === id) {
|
|
199
|
+
return Object.assign(Object.assign({}, item), {
|
|
200
|
+
fixed: type
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
return Object.assign({}, item);
|
|
205
|
+
});
|
|
206
|
+
setLocalColumns(resultColumns);
|
|
207
|
+
};
|
|
208
|
+
/** 切换是否全选 */
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
var onCheckAllChange = function onCheckAllChange() {
|
|
212
|
+
var resultColumns = localColumns.map(function (item) {
|
|
213
|
+
return Object.assign(Object.assign({}, item), {
|
|
214
|
+
show: isCheckAll.checkAll ? false : true
|
|
215
|
+
});
|
|
216
|
+
});
|
|
217
|
+
setLocalColumns(resultColumns);
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
useImperativeHandle(ref, function () {
|
|
221
|
+
return {
|
|
222
|
+
getColumns: function getColumns() {
|
|
223
|
+
return localColumns;
|
|
224
|
+
},
|
|
225
|
+
getColStateValue: function getColStateValue() {
|
|
226
|
+
var obj = {};
|
|
227
|
+
localColumns.forEach(function (item) {
|
|
228
|
+
obj[item.dataIndex] = {};
|
|
229
|
+
|
|
230
|
+
if (![undefined, null].includes(item.order)) {
|
|
231
|
+
obj[item.dataIndex]['order'] = item.order;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
if (![undefined, null].includes(item.order)) {
|
|
235
|
+
obj[item.dataIndex]['show'] = item.show;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
if (![undefined, null].includes(item.fixed)) {
|
|
239
|
+
obj[item.dataIndex]['fixed'] = item.fixed;
|
|
240
|
+
}
|
|
241
|
+
});
|
|
242
|
+
return obj;
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
});
|
|
246
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
247
|
+
className: 'lm_custom_option_columns'
|
|
248
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
249
|
+
className: 'global_setting'
|
|
250
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
251
|
+
indeterminate: isCheckAll.indeterminate,
|
|
252
|
+
onChange: onCheckAllChange,
|
|
253
|
+
checked: isCheckAll.checkAll
|
|
254
|
+
}, "\u5168\u9009"), /*#__PURE__*/React.createElement("span", {
|
|
255
|
+
onClick: function onClick() {
|
|
256
|
+
return setLocalColumns(columns);
|
|
257
|
+
}
|
|
258
|
+
}, "\u91CD\u7F6E")), !!((_a = sortMenu.leftSortItem) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
|
|
259
|
+
className: 'fixed_title'
|
|
260
|
+
}, "\u56FA\u5B9A\u5728\u5DE6\u4FA7"), /*#__PURE__*/React.createElement(DndContext, {
|
|
261
|
+
sensors: leftSensors,
|
|
262
|
+
collisionDetection: closestCenter,
|
|
263
|
+
onDragEnd: handleDragEnd
|
|
264
|
+
}, /*#__PURE__*/React.createElement(SortableContext, {
|
|
265
|
+
items: (_b = sortMenu.leftSortItem) === null || _b === void 0 ? void 0 : _b.map(function (v) {
|
|
266
|
+
return "".concat(v.dataIndex);
|
|
267
|
+
}),
|
|
268
|
+
strategy: verticalListSortingStrategy
|
|
269
|
+
}, sortMenu.leftSortItem.map(function (item) {
|
|
270
|
+
return /*#__PURE__*/React.createElement(SortItem, {
|
|
271
|
+
key: item.dataIndex,
|
|
272
|
+
item: item,
|
|
273
|
+
toggleShow: toggleShow,
|
|
274
|
+
clearFiexd: clearFiexd,
|
|
275
|
+
id: item.dataIndex
|
|
276
|
+
});
|
|
277
|
+
})))), !!((_c = sortMenu.items) === null || _c === void 0 ? void 0 : _c.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
|
|
278
|
+
className: 'fixed_title'
|
|
279
|
+
}, " \u4E0D\u56FA\u5B9A "), /*#__PURE__*/React.createElement(DndContext, {
|
|
280
|
+
sensors: sensors,
|
|
281
|
+
collisionDetection: closestCenter,
|
|
282
|
+
onDragEnd: handleDragEnd
|
|
283
|
+
}, /*#__PURE__*/React.createElement(SortableContext, {
|
|
284
|
+
items: (_d = sortMenu.items) === null || _d === void 0 ? void 0 : _d.map(function (v) {
|
|
285
|
+
return "".concat(v.dataIndex);
|
|
286
|
+
}),
|
|
287
|
+
strategy: verticalListSortingStrategy
|
|
288
|
+
}, (_e = sortMenu.items) === null || _e === void 0 ? void 0 : _e.map(function (item) {
|
|
289
|
+
return /*#__PURE__*/React.createElement(SortItem, {
|
|
290
|
+
key: item.dataIndex,
|
|
291
|
+
addFiexd: addFiexd,
|
|
292
|
+
toggleShow: toggleShow,
|
|
293
|
+
item: item,
|
|
294
|
+
id: item.dataIndex
|
|
295
|
+
});
|
|
296
|
+
})))), !!((_f = sortMenu.rigthSortItem) === null || _f === void 0 ? void 0 : _f.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
|
|
297
|
+
className: 'fixed_title'
|
|
298
|
+
}, "\u56FA\u5B9A\u5728\u53F3\u4FA7"), /*#__PURE__*/React.createElement(DndContext, {
|
|
299
|
+
sensors: rightSensors,
|
|
300
|
+
collisionDetection: closestCenter,
|
|
301
|
+
onDragEnd: handleDragEnd
|
|
302
|
+
}, /*#__PURE__*/React.createElement(SortableContext, {
|
|
303
|
+
items: (_g = sortMenu.rigthSortItem) === null || _g === void 0 ? void 0 : _g.map(function (v) {
|
|
304
|
+
return "".concat(v.dataIndex);
|
|
305
|
+
}),
|
|
306
|
+
strategy: verticalListSortingStrategy
|
|
307
|
+
}, sortMenu.rigthSortItem.map(function (item) {
|
|
308
|
+
return /*#__PURE__*/React.createElement(SortItem, {
|
|
309
|
+
key: item.dataIndex,
|
|
310
|
+
toggleShow: toggleShow,
|
|
311
|
+
clearFiexd: clearFiexd,
|
|
312
|
+
item: item,
|
|
313
|
+
id: item.dataIndex
|
|
314
|
+
});
|
|
315
|
+
})))));
|
|
316
|
+
});
|
|
317
|
+
export default ColumnsSort;
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React, { useState, useMemo, useEffect, useImperativeHandle, forwardRef } from 'react';
|
|
3
|
+
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
|
4
|
+
import { arrayMove, useSortable, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
5
|
+
import { Checkbox } from 'linkmore-design';
|
|
6
|
+
import { HolderOutlined } from '@ant-design/icons';
|
|
7
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
8
|
+
import { cloneDeep } from 'lodash';
|
|
9
|
+
var UNLLVALUE = [null, undefined];
|
|
10
|
+
|
|
11
|
+
var SortItem = function SortItem(props) {
|
|
12
|
+
var _a, _b;
|
|
13
|
+
|
|
14
|
+
var _useSortable = useSortable({
|
|
15
|
+
id: "".concat(props.id)
|
|
16
|
+
}),
|
|
17
|
+
attributes = _useSortable.attributes,
|
|
18
|
+
listeners = _useSortable.listeners,
|
|
19
|
+
setNodeRef = _useSortable.setNodeRef,
|
|
20
|
+
transform = _useSortable.transform,
|
|
21
|
+
transition = _useSortable.transition;
|
|
22
|
+
|
|
23
|
+
var style = {
|
|
24
|
+
transform: CSS.Transform.toString(transform),
|
|
25
|
+
transition: transition
|
|
26
|
+
};
|
|
27
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
28
|
+
ref: setNodeRef,
|
|
29
|
+
className: 'lm_custom_item',
|
|
30
|
+
style: style
|
|
31
|
+
}, attributes), /*#__PURE__*/React.createElement(Checkbox, {
|
|
32
|
+
checked: ((_a = props.item) === null || _a === void 0 ? void 0 : _a.show) === false ? false : true,
|
|
33
|
+
onChange: function onChange(e) {
|
|
34
|
+
return props.toggleShow(e.target.checked, props.id);
|
|
35
|
+
},
|
|
36
|
+
className: "filter_item-content"
|
|
37
|
+
}, (_b = props.item) === null || _b === void 0 ? void 0 : _b.title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HolderOutlined, Object.assign({}, listeners, {
|
|
38
|
+
className: 'lm_custom_icon sort_item'
|
|
39
|
+
}))));
|
|
40
|
+
};
|
|
41
|
+
/** order show fixed */
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
var FilterSort = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
45
|
+
var _ref$filter = _ref.filter,
|
|
46
|
+
filter = _ref$filter === void 0 ? [] : _ref$filter,
|
|
47
|
+
_ref$filterStateValue = _ref.filterStateValue,
|
|
48
|
+
filterStateValue = _ref$filterStateValue === void 0 ? {} : _ref$filterStateValue;
|
|
49
|
+
|
|
50
|
+
var _useState = useState([]),
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
localFilter = _useState2[0],
|
|
53
|
+
setLocalFilter = _useState2[1];
|
|
54
|
+
|
|
55
|
+
var _useState3 = useState({}),
|
|
56
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
57
|
+
colStateValue = _useState4[0],
|
|
58
|
+
setColStateValue = _useState4[1];
|
|
59
|
+
|
|
60
|
+
var sortMenu = useMemo(function () {
|
|
61
|
+
var cloneCol = cloneDeep(localFilter);
|
|
62
|
+
cloneCol.forEach(function (item, index) {
|
|
63
|
+
var _a, _b;
|
|
64
|
+
|
|
65
|
+
var order = (_a = filterStateValue[item.field]) === null || _a === void 0 ? void 0 : _a.order;
|
|
66
|
+
item.order = order !== undefined && order !== null ? order : UNLLVALUE.includes(item.order) ? index : item.order;
|
|
67
|
+
item.show = ((_b = filterStateValue[item.field]) === null || _b === void 0 ? void 0 : _b.show) === false ? false : UNLLVALUE.includes(item.show) ? true : !!item.show;
|
|
68
|
+
});
|
|
69
|
+
return cloneCol;
|
|
70
|
+
}, [localFilter, colStateValue]);
|
|
71
|
+
var isCheckAll = useMemo(function () {
|
|
72
|
+
var showLength = localFilter.filter(function (item) {
|
|
73
|
+
return item.show !== false;
|
|
74
|
+
});
|
|
75
|
+
return {
|
|
76
|
+
indeterminate: (showLength === null || showLength === void 0 ? void 0 : showLength.length) && showLength.length !== localFilter.length ? true : false,
|
|
77
|
+
checkAll: showLength.length === localFilter.length
|
|
78
|
+
};
|
|
79
|
+
}, [localFilter]);
|
|
80
|
+
useEffect(function () {
|
|
81
|
+
console.log(localFilter, 'localFilter');
|
|
82
|
+
}, [localFilter]);
|
|
83
|
+
useEffect(function () {
|
|
84
|
+
setLocalFilter(filter);
|
|
85
|
+
setColStateValue(filterStateValue);
|
|
86
|
+
}, []);
|
|
87
|
+
var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
88
|
+
coordinateGetter: sortableKeyboardCoordinates
|
|
89
|
+
}));
|
|
90
|
+
/** 排序结束回调 */
|
|
91
|
+
|
|
92
|
+
var handleDragEnd = function handleDragEnd(event) {
|
|
93
|
+
var active = event.active,
|
|
94
|
+
over = event.over;
|
|
95
|
+
|
|
96
|
+
if (active.id !== over.id) {
|
|
97
|
+
setLocalFilter(function (items) {
|
|
98
|
+
var oldIndex = items.findIndex(function (s) {
|
|
99
|
+
return s.field === active.id;
|
|
100
|
+
});
|
|
101
|
+
var newIndex = items.findIndex(function (s) {
|
|
102
|
+
return s.field === over.id;
|
|
103
|
+
});
|
|
104
|
+
console.log(arrayMove(items, oldIndex, newIndex), 77);
|
|
105
|
+
return arrayMove(items, oldIndex, newIndex).map(function (item, index) {
|
|
106
|
+
return Object.assign(Object.assign({}, item), {
|
|
107
|
+
order: index
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
/** 添加是否显示 */
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
var toggleShow = function toggleShow(value, id) {
|
|
117
|
+
var resultColumns = localFilter.map(function (item) {
|
|
118
|
+
if (item.field === id) {
|
|
119
|
+
return Object.assign(Object.assign({}, item), {
|
|
120
|
+
show: item.show === false ? true : false
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
return Object.assign({}, item);
|
|
125
|
+
});
|
|
126
|
+
setLocalFilter(resultColumns);
|
|
127
|
+
};
|
|
128
|
+
/** 切换是否全选 */
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
var onCheckAllChange = function onCheckAllChange() {
|
|
132
|
+
var resultColumns = localFilter.map(function (item) {
|
|
133
|
+
return Object.assign(Object.assign({}, item), {
|
|
134
|
+
show: isCheckAll.checkAll ? false : true
|
|
135
|
+
});
|
|
136
|
+
});
|
|
137
|
+
console.log(resultColumns, 'resultColumns');
|
|
138
|
+
setLocalFilter(resultColumns);
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
useImperativeHandle(ref, function () {
|
|
142
|
+
return {
|
|
143
|
+
getLocalFilter: function getLocalFilter() {
|
|
144
|
+
return localFilter;
|
|
145
|
+
},
|
|
146
|
+
getFilterStateValue: function getFilterStateValue() {
|
|
147
|
+
var obj = {};
|
|
148
|
+
localFilter.forEach(function (item) {
|
|
149
|
+
obj[item.field] = {};
|
|
150
|
+
|
|
151
|
+
if (![undefined, null].includes(item.order)) {
|
|
152
|
+
obj[item.field]['order'] = item.order;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
if (![undefined, null].includes(item.order)) {
|
|
156
|
+
obj[item.field]['show'] = item.show;
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
return obj;
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
});
|
|
163
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
164
|
+
className: 'lm_custom_option_columns'
|
|
165
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
166
|
+
className: 'global_setting'
|
|
167
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
168
|
+
indeterminate: isCheckAll.indeterminate,
|
|
169
|
+
onChange: onCheckAllChange,
|
|
170
|
+
checked: isCheckAll.checkAll
|
|
171
|
+
}, "\u5168\u9009"), /*#__PURE__*/React.createElement("span", {
|
|
172
|
+
onClick: function onClick() {
|
|
173
|
+
return setLocalFilter(filter);
|
|
174
|
+
}
|
|
175
|
+
}, "\u91CD\u7F6E")), !!(sortMenu === null || sortMenu === void 0 ? void 0 : sortMenu.length) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
|
|
176
|
+
sensors: sensors,
|
|
177
|
+
collisionDetection: closestCenter,
|
|
178
|
+
onDragEnd: handleDragEnd
|
|
179
|
+
}, /*#__PURE__*/React.createElement(SortableContext, {
|
|
180
|
+
items: sortMenu === null || sortMenu === void 0 ? void 0 : sortMenu.map(function (v) {
|
|
181
|
+
return "".concat(v.field);
|
|
182
|
+
}),
|
|
183
|
+
strategy: verticalListSortingStrategy
|
|
184
|
+
}, sortMenu === null || sortMenu === void 0 ? void 0 : sortMenu.map(function (item) {
|
|
185
|
+
return /*#__PURE__*/React.createElement(SortItem, {
|
|
186
|
+
key: item.field,
|
|
187
|
+
toggleShow: toggleShow,
|
|
188
|
+
item: item,
|
|
189
|
+
id: item.field
|
|
190
|
+
});
|
|
191
|
+
})))));
|
|
192
|
+
});
|
|
193
|
+
export default FilterSort;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TableProps } from 'antd';
|
|
3
|
+
export interface ICustomTableOptionProps {
|
|
4
|
+
className?: string;
|
|
5
|
+
style?: React.CSSProperties;
|
|
6
|
+
size?: 'small' | 'default' | 'middle';
|
|
7
|
+
filter?: Record<string, any>[];
|
|
8
|
+
columns?: TableProps<any>['columns'];
|
|
9
|
+
onSave?: (data: any) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const LMCustomTableOption: React.FC<ICustomTableOptionProps>;
|
|
12
|
+
export default LMCustomTableOption;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
+
import React, { forwardRef, useState, useEffect, useRef } from 'react';
|
|
3
|
+
import { Drawer, Tabs, Radio, IconFont, Space, Button } from 'linkmore-design';
|
|
4
|
+
import ColumnsSort from './columnsSort';
|
|
5
|
+
import FilterSort from './filterSort';
|
|
6
|
+
import classNames from 'classnames';
|
|
7
|
+
var TabPane = Tabs.TabPane;
|
|
8
|
+
var optionsWithDisabled = [{
|
|
9
|
+
label: '紧凑型',
|
|
10
|
+
value: 'small'
|
|
11
|
+
}, {
|
|
12
|
+
label: '默认',
|
|
13
|
+
value: 'default'
|
|
14
|
+
}, {
|
|
15
|
+
label: '中等',
|
|
16
|
+
value: 'middle'
|
|
17
|
+
}];
|
|
18
|
+
var prefixCls = 'lm_custom-table-option';
|
|
19
|
+
var LMCustomTableOption = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
20
|
+
var className = props.className;
|
|
21
|
+
var filterRef = useRef(null);
|
|
22
|
+
var columnsRef = useRef(null); // const sizeRef = useRef(null)
|
|
23
|
+
|
|
24
|
+
var _useState = useState(false),
|
|
25
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
26
|
+
visible = _useState2[0],
|
|
27
|
+
setVisible = _useState2[1];
|
|
28
|
+
|
|
29
|
+
var _useState3 = useState({
|
|
30
|
+
filter: [],
|
|
31
|
+
columns: [],
|
|
32
|
+
size: 'small'
|
|
33
|
+
}),
|
|
34
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
35
|
+
lmOptions = _useState4[0],
|
|
36
|
+
setLmOptions = _useState4[1];
|
|
37
|
+
|
|
38
|
+
var openSetting = function openSetting() {
|
|
39
|
+
setVisible(true);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
useEffect(function () {
|
|
43
|
+
setLmOptions({
|
|
44
|
+
filter: props.filter,
|
|
45
|
+
columns: props.columns,
|
|
46
|
+
size: props.size
|
|
47
|
+
});
|
|
48
|
+
}, []);
|
|
49
|
+
/** 提交按钮 */
|
|
50
|
+
|
|
51
|
+
var onOk = function onOk() {
|
|
52
|
+
var _a, _b, _c, _d, _e;
|
|
53
|
+
/** tableInfo */
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
var columnsData = (_a = columnsRef.current) === null || _a === void 0 ? void 0 : _a.getColumns();
|
|
57
|
+
var ColStateValue = (_b = columnsRef.current) === null || _b === void 0 ? void 0 : _b.getColStateValue();
|
|
58
|
+
/** filterInfo */
|
|
59
|
+
|
|
60
|
+
var filterData = (_c = filterRef.current) === null || _c === void 0 ? void 0 : _c.getLocalFilter();
|
|
61
|
+
var filterStateValue = (_d = filterRef.current) === null || _d === void 0 ? void 0 : _d.getFilterStateValue();
|
|
62
|
+
console.log('--columnsData:', columnsData, ColStateValue, '--filterData:', filterData, filterStateValue, 'size:', lmOptions.size);
|
|
63
|
+
(_e = props.onSave) === null || _e === void 0 ? void 0 : _e.call(props, {
|
|
64
|
+
columnsData: columnsData,
|
|
65
|
+
ColStateValue: ColStateValue,
|
|
66
|
+
filterData: filterData,
|
|
67
|
+
filterStateValue: filterStateValue,
|
|
68
|
+
size: lmOptions.size
|
|
69
|
+
});
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
|
|
73
|
+
type: 'lmweb-setting',
|
|
74
|
+
style: {
|
|
75
|
+
fontSize: '20px'
|
|
76
|
+
},
|
|
77
|
+
onClick: openSetting
|
|
78
|
+
}), /*#__PURE__*/React.createElement(Drawer, {
|
|
79
|
+
className: classNames(className, prefixCls),
|
|
80
|
+
title: "\u4E2A\u6027\u5316\u8BBE\u7F6E",
|
|
81
|
+
visible: visible,
|
|
82
|
+
extra: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
|
|
83
|
+
size: "small",
|
|
84
|
+
onClick: function onClick() {
|
|
85
|
+
return setVisible(false);
|
|
86
|
+
}
|
|
87
|
+
}, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
|
|
88
|
+
size: "small",
|
|
89
|
+
onClick: onOk,
|
|
90
|
+
type: "primary"
|
|
91
|
+
}, "\u786E\u8BA4")),
|
|
92
|
+
onClose: function onClose() {
|
|
93
|
+
return setVisible(false);
|
|
94
|
+
}
|
|
95
|
+
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
96
|
+
defaultActiveKey: "1"
|
|
97
|
+
}, /*#__PURE__*/React.createElement(TabPane, {
|
|
98
|
+
tab: "\u4E2A\u6027\u5316\u7B5B\u9009",
|
|
99
|
+
key: "1"
|
|
100
|
+
}, /*#__PURE__*/React.createElement(FilterSort, {
|
|
101
|
+
ref: filterRef,
|
|
102
|
+
filter: lmOptions.filter
|
|
103
|
+
})), /*#__PURE__*/React.createElement(TabPane, {
|
|
104
|
+
tab: "\u5217\u5B57\u6BB5\u8BBE\u7F6E",
|
|
105
|
+
key: "2"
|
|
106
|
+
}, /*#__PURE__*/React.createElement(ColumnsSort, {
|
|
107
|
+
ref: columnsRef,
|
|
108
|
+
columns: lmOptions.columns
|
|
109
|
+
})), /*#__PURE__*/React.createElement(TabPane, {
|
|
110
|
+
tab: "\u5176\u4ED6",
|
|
111
|
+
key: "3"
|
|
112
|
+
}, /*#__PURE__*/React.createElement("div", null, "\u5217\u8868\u6837\u5F0F"), /*#__PURE__*/React.createElement(Radio.Group, {
|
|
113
|
+
options: optionsWithDisabled,
|
|
114
|
+
onChange: function onChange(e) {
|
|
115
|
+
return setLmOptions(Object.assign(Object.assign({}, lmOptions), {
|
|
116
|
+
size: e.target.value
|
|
117
|
+
}));
|
|
118
|
+
},
|
|
119
|
+
value: lmOptions.size
|
|
120
|
+
})))));
|
|
121
|
+
});
|
|
122
|
+
export default LMCustomTableOption;
|