@vtx/components 4.0.0-beta.34 → 4.0.0-beta.36
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/es/vtx-datagrid/Store/Provide.js +124 -73
- package/es/vtx-datagrid/ToolBar/components/Density/index.js +2 -0
- package/es/vtx-datagrid/index.js +22 -10
- package/es/vtx-datagrid/renderColumnButtons.js +2 -2
- package/es/vtx-datagrid/style/index.js +23 -20
- package/es/vtx-ellipsis-text/style/index.js +3 -1
- package/es/vtx-select/index.js +2 -4
- package/es/vtx-select/style/index.js +12 -56
- package/es/vtx-split-pane/style/index.js +1 -0
- package/es/vtx-tree-select/index.js +21 -18
- package/es/vtx-tree-select/style/index.js +4 -1
- package/lib/vtx-datagrid/Store/Provide.js +124 -73
- package/lib/vtx-datagrid/ToolBar/components/Density/index.js +2 -0
- package/lib/vtx-datagrid/index.js +22 -10
- package/lib/vtx-datagrid/renderColumnButtons.js +2 -2
- package/lib/vtx-datagrid/style/index.js +23 -20
- package/lib/vtx-ellipsis-text/style/index.js +3 -1
- package/lib/vtx-select/index.js +3 -5
- package/lib/vtx-select/style/index.js +12 -56
- package/lib/vtx-split-pane/style/index.js +1 -0
- package/lib/vtx-tree-select/index.js +21 -18
- package/lib/vtx-tree-select/style/index.js +4 -1
- package/package.json +2 -2
|
@@ -3,21 +3,21 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
|
|
|
3
3
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
4
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
5
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
9
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
10
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
11
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
7
12
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
8
13
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
9
14
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
10
15
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
11
16
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
16
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
17
17
|
import { useMergedState } from '@rc-component/util';
|
|
18
18
|
import request from '@vtx/utils/lib/request';
|
|
19
19
|
import getSignature from '@vtx/utils/lib/getSignature';
|
|
20
|
-
import { createContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
20
|
+
import { createContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
|
21
21
|
import { useIntl } from "../../vtx-provider";
|
|
22
22
|
import { message } from 'antd';
|
|
23
23
|
import { genColumnKey, isFunction, sortByGivenOrder, useDeepCompareEffectDebounce } from "../../utils";
|
|
@@ -25,13 +25,59 @@ import renderColumnButtons from "../renderColumnButtons";
|
|
|
25
25
|
import { getVtxToken } from '@vtx/utils';
|
|
26
26
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
27
|
export var indexColumnKey = '_serialNum';
|
|
28
|
+
function useMergedState1(defaultValue, option) {
|
|
29
|
+
var _ref = option || {},
|
|
30
|
+
controlledValue = _ref.value,
|
|
31
|
+
onChange = _ref.onChange,
|
|
32
|
+
id = _ref.id;
|
|
33
|
+
|
|
34
|
+
// 1. 初始化内部非受控状态
|
|
35
|
+
var _useState = useState(defaultValue),
|
|
36
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
37
|
+
innerValue = _useState2[0],
|
|
38
|
+
setInnerValue = _useState2[1];
|
|
39
|
+
// 记录上一次的值,用于 onChange 回调传参
|
|
40
|
+
var prevValueRef = useRef(controlledValue !== null && controlledValue !== void 0 ? controlledValue : innerValue);
|
|
41
|
+
// 2. 受控模式下,同步更新 prevValueRef
|
|
42
|
+
useEffect(function () {
|
|
43
|
+
if (controlledValue !== undefined) {
|
|
44
|
+
prevValueRef.current = controlledValue;
|
|
45
|
+
}
|
|
46
|
+
}, [controlledValue]);
|
|
47
|
+
// 3. 统一的取值逻辑:优先用受控值,否则用内部值
|
|
48
|
+
var mergedValue = controlledValue !== undefined ? controlledValue : innerValue;
|
|
49
|
+
// 4. 统一的更新方法
|
|
50
|
+
var setValue = useCallback(function (value) {
|
|
51
|
+
var prevValue = mergedValue;
|
|
52
|
+
// 处理函数式更新(和 useState 保持一致)
|
|
53
|
+
var nextValue = typeof value === 'function' ? value(prevValue) : value;
|
|
54
|
+
|
|
55
|
+
// 受控模式:调用 onChange,不更新内部 state
|
|
56
|
+
if (controlledValue !== undefined) {
|
|
57
|
+
onChange === null || onChange === void 0 || onChange(nextValue, prevValue);
|
|
58
|
+
}
|
|
59
|
+
// 非受控模式:更新内部 state,同时触发 onChange
|
|
60
|
+
else {
|
|
61
|
+
setInnerValue(nextValue);
|
|
62
|
+
onChange === null || onChange === void 0 || onChange(nextValue, prevValue);
|
|
63
|
+
}
|
|
64
|
+
// 更新上一次值的缓存
|
|
65
|
+
prevValueRef.current = nextValue;
|
|
66
|
+
}, [controlledValue, mergedValue, onChange]);
|
|
67
|
+
// 5. 重置方法:恢复到初始默认值
|
|
68
|
+
var reset = useCallback(function () {
|
|
69
|
+
var resetValue = typeof defaultValue === 'function' ? defaultValue() : defaultValue;
|
|
70
|
+
setValue(resetValue);
|
|
71
|
+
}, [defaultValue, setValue]);
|
|
72
|
+
return [mergedValue, setValue, reset];
|
|
73
|
+
}
|
|
28
74
|
function useContainer() {
|
|
29
75
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
userId =
|
|
33
|
-
|
|
34
|
-
tenantId =
|
|
76
|
+
var _ref2 = getVtxToken() || {},
|
|
77
|
+
_ref2$userId = _ref2.userId,
|
|
78
|
+
userId = _ref2$userId === void 0 ? '' : _ref2$userId,
|
|
79
|
+
_ref2$tenantId = _ref2.tenantId,
|
|
80
|
+
tenantId = _ref2$tenantId === void 0 ? '' : _ref2$tenantId;
|
|
35
81
|
var intl = useIntl();
|
|
36
82
|
var _props$indexColumn = props.indexColumn,
|
|
37
83
|
indexColumn = _props$indexColumn === void 0 ? true : _props$indexColumn,
|
|
@@ -87,22 +133,22 @@ function useContainer() {
|
|
|
87
133
|
var columnsMapRef = useRef({});
|
|
88
134
|
// 是否可拖拽, 除非columns 至少需要一项不设置 width 让其自适应。
|
|
89
135
|
var isDragRef = useRef(false);
|
|
90
|
-
var
|
|
91
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
92
|
-
columnsMap = _useState2[0],
|
|
93
|
-
setColumnsMap = _useState2[1];
|
|
94
|
-
var _useState3 = useState(false),
|
|
136
|
+
var _useState3 = useState({}),
|
|
95
137
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
var _useState5 = useState(
|
|
138
|
+
columnsMap = _useState4[0],
|
|
139
|
+
setColumnsMap = _useState4[1];
|
|
140
|
+
var _useState5 = useState(false),
|
|
99
141
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
var _useState7 = useState(
|
|
142
|
+
showTable = _useState6[0],
|
|
143
|
+
setShowTable = _useState6[1];
|
|
144
|
+
var _useState7 = useState(''),
|
|
103
145
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
104
|
-
|
|
105
|
-
|
|
146
|
+
keyWords = _useState8[0],
|
|
147
|
+
_setKeyWords = _useState8[1];
|
|
148
|
+
var _useState9 = useState({}),
|
|
149
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
150
|
+
tableConfig = _useState10[0],
|
|
151
|
+
setTableConfig = _useState10[1];
|
|
106
152
|
var _useMergedState = useMergedState(function () {
|
|
107
153
|
return props.size || props.defaultSize || 'middle';
|
|
108
154
|
}, {
|
|
@@ -113,7 +159,7 @@ function useContainer() {
|
|
|
113
159
|
tableSize = _useMergedState2[0],
|
|
114
160
|
setTableSize = _useMergedState2[1];
|
|
115
161
|
var _useMergedState3 = useMergedState(function () {
|
|
116
|
-
return props.tableStyles || ['striped', 'header-background', 'border'];
|
|
162
|
+
return props.tableStyles || props.defaultTableStyles || ['striped', 'header-background', 'border'];
|
|
117
163
|
}, {
|
|
118
164
|
value: props.tableStyles,
|
|
119
165
|
onChange: props.onChangeTableStyles
|
|
@@ -122,7 +168,7 @@ function useContainer() {
|
|
|
122
168
|
tableStyles = _useMergedState4[0],
|
|
123
169
|
setTableStyles = _useMergedState4[1];
|
|
124
170
|
var _useMergedState5 = useMergedState(function () {
|
|
125
|
-
return props.visibleColumnKeys || undefined;
|
|
171
|
+
return props.visibleColumnKeys || props.defaultVisibleColumnKeys || undefined;
|
|
126
172
|
}, {
|
|
127
173
|
value: props.visibleColumnKeys,
|
|
128
174
|
onChange: props.onVisibleColumnsChange
|
|
@@ -131,7 +177,7 @@ function useContainer() {
|
|
|
131
177
|
visibleColumnKeys = _useMergedState6[0],
|
|
132
178
|
setVisibleColumnKeys = _useMergedState6[1];
|
|
133
179
|
var _useMergedState7 = useMergedState(function () {
|
|
134
|
-
return props.uniqueKey || undefined;
|
|
180
|
+
return props.uniqueKey || props.defaultUniqueKey || undefined;
|
|
135
181
|
}, {
|
|
136
182
|
value: props.uniqueKey,
|
|
137
183
|
onChange: props.onChangesUniqueKey
|
|
@@ -170,13 +216,18 @@ function useContainer() {
|
|
|
170
216
|
key: newColumn.key || newColumn.dataIndex,
|
|
171
217
|
disable: disabledColumnKeys === null || disabledColumnKeys === void 0 ? void 0 : disabledColumnKeys.includes(column.dataIndex || column.key),
|
|
172
218
|
render: isFunction(column.renderButtons) ? function (text, record, index) {
|
|
173
|
-
return
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
219
|
+
return /*#__PURE__*/_jsx("div", {
|
|
220
|
+
style: {
|
|
221
|
+
whiteSpace: 'nowrap'
|
|
222
|
+
},
|
|
223
|
+
children: renderColumnButtons({
|
|
224
|
+
renderButtons: column.renderButtons,
|
|
225
|
+
visible: column.renderButtonsVisibleNum,
|
|
226
|
+
text: text,
|
|
227
|
+
record: record,
|
|
228
|
+
index: index,
|
|
229
|
+
TextEnum: TextEnum
|
|
230
|
+
})
|
|
180
231
|
});
|
|
181
232
|
} : 'render' in column ? column.render : function (text) {
|
|
182
233
|
return ['', null, undefined].includes(text) ? '-' : text;
|
|
@@ -194,28 +245,28 @@ function useContainer() {
|
|
|
194
245
|
sortKeyColumns.current = tableConfig.sortKeyColumns;
|
|
195
246
|
return tableConfig.columnsMap;
|
|
196
247
|
} else if (Array.isArray(props.defaultVisibleColumnKeys)) {
|
|
197
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
198
|
-
var
|
|
199
|
-
var key =
|
|
200
|
-
dataIndex =
|
|
201
|
-
fixed =
|
|
202
|
-
disable =
|
|
203
|
-
width =
|
|
248
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref3, index) {
|
|
249
|
+
var _ref4;
|
|
250
|
+
var key = _ref3.key,
|
|
251
|
+
dataIndex = _ref3.dataIndex,
|
|
252
|
+
fixed = _ref3.fixed,
|
|
253
|
+
disable = _ref3.disable,
|
|
254
|
+
width = _ref3.width;
|
|
204
255
|
var columnKey = genColumnKey(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
205
256
|
columnKeyMap[columnKey] = {
|
|
206
|
-
show: indexColumn && indexColumnKey == columnKey ? true : (
|
|
257
|
+
show: indexColumn && indexColumnKey == columnKey ? true : (_ref4 = _toConsumableArray(props.defaultVisibleColumnKeys)) === null || _ref4 === void 0 ? void 0 : _ref4.includes(columnKey),
|
|
207
258
|
fixed: fixed,
|
|
208
259
|
disable: disable,
|
|
209
260
|
width: width
|
|
210
261
|
};
|
|
211
262
|
});
|
|
212
263
|
} else {
|
|
213
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
214
|
-
var key =
|
|
215
|
-
dataIndex =
|
|
216
|
-
fixed =
|
|
217
|
-
disable =
|
|
218
|
-
width =
|
|
264
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref5, index) {
|
|
265
|
+
var key = _ref5.key,
|
|
266
|
+
dataIndex = _ref5.dataIndex,
|
|
267
|
+
fixed = _ref5.fixed,
|
|
268
|
+
disable = _ref5.disable,
|
|
269
|
+
width = _ref5.width;
|
|
219
270
|
var columnKey = genColumnKey(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
220
271
|
columnKeyMap[columnKey] = {
|
|
221
272
|
show: true,
|
|
@@ -232,44 +283,44 @@ function useContainer() {
|
|
|
232
283
|
useDeepCompareEffectDebounce(function () {
|
|
233
284
|
var columnKeyMap = {};
|
|
234
285
|
if (Array.isArray(visibleColumnKeys)) {
|
|
235
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
236
|
-
var
|
|
237
|
-
var key =
|
|
238
|
-
dataIndex =
|
|
239
|
-
fixed =
|
|
240
|
-
disable =
|
|
241
|
-
width =
|
|
286
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref6, index) {
|
|
287
|
+
var _ref7;
|
|
288
|
+
var key = _ref6.key,
|
|
289
|
+
dataIndex = _ref6.dataIndex,
|
|
290
|
+
fixed = _ref6.fixed,
|
|
291
|
+
disable = _ref6.disable,
|
|
292
|
+
width = _ref6.width;
|
|
242
293
|
var columnKey = genColumnKey(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
243
294
|
columnKeyMap[columnKey] = {
|
|
244
|
-
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (
|
|
295
|
+
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (_ref7 = _toConsumableArray(visibleColumnKeys)) === null || _ref7 === void 0 ? void 0 : _ref7.includes(columnKey),
|
|
245
296
|
fixed: fixed,
|
|
246
297
|
disable: disable,
|
|
247
298
|
width: width
|
|
248
299
|
};
|
|
249
300
|
});
|
|
250
301
|
} else if (Array.isArray(props.defaultVisibleColumnKeys)) {
|
|
251
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
252
|
-
var
|
|
253
|
-
var key =
|
|
254
|
-
dataIndex =
|
|
255
|
-
fixed =
|
|
256
|
-
disable =
|
|
257
|
-
width =
|
|
302
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref8, index) {
|
|
303
|
+
var _ref9;
|
|
304
|
+
var key = _ref8.key,
|
|
305
|
+
dataIndex = _ref8.dataIndex,
|
|
306
|
+
fixed = _ref8.fixed,
|
|
307
|
+
disable = _ref8.disable,
|
|
308
|
+
width = _ref8.width;
|
|
258
309
|
var columnKey = genColumnKey(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
259
310
|
columnKeyMap[columnKey] = {
|
|
260
|
-
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (
|
|
311
|
+
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (_ref9 = _toConsumableArray(props.defaultVisibleColumnKeys)) === null || _ref9 === void 0 ? void 0 : _ref9.includes(columnKey),
|
|
261
312
|
fixed: fixed,
|
|
262
313
|
disable: disable,
|
|
263
314
|
width: width
|
|
264
315
|
};
|
|
265
316
|
});
|
|
266
317
|
} else {
|
|
267
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
268
|
-
var key =
|
|
269
|
-
dataIndex =
|
|
270
|
-
fixed =
|
|
271
|
-
disable =
|
|
272
|
-
width =
|
|
318
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref10, index) {
|
|
319
|
+
var key = _ref10.key,
|
|
320
|
+
dataIndex = _ref10.dataIndex,
|
|
321
|
+
fixed = _ref10.fixed,
|
|
322
|
+
disable = _ref10.disable,
|
|
323
|
+
width = _ref10.width;
|
|
273
324
|
var columnKey = genColumnKey(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
274
325
|
columnKeyMap[columnKey] = {
|
|
275
326
|
show: true,
|
|
@@ -280,9 +331,9 @@ function useContainer() {
|
|
|
280
331
|
});
|
|
281
332
|
}
|
|
282
333
|
var sortKeys = visibleColumnKeys || props.defaultVisibleColumnKeys || [];
|
|
283
|
-
sortKeyColumns.current = Object.entries(columnKeyMap).map(function (
|
|
284
|
-
var
|
|
285
|
-
key =
|
|
334
|
+
sortKeyColumns.current = Object.entries(columnKeyMap).map(function (_ref11) {
|
|
335
|
+
var _ref12 = _slicedToArray(_ref11, 1),
|
|
336
|
+
key = _ref12[0];
|
|
286
337
|
return key;
|
|
287
338
|
});
|
|
288
339
|
if ((sortKeys === null || sortKeys === void 0 ? void 0 : sortKeys.length) > 0) {
|
|
@@ -7,6 +7,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
7
7
|
function Density() {
|
|
8
8
|
var counter = useContext(TableContext);
|
|
9
9
|
var TextEnum = counter.TextEnum;
|
|
10
|
+
console.log('tableSize', counter.tableSize);
|
|
10
11
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
11
12
|
children: /*#__PURE__*/_jsx(Dropdown, {
|
|
12
13
|
menu: {
|
|
@@ -23,6 +24,7 @@ function Density() {
|
|
|
23
24
|
onClick: function onClick(_ref) {
|
|
24
25
|
var _counter$setTableSize;
|
|
25
26
|
var key = _ref.key;
|
|
27
|
+
console.log('counter', counter, key);
|
|
26
28
|
(_counter$setTableSize = counter.setTableSize) === null || _counter$setTableSize === void 0 || _counter$setTableSize.call(counter, key);
|
|
27
29
|
},
|
|
28
30
|
selectedKeys: [counter.tableSize]
|
package/es/vtx-datagrid/index.js
CHANGED
|
@@ -32,8 +32,8 @@ var isMac = navigator.userAgent.indexOf('Mac OS') !== -1;
|
|
|
32
32
|
export var indexColumnKey = '_serialNum';
|
|
33
33
|
export var DEFAULT_HEIGHTS = {
|
|
34
34
|
HEAD_FOOT: 115,
|
|
35
|
-
ALERT:
|
|
36
|
-
TOOLBAR:
|
|
35
|
+
ALERT: 48,
|
|
36
|
+
TOOLBAR: 64
|
|
37
37
|
};
|
|
38
38
|
function VtxTable(props) {
|
|
39
39
|
var _rest$dataSource, _rest$rowSelection, _rest$rowSelection3, _rest$rowSelection4;
|
|
@@ -52,7 +52,8 @@ function VtxTable(props) {
|
|
|
52
52
|
isDragRef = _useContext2.isDragRef,
|
|
53
53
|
rootDomRef = _useContext2.rootDomRef,
|
|
54
54
|
sortKeyColumns = _useContext2.sortKeyColumns,
|
|
55
|
-
TextEnum = _useContext2.TextEnum
|
|
55
|
+
TextEnum = _useContext2.TextEnum,
|
|
56
|
+
tableSize = _useContext2.tableSize;
|
|
56
57
|
var _useSet = useSet({
|
|
57
58
|
// 表格id
|
|
58
59
|
datagridId: "vtx-datagrid-".concat(new Date().getTime()),
|
|
@@ -111,8 +112,18 @@ function VtxTable(props) {
|
|
|
111
112
|
if (!rootDomRef.current) {
|
|
112
113
|
return null;
|
|
113
114
|
}
|
|
114
|
-
var bodyHeight = ((_rootDomRef$current = rootDomRef.current) === null || _rootDomRef$current === void 0 ? void 0 : _rootDomRef$current.clientHeight) - headFootHeight - toolbarHeight.current - alertHeight.current;
|
|
115
115
|
var divs = rootDomRef.current.getElementsByTagName('div');
|
|
116
|
+
var pagination = Array.prototype.filter.call(rootDomRef.current.getElementsByTagName('ul'), function (dom) {
|
|
117
|
+
return dom.className.includes('ant-pagination');
|
|
118
|
+
})[0];
|
|
119
|
+
var tableHeader = Array.prototype.filter.call(rootDomRef.current.getElementsByTagName('thead'), function (dom) {
|
|
120
|
+
return dom.className.includes('ant-table-thead');
|
|
121
|
+
})[0];
|
|
122
|
+
var _headFootHeight = headFootHeight;
|
|
123
|
+
if (tableHeader) {
|
|
124
|
+
_headFootHeight = ((pagination === null || pagination === void 0 ? void 0 : pagination.clientHeight) || 0) + 32 + (tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight);
|
|
125
|
+
}
|
|
126
|
+
var bodyHeight = ((_rootDomRef$current = rootDomRef.current) === null || _rootDomRef$current === void 0 ? void 0 : _rootDomRef$current.clientHeight) - _headFootHeight - toolbarHeight.current - alertHeight.current;
|
|
116
127
|
var bodyDiv = Array.prototype.filter.call(divs, function (dom) {
|
|
117
128
|
return dom.className.includes('ant-table-body') || dom.className.includes('ant-table-content');
|
|
118
129
|
})[0];
|
|
@@ -124,12 +135,11 @@ function VtxTable(props) {
|
|
|
124
135
|
}
|
|
125
136
|
var tableHeight = (_bodyDiv$getElementsB = bodyDiv.getElementsByTagName('table')) === null || _bodyDiv$getElementsB === void 0 || (_bodyDiv$getElementsB = _bodyDiv$getElementsB[0]) === null || _bodyDiv$getElementsB === void 0 ? void 0 : _bodyDiv$getElementsB.clientHeight;
|
|
126
137
|
if (tablePlaceholder) {
|
|
127
|
-
|
|
128
|
-
tablePlaceholder.style.height = "".concat(((_rootDomRef$current2 = rootDomRef.current) === null || _rootDomRef$current2 === void 0 ? void 0 : _rootDomRef$current2.clientHeight) - headFootHeight + 68 - (rest.scrollY || 0) - 12, "px");
|
|
138
|
+
tablePlaceholder.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12 - 32, "px");
|
|
129
139
|
var tableCell = Array.prototype.filter.call(tablePlaceholder.getElementsByTagName('td'), function (dom) {
|
|
130
140
|
return dom.className.includes('ant-table-cell');
|
|
131
141
|
})[0];
|
|
132
|
-
tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12, "px");
|
|
142
|
+
tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12 - 32, "px");
|
|
133
143
|
}
|
|
134
144
|
// antd6.x 的bug 如果table的高度 没有body 高 则没有滚动条
|
|
135
145
|
|
|
@@ -154,7 +164,7 @@ function VtxTable(props) {
|
|
|
154
164
|
resizeObserver.disconnect();
|
|
155
165
|
}
|
|
156
166
|
};
|
|
157
|
-
}, [autoFit]);
|
|
167
|
+
}, [autoFit, tableSize]);
|
|
158
168
|
useLayoutEffect(function () {
|
|
159
169
|
if (autoFit) {
|
|
160
170
|
calculateHeight();
|
|
@@ -251,7 +261,7 @@ function VtxTable(props) {
|
|
|
251
261
|
var _useAntdColumnResize = useAntdColumnResize(function () {
|
|
252
262
|
return {
|
|
253
263
|
columns: columns,
|
|
254
|
-
minWidth:
|
|
264
|
+
minWidth: 10
|
|
255
265
|
};
|
|
256
266
|
}, [columns]),
|
|
257
267
|
resizableColumns = _useAntdColumnResize.resizableColumns,
|
|
@@ -354,7 +364,9 @@ function VtxTable(props) {
|
|
|
354
364
|
bordered: true
|
|
355
365
|
// virtual
|
|
356
366
|
}, rest), {}, {
|
|
357
|
-
dataSource: dataSource
|
|
367
|
+
dataSource: dataSource
|
|
368
|
+
// scroll={{ ...scroll }}
|
|
369
|
+
,
|
|
358
370
|
scroll: _objectSpread({
|
|
359
371
|
x: 'max-content'
|
|
360
372
|
}, scroll),
|
|
@@ -70,8 +70,8 @@ var renderColumnButtons = function renderColumnButtons(_ref) {
|
|
|
70
70
|
};
|
|
71
71
|
})) || [],
|
|
72
72
|
onClick: function onClick(e) {
|
|
73
|
-
var _moreActions$e$key;
|
|
74
|
-
(_moreActions$e$key = moreActions[e.key]) === null || _moreActions$e$key === void 0 || _moreActions$e$key.onClick(record, index);
|
|
73
|
+
var _moreActions$e$key, _moreActions$e$key$on;
|
|
74
|
+
(_moreActions$e$key = moreActions[e.key]) === null || _moreActions$e$key === void 0 || (_moreActions$e$key$on = _moreActions$e$key.onClick) === null || _moreActions$e$key$on === void 0 || _moreActions$e$key$on.call(_moreActions$e$key, record, index);
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
77
|
children: /*#__PURE__*/_jsxs("a", {
|
|
@@ -8,30 +8,33 @@ import { useStyle as useAntdStyle } from "../../vtx-provider";
|
|
|
8
8
|
var genVtxStyle = function genVtxStyle(token) {
|
|
9
9
|
var componentCls = token.componentCls,
|
|
10
10
|
antCls = token.antCls;
|
|
11
|
-
return _defineProperty(
|
|
11
|
+
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty({
|
|
12
12
|
position: 'relative',
|
|
13
|
-
overflow: 'hidden'
|
|
14
|
-
|
|
13
|
+
// overflow: 'hidden',
|
|
14
|
+
display: 'flex',
|
|
15
|
+
flexDirection: 'column'
|
|
16
|
+
}, "".concat(antCls, "-table-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "table", {
|
|
17
|
+
// minWidth: "calc(100% - 2px) !important"
|
|
18
|
+
}), '.ant-spin', _defineProperty({
|
|
15
19
|
height: '100%'
|
|
16
20
|
}, '.ant-spin-container', _defineProperty({
|
|
17
|
-
height: '100%'
|
|
18
|
-
|
|
21
|
+
height: '100%',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
flexDirection: 'column'
|
|
24
|
+
}, '.ant-table', _defineProperty({
|
|
19
25
|
// height: '100%',
|
|
20
|
-
|
|
26
|
+
flex: 1
|
|
27
|
+
}, '.ant-table-container', _defineProperty(_defineProperty({}, '.ant-table-body', {
|
|
28
|
+
scrollbarWidth: "thin"
|
|
29
|
+
}), '.ant-table-content', _defineProperty({}, 'table', {
|
|
21
30
|
// height: '100%',
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
// ['table']: {
|
|
25
|
-
// height: '100%',
|
|
26
|
-
// }
|
|
27
|
-
// }
|
|
28
|
-
// }
|
|
29
|
-
}))), '.ant-table', _defineProperty(_defineProperty(_defineProperty({}, '.ant-table-header', _defineProperty({}, '.ant-table-thead', {
|
|
31
|
+
// minWidth: "calc(100% - 1px) !important",
|
|
32
|
+
})))))), '.ant-table', _defineProperty(_defineProperty(_defineProperty({}, '.ant-table-header', _defineProperty({}, '.ant-table-thead', {
|
|
30
33
|
'>tr>th': {
|
|
31
34
|
background: token.colorBgContainer
|
|
32
35
|
}
|
|
33
36
|
})), '.ant-table-cell', {
|
|
34
|
-
minWidth:
|
|
37
|
+
// minWidth: 10,
|
|
35
38
|
}), '.ant-table-tbody', {
|
|
36
39
|
'>tr.ant-table-placeholder': {
|
|
37
40
|
position: 'absolute',
|
|
@@ -62,9 +65,9 @@ var genVtxStyle = function genVtxStyle(token) {
|
|
|
62
65
|
}
|
|
63
66
|
})), '.ant-pagination', _defineProperty({}, '.ant-pagination-item', {
|
|
64
67
|
borderRadius: token.borderRadiusSM
|
|
65
|
-
}))), "
|
|
68
|
+
})))), "".concat(componentCls, "-fit"), {
|
|
66
69
|
height: '100%'
|
|
67
|
-
}), "
|
|
70
|
+
}), "".concat(componentCls, "-noFit"), {}), "".concat(componentCls, "-no-border"), _defineProperty({}, "".concat(antCls, "-table-wrapper"), _defineProperty({}, "".concat(antCls, "-table"), _defineProperty({}, '>.ant-table-container', _defineProperty(_defineProperty({
|
|
68
71
|
borderColor: 'transparent'
|
|
69
72
|
}, '.ant-table-thead', {
|
|
70
73
|
'>tr>th': {
|
|
@@ -78,7 +81,7 @@ var genVtxStyle = function genVtxStyle(token) {
|
|
|
78
81
|
borderInlineColor: 'transparent !important',
|
|
79
82
|
borderBottomColor: 'transparent !important'
|
|
80
83
|
}
|
|
81
|
-
}))))), "
|
|
84
|
+
}))))), "".concat(componentCls, "-striped"), _defineProperty({}, "".concat(antCls, "-table-wrapper"), _defineProperty({}, "".concat(antCls, "-table"), _defineProperty({}, '>.ant-table-container', _defineProperty({}, '.ant-table-body', {
|
|
82
85
|
'>table >tbody>tr:nth-child(odd)>td': {
|
|
83
86
|
backgroundColor: token.colorBgLayoutTable,
|
|
84
87
|
'&.ant-table-cell-row-hover': {
|
|
@@ -94,11 +97,11 @@ var genVtxStyle = function genVtxStyle(token) {
|
|
|
94
97
|
backgroundColor: token.controlItemBgActiveHover
|
|
95
98
|
}
|
|
96
99
|
}
|
|
97
|
-
}))))), "
|
|
100
|
+
}))))), "".concat(componentCls, "-header-background"), _defineProperty({}, "".concat(antCls, "-table-wrapper"), _defineProperty({}, '.ant-table', _defineProperty({}, '.ant-table-header', _defineProperty({}, '.ant-table-thead', {
|
|
98
101
|
'>tr>th': {
|
|
99
102
|
background: token.colorBgLayoutTable
|
|
100
103
|
}
|
|
101
|
-
})))))
|
|
104
|
+
})))));
|
|
102
105
|
};
|
|
103
106
|
export function useStyle(prefix) {
|
|
104
107
|
return useAntdStyle(prefix, function (token) {
|
|
@@ -10,7 +10,9 @@ var genVtxEllipsisTextStyle = function genVtxEllipsisTextStyle(token) {
|
|
|
10
10
|
return _defineProperty({}, componentCls, _defineProperty(_defineProperty({
|
|
11
11
|
margin: 0,
|
|
12
12
|
overflow: 'hidden',
|
|
13
|
-
textOverflow: 'ellipsis'
|
|
13
|
+
textOverflow: 'ellipsis',
|
|
14
|
+
wordBreak: "break-all",
|
|
15
|
+
wordWrap: "break-word"
|
|
14
16
|
}, "&--single", {
|
|
15
17
|
whiteSpace: 'nowrap'
|
|
16
18
|
}), "&--multi", {
|
package/es/vtx-select/index.js
CHANGED
|
@@ -106,7 +106,7 @@ var VtxSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
106
106
|
return child[key] || '';
|
|
107
107
|
};
|
|
108
108
|
return /*#__PURE__*/_jsx("div", {
|
|
109
|
-
className: "
|
|
109
|
+
className: classnames("".concat(prefixCls, "-all-list"), hashId),
|
|
110
110
|
children: Array.isArray(value) && value.length ? value.map(function (item, index) {
|
|
111
111
|
var name = getChildren(child, item);
|
|
112
112
|
return /*#__PURE__*/_jsx(Tag, {
|
|
@@ -213,9 +213,7 @@ var VtxSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
213
213
|
wrapSSR = _useStyle.wrapSSR,
|
|
214
214
|
hashId = _useStyle.hashId;
|
|
215
215
|
return wrapSSR( /*#__PURE__*/_jsx("div", {
|
|
216
|
-
className: classnames(prefixCls, hashId, {
|
|
217
|
-
'vtx-multi-select': mode == 'multiple' || mode == 'tags'
|
|
218
|
-
}),
|
|
216
|
+
className: classnames(prefixCls, hashId, _defineProperty({}, "".concat(prefixCls, "-multi"), mode == 'multiple' || mode == 'tags')),
|
|
219
217
|
id: elId.current,
|
|
220
218
|
ref: elRef,
|
|
221
219
|
style: _objectSpread(_objectSpread({}, props.style), {}, {
|
|
@@ -4,69 +4,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { over } from '@umijs/utils/compiled/lodash';
|
|
7
8
|
import { useStyle as useAntdStyle } from "../../vtx-provider";
|
|
8
9
|
var genVtxSelectStyle = function genVtxSelectStyle(token) {
|
|
9
10
|
var componentCls = token.componentCls;
|
|
10
|
-
return _defineProperty(_defineProperty({}, componentCls, {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
top: '0',
|
|
18
|
-
verticalAlign: 'top'
|
|
19
|
-
},
|
|
20
|
-
'.vtx-all-list': {
|
|
21
|
-
position: 'absolute',
|
|
22
|
-
zIndex: 999,
|
|
23
|
-
boxSizing: 'border-box',
|
|
24
|
-
width: '100%',
|
|
25
|
-
padding: '5px',
|
|
26
|
-
boxShadow: '0 2px 8px #d9d9d9',
|
|
27
|
-
backgroundColor: 'red !important'
|
|
28
|
-
},
|
|
29
|
-
'.ant-select-selection--multiple': {
|
|
30
|
-
maxHeight: '32px',
|
|
31
|
-
overflow: 'hidden'
|
|
32
|
-
}
|
|
33
|
-
}), '.vtx-multi-select', {
|
|
34
|
-
position: 'relative',
|
|
35
|
-
display: 'inline-block',
|
|
36
|
-
width: '100%',
|
|
37
|
-
maxHeight: '32px !important',
|
|
38
|
-
boxSizing: 'border-box',
|
|
39
|
-
'.vtx-select-count': {
|
|
40
|
-
position: 'absolute',
|
|
41
|
-
top: 0,
|
|
42
|
-
right: 0,
|
|
43
|
-
verticalAlign: 'top',
|
|
44
|
-
borderLeft: 'none',
|
|
45
|
-
borderTopLeftRadius: 0,
|
|
46
|
-
'border-bottom-left-radius': 0
|
|
47
|
-
},
|
|
48
|
-
'.vtx-all-list': {
|
|
49
|
-
position: 'absolute',
|
|
50
|
-
zIndex: 999,
|
|
51
|
-
boxSizing: 'border-box',
|
|
52
|
-
width: '100%',
|
|
53
|
-
padding: '5px',
|
|
54
|
-
boxShadow: '0 2px 8px #d9d9d9'
|
|
55
|
-
},
|
|
56
|
-
'.ant-select-selector': {
|
|
57
|
-
'border-top-right-radius': 0,
|
|
58
|
-
'border-bottom-right-radius': 0,
|
|
59
|
-
maxHeight: '32px !important',
|
|
60
|
-
overflow: 'hidden'
|
|
61
|
-
},
|
|
62
|
-
'.ant-select-selection--multiple': {
|
|
63
|
-
maxHeight: '32px',
|
|
64
|
-
overflow: 'hidden'
|
|
11
|
+
return _defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty({
|
|
12
|
+
width: "100%"
|
|
13
|
+
}, '.ant-select', {
|
|
14
|
+
overflow: "hidden"
|
|
15
|
+
})), "".concat(componentCls, "-multi"), {
|
|
16
|
+
".ant-select-content": {
|
|
17
|
+
flexWrap: "nowrap"
|
|
65
18
|
}
|
|
19
|
+
}), "".concat(componentCls, "-all-list"), {
|
|
20
|
+
maxHeight: 300,
|
|
21
|
+
overflowY: "auto"
|
|
66
22
|
});
|
|
67
23
|
};
|
|
68
24
|
export function useStyle(prefixCls) {
|
|
69
|
-
return useAntdStyle('
|
|
25
|
+
return useAntdStyle('', function (token) {
|
|
70
26
|
var vtxSelectToken = _objectSpread(_objectSpread({}, token), {}, {
|
|
71
27
|
componentCls: ".".concat(prefixCls)
|
|
72
28
|
});
|
|
@@ -10,6 +10,7 @@ var genVtxSplitPaneStyle = function genVtxSplitPaneStyle(token) {
|
|
|
10
10
|
return _defineProperty({}, componentCls, {
|
|
11
11
|
height: '100%',
|
|
12
12
|
overflow: 'hidden',
|
|
13
|
+
backgroundColor: token.colorBgLayout,
|
|
13
14
|
'.ant-splitter-bar .ant-splitter-bar-dragger::before': {
|
|
14
15
|
background: 'transparent'
|
|
15
16
|
},
|