@tarojs/components-advanced 3.6.10 → 3.6.11-alpha.4

package/dist/components/virtual-list/vue/list.js

@@ -1,17 +1,21 @@
 import { isWebPlatform } from '@tarojs/shared';
 import memoizeOne from 'memoize-one';
-import { convertNumber2PX } from '../../../utils/convert.js';
-import { omit } from '../../../utils/lodash.js';
-import { cancelTimeout, requestTimeout } from '../../../utils/timer.js';
+import { defineComponent } from 'vue';
+import '../../../utils/index.js';
+import render from '../../../utils/vue-render.js';
 import { IS_SCROLLING_DEBOUNCE_INTERVAL } from '../constants.js';
 import { getRTLOffsetType } from '../dom-helpers.js';
 import Preset from '../preset.js';
-import { getScrollViewContextNode, getRectSize, defaultItemKey } from '../utils.js';
-import render from './render.js';
+import { getScrollViewContextNode, getRectSizeSync } from '../../../utils/dom.js';
+import { cancelTimeout, requestTimeout } from '../../../utils/timer.js';
+import { defaultItemKey } from '../../../utils/helper.js';
+import { convertNumber2PX } from '../../../utils/convert.js';
+import { omit } from '../../../utils/lodash.js';
 
 const isWeb = isWebPlatform();
