@nutui/nutui-react 1.5.1 → 2.0.0-alpha.0
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 +1 -35
- package/dist/esm/ActionSheet.js +62 -54
- package/dist/esm/Address/style/index.js +0 -1
- package/dist/esm/Address.js +235 -330
- package/dist/esm/Animate.js +43 -32
- package/dist/esm/AnimatingNumbers.js +88 -49
- package/dist/esm/Audio/style/index.js +0 -1
- package/dist/esm/Audio.js +104 -114
- package/dist/esm/Avatar.js +65 -78
- package/dist/esm/AvatarContext.js +5 -0
- package/dist/esm/AvatarGroup.js +46 -27
- package/dist/esm/BackTop/style/index.js +1 -1
- package/dist/esm/BackTop.js +74 -76
- package/dist/esm/Badge.js +57 -54
- package/dist/esm/Barrage.js +45 -32
- package/dist/esm/Button/style/index.js +1 -1
- package/dist/esm/Button.js +66 -87
- package/dist/esm/Calendar.js +80 -79
- package/dist/esm/CalendarItem.js +199 -231
- package/dist/esm/Card.js +44 -37
- package/dist/esm/Cascader.js +430 -433
- package/dist/esm/Cell/style/index.js +1 -1
- package/dist/esm/Cell.js +57 -87
- package/dist/esm/CellGroup.js +7 -5
- package/dist/esm/Checkbox/style/index.js +0 -1
- package/dist/esm/Checkbox.js +11 -8
- package/dist/esm/CheckboxGroup.js +78 -71
- package/dist/esm/CircleProgress.js +50 -40
- package/dist/esm/Col.js +46 -41
- package/dist/esm/Collapse.js +44 -44
- package/dist/esm/CollapseItem/style/index.js +1 -1
- package/dist/esm/CollapseItem.js +64 -104
- package/dist/esm/ConfigProvider.js +400 -101
- package/dist/esm/CountDown.js +90 -95
- package/dist/esm/DatePicker.js +104 -123
- package/dist/esm/Dialog.js +98 -104
- package/dist/esm/Divider.js +36 -27
- package/dist/esm/Drag.js +55 -59
- package/dist/esm/Elevator.js +77 -88
- package/dist/esm/Ellipsis.js +80 -79
- package/dist/esm/Empty.js +50 -44
- package/dist/esm/FixedNav/style/index.js +0 -1
- package/dist/esm/FixedNav.js +57 -65
- package/dist/esm/Form.js +1154 -123
- package/dist/esm/FormItem.js +7 -5
- package/dist/esm/Grid/style/index.js +1 -1
- package/dist/esm/Grid.js +51 -55
- package/dist/esm/GridItem.js +7 -124
- package/dist/esm/Icon.js +83 -5
- package/dist/esm/Image.js +123 -122
- package/dist/esm/ImagePreview.js +75 -93
- package/dist/esm/Indicator.js +41 -36
- package/dist/esm/Infiniteloading/style/index.js +1 -1
- package/dist/esm/Infiniteloading.js +77 -93
- package/dist/esm/Input/style/index.js +1 -1
- package/dist/esm/Input.js +120 -172
- package/dist/esm/InputNumber/style/index.js +1 -1
- package/dist/esm/InputNumber.js +133 -167
- package/dist/esm/Layout.js +27 -6
- package/dist/esm/Menu.js +84 -86
- package/dist/esm/MenuItem/style/index.js +0 -1
- package/dist/esm/MenuItem.js +76 -86
- package/dist/esm/NavBar/style/index.js +1 -1
- package/dist/esm/NavBar.js +59 -63
- package/dist/esm/NoticeBar/style/index.js +1 -1
- package/dist/esm/NoticeBar.js +173 -290
- package/dist/esm/Notify.js +112 -78
- package/dist/esm/NumberKeyboard.js +110 -109
- package/dist/esm/Overlay.js +7 -6
- package/dist/esm/Pagination.js +94 -135
- package/dist/esm/Picker.js +149 -201
- package/dist/esm/Popover/style/index.js +0 -1
- package/dist/esm/Popover.js +121 -116
- package/dist/esm/Popup/style/index.js +0 -1
- package/dist/esm/Popup.js +109 -119
- package/dist/esm/Price.js +51 -39
- package/dist/esm/Progress/style/index.js +1 -1
- package/dist/esm/Progress.js +59 -64
- package/dist/esm/PullToRefresh.js +173 -149
- package/dist/esm/Radio/style/index.js +0 -1
- package/dist/esm/Radio.js +8 -6
- package/dist/esm/RadioGroup.js +64 -84
- package/dist/esm/Range.js +93 -122
- package/dist/esm/Rate/style/index.js +1 -1
- package/dist/esm/Rate.js +77 -95
- package/dist/esm/Row.js +46 -35
- package/dist/esm/SearchBar/style/index.js +1 -1
- package/dist/esm/SearchBar.js +110 -120
- package/dist/esm/ShortPassword/style/index.js +0 -1
- package/dist/esm/ShortPassword.js +120 -116
- package/dist/esm/SideNavBar.js +39 -27
- package/dist/esm/SideNavBarItem.js +31 -14
- package/dist/esm/Signature.js +65 -61
- package/dist/esm/Skeleton.js +48 -40
- package/dist/esm/Step/style/index.js +1 -1
- package/dist/esm/Step.js +49 -49
- package/dist/esm/Steps.js +37 -23
- package/dist/esm/Sticky.js +111 -120
- package/dist/esm/SubSideNavBar.js +50 -38
- package/dist/esm/Swipe.js +75 -63
- package/dist/esm/Swiper.js +171 -206
- package/dist/esm/SwiperItem.js +39 -22
- package/dist/esm/Switch.js +46 -37
- package/dist/esm/TabPane.js +8 -6
- package/dist/esm/Tabbar.js +47 -39
- package/dist/esm/TabbarItem/style/index.js +1 -1
- package/dist/esm/TabbarItem.js +50 -52
- package/dist/esm/Table/style/index.js +1 -1
- package/dist/esm/Table.js +70 -70
- package/dist/esm/Tabs/style/index.js +1 -2
- package/dist/esm/Tabs.js +11 -9
- package/dist/esm/Tag/style/index.js +1 -1
- package/dist/esm/Tag.js +69 -70
- package/dist/esm/TextArea.js +70 -64
- package/dist/esm/TimeDetail.js +47 -38
- package/dist/esm/TimePannel.js +35 -19
- package/dist/esm/TimeSelect.js +60 -68
- package/dist/esm/Toast/style/index.js +1 -1
- package/dist/esm/Toast.js +126 -98
- package/dist/esm/TrendArrow/style/index.js +1 -1
- package/dist/esm/TrendArrow.js +59 -55
- package/dist/esm/Uploader/style/index.js +0 -1
- package/dist/esm/Uploader.js +180 -229
- package/dist/esm/UserContext.js +5 -0
- package/dist/esm/UserContext2.js +5 -0
- package/dist/esm/UserContext3.js +5 -0
- package/dist/esm/Video.js +49 -39
- package/dist/esm/VirtualList.js +111 -146
- package/dist/esm/WaterMark.js +57 -60
- package/dist/esm/bem.js +10 -0
- package/dist/esm/cellgroup2.js +49 -0
- package/dist/esm/checkbox2.js +145 -0
- package/dist/esm/{date-c7aad4c0.js → date.js} +13 -11
- package/dist/esm/{formitem-8a73a5fb.js → formitem2.js} +83 -50
- package/dist/esm/get-scroll-parent.js +26 -0
- package/dist/esm/griditem2.js +96 -0
- package/dist/esm/index.js +14 -0
- package/dist/esm/nutui-react.es.js +188 -94
- package/dist/esm/offsetContext.js +19 -0
- package/dist/esm/overlay2.js +98 -0
- package/dist/esm/px-check.js +6 -0
- package/dist/esm/radio2.js +129 -0
- package/dist/esm/render.js +95 -0
- package/dist/esm/tabpane2.js +44 -0
- package/dist/esm/tabs2.js +175 -0
- package/dist/esm/typings.js +7 -0
- package/dist/esm/use-client-rect.js +32 -0
- package/dist/esm/use-props-value.js +18 -0
- package/dist/esm/use-touch.js +74 -0
- package/dist/locales/base.d.ts +2 -2
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +3 -3
- package/dist/locales/id-ID.js +3 -3
- package/dist/locales/zh-CN.js +3 -3
- package/dist/locales/zh-TW.js +3 -3
- package/dist/locales/zh-UG.js +3 -3
- package/dist/nutui.react.mjs +8327 -4829
- package/dist/nutui.react.umd.js +8328 -4830
- package/dist/packages/actionsheet/actionsheet.scss +10 -2
- package/dist/packages/backtop/backtop.scss +0 -8
- package/dist/packages/badge/badge.scss +3 -4
- package/dist/packages/button/button.scss +80 -93
- package/dist/packages/cell/cell.scss +18 -90
- package/dist/packages/cellgroup/cellgroup.scss +26 -20
- package/dist/packages/collapseitem/collapseitem.scss +0 -1
- package/dist/packages/dialog/dialog.scss +1 -1
- package/dist/packages/divider/divider.scss +3 -17
- package/dist/packages/grid/grid.scss +1 -0
- package/dist/packages/griditem/griditem.scss +2 -17
- package/dist/packages/icon/icon.scss +0 -132
- package/dist/packages/image/image.scss +0 -12
- package/dist/packages/indicator/indicator.scss +21 -39
- package/dist/packages/infiniteloading/infiniteloading.scss +4 -12
- package/dist/packages/input/input.scss +4 -0
- package/dist/packages/inputnumber/inputnumber.scss +10 -26
- package/dist/packages/menuitem/menuitem.scss +2 -0
- package/dist/packages/navbar/navbar.scss +4 -5
- package/dist/packages/overlay/overlay.scss +0 -19
- package/dist/packages/picker/picker.scss +97 -103
- package/dist/packages/progress/progress.scss +0 -1
- package/dist/packages/radio/radio.scss +8 -0
- package/dist/packages/rate/rate.scss +29 -6
- package/dist/packages/searchbar/searchbar.scss +0 -1
- package/dist/packages/shortpassword/shortpassword.scss +4 -1
- package/dist/packages/step/step.scss +0 -1
- package/dist/packages/sticky/sticky.scss +1 -1
- package/dist/packages/swiper/swiper.scss +8 -0
- package/dist/packages/tabbaritem/tabbaritem.scss +0 -1
- package/dist/packages/table/table.scss +0 -1
- package/dist/packages/tag/tag.scss +9 -2
- package/dist/packages/timedetail/timedetail.scss +9 -3
- package/dist/packages/timeselect/timeselect.scss +1 -1
- package/dist/packages/toast/toast.scss +0 -1
- package/dist/style.css +1 -1
- package/dist/style.mjs +1 -1
- package/dist/styles/font-jmapp/config.json +175 -0
- package/dist/styles/font-jmapp/demo.css +539 -0
- package/dist/styles/font-jmapp/demo_index.html +1821 -0
- package/dist/styles/font-jmapp/iconfont.css +299 -0
- package/dist/styles/font-jmapp/iconfont.eot +0 -0
- package/dist/styles/font-jmapp/iconfont.js +68 -0
- package/dist/styles/font-jmapp/iconfont.json +506 -0
- package/dist/styles/font-jmapp/iconfont.svg +356 -0
- package/dist/styles/font-jmapp/iconfont.ttf +0 -0
- package/dist/styles/font-jmapp/iconfont.woff +0 -0
- package/dist/styles/font-jmapp/iconfont.woff2 +0 -0
- package/dist/styles/theme-default.scss +1 -0
- package/dist/styles/theme-jmapp.scss +41 -0
- package/dist/styles/themes/default.scss +0 -1
- package/dist/styles/variables-jmapp.scss +2601 -0
- package/dist/styles/variables.scss +49 -73
- package/dist/types/index.d.ts +147 -240
- package/package.json +23 -154
- package/dist/esm/AvatarContext-15733596.js +0 -3
- package/dist/esm/Icon/style/index.js +0 -4
- package/dist/esm/UserContext-101ad4a4.js +0 -3
- package/dist/esm/UserContext-2629d479.js +0 -3
- package/dist/esm/UserContext-b33bcf21.js +0 -3
- package/dist/esm/bem-3b438e61.js +0 -8
- package/dist/esm/cellgroup-fcc72767.js +0 -34
- package/dist/esm/checkbox-44e13cd0.js +0 -137
- package/dist/esm/get-scroll-parent-5f85dee8.js +0 -24
- package/dist/esm/grid.context-2ee27d95.js +0 -6
- package/dist/esm/icon-4ef1581c.js +0 -70
- package/dist/esm/index-030b7245.js +0 -11
- package/dist/esm/offsetContext-3ab00d40.js +0 -16
- package/dist/esm/overlay-de6c79d5.js +0 -83
- package/dist/esm/radio-9f141e6b.js +0 -118
- package/dist/esm/render-bbebb760.js +0 -79
- package/dist/esm/tabpane-01075e6c.js +0 -29
- package/dist/esm/tabs-e1b4e4b1.js +0 -181
- package/dist/esm/typings-f27b58f4.js +0 -8
- package/dist/esm/useClientRect-56bb675b.js +0 -39
- package/dist/esm/useTouch-cf73a407.js +0 -99
package/dist/esm/Video.js
CHANGED
|
@@ -1,70 +1,78 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "source", "options", "className", "play", "pause", "playend", "
|
|
4
|
-
function ownKeys(object, enumerableOnly) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
var _excluded = ["children", "source", "options", "className", "play", "pause", "playend", "onPlay", "onPause", "onPlayEnd"];
|
|
4
|
+
function ownKeys(object, enumerableOnly) {
|
|
5
|
+
var keys = Object.keys(object);
|
|
6
|
+
if (Object.getOwnPropertySymbols) {
|
|
7
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
8
|
+
enumerableOnly && (symbols = symbols.filter(function(sym) {
|
|
9
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
10
|
+
})), keys.push.apply(keys, symbols);
|
|
11
|
+
}
|
|
12
|
+
return keys;
|
|
13
|
+
}
|
|
14
|
+
function _objectSpread(target) {
|
|
15
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
16
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
17
|
+
i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
|
|
18
|
+
_defineProperty(target, key, source[key]);
|
|
19
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
|
|
20
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return target;
|
|
24
|
+
}
|
|
25
|
+
import React__default, { useRef, useEffect } from "react";
|
|
26
|
+
import classNames from "classnames";
|
|
27
|
+
import { c as cn } from "./bem.js";
|
|
28
|
+
import "@bem-react/classname";
|
|
10
29
|
var defaultProps = {
|
|
11
30
|
source: {
|
|
12
31
|
type: {},
|
|
13
|
-
src:
|
|
32
|
+
src: ""
|
|
14
33
|
},
|
|
15
34
|
options: {
|
|
16
35
|
controls: true,
|
|
17
36
|
muted: false,
|
|
18
37
|
autoplay: false,
|
|
19
|
-
poster:
|
|
38
|
+
poster: "",
|
|
20
39
|
playsinline: false,
|
|
21
40
|
loop: false
|
|
22
41
|
}
|
|
23
42
|
};
|
|
24
|
-
var Video = function
|
|
25
|
-
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
|
|
26
|
-
children = _defaultProps$props.children,
|
|
27
|
-
source = _defaultProps$props.source,
|
|
28
|
-
options = _defaultProps$props.options,
|
|
29
|
-
className = _defaultProps$props.className,
|
|
30
|
-
play = _defaultProps$props.play,
|
|
31
|
-
pause = _defaultProps$props.pause,
|
|
32
|
-
playend = _defaultProps$props.playend,
|
|
33
|
-
onPlayFuc = _defaultProps$props.onPlayFuc,
|
|
34
|
-
onPauseFuc = _defaultProps$props.onPauseFuc,
|
|
35
|
-
onPlayend = _defaultProps$props.onPlayend,
|
|
36
|
-
restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
43
|
+
var Video = function Video2(props) {
|
|
44
|
+
var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, source = _defaultProps$props.source, options = _defaultProps$props.options, className = _defaultProps$props.className, play = _defaultProps$props.play, pause = _defaultProps$props.pause, playend = _defaultProps$props.playend, onPlay = _defaultProps$props.onPlay, onPause = _defaultProps$props.onPause, onPlayEnd = _defaultProps$props.onPlayEnd, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
|
|
37
45
|
var rootRef = useRef(null);
|
|
38
|
-
var b = cn(
|
|
39
|
-
var classes = classNames(className, b(
|
|
40
|
-
useEffect(function
|
|
46
|
+
var b = cn("video");
|
|
47
|
+
var classes = classNames(className, b(""));
|
|
48
|
+
useEffect(function() {
|
|
41
49
|
init();
|
|
42
50
|
}, []);
|
|
43
|
-
var init = function
|
|
51
|
+
var init = function init2() {
|
|
44
52
|
if (rootRef.current) {
|
|
45
53
|
var videoRef = rootRef.current;
|
|
46
54
|
if (options.autoplay) {
|
|
47
|
-
setTimeout(function
|
|
55
|
+
setTimeout(function() {
|
|
48
56
|
videoRef.play();
|
|
49
57
|
}, 200);
|
|
50
58
|
}
|
|
51
59
|
if (options.playsinline) {
|
|
52
|
-
videoRef.setAttribute(
|
|
53
|
-
videoRef.setAttribute(
|
|
54
|
-
videoRef.setAttribute(
|
|
55
|
-
videoRef.setAttribute(
|
|
60
|
+
videoRef.setAttribute("playsinline", String(options.playsinline));
|
|
61
|
+
videoRef.setAttribute("webkit-playsinline", String(options.playsinline));
|
|
62
|
+
videoRef.setAttribute("x5-video-player-type", "h5-page");
|
|
63
|
+
videoRef.setAttribute("x5-video-player-fullscreen", "false");
|
|
56
64
|
}
|
|
57
|
-
videoRef.addEventListener(
|
|
58
|
-
|
|
65
|
+
videoRef.addEventListener("play", function() {
|
|
66
|
+
onPlay && onPlay(videoRef);
|
|
59
67
|
play && play(videoRef);
|
|
60
68
|
});
|
|
61
|
-
videoRef.addEventListener(
|
|
62
|
-
|
|
69
|
+
videoRef.addEventListener("pause", function() {
|
|
70
|
+
onPause && onPause(videoRef);
|
|
63
71
|
pause && pause(videoRef);
|
|
64
72
|
});
|
|
65
|
-
videoRef.addEventListener(
|
|
73
|
+
videoRef.addEventListener("ended", function() {
|
|
66
74
|
videoRef.currentTime = 0;
|
|
67
|
-
|
|
75
|
+
onPlayEnd && onPlayEnd(videoRef);
|
|
68
76
|
playend && playend(videoRef);
|
|
69
77
|
});
|
|
70
78
|
}
|
|
@@ -88,5 +96,7 @@ var Video = function Video(props) {
|
|
|
88
96
|
})));
|
|
89
97
|
};
|
|
90
98
|
Video.defaultProps = defaultProps;
|
|
91
|
-
Video.displayName =
|
|
92
|
-
export {
|
|
99
|
+
Video.displayName = "NutVideo";
|
|
100
|
+
export {
|
|
101
|
+
Video as default
|
|
102
|
+
};
|
package/dist/esm/VirtualList.js
CHANGED
|
@@ -2,19 +2,36 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["sourceData", "ItemRender", "itemEqualSize", "itemSize", "horizontal", "overscan", "key", "handleScroll", "onScroll", "className", "containerSize"];
|
|
5
|
-
function ownKeys(object, enumerableOnly) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
function ownKeys(object, enumerableOnly) {
|
|
6
|
+
var keys = Object.keys(object);
|
|
7
|
+
if (Object.getOwnPropertySymbols) {
|
|
8
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
9
|
+
enumerableOnly && (symbols = symbols.filter(function(sym) {
|
|
10
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
11
|
+
})), keys.push.apply(keys, symbols);
|
|
12
|
+
}
|
|
13
|
+
return keys;
|
|
14
|
+
}
|
|
15
|
+
function _objectSpread(target) {
|
|
16
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
17
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
18
|
+
i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
|
|
19
|
+
_defineProperty(target, key, source[key]);
|
|
20
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
|
|
21
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
return target;
|
|
25
|
+
}
|
|
26
|
+
import React__default, { useRef, useState, useEffect, useCallback } from "react";
|
|
27
|
+
import { useConfig } from "./ConfigProvider.js";
|
|
28
|
+
var initPositinoCache = function initPositinoCache2(reaItemSize) {
|
|
29
|
+
var length = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|
13
30
|
var index = 0;
|
|
14
31
|
var positions = Array(length);
|
|
15
32
|
while (index < length) {
|
|
16
33
|
positions[index] = {
|
|
17
|
-
index
|
|
34
|
+
index,
|
|
18
35
|
height: reaItemSize,
|
|
19
36
|
width: reaItemSize,
|
|
20
37
|
top: index * reaItemSize,
|
|
@@ -26,8 +43,7 @@ var initPositinoCache = function initPositinoCache(reaItemSize) {
|
|
|
26
43
|
}
|
|
27
44
|
return positions;
|
|
28
45
|
};
|
|
29
|
-
|
|
30
|
-
var getListTotalSize = function getListTotalSize(positions, horizontal) {
|
|
46
|
+
var getListTotalSize = function getListTotalSize2(positions, horizontal) {
|
|
31
47
|
var index = positions.length - 1;
|
|
32
48
|
var size = 0;
|
|
33
49
|
if (index < 0) {
|
|
@@ -37,28 +53,22 @@ var getListTotalSize = function getListTotalSize(positions, horizontal) {
|
|
|
37
53
|
}
|
|
38
54
|
return size;
|
|
39
55
|
};
|
|
40
|
-
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
var horizontal = arguments.length > 2 ? arguments[2] : undefined;
|
|
56
|
+
var binarySearch = function binarySearch2(positionsList) {
|
|
57
|
+
var value = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
|
|
58
|
+
var horizontal = arguments.length > 2 ? arguments[2] : void 0;
|
|
44
59
|
var start = 0;
|
|
45
60
|
var end = positionsList.length - 1;
|
|
46
61
|
var tempIndex = null;
|
|
47
|
-
var key = horizontal ?
|
|
62
|
+
var key = horizontal ? "right" : "bottom";
|
|
48
63
|
while (start <= end) {
|
|
49
64
|
var midIndex = Math.floor((start + end) / 2);
|
|
50
65
|
var midValue = positionsList[midIndex][key];
|
|
51
|
-
// 相等则直接返回(因为是bottom, 因此startIndex应该是下一个节点)
|
|
52
66
|
if (midValue === value) {
|
|
53
67
|
return midIndex + 1;
|
|
54
68
|
}
|
|
55
|
-
// 中间值 < 传入值,则说明 value对应的节点 大于 start, start往后移动一位
|
|
56
69
|
if (midValue < value) {
|
|
57
70
|
start = midIndex + 1;
|
|
58
|
-
}
|
|
59
|
-
// 中间值 > 传入值,则说明 value 在 中间值之前,end 节点移动到 mid - 1
|
|
60
|
-
else if (midValue > value) {
|
|
61
|
-
// tempIndex存放最靠近值为value的所有
|
|
71
|
+
} else if (midValue > value) {
|
|
62
72
|
if (tempIndex === null || tempIndex > midIndex) {
|
|
63
73
|
tempIndex = midIndex;
|
|
64
74
|
}
|
|
@@ -68,17 +78,8 @@ var binarySearch = function binarySearch(positionsList) {
|
|
|
68
78
|
tempIndex = tempIndex || 0;
|
|
69
79
|
return tempIndex;
|
|
70
80
|
};
|
|
71
|
-
var getEndIndex = function
|
|
72
|
-
var sourceData = _ref.sourceData,
|
|
73
|
-
startIndex = _ref.startIndex,
|
|
74
|
-
visibleCount = _ref.visibleCount,
|
|
75
|
-
_ref$itemEqualSize = _ref.itemEqualSize,
|
|
76
|
-
itemEqualSize = _ref$itemEqualSize === void 0 ? true : _ref$itemEqualSize,
|
|
77
|
-
positions = _ref.positions,
|
|
78
|
-
offSetSize = _ref.offSetSize,
|
|
79
|
-
overscan = _ref.overscan,
|
|
80
|
-
_ref$sizeKey = _ref.sizeKey,
|
|
81
|
-
sizeKey = _ref$sizeKey === void 0 ? 'width' : _ref$sizeKey;
|
|
81
|
+
var getEndIndex = function getEndIndex2(_ref) {
|
|
82
|
+
var sourceData = _ref.sourceData, startIndex = _ref.startIndex, visibleCount = _ref.visibleCount, _ref$itemEqualSize = _ref.itemEqualSize, itemEqualSize = _ref$itemEqualSize === void 0 ? true : _ref$itemEqualSize, positions = _ref.positions, offSetSize = _ref.offSetSize, overscan = _ref.overscan, _ref$sizeKey = _ref.sizeKey, sizeKey = _ref$sizeKey === void 0 ? "width" : _ref$sizeKey;
|
|
82
83
|
var dataLength = sourceData.length;
|
|
83
84
|
var tempIndex = null;
|
|
84
85
|
if (itemEqualSize) {
|
|
@@ -101,26 +102,25 @@ var getEndIndex = function getEndIndex(_ref) {
|
|
|
101
102
|
tempIndex = tempIndex || 0;
|
|
102
103
|
return tempIndex;
|
|
103
104
|
};
|
|
104
|
-
|
|
105
|
-
var updateItemSize = function updateItemSize(positions, items, sizeKey) {
|
|
105
|
+
var updateItemSize = function updateItemSize2(positions, items, sizeKey) {
|
|
106
106
|
var newPos = positions.concat();
|
|
107
|
-
Array.from(items).forEach(function
|
|
108
|
-
var index = Number(item.getAttribute(
|
|
109
|
-
var styleVal = item.getAttribute(
|
|
110
|
-
if (styleVal && styleVal.includes(
|
|
107
|
+
Array.from(items).forEach(function(item) {
|
|
108
|
+
var index = Number(item.getAttribute("data-index"));
|
|
109
|
+
var styleVal = item.getAttribute("style");
|
|
110
|
+
if (styleVal && styleVal.includes("none"))
|
|
111
|
+
return;
|
|
111
112
|
var nowSize = item.getBoundingClientRect()[sizeKey];
|
|
112
113
|
var oldSize = positions[index][sizeKey];
|
|
113
|
-
// 存在差值, 更新该节点以后所有的节点
|
|
114
114
|
var dValue = oldSize - nowSize;
|
|
115
115
|
if (dValue) {
|
|
116
|
-
if (sizeKey ===
|
|
116
|
+
if (sizeKey === "width") {
|
|
117
117
|
newPos[index].right -= dValue;
|
|
118
118
|
newPos[index][sizeKey] = nowSize;
|
|
119
119
|
for (var k = index + 1; k < positions.length; k++) {
|
|
120
120
|
newPos[k].left = positions[k - 1].right;
|
|
121
121
|
newPos[k].right -= dValue;
|
|
122
122
|
}
|
|
123
|
-
} else if (sizeKey ===
|
|
123
|
+
} else if (sizeKey === "height") {
|
|
124
124
|
newPos[index].bottom -= dValue;
|
|
125
125
|
newPos[index][sizeKey] = nowSize;
|
|
126
126
|
for (var _k = index + 1; _k < positions.length; _k++) {
|
|
@@ -132,132 +132,96 @@ var updateItemSize = function updateItemSize(positions, items, sizeKey) {
|
|
|
132
132
|
});
|
|
133
133
|
};
|
|
134
134
|
var defaultProps = {};
|
|
135
|
-
var VirtualList = function
|
|
136
|
-
var _props$sourceData = props.sourceData,
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
itemEqualSize = _props$itemEqualSize === void 0 ? true : _props$itemEqualSize,
|
|
141
|
-
_props$itemSize = props.itemSize,
|
|
142
|
-
itemSize = _props$itemSize === void 0 ? 200 : _props$itemSize,
|
|
143
|
-
_props$horizontal = props.horizontal,
|
|
144
|
-
horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
|
|
145
|
-
_props$overscan = props.overscan,
|
|
146
|
-
overscan = _props$overscan === void 0 ? 2 : _props$overscan,
|
|
147
|
-
key = props.key,
|
|
148
|
-
handleScroll = props.handleScroll,
|
|
149
|
-
onScroll = props.onScroll,
|
|
150
|
-
className = props.className,
|
|
151
|
-
containerSize = props.containerSize,
|
|
152
|
-
rest = _objectWithoutProperties(props, _excluded);
|
|
153
|
-
var sizeKey = horizontal ? 'width' : 'height';
|
|
154
|
-
var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
|
|
155
|
-
var offsetKey = horizontal ? 'left' : 'top';
|
|
135
|
+
var VirtualList = function VirtualList2(props) {
|
|
136
|
+
var _props$sourceData = props.sourceData, sourceData = _props$sourceData === void 0 ? [] : _props$sourceData, ItemRender = props.ItemRender, _props$itemEqualSize = props.itemEqualSize, itemEqualSize = _props$itemEqualSize === void 0 ? true : _props$itemEqualSize, _props$itemSize = props.itemSize, itemSize = _props$itemSize === void 0 ? 200 : _props$itemSize, _props$horizontal = props.horizontal, horizontal = _props$horizontal === void 0 ? false : _props$horizontal, _props$overscan = props.overscan, overscan = _props$overscan === void 0 ? 2 : _props$overscan, key = props.key, handleScroll = props.handleScroll, onScroll = props.onScroll, className = props.className, containerSize = props.containerSize, rest = _objectWithoutProperties(props, _excluded);
|
|
137
|
+
var sizeKey = horizontal ? "width" : "height";
|
|
138
|
+
var scrollKey = horizontal ? "scrollLeft" : "scrollTop";
|
|
139
|
+
var offsetKey = horizontal ? "left" : "top";
|
|
156
140
|
useConfig();
|
|
157
|
-
// 虚拟列表容器ref
|
|
158
141
|
var scrollRef = useRef(null);
|
|
159
|
-
// 虚拟列表显示区域ref
|
|
160
142
|
var itemsRef = useRef(null);
|
|
161
143
|
var firstItemRef = useRef(null);
|
|
162
|
-
// 列表位置信息
|
|
163
144
|
var _useState = useState([{
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
// 列表总大小
|
|
176
|
-
var _useState3 = useState(99999999),
|
|
177
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
178
|
-
listTotalSize = _useState4[0],
|
|
179
|
-
setListTotalSize = _useState4[1];
|
|
180
|
-
// 可视区域条数
|
|
181
|
-
var _useState5 = useState(0),
|
|
182
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
183
|
-
visibleCount = _useState6[0],
|
|
184
|
-
setVisibleCount = _useState6[1];
|
|
185
|
-
var _useState7 = useState(containerSize || 0),
|
|
186
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
187
|
-
offSetSize = _useState8[0],
|
|
188
|
-
setOffSetSize = _useState8[1];
|
|
145
|
+
index: 0,
|
|
146
|
+
left: 0,
|
|
147
|
+
top: 0,
|
|
148
|
+
bottom: 0,
|
|
149
|
+
width: 0,
|
|
150
|
+
height: 0,
|
|
151
|
+
right: 0
|
|
152
|
+
}]), _useState2 = _slicedToArray(_useState, 2), positions = _useState2[0], setPositions = _useState2[1];
|
|
153
|
+
var _useState3 = useState(99999999), _useState4 = _slicedToArray(_useState3, 2), listTotalSize = _useState4[0], setListTotalSize = _useState4[1];
|
|
154
|
+
var _useState5 = useState(0), _useState6 = _slicedToArray(_useState5, 2), visibleCount = _useState6[0], setVisibleCount = _useState6[1];
|
|
155
|
+
var _useState7 = useState(containerSize || 0), _useState8 = _slicedToArray(_useState7, 2), offSetSize = _useState8[0], setOffSetSize = _useState8[1];
|
|
189
156
|
var _useState9 = useState({
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
setOptions = _useState10[1];
|
|
198
|
-
// 列表位置信息
|
|
199
|
-
useEffect(function () {
|
|
157
|
+
startOffset: 0,
|
|
158
|
+
startIndex: 0,
|
|
159
|
+
overStart: 0,
|
|
160
|
+
endIndex: 10
|
|
161
|
+
// 可视区域结束索引
|
|
162
|
+
}), _useState10 = _slicedToArray(_useState9, 2), options = _useState10[0], setOptions = _useState10[1];
|
|
163
|
+
useEffect(function() {
|
|
200
164
|
var pos = initPositinoCache(itemSize, sourceData.length);
|
|
201
165
|
setPositions(pos);
|
|
202
166
|
var totalSize = getListTotalSize(pos, horizontal);
|
|
203
167
|
setListTotalSize(totalSize);
|
|
204
168
|
}, [sourceData, itemSize, horizontal]);
|
|
205
|
-
var getElement = useCallback(function
|
|
169
|
+
var getElement = useCallback(function() {
|
|
206
170
|
var _scrollRef$current;
|
|
207
171
|
return ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.parentElement) || document.body;
|
|
208
172
|
}, []);
|
|
209
|
-
useEffect(function
|
|
210
|
-
if (containerSize)
|
|
173
|
+
useEffect(function() {
|
|
174
|
+
if (containerSize)
|
|
175
|
+
return;
|
|
211
176
|
var size = horizontal ? getElement().offsetWidth : getElement().offsetHeight;
|
|
212
177
|
setOffSetSize(size);
|
|
213
178
|
}, [getElement, horizontal, containerSize]);
|
|
214
|
-
useEffect(function
|
|
215
|
-
|
|
216
|
-
|
|
179
|
+
useEffect(function() {
|
|
180
|
+
if (offSetSize === 0)
|
|
181
|
+
return;
|
|
217
182
|
var count = Math.ceil(offSetSize / itemSize) + overscan;
|
|
218
183
|
setVisibleCount(count);
|
|
219
|
-
setOptions(function
|
|
220
|
-
return _objectSpread(_objectSpread({},
|
|
184
|
+
setOptions(function(options2) {
|
|
185
|
+
return _objectSpread(_objectSpread({}, options2), {}, {
|
|
221
186
|
endIndex: count
|
|
222
187
|
});
|
|
223
188
|
});
|
|
224
189
|
}, [getElement, horizontal, itemSize, overscan, offSetSize]);
|
|
225
|
-
var updateTotalSize = useCallback(function
|
|
226
|
-
if (!itemsRef.current)
|
|
190
|
+
var updateTotalSize = useCallback(function() {
|
|
191
|
+
if (!itemsRef.current)
|
|
192
|
+
return;
|
|
227
193
|
var items = itemsRef.current.children;
|
|
228
|
-
if (!items.length)
|
|
229
|
-
|
|
194
|
+
if (!items.length)
|
|
195
|
+
return;
|
|
230
196
|
updateItemSize(positions, items, sizeKey);
|
|
231
197
|
var totalSize = getListTotalSize(positions, horizontal);
|
|
232
198
|
setListTotalSize(totalSize);
|
|
233
199
|
}, [positions, sizeKey, horizontal]);
|
|
234
|
-
var scroll = useCallback(function
|
|
235
|
-
requestAnimationFrame(function
|
|
200
|
+
var scroll = useCallback(function() {
|
|
201
|
+
requestAnimationFrame(function(e) {
|
|
236
202
|
var scrollSize = getElement()[scrollKey];
|
|
237
203
|
var startIndex = binarySearch(positions, scrollSize, horizontal);
|
|
238
204
|
var overStart = startIndex - overscan > -1 ? startIndex - overscan : 0;
|
|
239
|
-
// const offSetSize = horizontal ? getElement().offsetWidth : getElement().offsetHeight
|
|
240
205
|
if (!itemEqualSize) {
|
|
241
206
|
updateTotalSize();
|
|
242
207
|
}
|
|
243
208
|
var endIndex = getEndIndex({
|
|
244
|
-
sourceData
|
|
245
|
-
startIndex
|
|
246
|
-
visibleCount
|
|
247
|
-
itemEqualSize
|
|
248
|
-
positions
|
|
249
|
-
offSetSize
|
|
250
|
-
sizeKey
|
|
251
|
-
overscan
|
|
209
|
+
sourceData,
|
|
210
|
+
startIndex,
|
|
211
|
+
visibleCount,
|
|
212
|
+
itemEqualSize,
|
|
213
|
+
positions,
|
|
214
|
+
offSetSize,
|
|
215
|
+
sizeKey,
|
|
216
|
+
overscan
|
|
252
217
|
});
|
|
253
218
|
var startOffset = positions[startIndex][offsetKey];
|
|
254
219
|
setOptions({
|
|
255
|
-
startOffset
|
|
256
|
-
startIndex
|
|
257
|
-
overStart
|
|
258
|
-
endIndex
|
|
220
|
+
startOffset,
|
|
221
|
+
startIndex,
|
|
222
|
+
overStart,
|
|
223
|
+
endIndex
|
|
259
224
|
});
|
|
260
|
-
// 无限下滑
|
|
261
225
|
if (endIndex > sourceData.length - 1) {
|
|
262
226
|
if (onScroll) {
|
|
263
227
|
onScroll();
|
|
@@ -267,49 +231,50 @@ var VirtualList = function VirtualList(props) {
|
|
|
267
231
|
}
|
|
268
232
|
});
|
|
269
233
|
}, [positions, getElement, sourceData, visibleCount, itemEqualSize, updateTotalSize, offsetKey, sizeKey, scrollKey, horizontal, overscan, handleScroll, offSetSize]);
|
|
270
|
-
useEffect(function
|
|
234
|
+
useEffect(function() {
|
|
271
235
|
var element = getElement();
|
|
272
|
-
element.addEventListener(
|
|
273
|
-
return function
|
|
274
|
-
element.removeEventListener(
|
|
236
|
+
element.addEventListener("scroll", scroll, false);
|
|
237
|
+
return function() {
|
|
238
|
+
element.removeEventListener("scroll", scroll, false);
|
|
275
239
|
};
|
|
276
240
|
}, [getElement, scroll]);
|
|
277
241
|
return React__default.createElement("div", _objectSpread(_objectSpread({
|
|
278
|
-
className: className ? "".concat(className, " nut-virtualList-box") :
|
|
242
|
+
className: className ? "".concat(className, " nut-virtualList-box") : "nut-virtualList-box"
|
|
279
243
|
}, rest), {}, {
|
|
280
|
-
style: _defineProperty({}, sizeKey, containerSize ? "".concat(offSetSize, "px") :
|
|
244
|
+
style: _defineProperty({}, sizeKey, containerSize ? "".concat(offSetSize, "px") : "")
|
|
281
245
|
}), React__default.createElement("div", {
|
|
282
246
|
ref: scrollRef,
|
|
283
|
-
className: horizontal ?
|
|
247
|
+
className: horizontal ? "nut-horizontal-box" : "nut-vertical-box",
|
|
284
248
|
style: _defineProperty({
|
|
285
|
-
position:
|
|
249
|
+
position: "relative"
|
|
286
250
|
}, sizeKey, "".concat(listTotalSize, "px"))
|
|
287
251
|
}, React__default.createElement("ul", {
|
|
288
|
-
className: horizontal ?
|
|
252
|
+
className: horizontal ? "nut-virtuallist-items nut-horizontal-items" : "nut-virtuallist-items nut-vertical-items",
|
|
289
253
|
ref: itemsRef,
|
|
290
254
|
style: {
|
|
291
255
|
transform: horizontal ? "translate3d(".concat(options.startOffset, "px,0,0)") : "translate3d(0,".concat(options.startOffset, "px,0)")
|
|
292
256
|
}
|
|
293
|
-
}, sourceData.slice(options.overStart, options.endIndex).map(function
|
|
294
|
-
var startIndex = options.startIndex,
|
|
295
|
-
overStart = options.overStart;
|
|
257
|
+
}, sourceData.slice(options.overStart, options.endIndex).map(function(data, index) {
|
|
258
|
+
var startIndex = options.startIndex, overStart = options.overStart;
|
|
296
259
|
var dataIndex = overStart + index;
|
|
297
|
-
var styleVal = dataIndex < startIndex ?
|
|
260
|
+
var styleVal = dataIndex < startIndex ? "none" : "block";
|
|
298
261
|
var keyVal = key && data[key] ? data[key] : dataIndex;
|
|
299
262
|
return React__default.createElement("li", {
|
|
300
263
|
ref: dataIndex === 0 ? firstItemRef : null,
|
|
301
264
|
"data-index": "".concat(dataIndex),
|
|
302
|
-
className: dataIndex % 2 === 0 ?
|
|
265
|
+
className: dataIndex % 2 === 0 ? "nut-virtuallist-item even" : "nut-virtuallist-item odd",
|
|
303
266
|
key: "".concat(keyVal),
|
|
304
267
|
style: {
|
|
305
268
|
display: styleVal
|
|
306
269
|
}
|
|
307
270
|
}, ItemRender ? React__default.createElement(ItemRender, {
|
|
308
|
-
data
|
|
271
|
+
data,
|
|
309
272
|
index: "".concat(dataIndex)
|
|
310
273
|
}) : data);
|
|
311
274
|
}))));
|
|
312
275
|
};
|
|
313
276
|
VirtualList.defaultProps = defaultProps;
|
|
314
|
-
VirtualList.displayName =
|
|
315
|
-
export {
|
|
277
|
+
VirtualList.displayName = "NutVirtualList";
|
|
278
|
+
export {
|
|
279
|
+
VirtualList as default
|
|
280
|
+
};
|