@aloudata/aloudata-design 1.6.0 → 1.6.2
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/Button/index.js +3 -3
- package/dist/Button/style/index.less +2 -318
- package/dist/Button/style/size.less +80 -0
- package/dist/Button/style/type.less +235 -0
- package/dist/DataPreviewTable/components/Body/SkeletonBody.js +2 -2
- package/dist/DataPreviewTable/components/Body/index.js +1 -1
- package/dist/DataPreviewTable/components/Header/index.d.ts +2 -2
- package/dist/DataPreviewTable/components/Header/index.js +11 -19
- package/dist/DataPreviewTable/hooks/useDirection.d.ts +4 -21
- package/dist/DataPreviewTable/hooks/useDirection.js +106 -146
- package/dist/DataPreviewTable/index.js +10 -16
- package/dist/DataPreviewTable/interface.d.ts +18 -0
- package/dist/DataPreviewTable/interface.js +13 -1
- package/dist/DataPreviewTable/utils/getColumnOffsetsFromWidths.d.ts +1 -0
- package/dist/DataPreviewTable/utils/getColumnOffsetsFromWidths.js +8 -0
- package/dist/DataPreviewTable/utils/getColumnRange.d.ts +8 -0
- package/dist/DataPreviewTable/utils/getColumnRange.js +25 -0
- package/dist/DataPreviewTable/utils/getRowRange.d.ts +7 -0
- package/dist/DataPreviewTable/utils/getRowRange.js +28 -0
- package/dist/DataPreviewTable/utils/getTableLayout.d.ts +3 -0
- package/dist/DataPreviewTable/utils/getTableLayout.js +18 -0
- package/dist/InputNumber/style/index.less +3 -3
- package/dist/Modal/style/index.less +2 -1
- package/dist/Radio/style/index.less +7 -7
- package/dist/Select/style/index.less +1 -0
- package/dist/Tooltip/style/index.less +8 -6
- package/package.json +1 -1
|
@@ -1,34 +1,26 @@
|
|
|
1
|
-
function
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
2
|
|
|
3
|
-
function
|
|
3
|
+
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."); }
|
|
4
4
|
|
|
5
5
|
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); }
|
|
6
6
|
|
|
7
|
-
function
|
|
7
|
+
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; }
|
|
8
8
|
|
|
9
|
-
function
|
|
9
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
10
|
|
|
11
|
-
function
|
|
11
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
12
|
|
|
13
|
-
import React
|
|
13
|
+
import React from 'react';
|
|
14
14
|
import { HEADER_HEIGHT } from "../../constant";
|
|
15
15
|
import DragBar from "../DragBar";
|
|
16
16
|
export default function Header(props) {
|
|
17
17
|
var columns = props.columns,
|
|
18
18
|
columnLayout = props.columnLayout,
|
|
19
19
|
setWidth = props.setWidth,
|
|
20
|
-
columnRange = props.columnRange
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
return item.id === columnId;
|
|
24
|
-
});
|
|
25
|
-
setWidth(function (prev) {
|
|
26
|
-
var next = _toConsumableArray(prev);
|
|
20
|
+
_props$columnRange = _slicedToArray(props.columnRange, 2),
|
|
21
|
+
startIndex = _props$columnRange[0],
|
|
22
|
+
endIndex = _props$columnRange[1];
|
|
27
23
|
|
|
28
|
-
next[index] = width;
|
|
29
|
-
return next;
|
|
30
|
-
});
|
|
31
|
-
}, [columns, setWidth]);
|
|
32
24
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
25
|
className: "ald-data-preview-header",
|
|
34
26
|
style: {
|
|
@@ -36,7 +28,7 @@ export default function Header(props) {
|
|
|
36
28
|
top: 0,
|
|
37
29
|
left: 0
|
|
38
30
|
}
|
|
39
|
-
}, columns.slice(
|
|
31
|
+
}, columns.slice(startIndex, endIndex + 1).map(function (column) {
|
|
40
32
|
var _column$renderHeader;
|
|
41
33
|
|
|
42
34
|
var innerCell = (_column$renderHeader = column.renderHeader) === null || _column$renderHeader === void 0 ? void 0 : _column$renderHeader.call(column, column);
|
|
@@ -62,7 +54,7 @@ export default function Header(props) {
|
|
|
62
54
|
})), /*#__PURE__*/React.createElement(DragBar, {
|
|
63
55
|
columnId: column.id,
|
|
64
56
|
wrapWidth: columnLayout[column.id].width,
|
|
65
|
-
onChange:
|
|
57
|
+
onChange: setWidth
|
|
66
58
|
}));
|
|
67
59
|
}));
|
|
68
60
|
}
|
|
@@ -1,28 +1,11 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
2
|
import { IColumnLayout, PreviewColumn } from '../interface';
|
|
3
|
-
export interface IScrollData {
|
|
4
|
-
scrollLeft: number;
|
|
5
|
-
scrollTop: number;
|
|
6
|
-
direction: IScrollDirection;
|
|
7
|
-
}
|
|
8
|
-
export interface IScrollDirection {
|
|
9
|
-
horizontal: EScrollHorizontalDirection;
|
|
10
|
-
vertical: EScrollVerticalDirection;
|
|
11
|
-
current: EScrollHorizontalDirection | EScrollVerticalDirection | 'init';
|
|
12
|
-
}
|
|
13
|
-
export declare enum EScrollHorizontalDirection {
|
|
14
|
-
SCROLL_TO_LEFT = "toLeft",
|
|
15
|
-
SCROLL_TO_RIGHT = "toRight"
|
|
16
|
-
}
|
|
17
|
-
export declare enum EScrollVerticalDirection {
|
|
18
|
-
SCROLL_TO_TOP = "toTop",
|
|
19
|
-
SCROLL_TO_BOTTOM = "toBottom"
|
|
20
|
-
}
|
|
21
3
|
export default function useDirection(columns: PreviewColumn[], wrapRef: RefObject<HTMLDivElement>): {
|
|
22
|
-
setRange: (scrollTop: number, scrollLeft: number) => void;
|
|
23
4
|
columnRange: [number, number];
|
|
24
5
|
rowRange: [number, number];
|
|
25
|
-
setColumnsWidth:
|
|
6
|
+
setColumnsWidth: (columnId: string, width: number) => void;
|
|
26
7
|
columnLayout: IColumnLayout;
|
|
27
|
-
|
|
8
|
+
contentWidth: number;
|
|
9
|
+
tableColumns: PreviewColumn[];
|
|
10
|
+
onScroll: () => void;
|
|
28
11
|
};
|
|
@@ -12,23 +12,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
12
12
|
|
|
13
13
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
14
|
|
|
15
|
-
import { useCallback, useEffect,
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
EScrollHorizontalDirection["SCROLL_TO_RIGHT"] = "toRight";
|
|
23
|
-
})(EScrollHorizontalDirection || (EScrollHorizontalDirection = {}));
|
|
24
|
-
|
|
25
|
-
export var EScrollVerticalDirection;
|
|
26
|
-
|
|
27
|
-
(function (EScrollVerticalDirection) {
|
|
28
|
-
EScrollVerticalDirection["SCROLL_TO_TOP"] = "toTop";
|
|
29
|
-
EScrollVerticalDirection["SCROLL_TO_BOTTOM"] = "toBottom";
|
|
30
|
-
})(EScrollVerticalDirection || (EScrollVerticalDirection = {}));
|
|
31
|
-
|
|
15
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
16
|
+
import { DEFAULT_COLUMN_WIDTH } from "../constant";
|
|
17
|
+
import { EScrollHorizontalDirection, EScrollVerticalDirection } from "../interface";
|
|
18
|
+
import getColumnOffsetsFromWidths from "../utils/getColumnOffsetsFromWidths";
|
|
19
|
+
import getColumnRange from "../utils/getColumnRange";
|
|
20
|
+
import getRowRange from "../utils/getRowRange";
|
|
21
|
+
import getTableLayout from "../utils/getTableLayout";
|
|
32
22
|
export default function useDirection(columns, wrapRef) {
|
|
33
23
|
var prevScrollData = useRef({
|
|
34
24
|
scrollTop: 0,
|
|
@@ -40,21 +30,27 @@ export default function useDirection(columns, wrapRef) {
|
|
|
40
30
|
}
|
|
41
31
|
});
|
|
42
32
|
|
|
43
|
-
var _useState = useState([]),
|
|
33
|
+
var _useState = useState([0, 0]),
|
|
44
34
|
_useState2 = _slicedToArray(_useState, 2),
|
|
45
|
-
|
|
46
|
-
|
|
35
|
+
columnRange = _useState2[0],
|
|
36
|
+
setColumnRange = _useState2[1];
|
|
47
37
|
|
|
48
38
|
var _useState3 = useState([0, 0]),
|
|
49
39
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
50
|
-
|
|
51
|
-
|
|
40
|
+
rowRange = _useState4[0],
|
|
41
|
+
setRowRange = _useState4[1];
|
|
52
42
|
|
|
53
|
-
var _useState5 = useState([
|
|
43
|
+
var _useState5 = useState([]),
|
|
54
44
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
55
|
-
|
|
56
|
-
|
|
45
|
+
tableColumns = _useState6[0],
|
|
46
|
+
setTableColumns = _useState6[1];
|
|
47
|
+
|
|
48
|
+
var _useState7 = useState(0),
|
|
49
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
50
|
+
contentWidth = _useState8[0],
|
|
51
|
+
setContentWidth = _useState8[1];
|
|
57
52
|
|
|
53
|
+
var columnWidthRef = useRef({});
|
|
58
54
|
var getScrollDirection = useCallback(function (currentScrollTop, currentScrollLeft) {
|
|
59
55
|
var _prevScrollData$curre = prevScrollData.current,
|
|
60
56
|
preScrollTop = _prevScrollData$curre.scrollTop,
|
|
@@ -112,136 +108,99 @@ export default function useDirection(columns, wrapRef) {
|
|
|
112
108
|
return prevScrollData.current.direction;
|
|
113
109
|
}
|
|
114
110
|
}, []);
|
|
115
|
-
var columnsOffsets = useMemo(function () {
|
|
116
|
-
var offset = 0;
|
|
117
|
-
return columnsWidth.map(function (width) {
|
|
118
|
-
var currentOffset = offset;
|
|
119
|
-
offset += width;
|
|
120
|
-
return currentOffset;
|
|
121
|
-
});
|
|
122
|
-
}, [columnsWidth]);
|
|
123
|
-
var setRange = useCallback(function (scrollTop, scrollLeft) {
|
|
124
|
-
var direction = getScrollDirection(scrollTop, scrollLeft);
|
|
125
|
-
var current = direction.current;
|
|
126
|
-
|
|
127
|
-
if (current === EScrollHorizontalDirection.SCROLL_TO_LEFT) {
|
|
128
|
-
var _wrapRef$current;
|
|
129
111
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
start = _prev[0],
|
|
135
|
-
end = _prev[1];
|
|
112
|
+
var _useState9 = useState([]),
|
|
113
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
114
|
+
columnsOffsets = _useState10[0],
|
|
115
|
+
setColumnsOffsets = _useState10[1];
|
|
136
116
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (firstIndex === start && lastIndex === end) {
|
|
141
|
-
return prev;
|
|
142
|
-
}
|
|
117
|
+
var setRange = useCallback(function (columnsOffsets) {
|
|
118
|
+
var _wrapRef$current, _wrapRef$current2, _wrapRef$current3, _wrapRef$current4;
|
|
143
119
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
setColumnRange(function (prev) {
|
|
155
|
-
var _prev2 = _slicedToArray(prev, 2),
|
|
156
|
-
start = _prev2[0],
|
|
157
|
-
end = _prev2[1];
|
|
158
|
-
|
|
159
|
-
var firstIndex = findFirstIndex(columnsOffsets, scrollLeft);
|
|
160
|
-
var lastIndex = findFirstIndex(columnsOffsets, scrollLeft + PRE_RENDER_RANGE + _wrapWidth);
|
|
161
|
-
|
|
162
|
-
if (firstIndex === start && lastIndex === end) {
|
|
163
|
-
return prev;
|
|
164
|
-
}
|
|
120
|
+
var scrollTop = ((_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 ? void 0 : _wrapRef$current.scrollTop) || 0;
|
|
121
|
+
var scrollLeft = ((_wrapRef$current2 = wrapRef.current) === null || _wrapRef$current2 === void 0 ? void 0 : _wrapRef$current2.scrollLeft) || 0;
|
|
122
|
+
var direction = getScrollDirection(scrollTop, scrollLeft);
|
|
123
|
+
var columnRange = getColumnRange({
|
|
124
|
+
direction: direction.horizontal,
|
|
125
|
+
wrapWidth: ((_wrapRef$current3 = wrapRef.current) === null || _wrapRef$current3 === void 0 ? void 0 : _wrapRef$current3.clientWidth) || 0,
|
|
126
|
+
scrollLeft: scrollLeft,
|
|
127
|
+
columnsOffsets: columnsOffsets
|
|
128
|
+
});
|
|
165
129
|
|
|
166
|
-
|
|
167
|
-
|
|
130
|
+
if (columnRange) {
|
|
131
|
+
setColumnRange(columnRange);
|
|
168
132
|
}
|
|
169
133
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
var firstIndex = Math.floor((scrollTop - PRE_RENDER_RANGE) / CELL_HEIGHT);
|
|
176
|
-
|
|
177
|
-
if (firstIndex < 0) {
|
|
178
|
-
firstIndex = 0;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
var lastIndex = Math.ceil((scrollTop + wrapHeight) / CELL_HEIGHT) + 1;
|
|
182
|
-
setRowRange(function (prev) {
|
|
183
|
-
var _prev3 = _slicedToArray(prev, 2),
|
|
184
|
-
start = _prev3[0],
|
|
185
|
-
end = _prev3[1];
|
|
186
|
-
|
|
187
|
-
if (firstIndex === start && lastIndex === end) {
|
|
188
|
-
return prev;
|
|
189
|
-
}
|
|
134
|
+
var rowRange = getRowRange({
|
|
135
|
+
direction: direction.vertical,
|
|
136
|
+
wrapHeight: ((_wrapRef$current4 = wrapRef.current) === null || _wrapRef$current4 === void 0 ? void 0 : _wrapRef$current4.clientHeight) || 0,
|
|
137
|
+
scrollTop: scrollTop
|
|
138
|
+
});
|
|
190
139
|
|
|
191
|
-
|
|
192
|
-
|
|
140
|
+
if (rowRange) {
|
|
141
|
+
setRowRange(rowRange);
|
|
193
142
|
}
|
|
143
|
+
}, [getScrollDirection, wrapRef]);
|
|
194
144
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
var _wrapHeight = ((_wrapRef$current4 = wrapRef.current) === null || _wrapRef$current4 === void 0 ? void 0 : _wrapRef$current4.clientHeight) || 0;
|
|
200
|
-
|
|
201
|
-
var _firstIndex = Math.floor(scrollTop / CELL_HEIGHT);
|
|
202
|
-
|
|
203
|
-
var _lastIndex = Math.ceil((scrollTop + _wrapHeight + PRE_RENDER_RANGE) / CELL_HEIGHT) + 1;
|
|
145
|
+
var _useState11 = useState({}),
|
|
146
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
147
|
+
columnLayout = _useState12[0],
|
|
148
|
+
setColumnLayout = _useState12[1];
|
|
204
149
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
end = _prev4[1];
|
|
150
|
+
var onScroll = function onScroll() {
|
|
151
|
+
setRange(columnsOffsets);
|
|
152
|
+
};
|
|
209
153
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
154
|
+
useEffect(function () {
|
|
155
|
+
if (columns.length > 0) {
|
|
156
|
+
// 存在有效的列
|
|
157
|
+
// 计算列宽
|
|
158
|
+
var columnWidths = columns.map(function (_ref) {
|
|
159
|
+
var defaultWidth = _ref.defaultWidth,
|
|
160
|
+
id = _ref.id;
|
|
161
|
+
var width = columnWidthRef.current[id] || defaultWidth || DEFAULT_COLUMN_WIDTH;
|
|
162
|
+
columnWidthRef.current[id] = width;
|
|
163
|
+
return width;
|
|
164
|
+
}); // 计算contentWidth
|
|
165
|
+
|
|
166
|
+
var _contentWidth = columnWidths.reduce(function (sum, width) {
|
|
167
|
+
return sum + width;
|
|
168
|
+
}, 0); // 计算columnsOffsets
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
var offsets = getColumnOffsetsFromWidths(columnWidths); // 计算columnLayout
|
|
172
|
+
|
|
173
|
+
var _columnLayout = getTableLayout(columns, columnWidths);
|
|
174
|
+
|
|
175
|
+
setContentWidth(_contentWidth);
|
|
176
|
+
setColumnsOffsets(offsets);
|
|
177
|
+
setColumnLayout(_columnLayout);
|
|
178
|
+
setRange(offsets);
|
|
179
|
+
setTableColumns(columns);
|
|
180
|
+
} else {
|
|
181
|
+
// 没有有效的列
|
|
182
|
+
setContentWidth(0);
|
|
183
|
+
setColumnsOffsets([]);
|
|
184
|
+
setColumnLayout({}); // setRange();
|
|
213
185
|
|
|
214
|
-
|
|
215
|
-
});
|
|
186
|
+
setTableColumns([]);
|
|
216
187
|
}
|
|
217
|
-
}, [
|
|
218
|
-
var
|
|
219
|
-
|
|
220
|
-
var
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
columnLayout[column.id] = {
|
|
224
|
-
width: columnWidth,
|
|
225
|
-
left: left
|
|
226
|
-
};
|
|
227
|
-
left += columnWidth;
|
|
188
|
+
}, [columns, setRange]);
|
|
189
|
+
var setColumnsWidth = useCallback(function (columnId, width) {
|
|
190
|
+
columnWidthRef.current[columnId] = width;
|
|
191
|
+
var columnWidths = columns.map(function (_ref2) {
|
|
192
|
+
var id = _ref2.id;
|
|
193
|
+
return columnWidthRef.current[id];
|
|
228
194
|
});
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
239
|
-
}, [columns, columnsWidth]);
|
|
240
|
-
useEffect(function () {
|
|
241
|
-
var _wrapRef$current5, _wrapRef$current6;
|
|
242
|
-
|
|
243
|
-
setRange(((_wrapRef$current5 = wrapRef.current) === null || _wrapRef$current5 === void 0 ? void 0 : _wrapRef$current5.scrollTop) || 0, ((_wrapRef$current6 = wrapRef.current) === null || _wrapRef$current6 === void 0 ? void 0 : _wrapRef$current6.scrollLeft) || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
244
|
-
}, [columnLayout, wrapRef]);
|
|
195
|
+
var offsets = getColumnOffsetsFromWidths(columnWidths);
|
|
196
|
+
var columnLayout = getTableLayout(columns, columnWidths);
|
|
197
|
+
setContentWidth(columnWidths.reduce(function (sum, width) {
|
|
198
|
+
return sum + width;
|
|
199
|
+
}, 0));
|
|
200
|
+
setColumnsOffsets(offsets);
|
|
201
|
+
setColumnLayout(columnLayout);
|
|
202
|
+
setRange(offsets);
|
|
203
|
+
}, [columns, setRange]);
|
|
245
204
|
useEffect(function () {
|
|
246
205
|
var wrap = wrapRef.current;
|
|
247
206
|
var resizeObserver = new ResizeObserver(function (entries) {
|
|
@@ -253,9 +212,9 @@ export default function useDirection(columns, wrapRef) {
|
|
|
253
212
|
var entry = _step.value;
|
|
254
213
|
|
|
255
214
|
if (entry.contentRect) {
|
|
256
|
-
setRange(
|
|
215
|
+
setRange(columnsOffsets);
|
|
257
216
|
} else if (entry.contentBoxSize) {
|
|
258
|
-
setRange(
|
|
217
|
+
setRange(columnsOffsets);
|
|
259
218
|
}
|
|
260
219
|
}
|
|
261
220
|
} catch (err) {
|
|
@@ -269,13 +228,14 @@ export default function useDirection(columns, wrapRef) {
|
|
|
269
228
|
resizeObserver.unobserve(wrap);
|
|
270
229
|
resizeObserver.disconnect();
|
|
271
230
|
};
|
|
272
|
-
}, [wrapRef, setRange]);
|
|
231
|
+
}, [wrapRef, setRange, columnsOffsets]);
|
|
273
232
|
return {
|
|
274
|
-
setRange: setRange,
|
|
275
233
|
columnRange: columnRange,
|
|
276
234
|
rowRange: rowRange,
|
|
277
235
|
setColumnsWidth: setColumnsWidth,
|
|
278
236
|
columnLayout: columnLayout,
|
|
279
|
-
|
|
237
|
+
contentWidth: contentWidth,
|
|
238
|
+
tableColumns: tableColumns,
|
|
239
|
+
onScroll: onScroll
|
|
280
240
|
};
|
|
281
241
|
}
|
|
@@ -30,16 +30,12 @@ function DataPreviewTable(props, ref) {
|
|
|
30
30
|
var _useDirection = useDirection(columns, wrapRef),
|
|
31
31
|
columnRange = _useDirection.columnRange,
|
|
32
32
|
rowRange = _useDirection.rowRange,
|
|
33
|
-
|
|
34
|
-
setRange = _useDirection.setRange,
|
|
33
|
+
onScroll = _useDirection.onScroll,
|
|
35
34
|
columnLayout = _useDirection.columnLayout,
|
|
36
|
-
setColumnsWidth = _useDirection.setColumnsWidth
|
|
35
|
+
setColumnsWidth = _useDirection.setColumnsWidth,
|
|
36
|
+
contentWidth = _useDirection.contentWidth,
|
|
37
|
+
tableColumns = _useDirection.tableColumns;
|
|
37
38
|
|
|
38
|
-
var contentWidth = useMemo(function () {
|
|
39
|
-
return columnsWidth.reduce(function (sum, width) {
|
|
40
|
-
return sum + width;
|
|
41
|
-
}, 0);
|
|
42
|
-
}, [columnsWidth]);
|
|
43
39
|
useEffect(function () {
|
|
44
40
|
if (ref) {
|
|
45
41
|
if (typeof ref === 'function') {
|
|
@@ -60,11 +56,9 @@ function DataPreviewTable(props, ref) {
|
|
|
60
56
|
height: height,
|
|
61
57
|
willChange: 'transform'
|
|
62
58
|
},
|
|
63
|
-
onViewportScroll: function onViewportScroll(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
scrollLeft = _ref.scrollLeft;
|
|
67
|
-
setRange(scrollTop, scrollLeft);
|
|
59
|
+
onViewportScroll: function onViewportScroll() {
|
|
60
|
+
// const { scrollTop, scrollLeft } = e.target as HTMLDivElement;
|
|
61
|
+
onScroll();
|
|
68
62
|
},
|
|
69
63
|
className: classNames(props.className, 'ald-data-preview-table', {
|
|
70
64
|
'ald-data-preview-table-show-skeleton': dataStatus === 'pending'
|
|
@@ -79,18 +73,18 @@ function DataPreviewTable(props, ref) {
|
|
|
79
73
|
position: 'relative'
|
|
80
74
|
}
|
|
81
75
|
}, /*#__PURE__*/React.createElement(Header, {
|
|
82
|
-
columns:
|
|
76
|
+
columns: tableColumns,
|
|
83
77
|
columnLayout: columnLayout,
|
|
84
78
|
setWidth: setColumnsWidth,
|
|
85
79
|
columnRange: columnRange
|
|
86
80
|
}), dataStatus === 'pending' && /*#__PURE__*/React.createElement(SkeletonBody, {
|
|
87
|
-
columns:
|
|
81
|
+
columns: tableColumns,
|
|
88
82
|
columnRange: columnRange,
|
|
89
83
|
columnLayout: columnLayout,
|
|
90
84
|
rowRange: rowRange,
|
|
91
85
|
rows: skeletonRows
|
|
92
86
|
}), dataStatus === 'success' && /*#__PURE__*/React.createElement(Body, {
|
|
93
|
-
columns:
|
|
87
|
+
columns: tableColumns,
|
|
94
88
|
columnRange: columnRange,
|
|
95
89
|
columnLayout: columnLayout,
|
|
96
90
|
datasource: datasource,
|
|
@@ -25,3 +25,21 @@ export interface IColumnLayout {
|
|
|
25
25
|
left: number;
|
|
26
26
|
};
|
|
27
27
|
}
|
|
28
|
+
export interface IScrollData {
|
|
29
|
+
scrollLeft: number;
|
|
30
|
+
scrollTop: number;
|
|
31
|
+
direction: IScrollDirection;
|
|
32
|
+
}
|
|
33
|
+
export interface IScrollDirection {
|
|
34
|
+
horizontal: EScrollHorizontalDirection;
|
|
35
|
+
vertical: EScrollVerticalDirection;
|
|
36
|
+
current: EScrollHorizontalDirection | EScrollVerticalDirection | 'init';
|
|
37
|
+
}
|
|
38
|
+
export declare enum EScrollHorizontalDirection {
|
|
39
|
+
SCROLL_TO_LEFT = "toLeft",
|
|
40
|
+
SCROLL_TO_RIGHT = "toRight"
|
|
41
|
+
}
|
|
42
|
+
export declare enum EScrollVerticalDirection {
|
|
43
|
+
SCROLL_TO_TOP = "toTop",
|
|
44
|
+
SCROLL_TO_BOTTOM = "toBottom"
|
|
45
|
+
}
|
|
@@ -1 +1,13 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var EScrollHorizontalDirection;
|
|
2
|
+
|
|
3
|
+
(function (EScrollHorizontalDirection) {
|
|
4
|
+
EScrollHorizontalDirection["SCROLL_TO_LEFT"] = "toLeft";
|
|
5
|
+
EScrollHorizontalDirection["SCROLL_TO_RIGHT"] = "toRight";
|
|
6
|
+
})(EScrollHorizontalDirection || (EScrollHorizontalDirection = {}));
|
|
7
|
+
|
|
8
|
+
export var EScrollVerticalDirection;
|
|
9
|
+
|
|
10
|
+
(function (EScrollVerticalDirection) {
|
|
11
|
+
EScrollVerticalDirection["SCROLL_TO_TOP"] = "toTop";
|
|
12
|
+
EScrollVerticalDirection["SCROLL_TO_BOTTOM"] = "toBottom";
|
|
13
|
+
})(EScrollVerticalDirection || (EScrollVerticalDirection = {}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (columnsWidth: number[]): number[];
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IScrollDirection } from '../interface';
|
|
2
|
+
declare const _default: ({ direction, wrapWidth, scrollLeft, columnsOffsets, }: {
|
|
3
|
+
direction: IScrollDirection['current'];
|
|
4
|
+
wrapWidth: number;
|
|
5
|
+
scrollLeft: number;
|
|
6
|
+
columnsOffsets: number[];
|
|
7
|
+
}) => [number, number] | undefined;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { PRE_RENDER_RANGE } from "../constant";
|
|
2
|
+
import { EScrollHorizontalDirection } from "../interface";
|
|
3
|
+
import { findFirstIndex, findLastIndex } from "./findRange";
|
|
4
|
+
export default (function (_ref) {
|
|
5
|
+
var direction = _ref.direction,
|
|
6
|
+
wrapWidth = _ref.wrapWidth,
|
|
7
|
+
scrollLeft = _ref.scrollLeft,
|
|
8
|
+
columnsOffsets = _ref.columnsOffsets;
|
|
9
|
+
|
|
10
|
+
if (direction === EScrollHorizontalDirection.SCROLL_TO_LEFT) {
|
|
11
|
+
// 往左滚动
|
|
12
|
+
var firstIndex = findFirstIndex(columnsOffsets, scrollLeft - PRE_RENDER_RANGE);
|
|
13
|
+
var lastIndex = findLastIndex(columnsOffsets, scrollLeft + wrapWidth);
|
|
14
|
+
return [firstIndex, lastIndex];
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
if (direction === EScrollHorizontalDirection.SCROLL_TO_RIGHT || direction === 'init') {
|
|
18
|
+
// 往右滚动
|
|
19
|
+
var _firstIndex = findFirstIndex(columnsOffsets, scrollLeft);
|
|
20
|
+
|
|
21
|
+
var _lastIndex = findLastIndex(columnsOffsets, scrollLeft + PRE_RENDER_RANGE + wrapWidth);
|
|
22
|
+
|
|
23
|
+
return [_firstIndex, _lastIndex];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { CELL_HEIGHT, PRE_RENDER_RANGE } from "../constant";
|
|
2
|
+
import { EScrollVerticalDirection } from "../interface";
|
|
3
|
+
export default (function (_ref) {
|
|
4
|
+
var direction = _ref.direction,
|
|
5
|
+
wrapHeight = _ref.wrapHeight,
|
|
6
|
+
scrollTop = _ref.scrollTop;
|
|
7
|
+
|
|
8
|
+
if (direction === EScrollVerticalDirection.SCROLL_TO_TOP) {
|
|
9
|
+
// 往上滚动
|
|
10
|
+
var firstIndex = Math.floor((scrollTop - PRE_RENDER_RANGE) / CELL_HEIGHT);
|
|
11
|
+
|
|
12
|
+
if (firstIndex < 0) {
|
|
13
|
+
firstIndex = 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
var lastIndex = Math.ceil((scrollTop + wrapHeight) / CELL_HEIGHT) + 1;
|
|
17
|
+
return [firstIndex, lastIndex];
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
if (direction === EScrollVerticalDirection.SCROLL_TO_BOTTOM || direction === 'init') {
|
|
21
|
+
// 往下滚动
|
|
22
|
+
var _firstIndex = Math.floor(scrollTop / CELL_HEIGHT);
|
|
23
|
+
|
|
24
|
+
var _lastIndex = Math.ceil((scrollTop + wrapHeight + PRE_RENDER_RANGE) / CELL_HEIGHT) + 1;
|
|
25
|
+
|
|
26
|
+
return [_firstIndex, _lastIndex];
|
|
27
|
+
}
|
|
28
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { DEFAULT_COLUMN_WIDTH } from "../constant";
|
|
2
|
+
export default (function (tableColumns, columnsWidth) {
|
|
3
|
+
if (columnsWidth.length !== tableColumns.length) {
|
|
4
|
+
throw new Error('columnsWidth.length !== tableColumns.length');
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
var columnLayout = {};
|
|
8
|
+
var left = 0;
|
|
9
|
+
tableColumns.forEach(function (column, index) {
|
|
10
|
+
var columnWidth = columnsWidth[index] || column.defaultWidth || DEFAULT_COLUMN_WIDTH;
|
|
11
|
+
columnLayout[column.id] = {
|
|
12
|
+
width: columnWidth,
|
|
13
|
+
left: left
|
|
14
|
+
};
|
|
15
|
+
left += columnWidth;
|
|
16
|
+
});
|
|
17
|
+
return columnLayout;
|
|
18
|
+
});
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
@inputNumber-cursor-color: @B60;
|
|
34
34
|
|
|
35
35
|
//前后填充
|
|
36
|
-
@inputNumber-addon-bg-color:
|
|
37
|
-
@inputNumber-addon-color:
|
|
36
|
+
@inputNumber-addon-bg-color: #f8f8f8;
|
|
37
|
+
@inputNumber-addon-color: #858585;
|
|
38
38
|
@inputNumber-addon-border-color: @BG60;
|
|
39
|
-
@inputNumber-addon-disable-color:
|
|
39
|
+
@inputNumber-addon-disable-color: #858585;
|
|
40
40
|
|
|
41
41
|
.ald-input-number {
|
|
42
42
|
&.ant-input-number {
|