@arim-aisdc/public-components 0.0.69 → 0.0.71
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/components/BaseInfo/BaseInfo.d.ts +1 -1
- package/dist/components/ConfigProvider/ConfigProvider.js +1 -1
- package/dist/components/ConfigProvider/context.d.ts +2 -0
- package/dist/components/TableMax/TableBody/contextMenu/ContextMenu.js +6 -1
- package/dist/components/TableMax/TableBody/index.d.ts +1 -2
- package/dist/components/TableMax/TableBody/index.js +24 -37
- package/dist/components/TableMax/TableBody/index.less +17 -15
- package/dist/components/TableMax/TableHeader/Cell.js +6 -1
- package/dist/components/TableMax/TableMax.js +0 -3
- package/dist/components/TableMax/components/ColumnSetting/index.js +21 -10
- package/dist/components/TableMax/components/ColumnSetting/index.less +24 -6
- package/dist/components/TableMax/components/ColumnSort/customSortFns.d.ts +8 -8
- package/dist/components/TableMax/tableMax.less +0 -6
- package/dist/components/TableMax/type.d.ts +5 -2
- package/dist/themes/variables.less +4 -4
- package/dist/themes/variablesConfig.js +6 -2
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ export declare const foramtBaseInfoField: (data: any, dataField: BaseInfoFieldTy
|
|
|
17
17
|
value: any;
|
|
18
18
|
field: string;
|
|
19
19
|
label?: string;
|
|
20
|
-
text: string | Element |
|
|
20
|
+
text: string | JSX.Element | Element;
|
|
21
21
|
units?: string;
|
|
22
22
|
width?: string;
|
|
23
23
|
labelWidth?: string;
|
|
@@ -15,7 +15,7 @@ export var ConfigProvider = function ConfigProvider(_ref) {
|
|
|
15
15
|
children = _ref.children;
|
|
16
16
|
var memoedConfig = useMemo(function () {
|
|
17
17
|
return _objectSpread(_objectSpread({}, DEFAULT_CONTEXT), config);
|
|
18
|
-
}, [
|
|
18
|
+
}, [Object.values(config)]);
|
|
19
19
|
var root = config.root,
|
|
20
20
|
theme = config.theme,
|
|
21
21
|
variablesJson = config.variablesJson,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useEffect, useLayoutEffect, useRef } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
+
import { useConfig } from "../../../ConfigProvider";
|
|
3
4
|
import "./index.less";
|
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -13,6 +14,8 @@ var ContextMenu = function ContextMenu(_ref) {
|
|
|
13
14
|
onClickContextMenu = _ref.onClickContextMenu,
|
|
14
15
|
closeContextMenu = _ref.closeContextMenu;
|
|
15
16
|
var wrapperRef = useRef(null);
|
|
17
|
+
var _useConfig = useConfig(),
|
|
18
|
+
root = _useConfig.root;
|
|
16
19
|
var handleClickMenu = function handleClickMenu(value) {
|
|
17
20
|
onClickContextMenu({
|
|
18
21
|
row: row,
|
|
@@ -65,7 +68,9 @@ var ContextMenu = function ContextMenu(_ref) {
|
|
|
65
68
|
children: option.label
|
|
66
69
|
}, option.value);
|
|
67
70
|
})
|
|
68
|
-
}),
|
|
71
|
+
}),
|
|
72
|
+
// document.body,
|
|
73
|
+
root ? document.querySelector(root) : document.body)
|
|
69
74
|
});
|
|
70
75
|
};
|
|
71
76
|
export default ContextMenu;
|
|
@@ -44,7 +44,6 @@ type TableBodyPropsType = {
|
|
|
44
44
|
selectRowWhenClick: boolean;
|
|
45
45
|
datas: any[];
|
|
46
46
|
hasVerticalScrollBar: boolean;
|
|
47
|
-
emptyDataHeight: number;
|
|
48
47
|
canEditRowWhenDClick: boolean;
|
|
49
48
|
editingRowId: string;
|
|
50
49
|
handleEditRowWhenDClick: (row: any) => void;
|
|
@@ -71,5 +70,5 @@ type TableBodyPropsType = {
|
|
|
71
70
|
};
|
|
72
71
|
tableTooltip: boolean;
|
|
73
72
|
};
|
|
74
|
-
declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas,
|
|
73
|
+
declare const TableBody: ({ tableContentRef, tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
75
74
|
export default TableBody;
|
|
@@ -18,21 +18,22 @@ import { useDrop } from 'react-dnd';
|
|
|
18
18
|
import { CustomDragLayer } from "../components/CustomDragerLayer";
|
|
19
19
|
// import RowContent from "../components/RowContent";
|
|
20
20
|
|
|
21
|
-
import { useCallback,
|
|
21
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
22
22
|
import { createPortal } from 'react-dom';
|
|
23
23
|
// @ts-ignore
|
|
24
24
|
import DataEmptyDarkPng from "../../../assets/images/data-empty-dark.png";
|
|
25
25
|
// @ts-ignore
|
|
26
26
|
import DataEmptyLightPng from "../../../assets/images/data-empty-light.png";
|
|
27
|
+
import { useConfig } from "../../ConfigProvider";
|
|
27
28
|
import { ColumnType } from "../TableMax";
|
|
28
29
|
import Row from "./Row";
|
|
29
30
|
import ContextMenu from "./contextMenu/ContextMenu";
|
|
30
31
|
import "./index.less";
|
|
31
32
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
32
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
34
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
35
|
var TableBody = function TableBody(_ref) {
|
|
35
|
-
var
|
|
36
|
+
var _table$getRowModel$ro2, _tableContentRef$curr, _headerGroups;
|
|
36
37
|
var tableContentRef = _ref.tableContentRef,
|
|
37
38
|
tableBodyRef = _ref.tableBodyRef,
|
|
38
39
|
table = _ref.table,
|
|
@@ -66,7 +67,6 @@ var TableBody = function TableBody(_ref) {
|
|
|
66
67
|
selectRowWhenClick = _ref.selectRowWhenClick,
|
|
67
68
|
hasVerticalScrollBar = _ref.hasVerticalScrollBar,
|
|
68
69
|
datas = _ref.datas,
|
|
69
|
-
emptyDataHeight = _ref.emptyDataHeight,
|
|
70
70
|
canEditRowWhenDClick = _ref.canEditRowWhenDClick,
|
|
71
71
|
editingRowId = _ref.editingRowId,
|
|
72
72
|
handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
|
|
@@ -76,6 +76,9 @@ var TableBody = function TableBody(_ref) {
|
|
|
76
76
|
onClickContextMenu = _ref.onClickContextMenu,
|
|
77
77
|
getRowHoverTipConfig = _ref.getRowHoverTipConfig,
|
|
78
78
|
tableTooltip = _ref.tableTooltip;
|
|
79
|
+
var _useConfig = useConfig(),
|
|
80
|
+
root = _useConfig.root,
|
|
81
|
+
renderEmpty = _useConfig.renderEmpty;
|
|
79
82
|
var headerGroups = table.getHeaderGroups();
|
|
80
83
|
var _useState = useState({
|
|
81
84
|
visible: false,
|
|
@@ -215,33 +218,16 @@ var TableBody = function TableBody(_ref) {
|
|
|
215
218
|
}),
|
|
216
219
|
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
217
220
|
dropRef = _useDrop2[1];
|
|
218
|
-
var ref = useRef(null);
|
|
219
|
-
useLayoutEffect(function () {
|
|
220
|
-
var _tableBodyRef$current;
|
|
221
|
-
if (ref.current && tableBodyRef !== null && tableBodyRef !== void 0 && (_tableBodyRef$current = tableBodyRef.current) !== null && _tableBodyRef$current !== void 0 && _tableBodyRef$current.clientWidth) {
|
|
222
|
-
var _tableBodyRef$current2;
|
|
223
|
-
ref.current.style.width = "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientWidth, "px");
|
|
224
|
-
}
|
|
225
|
-
}, [tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current3 = tableBodyRef.current) === null || _tableBodyRef$current3 === void 0 ? void 0 : _tableBodyRef$current3.clientWidth]);
|
|
226
221
|
var EmptyContent = function EmptyContent() {
|
|
227
|
-
return /*#__PURE__*/_jsx("
|
|
228
|
-
className: "empty-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
ref: ref,
|
|
234
|
-
className: "empty-wapper",
|
|
235
|
-
style: {
|
|
236
|
-
height: emptyDataHeight
|
|
237
|
-
},
|
|
238
|
-
children: loading ? /*#__PURE__*/_jsx(_Spin, {}) : /*#__PURE__*/_jsxs("span", {
|
|
239
|
-
className: "empty-content",
|
|
240
|
-
ref: dropRef,
|
|
222
|
+
return /*#__PURE__*/_jsx("div", {
|
|
223
|
+
className: "empty-wapper",
|
|
224
|
+
children: loading ? /*#__PURE__*/_jsx(_Spin, {}) : /*#__PURE__*/_jsx("span", {
|
|
225
|
+
className: "empty-content",
|
|
226
|
+
ref: dropRef,
|
|
227
|
+
children: renderEmpty ? renderEmpty() : /*#__PURE__*/_jsxs(_Fragment, {
|
|
241
228
|
children: [/*#__PURE__*/_jsx("img", {
|
|
242
229
|
className: "empty-img",
|
|
243
|
-
src: theme === 'dark' ? DataEmptyDarkPng : DataEmptyLightPng
|
|
244
|
-
height: "60"
|
|
230
|
+
src: theme === 'dark' ? DataEmptyDarkPng : DataEmptyLightPng
|
|
245
231
|
}), /*#__PURE__*/_jsx("span", {
|
|
246
232
|
className: "empty-text",
|
|
247
233
|
children: "\u6682\u65E0\u6570\u636E"
|
|
@@ -298,13 +284,12 @@ var TableBody = function TableBody(_ref) {
|
|
|
298
284
|
}, row.id);
|
|
299
285
|
});
|
|
300
286
|
};
|
|
301
|
-
|
|
287
|
+
|
|
288
|
+
// 是否有数据
|
|
289
|
+
var showTable = useMemo(function () {
|
|
302
290
|
var _table$getRowModel$ro;
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}
|
|
306
|
-
return EmptyContent();
|
|
307
|
-
};
|
|
291
|
+
return !loading && datas.length !== 0 && ((_table$getRowModel$ro = table.getRowModel().rows) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.length) !== 0;
|
|
292
|
+
}, [loading, datas.length, (_table$getRowModel$ro2 = table.getRowModel().rows) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.length]);
|
|
308
293
|
return (
|
|
309
294
|
/*#__PURE__*/
|
|
310
295
|
// 修复筛选数据为空时,滚动条丢失
|
|
@@ -318,7 +303,9 @@ var TableBody = function TableBody(_ref) {
|
|
|
318
303
|
rowSelectedId: rowSelectedId,
|
|
319
304
|
table: table,
|
|
320
305
|
tableId: tableId
|
|
321
|
-
}),
|
|
306
|
+
}),
|
|
307
|
+
// document.body,
|
|
308
|
+
root ? document.querySelector(root) : document.body), showTable ? /*#__PURE__*/_jsxs("table", {
|
|
322
309
|
style: {
|
|
323
310
|
width: "".concat(((_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientWidth) - (hasVerticalScrollBar ? 10 : 0), "px")
|
|
324
311
|
},
|
|
@@ -331,9 +318,9 @@ var TableBody = function TableBody(_ref) {
|
|
|
331
318
|
})
|
|
332
319
|
}), /*#__PURE__*/_jsx("tbody", {
|
|
333
320
|
id: "table-max-tableBody-tbody-".concat(tableId),
|
|
334
|
-
children:
|
|
321
|
+
children: TBodyContent()
|
|
335
322
|
})]
|
|
336
|
-
}), /*#__PURE__*/_jsx(ContextMenu, _objectSpread(_objectSpread({}, contextMenuData), {}, {
|
|
323
|
+
}) : EmptyContent(), /*#__PURE__*/_jsx(ContextMenu, _objectSpread(_objectSpread({}, contextMenuData), {}, {
|
|
337
324
|
onClickContextMenu: onClickContextMenu,
|
|
338
325
|
closeContextMenu: closeContextMenu
|
|
339
326
|
}))]
|
|
@@ -87,30 +87,32 @@ table {
|
|
|
87
87
|
height: 100%;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
.empty-
|
|
91
|
-
width: 100%;
|
|
90
|
+
.empty-wapper {
|
|
92
91
|
height: 100%;
|
|
92
|
+
width: 100%;
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
align-items: center;
|
|
97
|
+
position: sticky;
|
|
98
|
+
left: 0;
|
|
93
99
|
|
|
94
|
-
.empty-
|
|
100
|
+
.empty-content {
|
|
95
101
|
display: flex;
|
|
96
102
|
flex-direction: column;
|
|
97
103
|
justify-content: center;
|
|
98
104
|
align-items: center;
|
|
99
|
-
|
|
100
|
-
left: 0;
|
|
105
|
+
width: 100%;
|
|
101
106
|
|
|
102
|
-
.empty-
|
|
103
|
-
|
|
104
|
-
flex-direction: column;
|
|
105
|
-
justify-content: center;
|
|
106
|
-
align-items: center;
|
|
107
|
-
width: 100%;
|
|
107
|
+
.empty-img {
|
|
108
|
+
height: 80px;
|
|
108
109
|
}
|
|
109
|
-
}
|
|
110
110
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
111
|
+
.empty-text {
|
|
112
|
+
color: @globalColor2;
|
|
113
|
+
font-size: 12px;
|
|
114
|
+
margin-top: 12px;
|
|
115
|
+
}
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
|
|
@@ -21,6 +21,7 @@ import { flexRender } from '@tanstack/react-table';
|
|
|
21
21
|
import { useMemo, useState } from 'react';
|
|
22
22
|
import { useDrag, useDrop } from 'react-dnd';
|
|
23
23
|
import { createPortal } from 'react-dom';
|
|
24
|
+
import { useConfig } from "../../ConfigProvider";
|
|
24
25
|
import { ColumnType } from "../TableMax";
|
|
25
26
|
import Sort from "../components/ColumnSort";
|
|
26
27
|
import "./index.less";
|
|
@@ -38,6 +39,8 @@ var Cell = function Cell(_ref) {
|
|
|
38
39
|
hasGroup = _ref.hasGroup,
|
|
39
40
|
canSorting = _ref.canSorting,
|
|
40
41
|
getHeaderCellProps = _ref.getHeaderCellProps;
|
|
42
|
+
var _useConfig = useConfig(),
|
|
43
|
+
root = _useConfig.root;
|
|
41
44
|
var cannotDragColumn = [ColumnType.Darg, ColumnType.Selection, ColumnType.Expander, ColumnType.PlaceHolder];
|
|
42
45
|
var getState = table.getState,
|
|
43
46
|
setColumnOrder = table.setColumnOrder;
|
|
@@ -141,7 +144,9 @@ var Cell = function Cell(_ref) {
|
|
|
141
144
|
height: (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientHeight,
|
|
142
145
|
transform: "translateX(".concat(table.getState().columnSizingInfo.deltaOffset || 0, "px)")
|
|
143
146
|
}
|
|
144
|
-
}),
|
|
147
|
+
}),
|
|
148
|
+
// document.body,
|
|
149
|
+
root ? document.querySelector(root) : document.body) : null]
|
|
145
150
|
});
|
|
146
151
|
};
|
|
147
152
|
export default Cell;
|
|
@@ -161,8 +161,6 @@ var TableMax = function TableMax(_ref) {
|
|
|
161
161
|
originSelectRowWhenClick = _ref$selectRowWhenCli === void 0 ? true : _ref$selectRowWhenCli,
|
|
162
162
|
_ref$autoHeight = _ref.autoHeight,
|
|
163
163
|
autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
|
|
164
|
-
_ref$emptyDataHeight = _ref.emptyDataHeight,
|
|
165
|
-
emptyDataHeight = _ref$emptyDataHeight === void 0 ? 100 : _ref$emptyDataHeight,
|
|
166
164
|
_ref$dragBeforeEnd = _ref.dragBeforeEnd,
|
|
167
165
|
dragBeforeEnd = _ref$dragBeforeEnd === void 0 ? function () {
|
|
168
166
|
return true;
|
|
@@ -983,7 +981,6 @@ var TableMax = function TableMax(_ref) {
|
|
|
983
981
|
var tableBodyProps = {
|
|
984
982
|
tableContentRef: tableContentRef,
|
|
985
983
|
tableBodyRef: tableBodyRef,
|
|
986
|
-
emptyDataHeight: emptyDataHeight,
|
|
987
984
|
table: table,
|
|
988
985
|
tableId: tableId,
|
|
989
986
|
reorderRow: reorderRow,
|
|
@@ -33,7 +33,8 @@ var SettingItem = function SettingItem(_ref) {
|
|
|
33
33
|
column = _ref.column,
|
|
34
34
|
canSelection = _ref.canSelection,
|
|
35
35
|
selectionWithoutChecked = _ref.selectionWithoutChecked,
|
|
36
|
-
getRowCanExpand = _ref.getRowCanExpand
|
|
36
|
+
getRowCanExpand = _ref.getRowCanExpand,
|
|
37
|
+
draggable = _ref.draggable;
|
|
37
38
|
var getState = table.getState,
|
|
38
39
|
setColumnOrder = table.setColumnOrder;
|
|
39
40
|
var _getState = getState(),
|
|
@@ -174,7 +175,9 @@ var SettingItem = function SettingItem(_ref) {
|
|
|
174
175
|
}
|
|
175
176
|
};
|
|
176
177
|
return /*#__PURE__*/_jsx("div", {
|
|
177
|
-
ref:
|
|
178
|
+
ref: function ref(node) {
|
|
179
|
+
dropRef(node && draggable ? node : null);
|
|
180
|
+
},
|
|
178
181
|
className: "setting-item",
|
|
179
182
|
style: {
|
|
180
183
|
opacity: isDragging ? 0.5 : 1
|
|
@@ -182,15 +185,18 @@ var SettingItem = function SettingItem(_ref) {
|
|
|
182
185
|
children: /*#__PURE__*/_jsx("div", {
|
|
183
186
|
ref: previewRef,
|
|
184
187
|
children: /*#__PURE__*/_jsxs("div", {
|
|
185
|
-
ref:
|
|
188
|
+
ref: function ref(node) {
|
|
189
|
+
dragRef(node && draggable ? node : null);
|
|
190
|
+
},
|
|
186
191
|
className: "setting-item-content",
|
|
187
|
-
children: [/*#__PURE__*/_jsxs("
|
|
192
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
188
193
|
className: "content-left",
|
|
189
|
-
children: [/*#__PURE__*/_jsx("i", {
|
|
194
|
+
children: [draggable && /*#__PURE__*/_jsx("i", {
|
|
190
195
|
className: "icon iconfont-other icon-other-drag drag-handle"
|
|
191
196
|
}), /*#__PURE__*/_jsx(_Checkbox, {
|
|
192
197
|
checked: column.getIsVisible(),
|
|
193
198
|
onChange: column.getToggleVisibilityHandler(),
|
|
199
|
+
className: "content-left-checkbox",
|
|
194
200
|
children: typeof (column === null || column === void 0 || (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : _column$columnDef.header) === 'function' ? column.columnDef.header() : column === null || column === void 0 || (_column$columnDef2 = column.columnDef) === null || _column$columnDef2 === void 0 ? void 0 : _column$columnDef2.header
|
|
195
201
|
})]
|
|
196
202
|
}), /*#__PURE__*/_jsx("span", {
|
|
@@ -198,6 +204,7 @@ var SettingItem = function SettingItem(_ref) {
|
|
|
198
204
|
return /*#__PURE__*/_jsx(_Tooltip, {
|
|
199
205
|
placement: "top",
|
|
200
206
|
title: item.tooltip,
|
|
207
|
+
zIndex: 99999,
|
|
201
208
|
children: /*#__PURE__*/_jsx("i", {
|
|
202
209
|
className: "icon iconfont-other icon-other-".concat(item.icon, " move-handle"),
|
|
203
210
|
onClick: function onClick() {
|
|
@@ -294,17 +301,20 @@ var ColumnSetting = function ColumnSetting(_ref3) {
|
|
|
294
301
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
295
302
|
table.getLeftLeafColumns().length > leftLength && arr.push({
|
|
296
303
|
groupName: '固定列首',
|
|
297
|
-
groupList: table.getLeftLeafColumns()
|
|
304
|
+
groupList: table.getLeftLeafColumns(),
|
|
305
|
+
draggable: false
|
|
298
306
|
});
|
|
299
307
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
300
308
|
table.getCenterLeafColumns().length > 0 && arr.push({
|
|
301
309
|
groupName: table.getLeftLeafColumns().length > leftLength || table.getRightLeafColumns().length > 0 ? '不固定' : '',
|
|
302
|
-
groupList: table.getCenterLeafColumns()
|
|
310
|
+
groupList: table.getCenterLeafColumns(),
|
|
311
|
+
draggable: true
|
|
303
312
|
});
|
|
304
313
|
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
305
314
|
table.getRightLeafColumns().length > 0 && arr.push({
|
|
306
315
|
groupName: '固定列尾',
|
|
307
|
-
groupList: table.getRightLeafColumns()
|
|
316
|
+
groupList: table.getRightLeafColumns(),
|
|
317
|
+
draggable: false
|
|
308
318
|
});
|
|
309
319
|
// console.log('columnPinningGroup===============', arr);
|
|
310
320
|
|
|
@@ -332,7 +342,7 @@ var ColumnSetting = function ColumnSetting(_ref3) {
|
|
|
332
342
|
defaultChecked: enableFilters,
|
|
333
343
|
onChange: onFilterSwitchChange
|
|
334
344
|
})]
|
|
335
|
-
}) :
|
|
345
|
+
}) : null, /*#__PURE__*/_jsxs("div", {
|
|
336
346
|
className: "column-setting-wapper",
|
|
337
347
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
338
348
|
className: "column-setting-header",
|
|
@@ -363,7 +373,8 @@ var ColumnSetting = function ColumnSetting(_ref3) {
|
|
|
363
373
|
table: table,
|
|
364
374
|
canSelection: canSelection,
|
|
365
375
|
selectionWithoutChecked: selectionWithoutChecked,
|
|
366
|
-
getRowCanExpand: getRowCanExpand
|
|
376
|
+
getRowCanExpand: getRowCanExpand,
|
|
377
|
+
draggable: item.draggable
|
|
367
378
|
}, column.id);
|
|
368
379
|
})]
|
|
369
380
|
}, item === null || item === void 0 ? void 0 : item.groupName);
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
.column-setting-container {
|
|
3
2
|
position: relative;
|
|
4
3
|
display: inline-block;
|
|
@@ -33,7 +32,7 @@
|
|
|
33
32
|
flex-direction: column;
|
|
34
33
|
overflow: hidden;
|
|
35
34
|
max-height: 380px;
|
|
36
|
-
padding: 10px
|
|
35
|
+
padding: 10px 6px 12px;
|
|
37
36
|
}
|
|
38
37
|
|
|
39
38
|
.column-setting-header {
|
|
@@ -41,6 +40,7 @@
|
|
|
41
40
|
justify-content: space-between;
|
|
42
41
|
align-items: center;
|
|
43
42
|
margin-bottom: 10px;
|
|
43
|
+
padding: 0 6px;
|
|
44
44
|
|
|
45
45
|
.reset {
|
|
46
46
|
color: @global-primary-color;
|
|
@@ -54,23 +54,40 @@
|
|
|
54
54
|
.column-setting-group-name {
|
|
55
55
|
color: @globalColor3;
|
|
56
56
|
font-size: 12px;
|
|
57
|
-
padding: 4px
|
|
57
|
+
padding: 4px 6px;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.setting-item {
|
|
61
61
|
line-height: 30px;
|
|
62
|
-
border: 1px solid @tableColor7;
|
|
63
62
|
border-radius: 2px;
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
padding: 0 6px;
|
|
64
|
+
|
|
65
|
+
&:hover {
|
|
66
|
+
.move-handle {
|
|
67
|
+
display: inline;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
background-color: @tableColor8;
|
|
71
|
+
}
|
|
66
72
|
|
|
67
73
|
.setting-item-content {
|
|
68
74
|
display: flex;
|
|
69
75
|
justify-content: space-between;
|
|
76
|
+
align-items: center;
|
|
70
77
|
|
|
71
78
|
.content-left {
|
|
72
79
|
overflow: hidden;
|
|
73
80
|
white-space: nowrap;
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
|
|
84
|
+
.content-left-checkbox {
|
|
85
|
+
align-items: center !important;
|
|
86
|
+
|
|
87
|
+
span:first-child {
|
|
88
|
+
top: 0;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
74
91
|
}
|
|
75
92
|
}
|
|
76
93
|
|
|
@@ -79,6 +96,7 @@
|
|
|
79
96
|
}
|
|
80
97
|
|
|
81
98
|
.move-handle {
|
|
99
|
+
display: none;
|
|
82
100
|
margin-left: 4px;
|
|
83
101
|
margin-right: 0;
|
|
84
102
|
color: @tableColor6;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { TableMaxColumnType } from "../../type";
|
|
2
|
-
export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
3
|
-
export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
4
|
-
export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
5
|
-
export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
2
|
+
export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
3
|
+
export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
4
|
+
export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
5
|
+
export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
6
6
|
declare const customSortFns: {
|
|
7
|
-
numberSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
8
|
-
stringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
9
|
-
timeSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
10
|
-
numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
7
|
+
numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
8
|
+
stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
9
|
+
timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
10
|
+
numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
|
|
11
11
|
};
|
|
12
12
|
export default customSortFns;
|
|
13
13
|
export type SortFnType = keyof typeof customSortFns | undefined;
|
|
@@ -192,8 +192,11 @@ export type TableMaxProps = {
|
|
|
192
192
|
defaultHighLightRowId?: string;
|
|
193
193
|
/**高度是否自动占满父级高度 */
|
|
194
194
|
autoHeight?: boolean;
|
|
195
|
-
|
|
196
|
-
|
|
195
|
+
/**
|
|
196
|
+
* @deprecated 已废弃
|
|
197
|
+
* 暂无数据高度
|
|
198
|
+
*/
|
|
199
|
+
emptyDataHeight?: number | string;
|
|
197
200
|
/**禁止拖动的行ID */
|
|
198
201
|
disableDragRowIds?: any[];
|
|
199
202
|
/**拖动列宽时,更改列宽的时机 */
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
// @primary-color: #fa541c; // 全局主色
|
|
3
2
|
@global-primary-color: var(--global-primary-color, #fa541c); // 全局主色
|
|
4
3
|
|
|
@@ -13,6 +12,7 @@
|
|
|
13
12
|
@rowHoverBackgroundColor: var(--table-row-hover-bgc, #ececee);
|
|
14
13
|
|
|
15
14
|
@splite-line: var(--split-line, #ececee);
|
|
15
|
+
@globalColor0: var(--globalColor0, #fdfdfe); // 网格遮罩色
|
|
16
16
|
@globalColor1: var(--globalColor1, #05081a); // 文字颜色
|
|
17
17
|
@globalColor2: var(--globalColor2, #5e6175);
|
|
18
18
|
@globalColor3: var(--globalColor3, #838695);
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
@globalColor7: var(--globalColor7, #ffffff); // 背景色
|
|
23
23
|
@globalColor8: var(--globalColor8, #f5f6f7); // 背景衬托色
|
|
24
24
|
@globalColor9: var(--globalColor9, #f7f7f9); // 网格遮罩色(passed)
|
|
25
|
-
@globalColor0: var(--globalColor0, #fdfdfe); // 网格遮罩色
|
|
26
25
|
@globalColor_10: var(--globalColor_10, #f5f6f7); // 网格遮罩色
|
|
27
26
|
@globalColor_11: var(--globalColor_11, #ececee); //
|
|
28
27
|
@globalColor_12: var(--globalColor_12, #838695); // 铁包运行左侧菜单线
|
|
@@ -37,5 +36,6 @@
|
|
|
37
36
|
@tableColor3: var(--tableColor3, #dadbdfff); // 表格边框颜色
|
|
38
37
|
@tableColor4: var(--tableColor4, #dadbdf7f); // 表格筛选区时间选择框分割线颜色
|
|
39
38
|
@tableColor5: var(--tableColor5, #ffffff); // 表格列设置区拖拽图标颜色
|
|
40
|
-
@tableColor6: var(--tableColor6, #fa541cff); //
|
|
41
|
-
@tableColor7: var(--tableColor7, #1A1D2EFF;); //
|
|
39
|
+
@tableColor6: var(--tableColor6, #fa541cff); // 表格列设置区-列固定图标颜色
|
|
40
|
+
@tableColor7: var(--tableColor7, #1A1D2EFF;); // 表格列设置区-【显示筛选】下边框颜色
|
|
41
|
+
@tableColor8: var(--tableColor8, #F5F6F7;); // 表格列设置区-列表元素hover背景色
|
|
@@ -53,7 +53,9 @@ export var PublicThemeVariablesConfig = {
|
|
|
53
53
|
// 表格列设置区拖拽图标颜色
|
|
54
54
|
'--tableColor6': '#5E6175',
|
|
55
55
|
// 表格列设置区列显隐图标颜色
|
|
56
|
-
'--tableColor7': '#F5F6F7'
|
|
56
|
+
'--tableColor7': '#F5F6F7',
|
|
57
|
+
// 表格列设置区列表元素边框颜色
|
|
58
|
+
'--tableColor8': '#F5F6F7' // 表格列设置区列表元素-hover背景色
|
|
57
59
|
},
|
|
58
60
|
dark: {
|
|
59
61
|
'--global-curd-input-background-color': '#494c5dff',
|
|
@@ -110,6 +112,8 @@ export var PublicThemeVariablesConfig = {
|
|
|
110
112
|
// 表格列设置区拖拽图标颜色
|
|
111
113
|
'--tableColor6': '#FA541CFF',
|
|
112
114
|
// 表格列设置区列显隐图标颜色
|
|
113
|
-
'--tableColor7': '#1A1D2EFF'
|
|
115
|
+
'--tableColor7': '#1A1D2EFF',
|
|
116
|
+
// 表格列设置区列表元素边框颜色
|
|
117
|
+
'--tableColor8': '#838695' // 表格列设置区列表元素-hover背景色
|
|
114
118
|
}
|
|
115
119
|
};
|