@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
|
@@ -142,24 +142,27 @@ var VtxTreeSelect = function VtxTreeSelect(_ref) {
|
|
|
142
142
|
},
|
|
143
143
|
children: intl.getMessage('treeSelect.clearSelectedItems', '清空已选项')
|
|
144
144
|
})]
|
|
145
|
-
}),
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
145
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
146
|
+
className: classnames("".concat(prefixCls, "-all-list"), hashId),
|
|
147
|
+
children: selectedNodes.length > 0 ? selectedNodes.map(function (item) {
|
|
148
|
+
var _item$fieldNames$labe;
|
|
149
|
+
return /*#__PURE__*/_jsx(Tag, {
|
|
150
|
+
closable: !disabled,
|
|
151
|
+
onClose: function onClose(e) {
|
|
152
|
+
e.stopPropagation();
|
|
153
|
+
clearKey(item[fieldNames.value]);
|
|
154
|
+
},
|
|
155
|
+
styles: {
|
|
156
|
+
root: {
|
|
157
|
+
marginBottom: 5,
|
|
158
|
+
marginRight: 5
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
children: ((_item$fieldNames$labe = item[fieldNames.label]) === null || _item$fieldNames$labe === void 0 ? void 0 : _item$fieldNames$labe.length) > 20 ? "".concat(item[fieldNames.label].slice(0, 20), "...") : item[fieldNames.label]
|
|
162
|
+
}, "tab-".concat(item[fieldNames.value]));
|
|
163
|
+
}) : /*#__PURE__*/_jsx(Empty, {
|
|
164
|
+
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
165
|
+
})
|
|
163
166
|
})]
|
|
164
167
|
});
|
|
165
168
|
var onChangeTreeSelect = function onChangeTreeSelect(value, label, extra) {
|
|
@@ -8,7 +8,7 @@ import { useStyle as useAntdStyle } from "../../vtx-provider";
|
|
|
8
8
|
var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
|
|
9
9
|
var componentCls = token.componentCls;
|
|
10
10
|
console.log('token.controlHeight', token.controlHeight);
|
|
11
|
-
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-popover', {
|
|
11
|
+
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-popover', {
|
|
12
12
|
minWidth: '200px',
|
|
13
13
|
height: '300px',
|
|
14
14
|
overflow: 'auto',
|
|
@@ -48,6 +48,9 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
|
|
|
48
48
|
}, '&:hover', {
|
|
49
49
|
color: '#40a9ff'
|
|
50
50
|
})
|
|
51
|
+
}), "".concat(componentCls, "-all-list"), {
|
|
52
|
+
maxHeight: 300,
|
|
53
|
+
overflowY: "auto"
|
|
51
54
|
}), "".concat(componentCls, "-outer"), {
|
|
52
55
|
position: 'relative',
|
|
53
56
|
display: 'inline-flex',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
@@ -15,30 +16,75 @@ var _renderColumnButtons = _interopRequireDefault(require("../renderColumnButton
|
|
|
15
16
|
var _utils2 = require("@vtx/utils");
|
|
16
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
19
19
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
20
20
|
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."); }
|
|
21
21
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
22
22
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
23
|
+
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; }
|
|
24
|
+
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; }
|
|
25
|
+
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; }
|
|
26
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
27
|
+
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); }
|
|
23
28
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
24
29
|
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."); }
|
|
25
30
|
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); }
|
|
26
31
|
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; }
|
|
27
32
|
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; } }
|
|
28
33
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
|
-
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; }
|
|
30
|
-
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; }
|
|
31
|
-
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; }
|
|
32
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
33
|
-
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); }
|
|
34
34
|
var indexColumnKey = exports.indexColumnKey = '_serialNum';
|
|
35
|
+
function useMergedState1(defaultValue, option) {
|
|
36
|
+
var _ref = option || {},
|
|
37
|
+
controlledValue = _ref.value,
|
|
38
|
+
onChange = _ref.onChange,
|
|
39
|
+
id = _ref.id;
|
|
40
|
+
|
|
41
|
+
// 1. 初始化内部非受控状态
|
|
42
|
+
var _useState = (0, _react.useState)(defaultValue),
|
|
43
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
+
innerValue = _useState2[0],
|
|
45
|
+
setInnerValue = _useState2[1];
|
|
46
|
+
// 记录上一次的值,用于 onChange 回调传参
|
|
47
|
+
var prevValueRef = (0, _react.useRef)(controlledValue !== null && controlledValue !== void 0 ? controlledValue : innerValue);
|
|
48
|
+
// 2. 受控模式下,同步更新 prevValueRef
|
|
49
|
+
(0, _react.useEffect)(function () {
|
|
50
|
+
if (controlledValue !== undefined) {
|
|
51
|
+
prevValueRef.current = controlledValue;
|
|
52
|
+
}
|
|
53
|
+
}, [controlledValue]);
|
|
54
|
+
// 3. 统一的取值逻辑:优先用受控值,否则用内部值
|
|
55
|
+
var mergedValue = controlledValue !== undefined ? controlledValue : innerValue;
|
|
56
|
+
// 4. 统一的更新方法
|
|
57
|
+
var setValue = (0, _react.useCallback)(function (value) {
|
|
58
|
+
var prevValue = mergedValue;
|
|
59
|
+
// 处理函数式更新(和 useState 保持一致)
|
|
60
|
+
var nextValue = typeof value === 'function' ? value(prevValue) : value;
|
|
61
|
+
|
|
62
|
+
// 受控模式:调用 onChange,不更新内部 state
|
|
63
|
+
if (controlledValue !== undefined) {
|
|
64
|
+
onChange === null || onChange === void 0 || onChange(nextValue, prevValue);
|
|
65
|
+
}
|
|
66
|
+
// 非受控模式:更新内部 state,同时触发 onChange
|
|
67
|
+
else {
|
|
68
|
+
setInnerValue(nextValue);
|
|
69
|
+
onChange === null || onChange === void 0 || onChange(nextValue, prevValue);
|
|
70
|
+
}
|
|
71
|
+
// 更新上一次值的缓存
|
|
72
|
+
prevValueRef.current = nextValue;
|
|
73
|
+
}, [controlledValue, mergedValue, onChange]);
|
|
74
|
+
// 5. 重置方法:恢复到初始默认值
|
|
75
|
+
var reset = (0, _react.useCallback)(function () {
|
|
76
|
+
var resetValue = typeof defaultValue === 'function' ? defaultValue() : defaultValue;
|
|
77
|
+
setValue(resetValue);
|
|
78
|
+
}, [defaultValue, setValue]);
|
|
79
|
+
return [mergedValue, setValue, reset];
|
|
80
|
+
}
|
|
35
81
|
function useContainer() {
|
|
36
82
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
userId =
|
|
40
|
-
|
|
41
|
-
tenantId =
|
|
83
|
+
var _ref2 = (0, _utils2.getVtxToken)() || {},
|
|
84
|
+
_ref2$userId = _ref2.userId,
|
|
85
|
+
userId = _ref2$userId === void 0 ? '' : _ref2$userId,
|
|
86
|
+
_ref2$tenantId = _ref2.tenantId,
|
|
87
|
+
tenantId = _ref2$tenantId === void 0 ? '' : _ref2$tenantId;
|
|
42
88
|
var intl = (0, _vtxProvider.useIntl)();
|
|
43
89
|
var _props$indexColumn = props.indexColumn,
|
|
44
90
|
indexColumn = _props$indexColumn === void 0 ? true : _props$indexColumn,
|
|
@@ -94,22 +140,22 @@ function useContainer() {
|
|
|
94
140
|
var columnsMapRef = (0, _react.useRef)({});
|
|
95
141
|
// 是否可拖拽, 除非columns 至少需要一项不设置 width 让其自适应。
|
|
96
142
|
var isDragRef = (0, _react.useRef)(false);
|
|
97
|
-
var
|
|
98
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
99
|
-
columnsMap = _useState2[0],
|
|
100
|
-
setColumnsMap = _useState2[1];
|
|
101
|
-
var _useState3 = (0, _react.useState)(false),
|
|
143
|
+
var _useState3 = (0, _react.useState)({}),
|
|
102
144
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var _useState5 = (0, _react.useState)(
|
|
145
|
+
columnsMap = _useState4[0],
|
|
146
|
+
setColumnsMap = _useState4[1];
|
|
147
|
+
var _useState5 = (0, _react.useState)(false),
|
|
106
148
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
var _useState7 = (0, _react.useState)(
|
|
149
|
+
showTable = _useState6[0],
|
|
150
|
+
setShowTable = _useState6[1];
|
|
151
|
+
var _useState7 = (0, _react.useState)(''),
|
|
110
152
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
111
|
-
|
|
112
|
-
|
|
153
|
+
keyWords = _useState8[0],
|
|
154
|
+
_setKeyWords = _useState8[1];
|
|
155
|
+
var _useState9 = (0, _react.useState)({}),
|
|
156
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
157
|
+
tableConfig = _useState10[0],
|
|
158
|
+
setTableConfig = _useState10[1];
|
|
113
159
|
var _useMergedState = (0, _util.useMergedState)(function () {
|
|
114
160
|
return props.size || props.defaultSize || 'middle';
|
|
115
161
|
}, {
|
|
@@ -120,7 +166,7 @@ function useContainer() {
|
|
|
120
166
|
tableSize = _useMergedState2[0],
|
|
121
167
|
setTableSize = _useMergedState2[1];
|
|
122
168
|
var _useMergedState3 = (0, _util.useMergedState)(function () {
|
|
123
|
-
return props.tableStyles || ['striped', 'header-background', 'border'];
|
|
169
|
+
return props.tableStyles || props.defaultTableStyles || ['striped', 'header-background', 'border'];
|
|
124
170
|
}, {
|
|
125
171
|
value: props.tableStyles,
|
|
126
172
|
onChange: props.onChangeTableStyles
|
|
@@ -129,7 +175,7 @@ function useContainer() {
|
|
|
129
175
|
tableStyles = _useMergedState4[0],
|
|
130
176
|
setTableStyles = _useMergedState4[1];
|
|
131
177
|
var _useMergedState5 = (0, _util.useMergedState)(function () {
|
|
132
|
-
return props.visibleColumnKeys || undefined;
|
|
178
|
+
return props.visibleColumnKeys || props.defaultVisibleColumnKeys || undefined;
|
|
133
179
|
}, {
|
|
134
180
|
value: props.visibleColumnKeys,
|
|
135
181
|
onChange: props.onVisibleColumnsChange
|
|
@@ -138,7 +184,7 @@ function useContainer() {
|
|
|
138
184
|
visibleColumnKeys = _useMergedState6[0],
|
|
139
185
|
setVisibleColumnKeys = _useMergedState6[1];
|
|
140
186
|
var _useMergedState7 = (0, _util.useMergedState)(function () {
|
|
141
|
-
return props.uniqueKey || undefined;
|
|
187
|
+
return props.uniqueKey || props.defaultUniqueKey || undefined;
|
|
142
188
|
}, {
|
|
143
189
|
value: props.uniqueKey,
|
|
144
190
|
onChange: props.onChangesUniqueKey
|
|
@@ -177,13 +223,18 @@ function useContainer() {
|
|
|
177
223
|
key: newColumn.key || newColumn.dataIndex,
|
|
178
224
|
disable: disabledColumnKeys === null || disabledColumnKeys === void 0 ? void 0 : disabledColumnKeys.includes(column.dataIndex || column.key),
|
|
179
225
|
render: (0, _utils.isFunction)(column.renderButtons) ? function (text, record, index) {
|
|
180
|
-
return (0,
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
226
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
227
|
+
style: {
|
|
228
|
+
whiteSpace: 'nowrap'
|
|
229
|
+
},
|
|
230
|
+
children: (0, _renderColumnButtons.default)({
|
|
231
|
+
renderButtons: column.renderButtons,
|
|
232
|
+
visible: column.renderButtonsVisibleNum,
|
|
233
|
+
text: text,
|
|
234
|
+
record: record,
|
|
235
|
+
index: index,
|
|
236
|
+
TextEnum: TextEnum
|
|
237
|
+
})
|
|
187
238
|
});
|
|
188
239
|
} : 'render' in column ? column.render : function (text) {
|
|
189
240
|
return ['', null, undefined].includes(text) ? '-' : text;
|
|
@@ -201,28 +252,28 @@ function useContainer() {
|
|
|
201
252
|
sortKeyColumns.current = tableConfig.sortKeyColumns;
|
|
202
253
|
return tableConfig.columnsMap;
|
|
203
254
|
} else if (Array.isArray(props.defaultVisibleColumnKeys)) {
|
|
204
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
205
|
-
var
|
|
206
|
-
var key =
|
|
207
|
-
dataIndex =
|
|
208
|
-
fixed =
|
|
209
|
-
disable =
|
|
210
|
-
width =
|
|
255
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref3, index) {
|
|
256
|
+
var _ref4;
|
|
257
|
+
var key = _ref3.key,
|
|
258
|
+
dataIndex = _ref3.dataIndex,
|
|
259
|
+
fixed = _ref3.fixed,
|
|
260
|
+
disable = _ref3.disable,
|
|
261
|
+
width = _ref3.width;
|
|
211
262
|
var columnKey = (0, _utils.genColumnKey)(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
212
263
|
columnKeyMap[columnKey] = {
|
|
213
|
-
show: indexColumn && indexColumnKey == columnKey ? true : (
|
|
264
|
+
show: indexColumn && indexColumnKey == columnKey ? true : (_ref4 = _toConsumableArray(props.defaultVisibleColumnKeys)) === null || _ref4 === void 0 ? void 0 : _ref4.includes(columnKey),
|
|
214
265
|
fixed: fixed,
|
|
215
266
|
disable: disable,
|
|
216
267
|
width: width
|
|
217
268
|
};
|
|
218
269
|
});
|
|
219
270
|
} else {
|
|
220
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
221
|
-
var key =
|
|
222
|
-
dataIndex =
|
|
223
|
-
fixed =
|
|
224
|
-
disable =
|
|
225
|
-
width =
|
|
271
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref5, index) {
|
|
272
|
+
var key = _ref5.key,
|
|
273
|
+
dataIndex = _ref5.dataIndex,
|
|
274
|
+
fixed = _ref5.fixed,
|
|
275
|
+
disable = _ref5.disable,
|
|
276
|
+
width = _ref5.width;
|
|
226
277
|
var columnKey = (0, _utils.genColumnKey)(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
227
278
|
columnKeyMap[columnKey] = {
|
|
228
279
|
show: true,
|
|
@@ -239,44 +290,44 @@ function useContainer() {
|
|
|
239
290
|
(0, _utils.useDeepCompareEffectDebounce)(function () {
|
|
240
291
|
var columnKeyMap = {};
|
|
241
292
|
if (Array.isArray(visibleColumnKeys)) {
|
|
242
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
243
|
-
var
|
|
244
|
-
var key =
|
|
245
|
-
dataIndex =
|
|
246
|
-
fixed =
|
|
247
|
-
disable =
|
|
248
|
-
width =
|
|
293
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref6, index) {
|
|
294
|
+
var _ref7;
|
|
295
|
+
var key = _ref6.key,
|
|
296
|
+
dataIndex = _ref6.dataIndex,
|
|
297
|
+
fixed = _ref6.fixed,
|
|
298
|
+
disable = _ref6.disable,
|
|
299
|
+
width = _ref6.width;
|
|
249
300
|
var columnKey = (0, _utils.genColumnKey)(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
250
301
|
columnKeyMap[columnKey] = {
|
|
251
|
-
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (
|
|
302
|
+
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (_ref7 = _toConsumableArray(visibleColumnKeys)) === null || _ref7 === void 0 ? void 0 : _ref7.includes(columnKey),
|
|
252
303
|
fixed: fixed,
|
|
253
304
|
disable: disable,
|
|
254
305
|
width: width
|
|
255
306
|
};
|
|
256
307
|
});
|
|
257
308
|
} else if (Array.isArray(props.defaultVisibleColumnKeys)) {
|
|
258
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
259
|
-
var
|
|
260
|
-
var key =
|
|
261
|
-
dataIndex =
|
|
262
|
-
fixed =
|
|
263
|
-
disable =
|
|
264
|
-
width =
|
|
309
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref8, index) {
|
|
310
|
+
var _ref9;
|
|
311
|
+
var key = _ref8.key,
|
|
312
|
+
dataIndex = _ref8.dataIndex,
|
|
313
|
+
fixed = _ref8.fixed,
|
|
314
|
+
disable = _ref8.disable,
|
|
315
|
+
width = _ref8.width;
|
|
265
316
|
var columnKey = (0, _utils.genColumnKey)(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
266
317
|
columnKeyMap[columnKey] = {
|
|
267
|
-
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (
|
|
318
|
+
show: isFirst.current && indexColumn && indexColumnKey == columnKey ? true : (_ref9 = _toConsumableArray(props.defaultVisibleColumnKeys)) === null || _ref9 === void 0 ? void 0 : _ref9.includes(columnKey),
|
|
268
319
|
fixed: fixed,
|
|
269
320
|
disable: disable,
|
|
270
321
|
width: width
|
|
271
322
|
};
|
|
272
323
|
});
|
|
273
324
|
} else {
|
|
274
|
-
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (
|
|
275
|
-
var key =
|
|
276
|
-
dataIndex =
|
|
277
|
-
fixed =
|
|
278
|
-
disable =
|
|
279
|
-
width =
|
|
325
|
+
tableColumn === null || tableColumn === void 0 || tableColumn.forEach(function (_ref10, index) {
|
|
326
|
+
var key = _ref10.key,
|
|
327
|
+
dataIndex = _ref10.dataIndex,
|
|
328
|
+
fixed = _ref10.fixed,
|
|
329
|
+
disable = _ref10.disable,
|
|
330
|
+
width = _ref10.width;
|
|
280
331
|
var columnKey = (0, _utils.genColumnKey)(key !== null && key !== void 0 ? key : dataIndex, index);
|
|
281
332
|
columnKeyMap[columnKey] = {
|
|
282
333
|
show: true,
|
|
@@ -287,9 +338,9 @@ function useContainer() {
|
|
|
287
338
|
});
|
|
288
339
|
}
|
|
289
340
|
var sortKeys = visibleColumnKeys || props.defaultVisibleColumnKeys || [];
|
|
290
|
-
sortKeyColumns.current = Object.entries(columnKeyMap).map(function (
|
|
291
|
-
var
|
|
292
|
-
key =
|
|
341
|
+
sortKeyColumns.current = Object.entries(columnKeyMap).map(function (_ref11) {
|
|
342
|
+
var _ref12 = _slicedToArray(_ref11, 1),
|
|
343
|
+
key = _ref12[0];
|
|
293
344
|
return key;
|
|
294
345
|
});
|
|
295
346
|
if ((sortKeys === null || sortKeys === void 0 ? void 0 : sortKeys.length) > 0) {
|
|
@@ -13,6 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
13
13
|
function Density() {
|
|
14
14
|
var counter = (0, _react.useContext)(_Provide.TableContext);
|
|
15
15
|
var TextEnum = counter.TextEnum;
|
|
16
|
+
console.log('tableSize', counter.tableSize);
|
|
16
17
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
17
18
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
|
|
18
19
|
menu: {
|
|
@@ -29,6 +30,7 @@ function Density() {
|
|
|
29
30
|
onClick: function onClick(_ref) {
|
|
30
31
|
var _counter$setTableSize;
|
|
31
32
|
var key = _ref.key;
|
|
33
|
+
console.log('counter', counter, key);
|
|
32
34
|
(_counter$setTableSize = counter.setTableSize) === null || _counter$setTableSize === void 0 || _counter$setTableSize.call(counter, key);
|
|
33
35
|
},
|
|
34
36
|
selectedKeys: [counter.tableSize]
|
|
@@ -42,8 +42,8 @@ var isMac = navigator.userAgent.indexOf('Mac OS') !== -1;
|
|
|
42
42
|
var indexColumnKey = exports.indexColumnKey = '_serialNum';
|
|
43
43
|
var DEFAULT_HEIGHTS = exports.DEFAULT_HEIGHTS = {
|
|
44
44
|
HEAD_FOOT: 115,
|
|
45
|
-
ALERT:
|
|
46
|
-
TOOLBAR:
|
|
45
|
+
ALERT: 48,
|
|
46
|
+
TOOLBAR: 64
|
|
47
47
|
};
|
|
48
48
|
function VtxTable(props) {
|
|
49
49
|
var _rest$dataSource, _rest$rowSelection, _rest$rowSelection3, _rest$rowSelection4;
|
|
@@ -62,7 +62,8 @@ function VtxTable(props) {
|
|
|
62
62
|
isDragRef = _useContext2.isDragRef,
|
|
63
63
|
rootDomRef = _useContext2.rootDomRef,
|
|
64
64
|
sortKeyColumns = _useContext2.sortKeyColumns,
|
|
65
|
-
TextEnum = _useContext2.TextEnum
|
|
65
|
+
TextEnum = _useContext2.TextEnum,
|
|
66
|
+
tableSize = _useContext2.tableSize;
|
|
66
67
|
var _useSet = (0, _useSet3.default)({
|
|
67
68
|
// 表格id
|
|
68
69
|
datagridId: "vtx-datagrid-".concat(new Date().getTime()),
|
|
@@ -121,8 +122,18 @@ function VtxTable(props) {
|
|
|
121
122
|
if (!rootDomRef.current) {
|
|
122
123
|
return null;
|
|
123
124
|
}
|
|
124
|
-
var bodyHeight = ((_rootDomRef$current = rootDomRef.current) === null || _rootDomRef$current === void 0 ? void 0 : _rootDomRef$current.clientHeight) - headFootHeight - toolbarHeight.current - alertHeight.current;
|
|
125
125
|
var divs = rootDomRef.current.getElementsByTagName('div');
|
|
126
|
+
var pagination = Array.prototype.filter.call(rootDomRef.current.getElementsByTagName('ul'), function (dom) {
|
|
127
|
+
return dom.className.includes('ant-pagination');
|
|
128
|
+
})[0];
|
|
129
|
+
var tableHeader = Array.prototype.filter.call(rootDomRef.current.getElementsByTagName('thead'), function (dom) {
|
|
130
|
+
return dom.className.includes('ant-table-thead');
|
|
131
|
+
})[0];
|
|
132
|
+
var _headFootHeight = headFootHeight;
|
|
133
|
+
if (tableHeader) {
|
|
134
|
+
_headFootHeight = ((pagination === null || pagination === void 0 ? void 0 : pagination.clientHeight) || 0) + 32 + (tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.clientHeight);
|
|
135
|
+
}
|
|
136
|
+
var bodyHeight = ((_rootDomRef$current = rootDomRef.current) === null || _rootDomRef$current === void 0 ? void 0 : _rootDomRef$current.clientHeight) - _headFootHeight - toolbarHeight.current - alertHeight.current;
|
|
126
137
|
var bodyDiv = Array.prototype.filter.call(divs, function (dom) {
|
|
127
138
|
return dom.className.includes('ant-table-body') || dom.className.includes('ant-table-content');
|
|
128
139
|
})[0];
|
|
@@ -134,12 +145,11 @@ function VtxTable(props) {
|
|
|
134
145
|
}
|
|
135
146
|
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;
|
|
136
147
|
if (tablePlaceholder) {
|
|
137
|
-
|
|
138
|
-
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");
|
|
148
|
+
tablePlaceholder.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12 - 32, "px");
|
|
139
149
|
var tableCell = Array.prototype.filter.call(tablePlaceholder.getElementsByTagName('td'), function (dom) {
|
|
140
150
|
return dom.className.includes('ant-table-cell');
|
|
141
151
|
})[0];
|
|
142
|
-
tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12, "px");
|
|
152
|
+
tableCell.style.height = "".concat(bodyHeight - (rest.scrollY || 0) - 12 - 32, "px");
|
|
143
153
|
}
|
|
144
154
|
// antd6.x 的bug 如果table的高度 没有body 高 则没有滚动条
|
|
145
155
|
|
|
@@ -164,7 +174,7 @@ function VtxTable(props) {
|
|
|
164
174
|
resizeObserver.disconnect();
|
|
165
175
|
}
|
|
166
176
|
};
|
|
167
|
-
}, [autoFit]);
|
|
177
|
+
}, [autoFit, tableSize]);
|
|
168
178
|
(0, _react.useLayoutEffect)(function () {
|
|
169
179
|
if (autoFit) {
|
|
170
180
|
calculateHeight();
|
|
@@ -261,7 +271,7 @@ function VtxTable(props) {
|
|
|
261
271
|
var _useAntdColumnResize = (0, _reactAntdColumnResize.useAntdColumnResize)(function () {
|
|
262
272
|
return {
|
|
263
273
|
columns: columns,
|
|
264
|
-
minWidth:
|
|
274
|
+
minWidth: 10
|
|
265
275
|
};
|
|
266
276
|
}, [columns]),
|
|
267
277
|
resizableColumns = _useAntdColumnResize.resizableColumns,
|
|
@@ -364,7 +374,9 @@ function VtxTable(props) {
|
|
|
364
374
|
bordered: true
|
|
365
375
|
// virtual
|
|
366
376
|
}, rest), {}, {
|
|
367
|
-
dataSource: dataSource
|
|
377
|
+
dataSource: dataSource
|
|
378
|
+
// scroll={{ ...scroll }}
|
|
379
|
+
,
|
|
368
380
|
scroll: _objectSpread({
|
|
369
381
|
x: 'max-content'
|
|
370
382
|
}, scroll),
|
|
@@ -76,8 +76,8 @@ var renderColumnButtons = function renderColumnButtons(_ref) {
|
|
|
76
76
|
};
|
|
77
77
|
})) || [],
|
|
78
78
|
onClick: function onClick(e) {
|
|
79
|
-
var _moreActions$e$key;
|
|
80
|
-
(_moreActions$e$key = moreActions[e.key]) === null || _moreActions$e$key === void 0 || _moreActions$e$key.onClick(record, index);
|
|
79
|
+
var _moreActions$e$key, _moreActions$e$key$on;
|
|
80
|
+
(_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);
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
|
|
@@ -14,30 +14,33 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
14
14
|
var genVtxStyle = function genVtxStyle(token) {
|
|
15
15
|
var componentCls = token.componentCls,
|
|
16
16
|
antCls = token.antCls;
|
|
17
|
-
return _defineProperty(
|
|
17
|
+
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty({
|
|
18
18
|
position: 'relative',
|
|
19
|
-
overflow: 'hidden'
|
|
20
|
-
|
|
19
|
+
// overflow: 'hidden',
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'column'
|
|
22
|
+
}, "".concat(antCls, "-table-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "table", {
|
|
23
|
+
// minWidth: "calc(100% - 2px) !important"
|
|
24
|
+
}), '.ant-spin', _defineProperty({
|
|
21
25
|
height: '100%'
|
|
22
26
|
}, '.ant-spin-container', _defineProperty({
|
|
23
|
-
height: '100%'
|
|
24
|
-
|
|
27
|
+
height: '100%',
|
|
28
|
+
display: 'flex',
|
|
29
|
+
flexDirection: 'column'
|
|
30
|
+
}, '.ant-table', _defineProperty({
|
|
25
31
|
// height: '100%',
|
|
26
|
-
|
|
32
|
+
flex: 1
|
|
33
|
+
}, '.ant-table-container', _defineProperty(_defineProperty({}, '.ant-table-body', {
|
|
34
|
+
scrollbarWidth: "thin"
|
|
35
|
+
}), '.ant-table-content', _defineProperty({}, 'table', {
|
|
27
36
|
// height: '100%',
|
|
28
|
-
//
|
|
29
|
-
|
|
30
|
-
// ['table']: {
|
|
31
|
-
// height: '100%',
|
|
32
|
-
// }
|
|
33
|
-
// }
|
|
34
|
-
// }
|
|
35
|
-
}))), '.ant-table', _defineProperty(_defineProperty(_defineProperty({}, '.ant-table-header', _defineProperty({}, '.ant-table-thead', {
|
|
37
|
+
// minWidth: "calc(100% - 1px) !important",
|
|
38
|
+
})))))), '.ant-table', _defineProperty(_defineProperty(_defineProperty({}, '.ant-table-header', _defineProperty({}, '.ant-table-thead', {
|
|
36
39
|
'>tr>th': {
|
|
37
40
|
background: token.colorBgContainer
|
|
38
41
|
}
|
|
39
42
|
})), '.ant-table-cell', {
|
|
40
|
-
minWidth:
|
|
43
|
+
// minWidth: 10,
|
|
41
44
|
}), '.ant-table-tbody', {
|
|
42
45
|
'>tr.ant-table-placeholder': {
|
|
43
46
|
position: 'absolute',
|
|
@@ -68,9 +71,9 @@ var genVtxStyle = function genVtxStyle(token) {
|
|
|
68
71
|
}
|
|
69
72
|
})), '.ant-pagination', _defineProperty({}, '.ant-pagination-item', {
|
|
70
73
|
borderRadius: token.borderRadiusSM
|
|
71
|
-
}))), "
|
|
74
|
+
})))), "".concat(componentCls, "-fit"), {
|
|
72
75
|
height: '100%'
|
|
73
|
-
}), "
|
|
76
|
+
}), "".concat(componentCls, "-noFit"), {}), "".concat(componentCls, "-no-border"), _defineProperty({}, "".concat(antCls, "-table-wrapper"), _defineProperty({}, "".concat(antCls, "-table"), _defineProperty({}, '>.ant-table-container', _defineProperty(_defineProperty({
|
|
74
77
|
borderColor: 'transparent'
|
|
75
78
|
}, '.ant-table-thead', {
|
|
76
79
|
'>tr>th': {
|
|
@@ -84,7 +87,7 @@ var genVtxStyle = function genVtxStyle(token) {
|
|
|
84
87
|
borderInlineColor: 'transparent !important',
|
|
85
88
|
borderBottomColor: 'transparent !important'
|
|
86
89
|
}
|
|
87
|
-
}))))), "
|
|
90
|
+
}))))), "".concat(componentCls, "-striped"), _defineProperty({}, "".concat(antCls, "-table-wrapper"), _defineProperty({}, "".concat(antCls, "-table"), _defineProperty({}, '>.ant-table-container', _defineProperty({}, '.ant-table-body', {
|
|
88
91
|
'>table >tbody>tr:nth-child(odd)>td': {
|
|
89
92
|
backgroundColor: token.colorBgLayoutTable,
|
|
90
93
|
'&.ant-table-cell-row-hover': {
|
|
@@ -100,11 +103,11 @@ var genVtxStyle = function genVtxStyle(token) {
|
|
|
100
103
|
backgroundColor: token.controlItemBgActiveHover
|
|
101
104
|
}
|
|
102
105
|
}
|
|
103
|
-
}))))), "
|
|
106
|
+
}))))), "".concat(componentCls, "-header-background"), _defineProperty({}, "".concat(antCls, "-table-wrapper"), _defineProperty({}, '.ant-table', _defineProperty({}, '.ant-table-header', _defineProperty({}, '.ant-table-thead', {
|
|
104
107
|
'>tr>th': {
|
|
105
108
|
background: token.colorBgLayoutTable
|
|
106
109
|
}
|
|
107
|
-
})))))
|
|
110
|
+
})))));
|
|
108
111
|
};
|
|
109
112
|
function useStyle(prefix) {
|
|
110
113
|
return (0, _vtxProvider.useStyle)(prefix, function (token) {
|
|
@@ -16,7 +16,9 @@ var genVtxEllipsisTextStyle = function genVtxEllipsisTextStyle(token) {
|
|
|
16
16
|
return _defineProperty({}, componentCls, _defineProperty(_defineProperty({
|
|
17
17
|
margin: 0,
|
|
18
18
|
overflow: 'hidden',
|
|
19
|
-
textOverflow: 'ellipsis'
|
|
19
|
+
textOverflow: 'ellipsis',
|
|
20
|
+
wordBreak: "break-all",
|
|
21
|
+
wordWrap: "break-word"
|
|
20
22
|
}, "&--single", {
|
|
21
23
|
whiteSpace: 'nowrap'
|
|
22
24
|
}), "&--multi", {
|
package/lib/vtx-select/index.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.VtxSelect = void 0;
|
|
8
8
|
var _antd = require("antd");
|
|
9
|
-
var
|
|
9
|
+
var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _style = require("./style");
|
|
12
12
|
var _icons = require("@ant-design/icons");
|
|
@@ -114,7 +114,7 @@ var VtxSelect = exports.VtxSelect = /*#__PURE__*/(0, _react.forwardRef)(function
|
|
|
114
114
|
return child[key] || '';
|
|
115
115
|
};
|
|
116
116
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
117
|
-
className: "
|
|
117
|
+
className: (0, _classnames2.default)("".concat(prefixCls, "-all-list"), hashId),
|
|
118
118
|
children: Array.isArray(value) && value.length ? value.map(function (item, index) {
|
|
119
119
|
var name = getChildren(child, item);
|
|
120
120
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
|
|
@@ -221,9 +221,7 @@ var VtxSelect = exports.VtxSelect = /*#__PURE__*/(0, _react.forwardRef)(function
|
|
|
221
221
|
wrapSSR = _useStyle.wrapSSR,
|
|
222
222
|
hashId = _useStyle.hashId;
|
|
223
223
|
return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
224
|
-
className: (0,
|
|
225
|
-
'vtx-multi-select': mode == 'multiple' || mode == 'tags'
|
|
226
|
-
}),
|
|
224
|
+
className: (0, _classnames2.default)(prefixCls, hashId, _defineProperty({}, "".concat(prefixCls, "-multi"), mode == 'multiple' || mode == 'tags')),
|
|
227
225
|
id: elId.current,
|
|
228
226
|
ref: elRef,
|
|
229
227
|
style: _objectSpread(_objectSpread({}, props.style), {}, {
|