@kdcloudjs/kdesign 1.6.30 → 1.6.32
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/CHANGELOG.md +40 -0
- package/LICENSE +3 -0
- package/dist/kdesign-complete.less +16 -0
- package/dist/kdesign.css +13 -1
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +1678 -49
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/getStringLength.d.ts +1 -0
- package/es/_utils/getStringLength.js +14 -0
- package/es/_utils/hooks.d.ts +3 -0
- package/es/_utils/hooks.js +50 -1
- package/es/_utils/raf.d.ts +3 -0
- package/es/_utils/raf.js +35 -0
- package/es/_utils/resizeObserver.d.ts +15 -0
- package/es/_utils/resizeObserver.js +79 -0
- package/es/_utils/testBrowserType.d.ts +1 -0
- package/es/_utils/testBrowserType.js +11 -0
- package/es/_utils/usePopper.js +1 -1
- package/es/form/style/index.css +4 -0
- package/es/form/style/index.less +6 -0
- package/es/grid/col.js +7 -2
- package/es/grid/row.js +6 -1
- package/es/grid/style/index.css +6 -0
- package/es/grid/style/index.less +8 -0
- package/es/select/interface.d.ts +2 -0
- package/es/select/select.js +52 -21
- package/es/select/style/index.css +2 -0
- package/es/select/style/index.less +2 -0
- package/es/stepper/stepper.js +2 -1
- package/es/tree/treeHooks.js +1 -1
- package/es/virtual-list/Filler.d.ts +9 -0
- package/es/virtual-list/Filler.js +38 -0
- package/es/virtual-list/index.d.ts +3 -0
- package/es/virtual-list/index.js +3 -0
- package/es/virtual-list/utils/algorithmUtil.d.ts +19 -0
- package/es/virtual-list/utils/algorithmUtil.js +79 -0
- package/es/virtual-list/utils/itemUtil.d.ts +75 -0
- package/es/virtual-list/utils/itemUtil.js +176 -0
- package/es/virtual-list/virtual-list.d.ts +34 -0
- package/es/virtual-list/virtual-list.js +589 -0
- package/lib/_utils/getStringLength.d.ts +1 -0
- package/lib/_utils/getStringLength.js +21 -0
- package/lib/_utils/hooks.d.ts +3 -0
- package/lib/_utils/hooks.js +56 -0
- package/lib/_utils/raf.d.ts +3 -0
- package/lib/_utils/raf.js +43 -0
- package/lib/_utils/resizeObserver.d.ts +15 -0
- package/lib/_utils/resizeObserver.js +95 -0
- package/lib/_utils/testBrowserType.d.ts +1 -0
- package/lib/_utils/testBrowserType.js +18 -0
- package/lib/_utils/usePopper.js +1 -1
- package/lib/form/style/index.css +4 -0
- package/lib/form/style/index.less +6 -0
- package/lib/grid/col.js +8 -2
- package/lib/grid/row.js +7 -1
- package/lib/grid/style/index.css +6 -0
- package/lib/grid/style/index.less +8 -0
- package/lib/select/interface.d.ts +2 -0
- package/lib/select/select.js +52 -21
- package/lib/select/style/index.css +2 -0
- package/lib/select/style/index.less +2 -0
- package/lib/stepper/stepper.js +3 -1
- package/lib/tree/treeHooks.js +1 -1
- package/lib/virtual-list/Filler.d.ts +9 -0
- package/lib/virtual-list/Filler.js +59 -0
- package/lib/virtual-list/index.d.ts +3 -0
- package/lib/virtual-list/index.js +36 -0
- package/lib/virtual-list/utils/algorithmUtil.d.ts +19 -0
- package/lib/virtual-list/utils/algorithmUtil.js +88 -0
- package/lib/virtual-list/utils/itemUtil.d.ts +75 -0
- package/lib/virtual-list/utils/itemUtil.js +206 -0
- package/lib/virtual-list/virtual-list.d.ts +34 -0
- package/lib/virtual-list/virtual-list.js +626 -0
- package/package.json +1 -1
|
@@ -0,0 +1,589 @@
|
|
|
1
|
+
import _typeof from "@babel/runtime-corejs3/helpers/typeof";
|
|
2
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
3
|
+
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
4
|
+
|
|
5
|
+
var _context;
|
|
6
|
+
|
|
7
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
8
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
9
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
10
|
+
import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
|
|
11
|
+
import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
|
|
12
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
13
|
+
|
|
14
|
+
var __rest = this && this.__rest || function (s, e) {
|
|
15
|
+
var t = {};
|
|
16
|
+
|
|
17
|
+
for (var p in s) {
|
|
18
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
|
|
22
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
}; // Reference: https://github.com/arco-design/arco-design/blob/main/components/_class/VirtualList/index.tsx
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
import React, { useEffect, useImperativeHandle, useRef, useMemo, useState, useLayoutEffect } from 'react';
|
|
29
|
+
import { getValidScrollTop, getCompareItemRelativeTop, getItemAbsoluteTop, getItemRelativeTop, getNodeHeight, getRangeIndex, getScrollPercentage, GHOST_ITEM_KEY, getLongestItemIndex, getLocationItem } from './utils/itemUtil';
|
|
30
|
+
import { raf, caf } from '../_utils/raf';
|
|
31
|
+
import { usePrevious, useIsFirstRender, useForceUpdate, useStateWithPromise } from '../_utils/hooks';
|
|
32
|
+
import { findListDiffIndex, getIndexByStartLoc } from './utils/algorithmUtil';
|
|
33
|
+
import Filler from './Filler';
|
|
34
|
+
import ResizeObserver from '../_utils/resizeObserver';
|
|
35
|
+
export function isNumber(obj) {
|
|
36
|
+
return Object.prototype.toString.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
|
|
37
|
+
}
|
|
38
|
+
var DEFAULT_VIRTUAL_ITEM_HEIGHT = 32;
|
|
39
|
+
var KEY_VIRTUAL_ITEM_HEIGHT = "__virtual_item_height_".concat(_sliceInstanceProperty(_context = Math.random().toFixed(5)).call(_context, 2));
|
|
40
|
+
|
|
41
|
+
var useComputeVirtualItemHeight = function useComputeVirtualItemHeight(refItemHeightMap) {
|
|
42
|
+
var forceUpdate = useForceUpdate();
|
|
43
|
+
var heightMap = refItemHeightMap.current;
|
|
44
|
+
useEffect(function () {
|
|
45
|
+
if (_Object$keys(heightMap).length && !heightMap[KEY_VIRTUAL_ITEM_HEIGHT]) {
|
|
46
|
+
heightMap[KEY_VIRTUAL_ITEM_HEIGHT] = _Object$entries(heightMap).reduce(function (sum, _ref, currentIndex, array) {
|
|
47
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
48
|
+
currentHeight = _ref2[1];
|
|
49
|
+
|
|
50
|
+
var nextSum = sum + currentHeight;
|
|
51
|
+
return currentIndex === array.length - 1 ? Math.round(nextSum / array.length) : nextSum;
|
|
52
|
+
}, 0);
|
|
53
|
+
forceUpdate();
|
|
54
|
+
}
|
|
55
|
+
}, [_Object$keys(heightMap).length]);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
var useCacheChildrenNodes = function useCacheChildrenNodes(children) {
|
|
59
|
+
var refCacheMap = useRef({});
|
|
60
|
+
var refPrevChildren = useRef(children);
|
|
61
|
+
useEffect(function () {
|
|
62
|
+
refPrevChildren.current = children;
|
|
63
|
+
}, [children]);
|
|
64
|
+
|
|
65
|
+
if (children !== refPrevChildren.current) {
|
|
66
|
+
refCacheMap.current = {};
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return function (item, index, props) {
|
|
70
|
+
// eslint-disable-next-line no-prototype-builtins
|
|
71
|
+
if (!refCacheMap.current.hasOwnProperty(index)) {
|
|
72
|
+
refCacheMap.current[index] = children(item, index, props);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return refCacheMap.current[index];
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
80
|
+
var style = props.style,
|
|
81
|
+
className = props.className,
|
|
82
|
+
children = props.children,
|
|
83
|
+
_props$data = props.data,
|
|
84
|
+
data = _props$data === void 0 ? [] : _props$data,
|
|
85
|
+
itemKey = props.itemKey,
|
|
86
|
+
_props$threshold = props.threshold,
|
|
87
|
+
threshold = _props$threshold === void 0 ? 100 : _props$threshold,
|
|
88
|
+
_props$wrapper = props.wrapper,
|
|
89
|
+
WrapperTagName = _props$wrapper === void 0 ? 'div' : _props$wrapper,
|
|
90
|
+
_props$height = props.height,
|
|
91
|
+
propHeight = _props$height === void 0 ? 300 : _props$height,
|
|
92
|
+
_props$isStaticItemHe = props.isStaticItemHeight,
|
|
93
|
+
isStaticItemHeight = _props$isStaticItemHe === void 0 ? true : _props$isStaticItemHe,
|
|
94
|
+
propItemHeight = props.itemHeight,
|
|
95
|
+
measureLongestItem = props.measureLongestItem,
|
|
96
|
+
scrollOptions = props.scrollOptions,
|
|
97
|
+
onScroll = props.onScroll,
|
|
98
|
+
_props$needFiller = props.needFiller,
|
|
99
|
+
needFiller = _props$needFiller === void 0 ? true : _props$needFiller,
|
|
100
|
+
outerStyle = props.outerStyle,
|
|
101
|
+
restProps = __rest(props, ["style", "className", "children", "data", "itemKey", "threshold", "wrapper", "height", "isStaticItemHeight", "itemHeight", "measureLongestItem", "scrollOptions", "onScroll", "needFiller", "outerStyle"]);
|
|
102
|
+
|
|
103
|
+
var styleListMaxHeight = style && style.maxHeight || propHeight;
|
|
104
|
+
var refItemHeightMap = useRef({});
|
|
105
|
+
|
|
106
|
+
var _useState = useState(200),
|
|
107
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
108
|
+
stateHeight = _useState2[0],
|
|
109
|
+
setStateHeight = _useState2[1];
|
|
110
|
+
|
|
111
|
+
var renderChild = useCacheChildrenNodes(children);
|
|
112
|
+
useComputeVirtualItemHeight(refItemHeightMap);
|
|
113
|
+
var itemCount = data.length;
|
|
114
|
+
var itemHeight = propItemHeight || refItemHeightMap.current[KEY_VIRTUAL_ITEM_HEIGHT] || DEFAULT_VIRTUAL_ITEM_HEIGHT;
|
|
115
|
+
var viewportHeight = isNumber(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
|
|
116
|
+
var itemCountVisible = Math.ceil(viewportHeight / itemHeight);
|
|
117
|
+
var itemTotalHeight = itemHeight * itemCount;
|
|
118
|
+
var isVirtual = threshold !== null && itemCount >= threshold && itemTotalHeight > viewportHeight;
|
|
119
|
+
var refList = useRef(null);
|
|
120
|
+
var refRafId = useRef(null);
|
|
121
|
+
var refLockScroll = useRef(false);
|
|
122
|
+
var refIsVirtual = useRef(isVirtual);
|
|
123
|
+
var scrollListPadding = useMemo(function () {
|
|
124
|
+
if (refList.current) {
|
|
125
|
+
var getPadding = function getPadding(property) {
|
|
126
|
+
return +window.getComputedStyle(refList.current)[property].replace(/\D/g, '');
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
return {
|
|
130
|
+
top: getPadding('paddingTop'),
|
|
131
|
+
bottom: getPadding('paddingBottom')
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
return {
|
|
136
|
+
top: 0,
|
|
137
|
+
bottom: 0
|
|
138
|
+
};
|
|
139
|
+
}, [refList.current]);
|
|
140
|
+
|
|
141
|
+
var _useStateWithPromise = useStateWithPromise({
|
|
142
|
+
status: 'NONE',
|
|
143
|
+
startIndex: 0,
|
|
144
|
+
endIndex: 0,
|
|
145
|
+
itemIndex: 0,
|
|
146
|
+
itemOffsetPtg: 0,
|
|
147
|
+
startItemTop: 0,
|
|
148
|
+
scrollTop: 0
|
|
149
|
+
}),
|
|
150
|
+
_useStateWithPromise2 = _slicedToArray(_useStateWithPromise, 2),
|
|
151
|
+
state = _useStateWithPromise2[0],
|
|
152
|
+
setState = _useStateWithPromise2[1];
|
|
153
|
+
|
|
154
|
+
var prevData = usePrevious(data) || [];
|
|
155
|
+
var isFirstRender = useIsFirstRender();
|
|
156
|
+
|
|
157
|
+
var getItemKey = function getItemKey(item, index) {
|
|
158
|
+
return typeof itemKey === 'function' ? itemKey(item, index) : typeof itemKey === 'string' ? item[itemKey] : item.key || index;
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
var getItemKeyByIndex = function getItemKeyByIndex(index) {
|
|
162
|
+
var items = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : data;
|
|
163
|
+
|
|
164
|
+
if (index === items.length) {
|
|
165
|
+
return GHOST_ITEM_KEY;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
var item = items[index];
|
|
169
|
+
return item !== undefined ? getItemKey(item, index) : null;
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
var getCachedItemHeight = function getCachedItemHeight(key) {
|
|
173
|
+
return refItemHeightMap.current[key] || itemHeight;
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
var internalScrollTo = function internalScrollTo(relativeScroll) {
|
|
177
|
+
var compareItemIndex = relativeScroll.itemIndex,
|
|
178
|
+
compareItemRelativeTop = relativeScroll.relativeTop;
|
|
179
|
+
if (!refList.current) return;
|
|
180
|
+
var _refList$current = refList.current,
|
|
181
|
+
scrollHeight = _refList$current.scrollHeight,
|
|
182
|
+
clientHeight = _refList$current.clientHeight;
|
|
183
|
+
var originScrollTop = state.scrollTop;
|
|
184
|
+
var maxScrollTop = scrollHeight - clientHeight;
|
|
185
|
+
var bestSimilarity = Number.MAX_VALUE;
|
|
186
|
+
var bestScrollTop = null;
|
|
187
|
+
var bestItemIndex = null;
|
|
188
|
+
var bestItemOffsetPtg = null;
|
|
189
|
+
var bestStartIndex = null;
|
|
190
|
+
var bestEndIndex = null;
|
|
191
|
+
var missSimilarity = 0;
|
|
192
|
+
|
|
193
|
+
for (var i = 0; i < maxScrollTop; i++) {
|
|
194
|
+
var scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);
|
|
195
|
+
var scrollPtg = getScrollPercentage({
|
|
196
|
+
scrollTop: scrollTop,
|
|
197
|
+
scrollHeight: scrollHeight,
|
|
198
|
+
clientHeight: clientHeight
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
var _getRangeIndex = getRangeIndex(scrollPtg, itemCount, itemCountVisible),
|
|
202
|
+
itemIndex = _getRangeIndex.itemIndex,
|
|
203
|
+
itemOffsetPtg = _getRangeIndex.itemOffsetPtg,
|
|
204
|
+
startIndex = _getRangeIndex.startIndex,
|
|
205
|
+
endIndex = _getRangeIndex.endIndex;
|
|
206
|
+
|
|
207
|
+
if (startIndex <= compareItemIndex && compareItemIndex <= endIndex) {
|
|
208
|
+
var locatedItemRelativeTop = getItemRelativeTop({
|
|
209
|
+
itemHeight: getCachedItemHeight(getItemKeyByIndex(itemIndex)),
|
|
210
|
+
itemOffsetPtg: itemOffsetPtg,
|
|
211
|
+
clientHeight: clientHeight,
|
|
212
|
+
scrollPtg: scrollPtg
|
|
213
|
+
});
|
|
214
|
+
var compareItemTop = getCompareItemRelativeTop({
|
|
215
|
+
locatedItemRelativeTop: locatedItemRelativeTop,
|
|
216
|
+
locatedItemIndex: itemIndex,
|
|
217
|
+
compareItemIndex: compareItemIndex,
|
|
218
|
+
startIndex: startIndex,
|
|
219
|
+
endIndex: endIndex,
|
|
220
|
+
itemHeight: itemHeight,
|
|
221
|
+
getItemKey: getItemKeyByIndex,
|
|
222
|
+
itemElementHeights: refItemHeightMap.current
|
|
223
|
+
});
|
|
224
|
+
var similarity = Math.abs(compareItemTop - compareItemRelativeTop);
|
|
225
|
+
|
|
226
|
+
if (similarity < bestSimilarity) {
|
|
227
|
+
bestSimilarity = similarity;
|
|
228
|
+
bestScrollTop = scrollTop;
|
|
229
|
+
bestItemIndex = itemIndex;
|
|
230
|
+
bestItemOffsetPtg = itemOffsetPtg;
|
|
231
|
+
bestStartIndex = startIndex;
|
|
232
|
+
bestEndIndex = endIndex;
|
|
233
|
+
missSimilarity = 0;
|
|
234
|
+
} else {
|
|
235
|
+
missSimilarity += 1;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
if (missSimilarity > 10) {
|
|
240
|
+
break;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
if (bestScrollTop !== null) {
|
|
245
|
+
refLockScroll.current = true;
|
|
246
|
+
refList.current.scrollTop = bestScrollTop;
|
|
247
|
+
setState(_extends(_extends({}, state), {
|
|
248
|
+
status: 'MEASURE_START',
|
|
249
|
+
scrollTop: bestScrollTop,
|
|
250
|
+
itemIndex: bestItemIndex,
|
|
251
|
+
itemOffsetPtg: bestItemOffsetPtg,
|
|
252
|
+
startIndex: bestStartIndex,
|
|
253
|
+
endIndex: bestEndIndex
|
|
254
|
+
}));
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
refRafId.current = raf(function () {
|
|
258
|
+
refLockScroll.current = false;
|
|
259
|
+
});
|
|
260
|
+
};
|
|
261
|
+
|
|
262
|
+
var rawListScrollHandler = function rawListScrollHandler(event) {
|
|
263
|
+
if (!refList.current) return;
|
|
264
|
+
var _refList$current2 = refList.current,
|
|
265
|
+
rawScrollTop = _refList$current2.scrollTop,
|
|
266
|
+
clientHeight = _refList$current2.clientHeight,
|
|
267
|
+
scrollHeight = _refList$current2.scrollHeight;
|
|
268
|
+
var scrollTop = getValidScrollTop(rawScrollTop, scrollHeight - clientHeight);
|
|
269
|
+
var scrollPtg = getScrollPercentage({
|
|
270
|
+
scrollTop: scrollTop,
|
|
271
|
+
clientHeight: clientHeight,
|
|
272
|
+
scrollHeight: scrollHeight
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
var _getLocationItem = getLocationItem(scrollPtg, itemCount),
|
|
276
|
+
index = _getLocationItem.index,
|
|
277
|
+
offsetPtg = _getLocationItem.offsetPtg;
|
|
278
|
+
|
|
279
|
+
setState(_extends(_extends({}, state), {
|
|
280
|
+
scrollTop: scrollTop,
|
|
281
|
+
itemIndex: index,
|
|
282
|
+
itemOffsetPtg: offsetPtg
|
|
283
|
+
}));
|
|
284
|
+
event && onScroll && onScroll(event);
|
|
285
|
+
};
|
|
286
|
+
|
|
287
|
+
var virtualListScrollHandler = function virtualListScrollHandler(event) {
|
|
288
|
+
var isInit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
289
|
+
var scrollHeight = itemTotalHeight;
|
|
290
|
+
if (!refList.current) return;
|
|
291
|
+
var _refList$current3 = refList.current,
|
|
292
|
+
rawScrollTop = _refList$current3.scrollTop,
|
|
293
|
+
clientHeight = _refList$current3.clientHeight;
|
|
294
|
+
var scrollTop = getValidScrollTop(rawScrollTop, scrollHeight - clientHeight);
|
|
295
|
+
|
|
296
|
+
if (!isInit && (scrollTop === state.scrollTop || refLockScroll.current)) {
|
|
297
|
+
return;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
var scrollPtg = getScrollPercentage({
|
|
301
|
+
scrollTop: scrollTop,
|
|
302
|
+
clientHeight: clientHeight,
|
|
303
|
+
scrollHeight: scrollHeight
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
var _getRangeIndex2 = getRangeIndex(scrollPtg, itemCount, itemCountVisible),
|
|
307
|
+
itemIndex = _getRangeIndex2.itemIndex,
|
|
308
|
+
itemOffsetPtg = _getRangeIndex2.itemOffsetPtg,
|
|
309
|
+
startIndex = _getRangeIndex2.startIndex,
|
|
310
|
+
endIndex = _getRangeIndex2.endIndex;
|
|
311
|
+
|
|
312
|
+
setState(_extends(_extends({}, state), {
|
|
313
|
+
scrollTop: scrollTop,
|
|
314
|
+
itemIndex: itemIndex,
|
|
315
|
+
itemOffsetPtg: itemOffsetPtg,
|
|
316
|
+
startIndex: startIndex,
|
|
317
|
+
endIndex: endIndex,
|
|
318
|
+
status: 'MEASURE_START'
|
|
319
|
+
}));
|
|
320
|
+
event && onScroll && onScroll(event);
|
|
321
|
+
};
|
|
322
|
+
|
|
323
|
+
useEffect(function () {
|
|
324
|
+
return function () {
|
|
325
|
+
refRafId.current && caf(refRafId.current);
|
|
326
|
+
};
|
|
327
|
+
}, []);
|
|
328
|
+
useEffect(function () {
|
|
329
|
+
if (refList.current) {
|
|
330
|
+
if (isFirstRender) {
|
|
331
|
+
refList.current.scrollTop = 0;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
virtualListScrollHandler(null, true);
|
|
335
|
+
}
|
|
336
|
+
}, [itemCountVisible]);
|
|
337
|
+
useEffect(function () {
|
|
338
|
+
var changedItemIndex = null;
|
|
339
|
+
var switchTo = refIsVirtual.current !== isVirtual ? isVirtual ? 'virtual' : 'raw' : '';
|
|
340
|
+
refIsVirtual.current = isVirtual;
|
|
341
|
+
|
|
342
|
+
if (viewportHeight && prevData.length !== data.length) {
|
|
343
|
+
var diff = findListDiffIndex(prevData, data, getItemKey);
|
|
344
|
+
changedItemIndex = diff ? diff.index : null;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
if ((switchTo || isVirtual && changedItemIndex) && refList.current) {
|
|
348
|
+
var clientHeight = refList.current.clientHeight;
|
|
349
|
+
var locatedItemRelativeTop = getItemRelativeTop({
|
|
350
|
+
itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex, prevData)),
|
|
351
|
+
itemOffsetPtg: state.itemOffsetPtg,
|
|
352
|
+
scrollPtg: getScrollPercentage({
|
|
353
|
+
scrollTop: state.scrollTop,
|
|
354
|
+
scrollHeight: prevData.length * itemHeight,
|
|
355
|
+
clientHeight: clientHeight
|
|
356
|
+
}),
|
|
357
|
+
clientHeight: clientHeight
|
|
358
|
+
});
|
|
359
|
+
|
|
360
|
+
if (switchTo === 'raw') {
|
|
361
|
+
var rawTop = locatedItemRelativeTop;
|
|
362
|
+
|
|
363
|
+
for (var index = 0; index < state.itemIndex; index++) {
|
|
364
|
+
rawTop -= getCachedItemHeight(getItemKeyByIndex(index));
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
refList.current.scrollTop = -rawTop;
|
|
368
|
+
refLockScroll.current = true;
|
|
369
|
+
refRafId.current = raf(function () {
|
|
370
|
+
refLockScroll.current = false;
|
|
371
|
+
});
|
|
372
|
+
} else {
|
|
373
|
+
internalScrollTo({
|
|
374
|
+
itemIndex: state.itemIndex,
|
|
375
|
+
relativeTop: locatedItemRelativeTop
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
}, [data, isVirtual]);
|
|
380
|
+
useLayoutEffect(function () {
|
|
381
|
+
if (state.status === 'MEASURE_START' && refList.current) {
|
|
382
|
+
var _refList$current4 = refList.current,
|
|
383
|
+
scrollTop = _refList$current4.scrollTop,
|
|
384
|
+
scrollHeight = _refList$current4.scrollHeight,
|
|
385
|
+
clientHeight = _refList$current4.clientHeight;
|
|
386
|
+
var scrollPtg = getScrollPercentage({
|
|
387
|
+
scrollTop: scrollTop,
|
|
388
|
+
scrollHeight: scrollHeight,
|
|
389
|
+
clientHeight: clientHeight
|
|
390
|
+
});
|
|
391
|
+
var startItemTop = getItemAbsoluteTop({
|
|
392
|
+
scrollPtg: scrollPtg,
|
|
393
|
+
clientHeight: clientHeight,
|
|
394
|
+
scrollTop: scrollTop - (scrollListPadding.top + scrollListPadding.bottom) * scrollPtg,
|
|
395
|
+
itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex)),
|
|
396
|
+
itemOffsetPtg: state.itemOffsetPtg
|
|
397
|
+
});
|
|
398
|
+
|
|
399
|
+
for (var index = state.itemIndex - 1; index >= state.startIndex; index--) {
|
|
400
|
+
startItemTop -= getCachedItemHeight(getItemKeyByIndex(index));
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
setState(_extends(_extends({}, state), {
|
|
404
|
+
startItemTop: startItemTop,
|
|
405
|
+
status: 'MEASURE_DONE'
|
|
406
|
+
}));
|
|
407
|
+
}
|
|
408
|
+
}, [state]);
|
|
409
|
+
useImperativeHandle(ref, function () {
|
|
410
|
+
return {
|
|
411
|
+
dom: refList.current,
|
|
412
|
+
scrollTo: function scrollTo(arg) {
|
|
413
|
+
refRafId.current && caf(refRafId.current);
|
|
414
|
+
refRafId.current = raf(function () {
|
|
415
|
+
var _a;
|
|
416
|
+
|
|
417
|
+
if (typeof arg === 'number') {
|
|
418
|
+
refList.current.scrollTop = arg;
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
var index = 'index' in arg ? arg.index : 'key' in arg ? _findIndexInstanceProperty(data).call(data, function (item, index) {
|
|
423
|
+
return getItemKey(item, index) === arg.key;
|
|
424
|
+
}) : 0;
|
|
425
|
+
var item = data[index];
|
|
426
|
+
|
|
427
|
+
if (!item) {
|
|
428
|
+
return;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
var align = _typeof(arg) === 'object' && ((_a = arg.options) === null || _a === void 0 ? void 0 : _a.block) ? arg.options.block : (scrollOptions === null || scrollOptions === void 0 ? void 0 : scrollOptions.block) || 'nearest';
|
|
432
|
+
var _refList$current5 = refList.current,
|
|
433
|
+
clientHeight = _refList$current5.clientHeight,
|
|
434
|
+
scrollTop = _refList$current5.scrollTop;
|
|
435
|
+
|
|
436
|
+
if (isVirtual && !isStaticItemHeight) {
|
|
437
|
+
if (align === 'nearest') {
|
|
438
|
+
var itemIndex = state.itemIndex,
|
|
439
|
+
itemOffsetPtg = state.itemOffsetPtg;
|
|
440
|
+
|
|
441
|
+
if (Math.abs(itemIndex - index) < itemCountVisible) {
|
|
442
|
+
var itemTop = getItemRelativeTop({
|
|
443
|
+
itemHeight: getCachedItemHeight(getItemKeyByIndex(itemIndex)),
|
|
444
|
+
itemOffsetPtg: itemOffsetPtg,
|
|
445
|
+
clientHeight: clientHeight,
|
|
446
|
+
scrollPtg: getScrollPercentage(refList.current)
|
|
447
|
+
});
|
|
448
|
+
|
|
449
|
+
if (index < itemIndex) {
|
|
450
|
+
for (var i = index; i < itemIndex; i++) {
|
|
451
|
+
itemTop -= getCachedItemHeight(getItemKeyByIndex(i));
|
|
452
|
+
}
|
|
453
|
+
} else {
|
|
454
|
+
for (var _i = itemIndex; _i < index; _i++) {
|
|
455
|
+
itemTop += getCachedItemHeight(getItemKeyByIndex(_i));
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
if (itemTop < 0 || itemTop > clientHeight) {
|
|
460
|
+
align = itemTop < 0 ? 'start' : 'end';
|
|
461
|
+
} else {
|
|
462
|
+
return;
|
|
463
|
+
}
|
|
464
|
+
} else {
|
|
465
|
+
align = index < itemIndex ? 'start' : 'end';
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
setState(_extends(_extends({}, state), {
|
|
470
|
+
startIndex: Math.max(0, index - itemCountVisible),
|
|
471
|
+
endIndex: Math.min(itemCount - 1, index + itemCountVisible)
|
|
472
|
+
})).then(function () {
|
|
473
|
+
var itemHeight = getCachedItemHeight(getItemKey(item, index));
|
|
474
|
+
internalScrollTo({
|
|
475
|
+
itemIndex: index,
|
|
476
|
+
relativeTop: align === 'start' ? 0 : (clientHeight - itemHeight) / (align === 'center' ? 2 : 1)
|
|
477
|
+
});
|
|
478
|
+
});
|
|
479
|
+
} else {
|
|
480
|
+
var indexItemHeight = getCachedItemHeight(getItemKeyByIndex(index));
|
|
481
|
+
var _itemTop = 0;
|
|
482
|
+
|
|
483
|
+
for (var _i2 = 0; _i2 < index; _i2++) {
|
|
484
|
+
_itemTop += getCachedItemHeight(getItemKeyByIndex(_i2));
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
var itemBottom = _itemTop + indexItemHeight;
|
|
488
|
+
var itemMiddle = _itemTop + indexItemHeight / 2;
|
|
489
|
+
|
|
490
|
+
if (itemMiddle > scrollTop && itemMiddle < clientHeight + scrollTop) {
|
|
491
|
+
return;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
if (align === 'nearest') {
|
|
495
|
+
if (_itemTop < scrollTop) {
|
|
496
|
+
align = 'start';
|
|
497
|
+
} else if (itemBottom > scrollTop + clientHeight) {
|
|
498
|
+
align = 'end';
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
var _viewportHeight = clientHeight - indexItemHeight;
|
|
503
|
+
|
|
504
|
+
refList.current.scrollTop = _itemTop - (align === 'start' ? 0 : _viewportHeight / (align === 'center' ? 2 : 1));
|
|
505
|
+
}
|
|
506
|
+
});
|
|
507
|
+
}
|
|
508
|
+
};
|
|
509
|
+
}, [data, itemHeight, state]);
|
|
510
|
+
|
|
511
|
+
var renderChildren = function renderChildren(list, startIndex) {
|
|
512
|
+
return _mapInstanceProperty(list).call(list, function (item, index) {
|
|
513
|
+
var originIndex = startIndex + index;
|
|
514
|
+
var node = renderChild(item, originIndex, {
|
|
515
|
+
style: {}
|
|
516
|
+
});
|
|
517
|
+
var key = getItemKey(item, originIndex);
|
|
518
|
+
return /*#__PURE__*/React.cloneElement(node, {
|
|
519
|
+
key: key,
|
|
520
|
+
ref: function ref(ele) {
|
|
521
|
+
var heightMap = refItemHeightMap.current;
|
|
522
|
+
|
|
523
|
+
if (ele && state.status === 'MEASURE_START' && (!isStaticItemHeight || heightMap[key] === undefined)) {
|
|
524
|
+
if (isStaticItemHeight) {
|
|
525
|
+
if (!heightMap[KEY_VIRTUAL_ITEM_HEIGHT]) {
|
|
526
|
+
heightMap[KEY_VIRTUAL_ITEM_HEIGHT] = getNodeHeight(ele, true);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
heightMap[key] = heightMap[KEY_VIRTUAL_ITEM_HEIGHT];
|
|
530
|
+
} else {
|
|
531
|
+
heightMap[key] = getNodeHeight(ele, true);
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
});
|
|
536
|
+
});
|
|
537
|
+
};
|
|
538
|
+
|
|
539
|
+
var refLongestItemIndex = useRef(null);
|
|
540
|
+
useEffect(function () {
|
|
541
|
+
refLongestItemIndex.current = null;
|
|
542
|
+
}, [data]);
|
|
543
|
+
|
|
544
|
+
var renderLongestItem = function renderLongestItem() {
|
|
545
|
+
if (measureLongestItem) {
|
|
546
|
+
var index = refLongestItemIndex.current === null ? getLongestItemIndex(data) : refLongestItemIndex.current;
|
|
547
|
+
var item = data[index];
|
|
548
|
+
refLongestItemIndex.current = index;
|
|
549
|
+
return item ? /*#__PURE__*/React.createElement("div", {
|
|
550
|
+
style: {
|
|
551
|
+
height: 1,
|
|
552
|
+
overflow: 'hidden',
|
|
553
|
+
opacity: 0
|
|
554
|
+
}
|
|
555
|
+
}, renderChild(item, index, {
|
|
556
|
+
style: {}
|
|
557
|
+
})) : null;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
return null;
|
|
561
|
+
};
|
|
562
|
+
|
|
563
|
+
return /*#__PURE__*/React.createElement(ResizeObserver, {
|
|
564
|
+
onResize: function onResize() {
|
|
565
|
+
if (refList.current && !isNumber(styleListMaxHeight)) {
|
|
566
|
+
var clientHeight = refList.current.clientHeight;
|
|
567
|
+
setStateHeight(clientHeight);
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
}, /*#__PURE__*/React.createElement(WrapperTagName, _extends({
|
|
571
|
+
ref: refList,
|
|
572
|
+
style: _extends(_extends({
|
|
573
|
+
overflowY: 'auto',
|
|
574
|
+
overflowAnchor: 'none'
|
|
575
|
+
}, style), {
|
|
576
|
+
maxHeight: styleListMaxHeight
|
|
577
|
+
}),
|
|
578
|
+
className: className,
|
|
579
|
+
onScroll: isVirtual ? virtualListScrollHandler : rawListScrollHandler
|
|
580
|
+
}, restProps), isVirtual ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Filler, {
|
|
581
|
+
height: itemTotalHeight,
|
|
582
|
+
offset: state.status === 'MEASURE_DONE' ? state.startItemTop : 0,
|
|
583
|
+
outerStyle: outerStyle
|
|
584
|
+
}, renderChildren(_sliceInstanceProperty(data).call(data, state.startIndex, state.endIndex + 1), state.startIndex)), renderLongestItem()) : needFiller ? /*#__PURE__*/React.createElement(Filler, {
|
|
585
|
+
height: viewportHeight
|
|
586
|
+
}, renderChildren(data, 0)) : renderChildren(data, 0)));
|
|
587
|
+
});
|
|
588
|
+
VirtualList.displayName = 'VirtualList';
|
|
589
|
+
export default VirtualList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (str: string): number;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = _default;
|
|
7
|
+
|
|
8
|
+
// 计算字符串长度,中文字符占两个长度
|
|
9
|
+
function _default(str) {
|
|
10
|
+
var len = 0;
|
|
11
|
+
|
|
12
|
+
for (var i = 0; i < str.length; i++) {
|
|
13
|
+
if (str.charCodeAt(i) > 127 || str.charCodeAt(i) === 94) {
|
|
14
|
+
len += 2;
|
|
15
|
+
} else {
|
|
16
|
+
len++;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return len;
|
|
21
|
+
}
|
package/lib/_utils/hooks.d.ts
CHANGED
|
@@ -50,4 +50,7 @@ interface ContentRectType {
|
|
|
50
50
|
y: number;
|
|
51
51
|
}
|
|
52
52
|
export declare function useResizeObserver(element: (() => HTMLElement | null) | HTMLElement | null, handler?: (react: ContentRectType) => void): void;
|
|
53
|
+
export declare function useIsFirstRender(): boolean;
|
|
54
|
+
export declare function useForceUpdate(): import("react").DispatchWithoutAction;
|
|
55
|
+
export declare function useStateWithPromise<T>(defaultVal: T): [T, (updater: any) => Promise<T>];
|
|
53
56
|
export {};
|
package/lib/_utils/hooks.js
CHANGED
|
@@ -13,17 +13,22 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
13
13
|
Object.defineProperty(exports, "__esModule", {
|
|
14
14
|
value: true
|
|
15
15
|
});
|
|
16
|
+
exports.useForceUpdate = useForceUpdate;
|
|
16
17
|
exports.useHideDocumentScrollBar = useHideDocumentScrollBar;
|
|
18
|
+
exports.useIsFirstRender = useIsFirstRender;
|
|
17
19
|
exports.useMergedState = useMergedState;
|
|
18
20
|
exports.useOnClickOutside = useOnClickOutside;
|
|
19
21
|
exports.useOverflowHidden = useOverflowHidden;
|
|
20
22
|
exports.usePrevious = usePrevious;
|
|
21
23
|
exports.useResizeObserver = useResizeObserver;
|
|
24
|
+
exports.useStateWithPromise = useStateWithPromise;
|
|
22
25
|
|
|
23
26
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
24
27
|
|
|
25
28
|
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
|
26
29
|
|
|
30
|
+
var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
|
|
31
|
+
|
|
27
32
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
28
33
|
|
|
29
34
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
|
@@ -262,4 +267,55 @@ function useResizeObserver(element, handler) {
|
|
|
262
267
|
resizeObserver && resizeObserver.disconnect();
|
|
263
268
|
};
|
|
264
269
|
}, [element, handler]);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
function useIsFirstRender() {
|
|
273
|
+
var isFirst = (0, _react.useRef)(true);
|
|
274
|
+
(0, _react.useEffect)(function () {
|
|
275
|
+
isFirst.current = false;
|
|
276
|
+
}, []);
|
|
277
|
+
return isFirst.current;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
function useForceUpdate() {
|
|
281
|
+
var _useReducer = (0, _react.useReducer)(function (v) {
|
|
282
|
+
return v + 1;
|
|
283
|
+
}, 0),
|
|
284
|
+
_useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
|
|
285
|
+
dispatch = _useReducer2[1];
|
|
286
|
+
|
|
287
|
+
return dispatch;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
function useStateWithPromise(defaultVal) {
|
|
291
|
+
var _useState3 = (0, _react.useState)({
|
|
292
|
+
value: defaultVal,
|
|
293
|
+
resolve: function resolve(e) {
|
|
294
|
+
// eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
|
|
295
|
+
e;
|
|
296
|
+
}
|
|
297
|
+
}),
|
|
298
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
299
|
+
state = _useState4[0],
|
|
300
|
+
setState = _useState4[1];
|
|
301
|
+
|
|
302
|
+
(0, _react.useEffect)(function () {
|
|
303
|
+
state.resolve(state.value);
|
|
304
|
+
}, [state]);
|
|
305
|
+
return [state.value, function (updater) {
|
|
306
|
+
return new _promise.default(function (resolve) {
|
|
307
|
+
setState(function (prevState) {
|
|
308
|
+
var nextVal = updater;
|
|
309
|
+
|
|
310
|
+
if (typeof updater === 'function') {
|
|
311
|
+
nextVal = updater(prevState.value);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
return {
|
|
315
|
+
value: nextVal,
|
|
316
|
+
resolve: resolve
|
|
317
|
+
};
|
|
318
|
+
});
|
|
319
|
+
});
|
|
320
|
+
}];
|
|
265
321
|
}
|