-var List = {
+var List = defineComponent({
     props: {
+        id: String,
         height: {
             type: [String, Number],
             required: true
@@ -20,6 +24,9 @@ var List = {
             type: [String, Number],
             required: true
         },
+        item: {
+            required: true
+        },
         itemCount: {
             type: Number,
             required: true
@@ -28,6 +35,7 @@ var List = {
             type: Array,
             required: true
         },
+        itemKey: Function,
         itemSize: {
             type: [Number, Function],
             required: true
@@ -40,14 +48,6 @@ var List = {
             type: String,
             default: 'absolute'
         },
-        initialScrollOffset: {
-            type: Number,
-            default: 0
-        },
-        innerElementType: {
-            type: String,
-            default: isWeb ? 'taro-view-core' : 'view'
-        },
         direction: {
             type: String,
             default: 'ltr'
@@ -56,6 +56,10 @@ var List = {
             type: String,
             default: 'vertical'
         },
+        initialScrollOffset: {
+            type: Number,
+            default: 0
+        },
         overscanCount: {
             type: Number,
             default: 1
@@ -67,39 +71,41 @@ var List = {
             type: Boolean,
             default: false
         },
-        item: {
-            required: true
+        enhanced: {
+            type: Boolean,
+            default: false
+        },
+        shouldResetStyleCacheOnItemSizeChange: {
+            type: Boolean,
+            default: true
         },
-        itemKey: String,
-        itemTagName: {
+        outerElementType: {
             type: String,
-            default: isWeb ? 'taro-view-core' : 'view'
+            default: isWeb ? 'taro-scroll-view-core' : 'scroll-view'
         },
-        innerTagName: {
+        innerElementType: {
             type: String,
             default: isWeb ? 'taro-view-core' : 'view'
         },
-        outerTagName: {
+        itemElementType: {
             type: String,
-            default: isWeb ? 'taro-scroll-view-core' : 'scroll-view'
+            default: isWeb ? 'taro-view-core' : 'view'
         },
-        itemElementType: String,
-        outerElementType: String,
-        innerRef: String,
+        outerTagName: String,
+        innerTagName: String,
+        itemTagName: String,
         outerRef: String,
-        onItemsRendered: Function,
+        innerRef: String,
         onScrollNative: Function,
-        shouldResetStyleCacheOnItemSizeChange: {
-            type: Boolean,
-            default: true
-        },
+        onItemsRendered: Function,
     },
     data() {
         const preset = new Preset(this.$props, this.refresh);
+        const id = this.$props.id || preset.id;
+        preset.updateWrapper(id);
         return {
             itemList: preset.itemList,
             preset,
-            id: this.$props.id || preset.id,
             instance: this,
             isScrolling: false,
             scrollDirection: 'forward',
@@ -115,8 +121,7 @@ var List = {
         refresh() {
             this.refreshCount = this.refreshCount + 1;
         },
-        scrollTo(scrollOffset) {
-            const { enhanced } = this.$props;
+        scrollTo(scrollOffset = 0, enhanced = this.preset.enhanced) {
             scrollOffset = Math.max(0, scrollOffset);
             if (this.scrollOffset === scrollOffset)
                 return;
@@ -124,7 +129,7 @@ var List = {
                 const isHorizontal = this.preset.isHorizontal;
                 const option = {
                     animated: true,
-                    duration: 500
+                    duration: 300,
                 };
                 if (isHorizontal) {
                     option.left = scrollOffset;
@@ -132,25 +137,25 @@ var List = {
                 else {
                     option.top = scrollOffset;
                 }
-                return getScrollViewContextNode(`#${this.$data.id}`).then((node) => node.scrollTo(option));
+                return getScrollViewContextNode(`#${this.preset.id}`).then((node) => node.scrollTo(option));
             }
             this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
             this.scrollOffset = scrollOffset;
             this.scrollUpdateWasRequested = true;
             this.$nextTick(this._resetIsScrollingDebounced);
         },
-        scrollToItem(index, align = 'auto') {
+        scrollToItem(index, align = 'auto', enhanced = this.preset.enhanced) {
             const { itemCount } = this.$props;
             const { scrollOffset } = this.$data;
             index = Math.max(0, Math.min(index, itemCount - 1));
-            this.scrollTo(this.itemList.getOffsetForIndexAndAlignment(this.$props, index, align, scrollOffset));
+            this.scrollTo(this.itemList.getOffsetForIndexAndAlignment(index, align, scrollOffset), enhanced);
         },
-        _callOnItemsRendered: memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        _callOnItemsRendered: memoizeOne(function (overscanStartIndex, overscanStopIndex, startIndex, stopIndex) {
             return this.$props.onItemsRendered({
                 overscanStartIndex,
                 overscanStopIndex,
-                visibleStartIndex,
-                visibleStopIndex
+                startIndex,
+                stopIndex
             });
         }),
         _callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) {
@@ -163,52 +168,49 @@ var List = {
         }),
         _callPropsCallbacks() {
             if (typeof this.$props.onItemsRendered === 'function') {
-                const { itemCount } = this.$props;
-                if (itemCount > 0) {
-                    const [overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex] = this._getRangeToRender();
-                    this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
+                if (this.$props.itemCount > 0) {
+                    const [overscanStartIndex, overscanStopIndex, startIndex, stopIndex] = this._getRangeToRender();
+                    this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, startIndex, stopIndex);
                 }
             }
-            this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested, this.preset.field);
-            setTimeout(() => {
-                const [startIndex, stopIndex] = this._getRangeToRender();
-                const isHorizontal = this.preset.isHorizontal;
-                for (let index = startIndex; index <= stopIndex; index++) {
-                    this._getSizeUploadSync(index, isHorizontal);
-                }
-            }, 0);
+            if (typeof this.$props.onScroll === 'function') {
+                this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested, this.preset.field);
+            }
+            if (this.itemList.isUnlimitedMode) {
+                setTimeout(() => {
+                    const [startIndex, stopIndex] = this._getRangeToRender();
+                    const isHorizontal = this.preset.isHorizontal;
+                    for (let index = startIndex; index <= stopIndex; index++) {
+                        this._getSizeUploadSync(index, isHorizontal);
+                    }
+                }, 0);
+            }
         },
         _getSizeUploadSync(index, isHorizontal) {
-            const ID = `#${this.$data.id}-${index}`;
             return new Promise((resolve) => {
-                const success = ({ width, height }) => {
-                    const size = isHorizontal ? width : height;
-                    if (!this.itemList.compareSize(index, size)) {
-                        this.itemList.setSize(index, size);
-                        resolve(this.itemList.getSize(index));
-                    }
-                };
-                const fail = () => {
-                    const [startIndex, stopIndex] = this._getRangeToRender();
-                    if (index >= startIndex && index <= stopIndex) {
-                        setTimeout(() => {
-                            getRectSize(ID, success, fail);
-                        }, 100);
-                    }
-                };
-                getRectSize(ID, success, fail);
+                if (index >= 0 && index < this.$props.itemCount) {
+                    const times = this.itemList.compareSize(index) ? 0 : 2;
+                    getRectSizeSync(`#${this.preset.id}-${index}`, 100, times).then(({ width, height }) => {
+                        const size = isHorizontal ? width : height;
+                        if (typeof size === 'number' && size > 0 && !this.itemList.compareSize(index, size)) {
+                            this.itemList.setSize(index, size);
+                            resolve(this.itemList.getSize(index));
+                        }
+                    });
+                }
             });
         },
         _getRangeToRender() {
             return this.itemList.getRangeToRender(this.$data.scrollDirection, this.$data.scrollOffset, this.$data.isScrolling);
         },
         _onScrollHorizontal(event) {
-            const { clientWidth = this.itemList.wrapperSize, scrollHeight, scrollWidth = this.itemList.getOffsetSize(), scrollTop, scrollLeft, } = event.currentTarget;
+            const { scrollHeight, scrollWidth = this.itemList.getOffsetSizeCache(), scrollTop, scrollLeft, } = event.currentTarget;
+            const clientWidth = this.itemList.wrapperSize;
             this.preset.field = {
-                scrollHeight: scrollHeight,
-                scrollWidth: this.itemList.getOffsetSize(),
-                scrollTop: scrollTop,
-                scrollLeft: scrollLeft,
+                scrollHeight,
+                scrollWidth,
+                scrollTop,
+                scrollLeft,
                 clientHeight: scrollHeight,
                 clientWidth: scrollWidth
             };
@@ -246,7 +248,8 @@ var List = {
             this.$nextTick(this._resetIsScrollingDebounced);
         },
         _onScrollVertical(event) {
-            const { clientHeight = this.itemList.wrapperSize, scrollHeight = this.itemList.getOffsetSize(), scrollWidth, scrollTop, scrollLeft, } = event.currentTarget;
+            const { scrollHeight = this.itemList.getOffsetSizeCache(), scrollWidth, scrollTop, scrollLeft, } = event.currentTarget;
+            const clientHeight = this.itemList.wrapperSize;
             if (this.$props.onScrollNative) {
                 this.$props.onScrollNative(event);
             }
@@ -257,11 +260,11 @@ var List = {
             // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
             const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
             this.preset.field = {
-                scrollHeight: this.itemList.getOffsetSize(),
-                scrollWidth: scrollWidth,
+                scrollHeight,
+                scrollWidth,
                 scrollTop: scrollOffset,
-                scrollLeft: scrollLeft,
-                clientHeight: clientHeight,
+                scrollLeft,
+                clientHeight,
                 clientWidth: scrollWidth,
                 diffOffset: this.preset.field.scrollTop - scrollOffset,
             };
@@ -291,8 +294,97 @@ var List = {
             this.resetIsScrollingTimeoutId = null;
             this.isScrolling = false;
             this.$nextTick(() => {
-                this.preset.getItemStyleCache(-1, null);
+                this.preset.resetCache();
             });
+        },
+        getRenderItemNode(index, type = 'node') {
+            const { item, itemData, itemKey = defaultItemKey, useIsScrolling } = this.$props;
+            const { isScrolling } = this.$data;
+            const key = itemKey(index, itemData);
+            const style = this.preset.getItemStyle(index);
+            if (type === 'placeholder') {
+                return render(this.preset.itemElement, {
+                    key,
+                    id: `${this.preset.id}-${index}-wrapper`,
+                    style: this.preset.isBrick ? style : { display: 'none' }
+                });
+            }
+            return render(this.preset.itemElement, {
+                key: itemKey(index, itemData),
+                id: `${this.preset.id}-${index}-wrapper`,
+                style
+            }, render(item, {
+                id: `${this.preset.id}-${index}`,
+                data: itemData,
+                index,
+                isScrolling: useIsScrolling ? isScrolling : undefined
+            }));
+        },
+        getRenderColumnNode() {
+            const { isScrolling } = this.$data;
+            const { innerRef, itemCount } = this.$props;
+            const isHorizontal = this.preset.isHorizontal;
+            // Read this value AFTER items have been created,
+            // So their actual sizes (if variable) are taken into consideration.
+            const estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
+            const columnProps = {
+                ref: innerRef,
+                key: `${this.preset.id}-inner`,
+                id: `${this.preset.id}-inner`,
+                style: {
+                    height: isHorizontal ? '100%' : estimatedTotalSize,
+                    width: !isHorizontal ? '100%' : estimatedTotalSize,
+                    position: 'relative',
+                    pointerEvents: isScrolling ? 'none' : 'auto',
+                }
+            };
+            const [startIndex, stopIndex] = this._getRangeToRender();
+            const items = [];
+            if (this.preset.isRelative && !this.preset.isBrick) {
+                const pre = convertNumber2PX(this.itemList.getOffsetSizeCache(startIndex));
+                items.push(render(this.preset.itemElement, {
+                    key: `${this.preset.id}-pre`,
+                    id: `${this.preset.id}-pre`,
+                    style: {
+                        height: isHorizontal ? '100%' : pre,
+                        width: !isHorizontal ? '100%' : pre
+                    }
+                }));
+            }
+            const placeholderCount = this.preset.placeholderCount;
+            const restCount = itemCount - stopIndex;
+            const prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
+            const postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
+            for (let itemIndex = 0; itemIndex < stopIndex + postPlaceholder; itemIndex++) {
+                if (!this.preset.isBrick) {
+                    if (itemIndex < startIndex - prevPlaceholder) {
+                        itemIndex = startIndex - prevPlaceholder;
+                        continue;
+                    }
+                }
+                if (itemIndex < startIndex || itemIndex > stopIndex) {
+                    items.push(this.getRenderItemNode(itemIndex, 'placeholder'));
+                }
+                else {
+                    items.push(this.getRenderItemNode(itemIndex));
+                }
+            }
+            return render(this.preset.innerElement, columnProps, items);
+        },
+        getRenderExpandNodes(direction) {
+            const isHorizontal = this.preset.isHorizontal;
+            const isRtl = this.preset.isRtl;
+            const props = {
+                id: `${this.preset.id}-${direction}`,
+                style: {
+                    visibility: 'hidden',
+                    height: isHorizontal ? '100%' : 100,
+                    width: isHorizontal ? 100 : '100%',
+                    [isHorizontal ? isRtl ? 'marginRight' : 'marginLeft' : 'marginTop']: -100,
+                    zIndex: -1,
+                }
+            };
+            return render(this.preset.innerElement, props);
         }
     },
     mounted() {
@@ -307,6 +399,7 @@ var List = {
             }
         }
         this._callPropsCallbacks();
+        this.preset.boundaryDetection();
     },
     updated() {
         this.preset.update(this.$props);
@@ -346,54 +439,22 @@ var List = {
         if (this.resetIsScrollingTimeoutId !== null) {
             cancelTimeout(this.resetIsScrollingTimeoutId);
         }
+        this.preset.dispose();
     },
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const { item, direction, height, innerRef, itemCount, itemData, itemKey = defaultItemKey, layout, useIsScrolling, width, enhanced = false } = omit(this.$props, ['innerElementType', 'innerTagName', 'itemElementType', 'itemTagName', 'outerElementType', 'outerTagName', 'position']);
-        const { id, isScrolling, scrollOffset, scrollUpdateWasRequested } = this.$data;
+        var _a, _b, _c, _d;
+        const { direction, height, layout, width, enhanced = false } = omit(this.$props, [
+            'item', 'itemCount', 'itemData', 'itemKey', 'useIsScrolling',
+            'innerElementType', 'innerTagName', 'itemElementType', 'itemTagName',
+            'outerElementType', 'outerTagName', 'onScrollToLower', 'onScrollToUpper',
+            'upperThreshold', 'lowerThreshold',
+            'position', 'innerRef',
+        ]);
+        const { scrollOffset, scrollUpdateWasRequested } = this.$data;
         const isHorizontal = this.preset.isHorizontal;
-        const placeholderCount = this.preset.placeholderCount;
-        const onScroll = isHorizontal
-            ? this._onScrollHorizontal
-            : this._onScrollVertical;
-        const [startIndex, stopIndex] = this._getRangeToRender();
-        const items = [];
-        if (itemCount > 0) {
-            const prevPlaceholder = startIndex < placeholderCount ? startIndex : placeholderCount;
-            items.push(new Array(prevPlaceholder).fill(-1).map((_, index) => render(this.preset.itemTagName, {
-                key: itemKey(index + startIndex - prevPlaceholder, itemData),
-                style: { display: 'none' }
-            })));
-            for (let index = startIndex; index <= stopIndex; index++) {
-                const style = this.preset.getItemStyle(index);
-                items.push(render(this.preset.itemTagName, {
-                    key: itemKey(index, itemData),
-                    style
-                }, [
-                    render(item, {
-                        id: `${id}-${index}`,
-                        props: {
-                            id: `${id}-${index}`,
-                            data: itemData,
-                            index,
-                            isScrolling: useIsScrolling ? isScrolling : undefined
-                        }
-                    })
-                ]));
-            }
-            let restCount = itemCount - stopIndex;
-            restCount = restCount > 0 ? restCount : 0;
-            const postPlaceholder = restCount < placeholderCount ? restCount : placeholderCount;
-            items.push(new Array(postPlaceholder).fill(-1).map((_, index) => render(this.preset.itemTagName, {
-                key: itemKey(1 + index + stopIndex, itemData),
-                style: { display: 'none' }
-            })));
-        }
-        // Read this value AFTER items have been created,
-        // So their actual sizes (if variable) are taken into consideration.
-        const estimatedTotalSize = convertNumber2PX(this.itemList.getOffsetSize());
+        const isRtl = this.preset.isRtl;
         const outerElementProps = {
-            id,
+            id: this.preset.id,
             ref: this._outerRefSetter,
             layout,
             enhanced,
@@ -407,11 +468,13 @@ var List = {
                 direction
             },
             attrs: {
-                scrollY: layout === 'vertical',
-                scrollX: layout === 'horizontal'
+                scrollY: !this.preset.isHorizontal,
+                scrollX: this.preset.isHorizontal
             },
             on: {
-                scroll: onScroll
+                scroll: isHorizontal
+                    ? this._onScrollHorizontal
+                    : this._onScrollVertical
             }
         };
         if (!enhanced) {
@@ -422,49 +485,15 @@ var List = {
                 outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
             }
         }
-        if (this.preset.isRelative) {
-            const pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
-            return render(this.preset.outerTagName, outerElementProps, [
-                process.env.FRAMEWORK === 'vue3' ? (_b = (_a = this.$slots).top) === null || _b === void 0 ? void 0 : _b.call(_a) : this.$slots.top,
-                render(this.preset.itemTagName, {
-                    key: `${id}-pre`,
-                    id: `${id}-pre`,
-                    style: {
-                        height: isHorizontal ? '100%' : pre,
-                        width: !isHorizontal ? '100%' : pre
-                    }
-                }),
-                render(this.preset.innerTagName, {
-                    ref: innerRef,
-                    key: `${id}-inner`,
-                    id: `${id}-inner`,
-                    style: {
-                        pointerEvents: isScrolling ? 'none' : 'auto',
-                        position: 'relative',
-                    }
-                }, items),
-                process.env.FRAMEWORK === 'vue3' ? (_d = (_c = this.$slots).bottom) === null || _d === void 0 ? void 0 : _d.call(_c) : this.$slots.bottom,
-            ]);
-        }
-        else {
-            return render(this.preset.outerTagName, outerElementProps, [
-                process.env.FRAMEWORK === 'vue3' ? (_f = (_e = this.$slots).top) === null || _f === void 0 ? void 0 : _f.call(_e) : this.$slots.top,
-                render(this.preset.innerTagName, {
-                    ref: innerRef,
-                    key: `${id}-inner`,
-                    id: `${id}-inner`,
-                    style: {
-                        height: isHorizontal ? '100%' : estimatedTotalSize,
-                        pointerEvents: isScrolling ? 'none' : 'auto',
-                        position: 'relative',
-                        width: !isHorizontal ? '100%' : estimatedTotalSize
-                    }
-                }, items),
-                process.env.FRAMEWORK === 'vue3' ? (_h = (_g = this.$slots).bottom) === null || _h === void 0 ? void 0 : _h.call(_g) : this.$slots.bottom,
-            ]);
-        }
+        return render(this.preset.outerElement, outerElementProps, [
+            this.getRenderExpandNodes(isHorizontal ? isRtl ? 'right' : 'left' : 'top'),
+            process.env.FRAMEWORK === 'vue3' ? (_b = (_a = this.$slots).top) === null || _b === void 0 ? void 0 : _b.call(_a) : this.$slots.top,
+            this.getRenderColumnNode(),
+            process.env.FRAMEWORK === 'vue3' ? (_d = (_c = this.$slots).bottom) === null || _d === void 0 ? void 0 : _d.call(_c) : this.$slots.bottom,
+            this.getRenderExpandNodes(isHorizontal ? isRtl ? 'left' : 'right' : 'bottom'),
+        ]);
     }
-};
+});
 
 export { List as default };
 //# sourceMappingURL=list.js.map