@tarojs/components-advanced 3.6.0-canary.10
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/LICENSE +21 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/virtual-list/constants.d.ts +1 -0
- package/dist/components/virtual-list/constants.js +1 -0
- package/dist/components/virtual-list/dom-helpers.d.ts +1 -0
- package/dist/components/virtual-list/dom-helpers.js +38 -0
- package/dist/components/virtual-list/index.d.ts +189 -0
- package/dist/components/virtual-list/index.js +103 -0
- package/dist/components/virtual-list/list-set.d.ts +27 -0
- package/dist/components/virtual-list/list-set.js +228 -0
- package/dist/components/virtual-list/preset.d.ts +35 -0
- package/dist/components/virtual-list/preset.js +134 -0
- package/dist/components/virtual-list/react/index.d.ts +3 -0
- package/dist/components/virtual-list/react/index.js +63 -0
- package/dist/components/virtual-list/react/list.d.ts +49 -0
- package/dist/components/virtual-list/react/list.js +491 -0
- package/dist/components/virtual-list/react/validate.d.ts +3 -0
- package/dist/components/virtual-list/react/validate.js +70 -0
- package/dist/components/virtual-list/utils.d.ts +12 -0
- package/dist/components/virtual-list/utils.js +33 -0
- package/dist/components/virtual-list/vue/index.d.ts +4 -0
- package/dist/components/virtual-list/vue/index.js +6 -0
- package/dist/components/virtual-list/vue/list.d.ts +119 -0
- package/dist/components/virtual-list/vue/list.js +463 -0
- package/dist/components/virtual-list/vue/render.d.ts +3 -0
- package/dist/components/virtual-list/vue/render.js +25 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/utils/constants.d.ts +4 -0
- package/dist/utils/constants.js +4 -0
- package/dist/utils/convert.d.ts +5 -0
- package/dist/utils/convert.js +16 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +2 -0
- package/dist/utils/lodash.d.ts +1 -0
- package/dist/utils/lodash.js +10 -0
- package/dist/utils/timer.d.ts +6 -0
- package/dist/utils/timer.js +20 -0
- package/package.json +48 -0
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import Preset from '../preset';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
props: {
|
|
4
|
+
height: {
|
|
5
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
6
|
+
required: boolean;
|
|
7
|
+
};
|
|
8
|
+
width: {
|
|
9
|
+
type: (NumberConstructor | StringConstructor)[];
|
|
10
|
+
required: boolean;
|
|
11
|
+
};
|
|
12
|
+
itemCount: {
|
|
13
|
+
type: NumberConstructor;
|
|
14
|
+
required: boolean;
|
|
15
|
+
};
|
|
16
|
+
itemData: {
|
|
17
|
+
type: ArrayConstructor;
|
|
18
|
+
required: boolean;
|
|
19
|
+
};
|
|
20
|
+
itemSize: {
|
|
21
|
+
type: (NumberConstructor | FunctionConstructor)[];
|
|
22
|
+
required: boolean;
|
|
23
|
+
};
|
|
24
|
+
unlimitedSize: {
|
|
25
|
+
type: BooleanConstructor;
|
|
26
|
+
default: boolean;
|
|
27
|
+
};
|
|
28
|
+
position: {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
default: string;
|
|
31
|
+
};
|
|
32
|
+
initialScrollOffset: {
|
|
33
|
+
type: NumberConstructor;
|
|
34
|
+
default: number;
|
|
35
|
+
};
|
|
36
|
+
innerElementType: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
default: string;
|
|
39
|
+
};
|
|
40
|
+
direction: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
default: string;
|
|
43
|
+
};
|
|
44
|
+
layout: {
|
|
45
|
+
type: StringConstructor;
|
|
46
|
+
default: string;
|
|
47
|
+
};
|
|
48
|
+
overscanCount: {
|
|
49
|
+
type: NumberConstructor;
|
|
50
|
+
default: number;
|
|
51
|
+
};
|
|
52
|
+
placeholderCount: {
|
|
53
|
+
type: NumberConstructor;
|
|
54
|
+
};
|
|
55
|
+
useIsScrolling: {
|
|
56
|
+
type: BooleanConstructor;
|
|
57
|
+
default: boolean;
|
|
58
|
+
};
|
|
59
|
+
item: {
|
|
60
|
+
required: boolean;
|
|
61
|
+
};
|
|
62
|
+
itemKey: StringConstructor;
|
|
63
|
+
itemTagName: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
default: string;
|
|
66
|
+
};
|
|
67
|
+
innerTagName: {
|
|
68
|
+
type: StringConstructor;
|
|
69
|
+
default: string;
|
|
70
|
+
};
|
|
71
|
+
outerTagName: {
|
|
72
|
+
type: StringConstructor;
|
|
73
|
+
default: string;
|
|
74
|
+
};
|
|
75
|
+
itemElementType: StringConstructor;
|
|
76
|
+
outerElementType: StringConstructor;
|
|
77
|
+
innerRef: StringConstructor;
|
|
78
|
+
outerRef: StringConstructor;
|
|
79
|
+
onItemsRendered: FunctionConstructor;
|
|
80
|
+
onScrollNative: FunctionConstructor;
|
|
81
|
+
shouldResetStyleCacheOnItemSizeChange: {
|
|
82
|
+
type: BooleanConstructor;
|
|
83
|
+
default: boolean;
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
data(): {
|
|
87
|
+
itemList: import("../list-set").default;
|
|
88
|
+
preset: Preset;
|
|
89
|
+
id: any;
|
|
90
|
+
instance: any;
|
|
91
|
+
isScrolling: boolean;
|
|
92
|
+
scrollDirection: string;
|
|
93
|
+
scrollOffset: any;
|
|
94
|
+
scrollUpdateWasRequested: boolean;
|
|
95
|
+
resetIsScrollingTimeoutId: any;
|
|
96
|
+
};
|
|
97
|
+
methods: {
|
|
98
|
+
refresh(): void;
|
|
99
|
+
scrollTo(scrollOffset: any): void;
|
|
100
|
+
scrollToItem(index: any, align?: string): void;
|
|
101
|
+
_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
|
+
_callPropsCallbacks(): void;
|
|
104
|
+
_getSizeUploadSync(index: number, isHorizontal: boolean): Promise<unknown>;
|
|
105
|
+
_getRangeToRender(): any;
|
|
106
|
+
_onScrollHorizontal(event: any): void;
|
|
107
|
+
_onScrollVertical(event: any): void;
|
|
108
|
+
_outerRefSetter(ref: any): void;
|
|
109
|
+
_resetIsScrollingDebounced(): void;
|
|
110
|
+
_resetIsScrolling(): void;
|
|
111
|
+
};
|
|
112
|
+
mounted(): void;
|
|
113
|
+
updated(): void;
|
|
114
|
+
beforeDestroy(): void;
|
|
115
|
+
render(): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
116
|
+
[key: string]: any;
|
|
117
|
+
}>;
|
|
118
|
+
};
|
|
119
|
+
export default _default;
|
|
@@ -0,0 +1,463 @@
|
|
|
1
|
+
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import memoizeOne from 'memoize-one';
|
|
4
|
+
import { nextTick, renderSlot } from 'vue';
|
|
5
|
+
import { IS_VUE3, IS_WEB } from '../../../utils/constants';
|
|
6
|
+
import { convertNumber2PX } from '../../../utils/convert';
|
|
7
|
+
import { omit } from '../../../utils/lodash';
|
|
8
|
+
import { cancelTimeout, requestTimeout } from '../../../utils/timer';
|
|
9
|
+
import { IS_SCROLLING_DEBOUNCE_INTERVAL } from '../constants';
|
|
10
|
+
import { getRTLOffsetType } from '../dom-helpers';
|
|
11
|
+
import Preset from '../preset';
|
|
12
|
+
import { defaultItemKey, getRectSize } from '../utils';
|
|
13
|
+
import _render from './render';
|
|
14
|
+
export default {
|
|
15
|
+
props: {
|
|
16
|
+
height: {
|
|
17
|
+
type: [String, Number],
|
|
18
|
+
required: true
|
|
19
|
+
},
|
|
20
|
+
width: {
|
|
21
|
+
type: [String, Number],
|
|
22
|
+
required: true
|
|
23
|
+
},
|
|
24
|
+
itemCount: {
|
|
25
|
+
type: Number,
|
|
26
|
+
required: true
|
|
27
|
+
},
|
|
28
|
+
itemData: {
|
|
29
|
+
type: Array,
|
|
30
|
+
required: true
|
|
31
|
+
},
|
|
32
|
+
itemSize: {
|
|
33
|
+
type: [Number, Function],
|
|
34
|
+
required: true
|
|
35
|
+
},
|
|
36
|
+
unlimitedSize: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
position: {
|
|
41
|
+
type: String,
|
|
42
|
+
default: 'absolute'
|
|
43
|
+
},
|
|
44
|
+
initialScrollOffset: {
|
|
45
|
+
type: Number,
|
|
46
|
+
default: 0
|
|
47
|
+
},
|
|
48
|
+
innerElementType: {
|
|
49
|
+
type: String,
|
|
50
|
+
default: IS_WEB ? 'taro-view-core' : 'view'
|
|
51
|
+
},
|
|
52
|
+
direction: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: 'ltr'
|
|
55
|
+
},
|
|
56
|
+
layout: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: 'vertical'
|
|
59
|
+
},
|
|
60
|
+
overscanCount: {
|
|
61
|
+
type: Number,
|
|
62
|
+
default: 1
|
|
63
|
+
},
|
|
64
|
+
placeholderCount: {
|
|
65
|
+
type: Number
|
|
66
|
+
},
|
|
67
|
+
useIsScrolling: {
|
|
68
|
+
type: Boolean,
|
|
69
|
+
default: false
|
|
70
|
+
},
|
|
71
|
+
item: {
|
|
72
|
+
required: true
|
|
73
|
+
},
|
|
74
|
+
itemKey: String,
|
|
75
|
+
itemTagName: {
|
|
76
|
+
type: String,
|
|
77
|
+
default: IS_WEB ? 'taro-view-core' : 'view'
|
|
78
|
+
},
|
|
79
|
+
innerTagName: {
|
|
80
|
+
type: String,
|
|
81
|
+
default: IS_WEB ? 'taro-view-core' : 'view'
|
|
82
|
+
},
|
|
83
|
+
outerTagName: {
|
|
84
|
+
type: String,
|
|
85
|
+
default: IS_WEB ? 'taro-scroll-view-core' : 'scroll-view'
|
|
86
|
+
},
|
|
87
|
+
itemElementType: String,
|
|
88
|
+
outerElementType: String,
|
|
89
|
+
innerRef: String,
|
|
90
|
+
outerRef: String,
|
|
91
|
+
onItemsRendered: Function,
|
|
92
|
+
onScrollNative: Function,
|
|
93
|
+
shouldResetStyleCacheOnItemSizeChange: {
|
|
94
|
+
type: Boolean,
|
|
95
|
+
default: true
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
data: function data() {
|
|
99
|
+
var preset = new Preset(this.$props, this.refresh);
|
|
100
|
+
return {
|
|
101
|
+
itemList: preset.itemList,
|
|
102
|
+
preset: preset,
|
|
103
|
+
id: this.$props.id || preset.id,
|
|
104
|
+
instance: this,
|
|
105
|
+
isScrolling: false,
|
|
106
|
+
scrollDirection: 'forward',
|
|
107
|
+
scrollOffset: typeof this.$props.initialScrollOffset === 'number' ? this.$props.initialScrollOffset : 0,
|
|
108
|
+
scrollUpdateWasRequested: false,
|
|
109
|
+
resetIsScrollingTimeoutId: null
|
|
110
|
+
};
|
|
111
|
+
},
|
|
112
|
+
methods: {
|
|
113
|
+
refresh: function refresh() {
|
|
114
|
+
this.$forceUpdate();
|
|
115
|
+
},
|
|
116
|
+
scrollTo: function scrollTo(scrollOffset) {
|
|
117
|
+
scrollOffset = Math.max(0, scrollOffset);
|
|
118
|
+
if (this.scrollOffset === scrollOffset) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
|
|
122
|
+
this.scrollOffset = scrollOffset;
|
|
123
|
+
this.scrollUpdateWasRequested = true;
|
|
124
|
+
nextTick(this._resetIsScrollingDebounced);
|
|
125
|
+
},
|
|
126
|
+
scrollToItem: function scrollToItem(index) {
|
|
127
|
+
var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
|
128
|
+
var itemCount = this.$props.itemCount;
|
|
129
|
+
var scrollOffset = this.$data.scrollOffset;
|
|
130
|
+
index = Math.max(0, Math.min(index, itemCount - 1));
|
|
131
|
+
this.scrollTo(this.itemList.getOffsetForIndexAndAlignment(this.$props, index, align, scrollOffset));
|
|
132
|
+
},
|
|
133
|
+
_callOnItemsRendered: memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
|
|
134
|
+
return this.$props.onItemsRendered({
|
|
135
|
+
overscanStartIndex: overscanStartIndex,
|
|
136
|
+
overscanStopIndex: overscanStopIndex,
|
|
137
|
+
visibleStartIndex: visibleStartIndex,
|
|
138
|
+
visibleStopIndex: visibleStopIndex
|
|
139
|
+
});
|
|
140
|
+
}),
|
|
141
|
+
_callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
|
|
142
|
+
this.$emit('scroll', {
|
|
143
|
+
scrollDirection: scrollDirection,
|
|
144
|
+
scrollOffset: scrollOffset,
|
|
145
|
+
scrollUpdateWasRequested: scrollUpdateWasRequested
|
|
146
|
+
});
|
|
147
|
+
}),
|
|
148
|
+
_callPropsCallbacks: function _callPropsCallbacks() {
|
|
149
|
+
var _this = this;
|
|
150
|
+
if (typeof this.$props.onItemsRendered === 'function') {
|
|
151
|
+
var itemCount = this.$props.itemCount;
|
|
152
|
+
if (itemCount > 0) {
|
|
153
|
+
var _this$_getRangeToRend = this._getRangeToRender(),
|
|
154
|
+
_this$_getRangeToRend2 = _slicedToArray(_this$_getRangeToRend, 4),
|
|
155
|
+
overscanStartIndex = _this$_getRangeToRend2[0],
|
|
156
|
+
overscanStopIndex = _this$_getRangeToRend2[1],
|
|
157
|
+
visibleStartIndex = _this$_getRangeToRend2[2],
|
|
158
|
+
visibleStopIndex = _this$_getRangeToRend2[3];
|
|
159
|
+
this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested);
|
|
163
|
+
setTimeout(function () {
|
|
164
|
+
var _this$_getRangeToRend3 = _this._getRangeToRender(),
|
|
165
|
+
_this$_getRangeToRend4 = _slicedToArray(_this$_getRangeToRend3, 2),
|
|
166
|
+
startIndex = _this$_getRangeToRend4[0],
|
|
167
|
+
stopIndex = _this$_getRangeToRend4[1];
|
|
168
|
+
var isHorizontal = _this.preset.isHorizontal;
|
|
169
|
+
for (var index = startIndex; index <= stopIndex; index++) {
|
|
170
|
+
_this._getSizeUploadSync(index, isHorizontal);
|
|
171
|
+
}
|
|
172
|
+
}, 0);
|
|
173
|
+
},
|
|
174
|
+
_getSizeUploadSync: function _getSizeUploadSync(index, isHorizontal) {
|
|
175
|
+
var _this2 = this;
|
|
176
|
+
var ID = "#".concat(this.$data.id, "-").concat(index);
|
|
177
|
+
return new Promise(function (resolve) {
|
|
178
|
+
var success = function success(_ref) {
|
|
179
|
+
var width = _ref.width,
|
|
180
|
+
height = _ref.height;
|
|
181
|
+
var size = isHorizontal ? width : height;
|
|
182
|
+
if (!_this2.itemList.compareSize(index, size)) {
|
|
183
|
+
_this2.itemList.setSize(index, size);
|
|
184
|
+
resolve(_this2.itemList.getSize(index));
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
var fail = function fail() {
|
|
188
|
+
var _this2$_getRangeToRen = _this2._getRangeToRender(),
|
|
189
|
+
_this2$_getRangeToRen2 = _slicedToArray(_this2$_getRangeToRen, 2),
|
|
190
|
+
startIndex = _this2$_getRangeToRen2[0],
|
|
191
|
+
stopIndex = _this2$_getRangeToRen2[1];
|
|
192
|
+
if (index >= startIndex && index <= stopIndex) {
|
|
193
|
+
setTimeout(function () {
|
|
194
|
+
getRectSize(ID, success, fail);
|
|
195
|
+
}, 100);
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
getRectSize(ID, success, fail);
|
|
199
|
+
});
|
|
200
|
+
},
|
|
201
|
+
_getRangeToRender: function _getRangeToRender() {
|
|
202
|
+
return this.itemList.getRangeToRender(this.$data.scrollDirection, this.$data.scrollOffset, this.$data.isScrolling);
|
|
203
|
+
},
|
|
204
|
+
_onScrollHorizontal: function _onScrollHorizontal(event) {
|
|
205
|
+
var clientWidth = this.$props.width;
|
|
206
|
+
var _event$currentTarget = event.currentTarget,
|
|
207
|
+
scrollLeft = _event$currentTarget.scrollLeft,
|
|
208
|
+
scrollWidth = _event$currentTarget.scrollWidth;
|
|
209
|
+
if (this.$props.onScrollNative) {
|
|
210
|
+
this.$props.onScrollNative(event);
|
|
211
|
+
}
|
|
212
|
+
if (this.scrollOffset === scrollLeft) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
var scrollOffset = scrollLeft;
|
|
216
|
+
if (this.preset.isRtl) {
|
|
217
|
+
// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
|
|
218
|
+
// This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
|
|
219
|
+
// It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
|
|
220
|
+
// So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
|
|
221
|
+
switch (getRTLOffsetType()) {
|
|
222
|
+
case 'negative':
|
|
223
|
+
scrollOffset = -scrollLeft;
|
|
224
|
+
break;
|
|
225
|
+
case 'positive-descending':
|
|
226
|
+
scrollOffset = scrollWidth - clientWidth - scrollLeft;
|
|
227
|
+
break;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
232
|
+
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
|
|
233
|
+
this.isScrolling = true;
|
|
234
|
+
this.scrollDirection = this.scrollOffset < scrollLeft ? 'forward' : 'backward';
|
|
235
|
+
this.scrollOffset = scrollOffset;
|
|
236
|
+
this.scrollUpdateWasRequested = false;
|
|
237
|
+
nextTick(this._resetIsScrollingDebounced);
|
|
238
|
+
},
|
|
239
|
+
_onScrollVertical: function _onScrollVertical(event) {
|
|
240
|
+
var clientHeight = this.$props.height;
|
|
241
|
+
var _event$currentTarget2 = event.currentTarget,
|
|
242
|
+
scrollHeight = _event$currentTarget2.scrollHeight,
|
|
243
|
+
scrollTop = _event$currentTarget2.scrollTop;
|
|
244
|
+
if (this.$props.onScrollNative) {
|
|
245
|
+
this.$props.onScrollNative(event);
|
|
246
|
+
}
|
|
247
|
+
if (this.scrollOffset === scrollTop) {
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
252
|
+
var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
|
|
253
|
+
this.isScrolling = true;
|
|
254
|
+
this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
|
|
255
|
+
this.scrollOffset = scrollOffset;
|
|
256
|
+
this.scrollUpdateWasRequested = false;
|
|
257
|
+
nextTick(this._resetIsScrollingDebounced);
|
|
258
|
+
},
|
|
259
|
+
_outerRefSetter: function _outerRefSetter(ref) {
|
|
260
|
+
var outerRef = this.$props.outerRef;
|
|
261
|
+
this._outerRef = ref;
|
|
262
|
+
if (typeof outerRef === 'function') {
|
|
263
|
+
outerRef(ref);
|
|
264
|
+
} else if (outerRef != null && _typeof(outerRef) === 'object' && outerRef.hasOwnProperty('value')) {
|
|
265
|
+
outerRef.value = ref;
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
_resetIsScrollingDebounced: function _resetIsScrollingDebounced() {
|
|
269
|
+
if (this.resetIsScrollingTimeoutId !== null) {
|
|
270
|
+
cancelTimeout(this.resetIsScrollingTimeoutId);
|
|
271
|
+
}
|
|
272
|
+
this.resetIsScrollingTimeoutId = requestTimeout(this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
|
|
273
|
+
},
|
|
274
|
+
_resetIsScrolling: function _resetIsScrolling() {
|
|
275
|
+
var _this3 = this;
|
|
276
|
+
this.resetIsScrollingTimeoutId = null;
|
|
277
|
+
this.isScrolling = false;
|
|
278
|
+
nextTick(function () {
|
|
279
|
+
_this3.preset.getItemStyleCache(-1, null);
|
|
280
|
+
});
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
mounted: function mounted() {
|
|
284
|
+
var initialScrollOffset = this.$props.initialScrollOffset;
|
|
285
|
+
if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
|
|
286
|
+
var outerRef = this._outerRef;
|
|
287
|
+
if (this.preset.isHorizontal) {
|
|
288
|
+
outerRef.scrollLeft = initialScrollOffset;
|
|
289
|
+
} else {
|
|
290
|
+
outerRef.scrollTop = initialScrollOffset;
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
this._callPropsCallbacks();
|
|
294
|
+
},
|
|
295
|
+
updated: function updated() {
|
|
296
|
+
this.preset.update(this.$props);
|
|
297
|
+
var _this$$data = this.$data,
|
|
298
|
+
scrollOffset = _this$$data.scrollOffset,
|
|
299
|
+
scrollUpdateWasRequested = _this$$data.scrollUpdateWasRequested;
|
|
300
|
+
if (scrollUpdateWasRequested && this._outerRef != null) {
|
|
301
|
+
var outerRef = this._outerRef;
|
|
302
|
+
if (this.preset.isHorizontal) {
|
|
303
|
+
if (this.preset.isRtl) {
|
|
304
|
+
// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
|
|
305
|
+
// This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
|
|
306
|
+
// So we need to determine which browser behavior we're dealing with, and mimic it.
|
|
307
|
+
switch (getRTLOffsetType()) {
|
|
308
|
+
case 'negative':
|
|
309
|
+
outerRef.scrollLeft = -scrollOffset;
|
|
310
|
+
break;
|
|
311
|
+
case 'positive-ascending':
|
|
312
|
+
outerRef.scrollLeft = scrollOffset;
|
|
313
|
+
break;
|
|
314
|
+
default:
|
|
315
|
+
{
|
|
316
|
+
var clientWidth = outerRef.clientWidth,
|
|
317
|
+
scrollWidth = outerRef.scrollWidth;
|
|
318
|
+
outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
|
|
319
|
+
break;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
} else {
|
|
323
|
+
outerRef.scrollLeft = scrollOffset;
|
|
324
|
+
}
|
|
325
|
+
} else {
|
|
326
|
+
outerRef.scrollTop = scrollOffset;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
this._callPropsCallbacks();
|
|
330
|
+
},
|
|
331
|
+
beforeDestroy: function beforeDestroy() {
|
|
332
|
+
if (this.resetIsScrollingTimeoutId !== null) {
|
|
333
|
+
cancelTimeout(this.resetIsScrollingTimeoutId);
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
render: function render() {
|
|
337
|
+
var _this4 = this;
|
|
338
|
+
var _omit = omit(this.$props, ['innerElementType', 'innerTagName', 'itemElementType', 'itemTagName', 'outerElementType', 'outerTagName', 'position']),
|
|
339
|
+
item = _omit.item,
|
|
340
|
+
direction = _omit.direction,
|
|
341
|
+
height = _omit.height,
|
|
342
|
+
innerRef = _omit.innerRef,
|
|
343
|
+
itemCount = _omit.itemCount,
|
|
344
|
+
itemData = _omit.itemData,
|
|
345
|
+
_omit$itemKey = _omit.itemKey,
|
|
346
|
+
itemKey = _omit$itemKey === void 0 ? defaultItemKey : _omit$itemKey,
|
|
347
|
+
layout = _omit.layout,
|
|
348
|
+
useIsScrolling = _omit.useIsScrolling,
|
|
349
|
+
width = _omit.width;
|
|
350
|
+
var _this$$data2 = this.$data,
|
|
351
|
+
id = _this$$data2.id,
|
|
352
|
+
isScrolling = _this$$data2.isScrolling,
|
|
353
|
+
scrollOffset = _this$$data2.scrollOffset,
|
|
354
|
+
scrollUpdateWasRequested = _this$$data2.scrollUpdateWasRequested;
|
|
355
|
+
var isHorizontal = this.preset.isHorizontal;
|
|
356
|
+
var placeholderCount = this.preset.placeholderCount;
|
|
357
|
+
var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
|
|
358
|
+
var _this$_getRangeToRend5 = this._getRangeToRender(),
|
|
359
|
+
_this$_getRangeToRend6 = _slicedToArray(_this$_getRangeToRend5, 2),
|
|
360
|
+
startIndex = _this$_getRangeToRend6[0],
|
|
361
|
+
stopIndex = _this$_getRangeToRend6[1];
|
|
362
|
+
var items = [];
|
|
363
|
+
if (itemCount > 0) {
|
|
364
|
+
var prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
|
|
365
|
+
items.push(new Array(prevPlaceholder).fill(-1).map(function (_, index) {
|
|
366
|
+
return _render(_this4.preset.itemTagName, {
|
|
367
|
+
key: itemKey(index + startIndex - prevPlaceholder, itemData),
|
|
368
|
+
style: {
|
|
369
|
+
display: 'none'
|
|
370
|
+
}
|
|
371
|
+
});
|
|
372
|
+
}));
|
|
373
|
+
for (var index = startIndex; index <= stopIndex; index++) {
|
|
374
|
+
var style = this.preset.getItemStyle(index);
|
|
375
|
+
items.push(_render(this.preset.itemTagName, {
|
|
376
|
+
key: itemKey(index, itemData),
|
|
377
|
+
style: style
|
|
378
|
+
}, [_render(item, {
|
|
379
|
+
id: "".concat(id, "-").concat(index),
|
|
380
|
+
props: {
|
|
381
|
+
id: "".concat(id, "-").concat(index),
|
|
382
|
+
data: itemData,
|
|
383
|
+
index: index,
|
|
384
|
+
isScrolling: useIsScrolling ? isScrolling : undefined
|
|
385
|
+
}
|
|
386
|
+
})]));
|
|
387
|
+
}
|
|
388
|
+
var restCount = itemCount - stopIndex;
|
|
389
|
+
var postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
|
|
390
|
+
items.push(new Array(postPlaceholder).fill(-1).map(function (_, index) {
|
|
391
|
+
return _render(_this4.preset.itemTagName, {
|
|
392
|
+
key: itemKey(1 + index + stopIndex, itemData),
|
|
393
|
+
style: {
|
|
394
|
+
display: 'none'
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
}));
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
// Read this value AFTER items have been created,
|
|
401
|
+
// So their actual sizes (if variable) are taken into consideration.
|
|
402
|
+
var estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
|
|
403
|
+
var outerElementProps = {
|
|
404
|
+
id: id,
|
|
405
|
+
ref: this._outerRefSetter,
|
|
406
|
+
layout: layout,
|
|
407
|
+
style: {
|
|
408
|
+
position: 'relative',
|
|
409
|
+
height: convertNumber2PX(height),
|
|
410
|
+
width: convertNumber2PX(width),
|
|
411
|
+
overflow: 'auto',
|
|
412
|
+
WebkitOverflowScrolling: 'touch',
|
|
413
|
+
willChange: 'transform',
|
|
414
|
+
direction: direction
|
|
415
|
+
},
|
|
416
|
+
attrs: {
|
|
417
|
+
scrollY: layout === 'vertical',
|
|
418
|
+
scrollX: layout === 'horizontal'
|
|
419
|
+
},
|
|
420
|
+
on: {
|
|
421
|
+
scroll: onScroll
|
|
422
|
+
}
|
|
423
|
+
};
|
|
424
|
+
if (scrollUpdateWasRequested) {
|
|
425
|
+
if (isHorizontal) {
|
|
426
|
+
outerElementProps.scrollLeft = scrollOffset;
|
|
427
|
+
} else {
|
|
428
|
+
outerElementProps.scrollTop = scrollOffset;
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
if (this.preset.isRelative) {
|
|
432
|
+
var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
|
|
433
|
+
return _render(this.preset.outerTagName, outerElementProps, [IS_VUE3 ? renderSlot(this.$slots, 'top') : this.$slots.top, _render(this.preset.itemTagName, {
|
|
434
|
+
key: "".concat(id, "-pre"),
|
|
435
|
+
id: "".concat(id, "-pre"),
|
|
436
|
+
style: {
|
|
437
|
+
height: isHorizontal ? '100%' : pre,
|
|
438
|
+
width: !isHorizontal ? '100%' : pre
|
|
439
|
+
}
|
|
440
|
+
}), _render(this.preset.innerTagName, {
|
|
441
|
+
ref: innerRef,
|
|
442
|
+
key: "".concat(id, "-inner"),
|
|
443
|
+
id: "".concat(id, "-inner"),
|
|
444
|
+
style: {
|
|
445
|
+
pointerEvents: isScrolling ? 'none' : 'auto',
|
|
446
|
+
position: 'relative'
|
|
447
|
+
}
|
|
448
|
+
}, items), IS_VUE3 ? renderSlot(this.$slots, 'bottom') : this.$slots.bottom]);
|
|
449
|
+
} else {
|
|
450
|
+
return _render(this.preset.outerTagName, outerElementProps, [IS_VUE3 ? renderSlot(this.$slots, 'top') : this.$slots.top, _render(this.preset.innerTagName, {
|
|
451
|
+
ref: innerRef,
|
|
452
|
+
key: "".concat(id, "-inner"),
|
|
453
|
+
id: "".concat(id, "-inner"),
|
|
454
|
+
style: {
|
|
455
|
+
height: isHorizontal ? '100%' : estimatedTotalSize,
|
|
456
|
+
pointerEvents: isScrolling ? 'none' : 'auto',
|
|
457
|
+
position: 'relative',
|
|
458
|
+
width: !isHorizontal ? '100%' : estimatedTotalSize
|
|
459
|
+
}
|
|
460
|
+
}, items), IS_VUE3 ? renderSlot(this.$slots, 'bottom') : this.$slots.bottom]);
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["attrs", "on", "props", "slots"];
|
|
4
|
+
import { h } from 'vue';
|
|
5
|
+
import { IS_VUE3 } from '../../../utils/constants';
|
|
6
|
+
export default function (componentName, options, children) {
|
|
7
|
+
var _options$attrs = options.attrs,
|
|
8
|
+
attrs = _options$attrs === void 0 ? {} : _options$attrs,
|
|
9
|
+
_options$on = options.on,
|
|
10
|
+
on = _options$on === void 0 ? {} : _options$on,
|
|
11
|
+
_options$props = options.props,
|
|
12
|
+
props = _options$props === void 0 ? {} : _options$props,
|
|
13
|
+
_options$slots = options.slots,
|
|
14
|
+
slots = _options$slots === void 0 ? {} : _options$slots,
|
|
15
|
+
el = _objectWithoutProperties(options, _excluded);
|
|
16
|
+
if (IS_VUE3) {
|
|
17
|
+
// Events
|
|
18
|
+
Object.keys(on).forEach(function (key) {
|
|
19
|
+
var name = "on".concat(key.charAt(0).toUpperCase()).concat(key.slice(1));
|
|
20
|
+
el[name] = on[key];
|
|
21
|
+
});
|
|
22
|
+
return h(componentName, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), props), slots), el), children);
|
|
23
|
+
}
|
|
24
|
+
return h(componentName, options, children);
|
|
25
|
+
}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/** 将距离值根据单位转换为 Number 类型
|
|
2
|
+
* TODO: 未来可以考虑支持更多单位
|
|
3
|
+
*/
|
|
4
|
+
export function convertPX2Int(distance) {
|
|
5
|
+
if (typeof distance === 'string') {
|
|
6
|
+
var str = distance.toLowerCase();
|
|
7
|
+
if (/px$/.test(str)) {
|
|
8
|
+
return Number(str.replace(/px$/, ''));
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
return distance;
|
|
12
|
+
}
|
|
13
|
+
export function convertNumber2PX(styleValue) {
|
|
14
|
+
if (!styleValue && styleValue !== 0) return '';
|
|
15
|
+
return typeof styleValue === 'number' ? styleValue + 'px' : styleValue;
|
|
16
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function omit<T extends Record<string, unknown> = Record<string, any>, P extends string = ''>(obj?: T, fields?: P[]): Omit<T, P>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
export function omit() {
|
|
3
|
+
var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
4
|
+
var fields = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
5
|
+
var shallow = _objectSpread({}, obj);
|
|
6
|
+
fields.forEach(function (key) {
|
|
7
|
+
delete shallow[key];
|
|
8
|
+
});
|
|
9
|
+
return shallow;
|
|
10
|
+
}
|