@tarojs/components-advanced 3.6.0-beta.0 → 3.6.0-beta.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/components/virtual-list/index.d.ts +0 -2
- package/dist/components/virtual-list/index.js +1 -2
- package/dist/components/virtual-list/list-set.js +1 -2
- package/dist/components/virtual-list/preset.d.ts +14 -0
- package/dist/components/virtual-list/preset.js +33 -1
- package/dist/components/virtual-list/react/index.js +4 -0
- package/dist/components/virtual-list/react/list.d.ts +0 -10
- package/dist/components/virtual-list/react/list.js +37 -45
- package/dist/components/virtual-list/react/validate.js +3 -4
- package/dist/components/virtual-list/vue/list.d.ts +2 -1
- package/dist/components/virtual-list/vue/list.js +54 -26
- package/dist/components/virtual-list/vue/render.js +1 -2
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +2 -0
- package/dist/utils/math.d.ts +2 -0
- package/dist/utils/math.js +18 -0
- package/package.json +4 -4
- package/dist/utils/constants.d.ts +0 -4
- package/dist/utils/constants.js +0 -4
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components';
|
|
2
2
|
import type { Component, ComponentType, CSSProperties, ReactNode } from 'react';
|
|
3
|
-
import type { VuePlugin } from '../../../typings/vue';
|
|
4
3
|
interface VirtualListProps extends Omit<StandardProps, 'children'> {
|
|
5
4
|
/** 列表的高度。 */
|
|
6
5
|
height: string | number;
|
|
@@ -186,6 +185,5 @@ declare namespace VirtualListProps {
|
|
|
186
185
|
declare class VirtualListComponent extends Component<VirtualListProps> {
|
|
187
186
|
}
|
|
188
187
|
declare const VirtualList: typeof VirtualListComponent;
|
|
189
|
-
export declare const registerVirtualList: VuePlugin;
|
|
190
188
|
export { VirtualList, VirtualListProps };
|
|
191
189
|
export default VirtualList;
|
|
@@ -98,7 +98,6 @@
|
|
|
98
98
|
* @see https://taro-docs.jd.com/docs/virtual-list
|
|
99
99
|
*/
|
|
100
100
|
|
|
101
|
-
var VirtualList = require('./react').default;
|
|
102
|
-
export var registerVirtualList = require('./vue').default;
|
|
101
|
+
var VirtualList = process.env.FRAMEWORK === 'vue' || process.env.FRAMEWORK === 'vue3' ? require('./vue').default : require('./react').default;
|
|
103
102
|
export { VirtualList };
|
|
104
103
|
export default VirtualList;
|
|
@@ -4,7 +4,6 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
|
4
4
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
5
5
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
6
6
|
import { isFunction } from '@tarojs/shared';
|
|
7
|
-
import { IS_PROD } from '../../utils/constants';
|
|
8
7
|
import { isHorizontalFunc } from './utils';
|
|
9
8
|
var ListSet = /*#__PURE__*/function () {
|
|
10
9
|
function ListSet(props, refresh) {
|
|
@@ -62,7 +61,7 @@ var ListSet = /*#__PURE__*/function () {
|
|
|
62
61
|
width = _this$props.width;
|
|
63
62
|
var isHorizontal = isHorizontalFunc(this.props);
|
|
64
63
|
var size = isHorizontal ? width : height;
|
|
65
|
-
if (
|
|
64
|
+
if (process.env.NODE_ENV !== 'production' && typeof size !== 'number') {
|
|
66
65
|
console.warn("In mode ".concat(isHorizontal ? 'horizontal, width' : 'vertical, height', " parameter should be a number, but got ").concat(_typeof(size), "."));
|
|
67
66
|
}
|
|
68
67
|
return size;
|
|
@@ -3,6 +3,7 @@ import ListSet from './list-set';
|
|
|
3
3
|
import { defaultItemKey } from './utils';
|
|
4
4
|
import type { VirtualListProps } from './';
|
|
5
5
|
export interface IProps extends Partial<VirtualListProps> {
|
|
6
|
+
children?: VirtualListProps['item'];
|
|
6
7
|
direction?: 'ltr' | 'rtl' | 'horizontal' | 'vertical';
|
|
7
8
|
itemKey?: typeof defaultItemKey;
|
|
8
9
|
itemTagName?: string;
|
|
@@ -20,6 +21,16 @@ export default class Preset {
|
|
|
20
21
|
protected refresh?: TFunc;
|
|
21
22
|
itemList: ListSet;
|
|
22
23
|
constructor(props: IProps, refresh?: TFunc);
|
|
24
|
+
wrapperField: {
|
|
25
|
+
scrollLeft: number;
|
|
26
|
+
scrollTop: number;
|
|
27
|
+
scrollHeight: number;
|
|
28
|
+
scrollWidth: number;
|
|
29
|
+
clientHeight: number;
|
|
30
|
+
clientWidth: number;
|
|
31
|
+
diffOffset: number;
|
|
32
|
+
};
|
|
33
|
+
diffList: number[];
|
|
23
34
|
init(props: IProps): void;
|
|
24
35
|
update(props: IProps): void;
|
|
25
36
|
get id(): string;
|
|
@@ -30,6 +41,9 @@ export default class Preset {
|
|
|
30
41
|
get outerTagName(): string | import("react").ComponentType<{}>;
|
|
31
42
|
get innerTagName(): string | import("react").ComponentType<{}>;
|
|
32
43
|
get itemTagName(): string | import("react").ComponentType<{}>;
|
|
44
|
+
get field(): Record<string, number>;
|
|
45
|
+
set field(o: Record<string, number>);
|
|
46
|
+
isShaking(diff?: number): boolean;
|
|
33
47
|
getItemStyleCache: import("memoize-one").MemoizedFn<(_itemSize?: IProps['itemSize'] | false, _layout?: IProps['layout'] | false, _direction?: IProps['direction'] | false) => {}>;
|
|
34
48
|
getItemStyle(index: number): any;
|
|
35
49
|
}
|
|
@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
5
5
|
import memoizeOne from 'memoize-one';
|
|
6
|
-
import { convertNumber2PX } from '../../utils';
|
|
6
|
+
import { convertNumber2PX, isCosDistributing } from '../../utils';
|
|
7
7
|
import ListSet from './list-set';
|
|
8
8
|
import { isHorizontalFunc, isRtlFunc } from './utils';
|
|
9
9
|
var INSTANCE_ID = 0;
|
|
@@ -13,6 +13,16 @@ var Preset = /*#__PURE__*/function () {
|
|
|
13
13
|
this.props = props;
|
|
14
14
|
this.refresh = refresh;
|
|
15
15
|
_defineProperty(this, "itemList", void 0);
|
|
16
|
+
_defineProperty(this, "wrapperField", {
|
|
17
|
+
scrollLeft: 0,
|
|
18
|
+
scrollTop: 0,
|
|
19
|
+
scrollHeight: 0,
|
|
20
|
+
scrollWidth: 0,
|
|
21
|
+
clientHeight: 0,
|
|
22
|
+
clientWidth: 0,
|
|
23
|
+
diffOffset: 0
|
|
24
|
+
});
|
|
25
|
+
_defineProperty(this, "diffList", [0, 0, 0]);
|
|
16
26
|
_defineProperty(this, "getItemStyleCache", memoizeOne(function (_itemSize, _layout, _direction) {
|
|
17
27
|
// TODO: Cache of item styles, keyed by item index.
|
|
18
28
|
return {};
|
|
@@ -71,6 +81,28 @@ var Preset = /*#__PURE__*/function () {
|
|
|
71
81
|
get: function get() {
|
|
72
82
|
return this.props.itemElementType || this.props.itemTagName || 'div';
|
|
73
83
|
}
|
|
84
|
+
}, {
|
|
85
|
+
key: "field",
|
|
86
|
+
get: function get() {
|
|
87
|
+
return this.wrapperField;
|
|
88
|
+
},
|
|
89
|
+
set: function set(o) {
|
|
90
|
+
Object.assign(this.wrapperField, o);
|
|
91
|
+
// Object.keys(o).forEach(key => {
|
|
92
|
+
// if (typeof o[key] === 'number' && typeof this.wrapperField[key] === 'number') {
|
|
93
|
+
// this.wrapperField[key] = o[key]
|
|
94
|
+
// }
|
|
95
|
+
// })
|
|
96
|
+
}
|
|
97
|
+
}, {
|
|
98
|
+
key: "isShaking",
|
|
99
|
+
value: function isShaking(diff) {
|
|
100
|
+
var list = this.diffList.slice(-3);
|
|
101
|
+
this.diffList.push(diff);
|
|
102
|
+
return list.findIndex(function (e) {
|
|
103
|
+
return Math.abs(e) === Math.abs(diff);
|
|
104
|
+
}) !== -1 || isCosDistributing(this.diffList.slice(-4));
|
|
105
|
+
}
|
|
74
106
|
}, {
|
|
75
107
|
key: "getItemStyle",
|
|
76
108
|
value: function getItemStyle(index) {
|
|
@@ -45,6 +45,10 @@ var VirtualList = React.forwardRef(function VirtualList(props, ref) {
|
|
|
45
45
|
_ref2$overscanCount = _ref2.overscanCount,
|
|
46
46
|
overscanCount = _ref2$overscanCount === void 0 ? 1 : _ref2$overscanCount,
|
|
47
47
|
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
48
|
+
if ('children' in rest) {
|
|
49
|
+
console.warn('Taro(VirtualList): children props have been deprecated. ' + 'Please use the item props instead.');
|
|
50
|
+
rest.item = rest.children;
|
|
51
|
+
}
|
|
48
52
|
if (rest.item instanceof Array) {
|
|
49
53
|
console.warn('Taro(VirtualList): item should not be an array');
|
|
50
54
|
rest.item = rest.item[0];
|
|
@@ -14,22 +14,12 @@ export interface IState {
|
|
|
14
14
|
export default class List extends React.PureComponent<IProps, IState> {
|
|
15
15
|
static defaultProps: IProps;
|
|
16
16
|
static getDerivedStateFromProps(nextProps: IProps, prevState: IState): any;
|
|
17
|
-
shouldComponentUpdate: (_nextProps: IProps, nextState: IState) => boolean;
|
|
18
17
|
itemList: ListSet;
|
|
19
18
|
preset: Preset;
|
|
20
19
|
constructor(props: IProps);
|
|
21
20
|
refresh: () => void;
|
|
22
21
|
_outerRef: any;
|
|
23
22
|
_resetIsScrollingTimeoutId: any;
|
|
24
|
-
field: {
|
|
25
|
-
scrollLeft: number;
|
|
26
|
-
scrollTop: number;
|
|
27
|
-
scrollHeight: number;
|
|
28
|
-
scrollWidth: number;
|
|
29
|
-
clientHeight: number;
|
|
30
|
-
clientWidth: number;
|
|
31
|
-
diffOffset: number;
|
|
32
|
-
};
|
|
33
23
|
_callOnItemsRendered: import("memoize-one").MemoizedFn<(this: any, overscanStartIndex: any, overscanStopIndex: any, visibleStartIndex: any, visibleStopIndex: any) => any>;
|
|
34
24
|
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any, detail: any) => void>;
|
|
35
25
|
_callPropsCallbacks(prevProps?: any, prevState?: any): void;
|
|
@@ -11,7 +11,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
11
11
|
var _excluded = ["className", "direction", "height", "innerRef", "item", "itemCount", "itemData", "itemKey", "layout", "style", "useIsScrolling", "width", "renderTop", "renderBottom"];
|
|
12
12
|
import memoizeOne from 'memoize-one';
|
|
13
13
|
import React from 'react';
|
|
14
|
-
import { IS_PREACT } from '../../../utils/constants';
|
|
15
14
|
import { convertNumber2PX } from '../../../utils/convert';
|
|
16
15
|
import { omit } from '../../../utils/lodash';
|
|
17
16
|
import { cancelTimeout, requestTimeout } from '../../../utils/timer';
|
|
@@ -27,32 +26,22 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
27
26
|
var _this;
|
|
28
27
|
_classCallCheck(this, List);
|
|
29
28
|
_this = _super.call(this, props);
|
|
30
|
-
_defineProperty(_assertThisInitialized(_this), "shouldComponentUpdate", IS_PREACT ? function (_nextProps, nextState) {
|
|
31
|
-
if (_this.state.refreshCount !== nextState.refreshCount) {
|
|
32
|
-
return true;
|
|
33
|
-
}
|
|
34
|
-
} : undefined);
|
|
35
29
|
_defineProperty(_assertThisInitialized(_this), "itemList", void 0);
|
|
36
30
|
_defineProperty(_assertThisInitialized(_this), "preset", void 0);
|
|
37
31
|
_defineProperty(_assertThisInitialized(_this), "refresh", function () {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
32
|
+
if (process.env.FRAMEWORK === 'preact') {
|
|
33
|
+
_this.forceUpdate();
|
|
34
|
+
} else {
|
|
35
|
+
_this.setState(function (_ref) {
|
|
36
|
+
var refreshCount = _ref.refreshCount;
|
|
37
|
+
return {
|
|
38
|
+
refreshCount: ++refreshCount
|
|
39
|
+
};
|
|
40
|
+
});
|
|
41
|
+
}
|
|
44
42
|
});
|
|
45
43
|
_defineProperty(_assertThisInitialized(_this), "_outerRef", undefined);
|
|
46
44
|
_defineProperty(_assertThisInitialized(_this), "_resetIsScrollingTimeoutId", null);
|
|
47
|
-
_defineProperty(_assertThisInitialized(_this), "field", {
|
|
48
|
-
scrollLeft: 0,
|
|
49
|
-
scrollTop: 0,
|
|
50
|
-
scrollHeight: 0,
|
|
51
|
-
scrollWidth: 0,
|
|
52
|
-
clientHeight: 0,
|
|
53
|
-
clientWidth: 0,
|
|
54
|
-
diffOffset: 0
|
|
55
|
-
});
|
|
56
45
|
_defineProperty(_assertThisInitialized(_this), "_callOnItemsRendered", memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
|
|
57
46
|
return _this.props.onItemsRendered({
|
|
58
47
|
overscanStartIndex: overscanStartIndex,
|
|
@@ -102,15 +91,17 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
102
91
|
scrollLeft = _event$currentTarget.scrollLeft,
|
|
103
92
|
scrollHeight = _event$currentTarget.scrollHeight,
|
|
104
93
|
scrollWidth = _event$currentTarget.scrollWidth;
|
|
105
|
-
_this.field
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
94
|
+
_this.preset.field = {
|
|
95
|
+
scrollHeight: scrollHeight,
|
|
96
|
+
scrollWidth: _this.itemList.getOffsetSize(),
|
|
97
|
+
scrollTop: scrollTop,
|
|
98
|
+
scrollLeft: scrollLeft,
|
|
99
|
+
clientHeight: scrollHeight,
|
|
100
|
+
clientWidth: scrollWidth
|
|
101
|
+
};
|
|
111
102
|
_this.setState(function (prevState) {
|
|
112
|
-
var diffOffset = _this.field.scrollLeft - scrollLeft;
|
|
113
|
-
if (prevState.scrollOffset === scrollLeft || _this.
|
|
103
|
+
var diffOffset = _this.preset.field.scrollLeft - scrollLeft;
|
|
104
|
+
if (prevState.scrollOffset === scrollLeft || _this.preset.isShaking(diffOffset)) {
|
|
114
105
|
// Scroll position may have been updated by cDM/cDU,
|
|
115
106
|
// In which case we don't need to trigger another render,
|
|
116
107
|
// And we don't want to update state.isScrolling.
|
|
@@ -132,8 +123,9 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
132
123
|
}
|
|
133
124
|
} // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
134
125
|
|
|
135
|
-
|
|
136
|
-
|
|
126
|
+
_this.preset.field = {
|
|
127
|
+
scrollWidth: scrollOffset
|
|
128
|
+
};
|
|
137
129
|
return {
|
|
138
130
|
isScrolling: true,
|
|
139
131
|
scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
|
|
@@ -150,8 +142,8 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
150
142
|
scrollTop = _event$currentTarget2.scrollTop,
|
|
151
143
|
scrollLeft = _event$currentTarget2.scrollLeft;
|
|
152
144
|
_this.setState(function (prevState) {
|
|
153
|
-
var diffOffset = _this.field.scrollTop - scrollTop;
|
|
154
|
-
if (prevState.scrollOffset === scrollTop || _this.
|
|
145
|
+
var diffOffset = _this.preset.field.scrollTop - scrollTop;
|
|
146
|
+
if (prevState.scrollOffset === scrollTop || _this.preset.isShaking(diffOffset)) {
|
|
155
147
|
// Scroll position may have been updated by cDM/cDU,
|
|
156
148
|
// In which case we don't need to trigger another render,
|
|
157
149
|
// And we don't want to update state.isScrolling.
|
|
@@ -160,13 +152,15 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
160
152
|
// FIXME preact 中使用时,该组件会出现触底滚动事件重复触发导致的抖动问题,后续修复
|
|
161
153
|
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
162
154
|
var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
|
|
163
|
-
_this.field
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
155
|
+
_this.preset.field = {
|
|
156
|
+
scrollHeight: _this.itemList.getOffsetSize(),
|
|
157
|
+
scrollWidth: scrollWidth,
|
|
158
|
+
scrollTop: scrollOffset,
|
|
159
|
+
scrollLeft: scrollLeft,
|
|
160
|
+
clientHeight: clientHeight,
|
|
161
|
+
clientWidth: scrollWidth,
|
|
162
|
+
diffOffset: _this.preset.field.scrollTop - scrollOffset
|
|
163
|
+
};
|
|
170
164
|
return {
|
|
171
165
|
isScrolling: true,
|
|
172
166
|
scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
|
|
@@ -237,7 +231,7 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
237
231
|
}
|
|
238
232
|
if (typeof this.props.onScroll === 'function') {
|
|
239
233
|
if (!prevState || prevState.scrollDirection !== this.state.scrollDirection || prevState.scrollOffset !== this.state.scrollOffset || prevState.scrollUpdateWasRequested !== this.state.scrollUpdateWasRequested) {
|
|
240
|
-
this._callOnScroll(this.state.scrollDirection, this.state.scrollOffset, this.state.scrollUpdateWasRequested, this.field);
|
|
234
|
+
this._callOnScroll(this.state.scrollDirection, this.state.scrollOffset, this.state.scrollUpdateWasRequested, this.preset.field);
|
|
241
235
|
}
|
|
242
236
|
}
|
|
243
237
|
setTimeout(function () {
|
|
@@ -428,9 +422,9 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
428
422
|
}, style)
|
|
429
423
|
});
|
|
430
424
|
if (isHorizontal) {
|
|
431
|
-
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.field.scrollLeft;
|
|
425
|
+
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
|
|
432
426
|
} else {
|
|
433
|
-
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.field.scrollTop;
|
|
427
|
+
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
|
|
434
428
|
}
|
|
435
429
|
if (this.preset.isRelative) {
|
|
436
430
|
var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
|
|
@@ -469,8 +463,6 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
469
463
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
470
464
|
return validateListProps(nextProps, prevState);
|
|
471
465
|
}
|
|
472
|
-
|
|
473
|
-
// Note: preact 不会在未使用的 state 更新后主动更新,需新增判断
|
|
474
466
|
}]);
|
|
475
467
|
return List;
|
|
476
468
|
}(React.PureComponent); // NOTE: I considered further wrapping individual items with a pure ListItem component.
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
2
|
-
import { IS_PROD } from '../../../utils/constants';
|
|
3
2
|
var devWarningsDirection = null;
|
|
4
3
|
var devWarningsTagName = null;
|
|
5
|
-
if (
|
|
4
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
6
5
|
if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
|
|
7
6
|
devWarningsDirection = /* #__PURE__ */
|
|
8
7
|
new WeakSet();
|
|
@@ -21,12 +20,12 @@ export var validateListProps = function validateListProps(_ref, _ref2) {
|
|
|
21
20
|
width = _ref.width,
|
|
22
21
|
itemSize = _ref.itemSize;
|
|
23
22
|
var instance = _ref2.instance;
|
|
24
|
-
if (
|
|
23
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
25
24
|
if (!['number', 'function'].includes(_typeof(itemSize))) {
|
|
26
25
|
throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number or function. ' + "\"".concat(itemSize === null ? 'null' : _typeof(itemSize), "\" was specified."));
|
|
27
26
|
}
|
|
28
27
|
}
|
|
29
|
-
if (
|
|
28
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
30
29
|
if (innerTagName != null || outerTagName != null || itemTagName != null) {
|
|
31
30
|
if (devWarningsTagName && !devWarningsTagName.has(instance)) {
|
|
32
31
|
devWarningsTagName.add(instance);
|
|
@@ -93,13 +93,14 @@ declare const _default: {
|
|
|
93
93
|
scrollOffset: any;
|
|
94
94
|
scrollUpdateWasRequested: boolean;
|
|
95
95
|
resetIsScrollingTimeoutId: any;
|
|
96
|
+
refreshCount: number;
|
|
96
97
|
};
|
|
97
98
|
methods: {
|
|
98
99
|
refresh(): void;
|
|
99
100
|
scrollTo(scrollOffset: any): void;
|
|
100
101
|
scrollToItem(index: any, align?: string): void;
|
|
101
102
|
_callOnItemsRendered: import("memoize-one").MemoizedFn<(this: any, overscanStartIndex: any, overscanStopIndex: any, visibleStartIndex: any, visibleStopIndex: any) => any>;
|
|
102
|
-
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any) => void>;
|
|
103
|
+
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any, detail: any) => void>;
|
|
103
104
|
_callPropsCallbacks(): void;
|
|
104
105
|
_getSizeUploadSync(index: number, isHorizontal: boolean): Promise<unknown>;
|
|
105
106
|
_getRangeToRender(): any;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import memoizeOne from 'memoize-one';
|
|
4
|
-
import { nextTick, renderSlot } from 'vue';
|
|
5
|
-
import { IS_VUE3, IS_WEB } from '../../../utils/constants';
|
|
6
4
|
import { convertNumber2PX } from '../../../utils/convert';
|
|
7
5
|
import { omit } from '../../../utils/lodash';
|
|
8
6
|
import { cancelTimeout, requestTimeout } from '../../../utils/timer';
|
|
@@ -47,7 +45,7 @@ export default {
|
|
|
47
45
|
},
|
|
48
46
|
innerElementType: {
|
|
49
47
|
type: String,
|
|
50
|
-
default:
|
|
48
|
+
default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
|
|
51
49
|
},
|
|
52
50
|
direction: {
|
|
53
51
|
type: String,
|
|
@@ -74,15 +72,15 @@ export default {
|
|
|
74
72
|
itemKey: String,
|
|
75
73
|
itemTagName: {
|
|
76
74
|
type: String,
|
|
77
|
-
default:
|
|
75
|
+
default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
|
|
78
76
|
},
|
|
79
77
|
innerTagName: {
|
|
80
78
|
type: String,
|
|
81
|
-
default:
|
|
79
|
+
default: process.env.TARO_ENV === 'h5' ? 'taro-view-core' : 'view'
|
|
82
80
|
},
|
|
83
81
|
outerTagName: {
|
|
84
82
|
type: String,
|
|
85
|
-
default:
|
|
83
|
+
default: process.env.TARO_ENV === 'h5' ? 'taro-scroll-view-core' : 'scroll-view'
|
|
86
84
|
},
|
|
87
85
|
itemElementType: String,
|
|
88
86
|
outerElementType: String,
|
|
@@ -106,12 +104,13 @@ export default {
|
|
|
106
104
|
scrollDirection: 'forward',
|
|
107
105
|
scrollOffset: typeof this.$props.initialScrollOffset === 'number' ? this.$props.initialScrollOffset : 0,
|
|
108
106
|
scrollUpdateWasRequested: false,
|
|
109
|
-
resetIsScrollingTimeoutId: null
|
|
107
|
+
resetIsScrollingTimeoutId: null,
|
|
108
|
+
refreshCount: 0
|
|
110
109
|
};
|
|
111
110
|
},
|
|
112
111
|
methods: {
|
|
113
112
|
refresh: function refresh() {
|
|
114
|
-
this
|
|
113
|
+
this.refreshCount = this.refreshCount + 1;
|
|
115
114
|
},
|
|
116
115
|
scrollTo: function scrollTo(scrollOffset) {
|
|
117
116
|
scrollOffset = Math.max(0, scrollOffset);
|
|
@@ -121,7 +120,7 @@ export default {
|
|
|
121
120
|
this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
|
|
122
121
|
this.scrollOffset = scrollOffset;
|
|
123
122
|
this.scrollUpdateWasRequested = true;
|
|
124
|
-
nextTick(this._resetIsScrollingDebounced);
|
|
123
|
+
this.$nextTick(this._resetIsScrollingDebounced);
|
|
125
124
|
},
|
|
126
125
|
scrollToItem: function scrollToItem(index) {
|
|
127
126
|
var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
|
@@ -138,11 +137,12 @@ export default {
|
|
|
138
137
|
visibleStopIndex: visibleStopIndex
|
|
139
138
|
});
|
|
140
139
|
}),
|
|
141
|
-
_callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
|
|
140
|
+
_callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) {
|
|
142
141
|
this.$emit('scroll', {
|
|
143
142
|
scrollDirection: scrollDirection,
|
|
144
143
|
scrollOffset: scrollOffset,
|
|
145
|
-
scrollUpdateWasRequested: scrollUpdateWasRequested
|
|
144
|
+
scrollUpdateWasRequested: scrollUpdateWasRequested,
|
|
145
|
+
detail: detail
|
|
146
146
|
});
|
|
147
147
|
}),
|
|
148
148
|
_callPropsCallbacks: function _callPropsCallbacks() {
|
|
@@ -159,7 +159,7 @@ export default {
|
|
|
159
159
|
this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
|
-
this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested);
|
|
162
|
+
this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested, this.preset.field);
|
|
163
163
|
setTimeout(function () {
|
|
164
164
|
var _this$_getRangeToRend3 = _this._getRangeToRender(),
|
|
165
165
|
_this$_getRangeToRend4 = _slicedToArray(_this$_getRangeToRend3, 2),
|
|
@@ -202,14 +202,25 @@ export default {
|
|
|
202
202
|
return this.itemList.getRangeToRender(this.$data.scrollDirection, this.$data.scrollOffset, this.$data.isScrolling);
|
|
203
203
|
},
|
|
204
204
|
_onScrollHorizontal: function _onScrollHorizontal(event) {
|
|
205
|
-
var clientWidth = this.$props.width;
|
|
206
205
|
var _event$currentTarget = event.currentTarget,
|
|
206
|
+
clientWidth = _event$currentTarget.clientWidth,
|
|
207
|
+
scrollTop = _event$currentTarget.scrollTop,
|
|
207
208
|
scrollLeft = _event$currentTarget.scrollLeft,
|
|
209
|
+
scrollHeight = _event$currentTarget.scrollHeight,
|
|
208
210
|
scrollWidth = _event$currentTarget.scrollWidth;
|
|
211
|
+
this.preset.field = {
|
|
212
|
+
scrollHeight: scrollHeight,
|
|
213
|
+
scrollWidth: this.itemList.getOffsetSize(),
|
|
214
|
+
scrollTop: scrollTop,
|
|
215
|
+
scrollLeft: scrollLeft,
|
|
216
|
+
clientHeight: scrollHeight,
|
|
217
|
+
clientWidth: scrollWidth
|
|
218
|
+
};
|
|
209
219
|
if (this.$props.onScrollNative) {
|
|
210
220
|
this.$props.onScrollNative(event);
|
|
211
221
|
}
|
|
212
|
-
|
|
222
|
+
var diffOffset = this.preset.field.scrollLeft - scrollLeft;
|
|
223
|
+
if (this.scrollOffset === scrollLeft || this.preset.isShaking(diffOffset)) {
|
|
213
224
|
return;
|
|
214
225
|
}
|
|
215
226
|
var scrollOffset = scrollLeft;
|
|
@@ -230,31 +241,46 @@ export default {
|
|
|
230
241
|
|
|
231
242
|
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
232
243
|
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
|
|
244
|
+
this.preset.field = {
|
|
245
|
+
scrollWidth: scrollOffset
|
|
246
|
+
};
|
|
233
247
|
this.isScrolling = true;
|
|
234
248
|
this.scrollDirection = this.scrollOffset < scrollLeft ? 'forward' : 'backward';
|
|
235
249
|
this.scrollOffset = scrollOffset;
|
|
236
250
|
this.scrollUpdateWasRequested = false;
|
|
237
|
-
nextTick(this._resetIsScrollingDebounced);
|
|
251
|
+
this.$nextTick(this._resetIsScrollingDebounced);
|
|
238
252
|
},
|
|
239
253
|
_onScrollVertical: function _onScrollVertical(event) {
|
|
240
|
-
var clientHeight = this.$props.height;
|
|
241
254
|
var _event$currentTarget2 = event.currentTarget,
|
|
255
|
+
clientHeight = _event$currentTarget2.clientHeight,
|
|
242
256
|
scrollHeight = _event$currentTarget2.scrollHeight,
|
|
243
|
-
|
|
257
|
+
scrollWidth = _event$currentTarget2.scrollWidth,
|
|
258
|
+
scrollTop = _event$currentTarget2.scrollTop,
|
|
259
|
+
scrollLeft = _event$currentTarget2.scrollLeft;
|
|
244
260
|
if (this.$props.onScrollNative) {
|
|
245
261
|
this.$props.onScrollNative(event);
|
|
246
262
|
}
|
|
247
|
-
|
|
263
|
+
var diffOffset = this.preset.field.scrollTop - scrollTop;
|
|
264
|
+
if (this.scrollOffset === scrollTop || this.preset.isShaking(diffOffset)) {
|
|
248
265
|
return;
|
|
249
266
|
}
|
|
250
267
|
|
|
251
268
|
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
252
269
|
var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
|
|
270
|
+
this.preset.field = {
|
|
271
|
+
scrollHeight: this.itemList.getOffsetSize(),
|
|
272
|
+
scrollWidth: scrollWidth,
|
|
273
|
+
scrollTop: scrollOffset,
|
|
274
|
+
scrollLeft: scrollLeft,
|
|
275
|
+
clientHeight: clientHeight,
|
|
276
|
+
clientWidth: scrollWidth,
|
|
277
|
+
diffOffset: this.preset.field.scrollTop - scrollOffset
|
|
278
|
+
};
|
|
253
279
|
this.isScrolling = true;
|
|
254
280
|
this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
|
|
255
281
|
this.scrollOffset = scrollOffset;
|
|
256
282
|
this.scrollUpdateWasRequested = false;
|
|
257
|
-
nextTick(this._resetIsScrollingDebounced);
|
|
283
|
+
this.$nextTick(this._resetIsScrollingDebounced);
|
|
258
284
|
},
|
|
259
285
|
_outerRefSetter: function _outerRefSetter(ref) {
|
|
260
286
|
var outerRef = this.$props.outerRef;
|
|
@@ -275,7 +301,7 @@ export default {
|
|
|
275
301
|
var _this3 = this;
|
|
276
302
|
this.resetIsScrollingTimeoutId = null;
|
|
277
303
|
this.isScrolling = false;
|
|
278
|
-
nextTick(function () {
|
|
304
|
+
this.$nextTick(function () {
|
|
279
305
|
_this3.preset.getItemStyleCache(-1, null);
|
|
280
306
|
});
|
|
281
307
|
}
|
|
@@ -422,13 +448,14 @@ export default {
|
|
|
422
448
|
}
|
|
423
449
|
};
|
|
424
450
|
if (isHorizontal) {
|
|
425
|
-
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.field.scrollLeft;
|
|
451
|
+
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
|
|
426
452
|
} else {
|
|
427
|
-
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.field.scrollTop;
|
|
453
|
+
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
|
|
428
454
|
}
|
|
429
455
|
if (this.preset.isRelative) {
|
|
456
|
+
var _this$$slots$top, _this$$slots, _this$$slots$bottom, _this$$slots2;
|
|
430
457
|
var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
|
|
431
|
-
return _render(this.preset.outerTagName, outerElementProps, [
|
|
458
|
+
return _render(this.preset.outerTagName, outerElementProps, [process.env.FRAMEWORK === 'vue3' ? (_this$$slots$top = (_this$$slots = this.$slots).top) === null || _this$$slots$top === void 0 ? void 0 : _this$$slots$top.call(_this$$slots) : this.$slots.top, _render(this.preset.itemTagName, {
|
|
432
459
|
key: "".concat(id, "-pre"),
|
|
433
460
|
id: "".concat(id, "-pre"),
|
|
434
461
|
style: {
|
|
@@ -443,9 +470,10 @@ export default {
|
|
|
443
470
|
pointerEvents: isScrolling ? 'none' : 'auto',
|
|
444
471
|
position: 'relative'
|
|
445
472
|
}
|
|
446
|
-
}, items),
|
|
473
|
+
}, items), process.env.FRAMEWORK === 'vue3' ? (_this$$slots$bottom = (_this$$slots2 = this.$slots).bottom) === null || _this$$slots$bottom === void 0 ? void 0 : _this$$slots$bottom.call(_this$$slots2) : this.$slots.bottom]);
|
|
447
474
|
} else {
|
|
448
|
-
|
|
475
|
+
var _this$$slots$top2, _this$$slots3, _this$$slots$bottom2, _this$$slots4;
|
|
476
|
+
return _render(this.preset.outerTagName, outerElementProps, [process.env.FRAMEWORK === 'vue3' ? (_this$$slots$top2 = (_this$$slots3 = this.$slots).top) === null || _this$$slots$top2 === void 0 ? void 0 : _this$$slots$top2.call(_this$$slots3) : this.$slots.top, _render(this.preset.innerTagName, {
|
|
449
477
|
ref: innerRef,
|
|
450
478
|
key: "".concat(id, "-inner"),
|
|
451
479
|
id: "".concat(id, "-inner"),
|
|
@@ -455,7 +483,7 @@ export default {
|
|
|
455
483
|
position: 'relative',
|
|
456
484
|
width: !isHorizontal ? '100%' : estimatedTotalSize
|
|
457
485
|
}
|
|
458
|
-
}, items),
|
|
486
|
+
}, items), process.env.FRAMEWORK === 'vue3' ? (_this$$slots$bottom2 = (_this$$slots4 = this.$slots).bottom) === null || _this$$slots$bottom2 === void 0 ? void 0 : _this$$slots$bottom2.call(_this$$slots4) : this.$slots.bottom]);
|
|
459
487
|
}
|
|
460
488
|
}
|
|
461
489
|
};
|
|
@@ -2,7 +2,6 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["attrs", "on", "props", "slots"];
|
|
4
4
|
import { h } from 'vue';
|
|
5
|
-
import { IS_VUE3 } from '../../../utils/constants';
|
|
6
5
|
export default function (componentName, options, children) {
|
|
7
6
|
var _options$attrs = options.attrs,
|
|
8
7
|
attrs = _options$attrs === void 0 ? {} : _options$attrs,
|
|
@@ -13,7 +12,7 @@ export default function (componentName, options, children) {
|
|
|
13
12
|
_options$slots = options.slots,
|
|
14
13
|
slots = _options$slots === void 0 ? {} : _options$slots,
|
|
15
14
|
el = _objectWithoutProperties(options, _excluded);
|
|
16
|
-
if (
|
|
15
|
+
if (process.env.FRAMEWORK === 'vue3') {
|
|
17
16
|
// Events
|
|
18
17
|
Object.keys(on).forEach(function (key) {
|
|
19
18
|
var name = "on".concat(key.charAt(0).toUpperCase()).concat(key.slice(1));
|
package/dist/utils/index.d.ts
CHANGED
package/dist/utils/index.js
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export function getMiddleNumber() {
|
|
2
|
+
for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3
|
+
list[_key] = arguments[_key];
|
|
4
|
+
}
|
|
5
|
+
return list.sort(function (a, b) {
|
|
6
|
+
return a - b;
|
|
7
|
+
})[Math.floor(list.length / 2)];
|
|
8
|
+
}
|
|
9
|
+
export function isCosDistributing(list) {
|
|
10
|
+
var datum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
11
|
+
var flags = 0;
|
|
12
|
+
for (var i = 0; i < list.length - 1; i++) {
|
|
13
|
+
if (getMiddleNumber(list[i], datum, list[i + 1]) === datum) {
|
|
14
|
+
flags++;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return flags === list.length - 1;
|
|
18
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tarojs/components-advanced",
|
|
3
|
-
"version": "3.6.0-beta.
|
|
3
|
+
"version": "3.6.0-beta.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"memoize-one": "^6.0.0",
|
|
16
16
|
"postcss": "^8.4.18",
|
|
17
|
-
"@tarojs/components": "3.6.0-beta.
|
|
18
|
-
"@tarojs/shared": "3.6.0-beta.
|
|
17
|
+
"@tarojs/components": "3.6.0-beta.2",
|
|
18
|
+
"@tarojs/shared": "3.6.0-beta.2"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@babel/cli": "^7.14.5",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-dom": "^18.2.0",
|
|
27
27
|
"typescript": "^4.7.4",
|
|
28
28
|
"vue": "^3.0.0",
|
|
29
|
-
"babel-preset-taro": "3.6.0-beta.
|
|
29
|
+
"babel-preset-taro": "3.6.0-beta.2"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=17"
|
package/dist/utils/constants.js
DELETED