cbvirtua 1.0.3 → 1.0.5

package/vue2/ListItem.js

@@ -0,0 +1,46 @@
+import { isRTLDocument } from "../core/environment";
+
+export default {
+    props: {
+        children: { type: Object, required: true },
+        resizer: { type: Function, required: true },
+        index: { type: Number, required: true },
+        offset: { type: Number, required: true },
+        hide: { type: Boolean },
+        isHorizontal: { type: Boolean },
+        element: { type: String, required: true },
+    },
+    watch: {
+        index(_index) {
+            this.$nextTick(() => {
+                this.cleanupObserver = null;
+                const root = this.$refs.root;
+                this.cleanupObserver = this.resizer(root, _index);
+            })
+        }
+    },
+    mounted() {
+        const root = this.$refs.root;
+        this.cleanupObserver = this.resizer(root, this.index);
+    },
+    render() {
+        const { children, offset, hide, element: Element, isHorizontal, } = this;
+        console.log(hide)
+        const style = {
+            margin: 0,
+            padding: 0,
+            position: "absolute",
+            [isHorizontal ? "height" : "width"]: "100%",
+            [isHorizontal ? "top" : "left"]: "0px",
+            [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]: offset + "px",
+            visibility: hide ? "hidden" : "visible",
+        };
+
+        if (isHorizontal) {
+            style.display = "flex";
+        }
+        return (<Element ref={"root"} style={style}>
+            {children}
+        </Element>);
+    }
+}

package/vue2/VList.js

@@ -0,0 +1,161 @@
+import { SCROLL_IDLE, UPDATE_SCROLL_STATE, UPDATE_SCROLL_EVENT, UPDATE_SCROLL_END_EVENT, UPDATE_SIZE_STATE, overscanEndIndex, overscanStartIndex, createVirtualStore, ACTION_ITEMS_LENGTH_CHANGE, getScrollSize, getMinContainerSize, } from "../core/store"
+import { createResizer } from "../core/resizer"
+import { createScroller } from "../core/scroller"
+import { default as ListItem } from "./ListItem"
+import { exists } from "../core/utils"
+const props = {
+    data: { type: Array, required: true },
+    overscan: { type: Number, default: 4 },
+    itemSize: Number,
+    shift: Boolean,
+    horizontal: Boolean,
+}
+export default {
+    props: props,
+    data() {
+        return {
+            store: {},
+            rerender: [],
+            JumpCount: 0,
+            range: []
+        }
+    },
+    watch: {
+        data(_data) {
+            const count = _data.length
+            this.store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, this.shift])
+        },
+        JumpCount(count, prevCount) {
+            this.$nextTick(() => {
+                if (count === prevCount)
+                    return
+                const jump = this.store._flushJump()
+                if (!jump)
+                    return
+                this.scroller._fixScrollJump(jump)
+            })
+        },
+        range([start, end], [prevStart, prevEnd]) {
+            this.$nextTick(() => {
+                if (prevStart === start && prevEnd === end)
+                    return
+                this.$emit("rangeChange", start, end)
+            })
+        }
+
+    },
+    created() {
+        const isHorizontal = this.horizontal
+        const store = this.store = createVirtualStore(
+            this.data.length,
+            this.itemSize ?? 40,
+            undefined,
+            undefined,
+            !this.itemSize
+        )
+        const resizer = this.resizer = createResizer(store, isHorizontal)
+        const scroller = this.scroller = createScroller(store, isHorizontal)
+        this.scrollToIndex = scroller._scrollToIndex
+        this.scrollTo = scroller._scrollTo
+        this.scrollBy = scroller._scrollBy
+        const rerender = store._getStateVersion()
+        const unsubscribeStore = this.unsubscribeStore = store._subscribe(UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, () => {
+            this.rerender = store._getStateVersion()
+            this.JumpCount = store._getJumpCount()
+            this.range = store._getRange()
+        })
+        const unsubscribeOnScroll = this.unsubscribeOnScroll = store._subscribe(UPDATE_SCROLL_EVENT, () => {
+            this.$emit("scroll", store._getScrollOffset())
+        })
+        const unsubscribeOnScrollEnd = this.unsubscribeOnScrollEnd = store._subscribe(UPDATE_SCROLL_END_EVENT, () => {
+            this.$emit("scrollEnd")
+        })
+    },
+    mounted() {
+        const root = this.$refs.root
+        if (!root)
+            return
+        this.resizer._observeRoot(root)
+        this.scroller._observe(root)
+
+    },
+    methods: {
+        scrollOffset() {
+            return this.store._getScrollOffset()
+        },
+        scrollSize() {
+            return this.getScrollSize(store)
+        },
+        viewportSize() {
+            return this.store._getViewportSize()
+        },
+        scrollToIndex() { },
+        scrollTo() { },
+        scrollBy() { }
+    },
+    render() {
+        this.rerender
+        const count = this.data.length
+        const store = this.store
+        const isHorizontal = this.horizontal
+        const [startIndex, endIndex] = this.store._getRange()
+        const scrollDirection = store._getScrollDirection()
+        const totalSize = store._getTotalSize()
+        const minSize = getMinContainerSize(store)
+
+        const items = []
+        for (let i = overscanStartIndex(startIndex, this.overscan, scrollDirection), j = overscanEndIndex(endIndex, this.overscan, scrollDirection, count); i <= j; i++) {
+            const e = this.$scopedSlots.default(this.data[i])[0]
+            const key = e.key
+            items.push(
+                <ListItem
+                    key={exists(key) ? key : "_" + i}
+                    resizer={this.resizer._observeItem}
+                    index={i}
+                    offset={store._getItemOffset(i)}
+                    hide={store._isUnmeasuredItem(i)}
+                    element="div"
+                    children={e}
+                    isHorizontal={isHorizontal}
+                />
+            )
+        }
+
+        return (
+            <div
+                ref={"root"}
+                style={{
+                    display: isHorizontal ? "inline-block" : "block",
+                    [isHorizontal ? "overflowX" : "overflowY"]: "auto",
+                    overflowAnchor: "none",
+                    contain: "strict",
+                    width: "100%",
+                    height: "100%",
+                }}
+            >
+                <div
+                    style={{
+                        // contain: "content",
+                        overflowAnchor: "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
+                        flex: "none", // flex style on parent can break layout
+                        position: "relative",
+                        visibility: "hidden",
+                        width: isHorizontal ? totalSize + "px" : "100%",
+                        height: isHorizontal ? "100%" : totalSize + "px",
+                        [isHorizontal ? "minWidth" : "minHeight"]: minSize + "px",
+                        pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto",
+                    }}
+                >
+                    {items}
+                </div>
+            </div>
+        )
+    },
+    destoryed() {
+        this.unsubscribeStore()
+        this.unsubscribeOnScroll()
+        this.unsubscribeOnScrollEnd()
+        this.resizer._dispose()
+        this.scroller._dispose()
+    },
+}