virtua 0.41.0 → 0.41.2

package/lib/solid/index.jsx

@@ -1,4 +1,4 @@
-import { mergeProps, createEffect, onCleanup, createMemo, createSignal, onMount, createComputed, on, For, untrack } from 'solid-js';
+import { mergeProps, createEffect, onCleanup, createMemo, createSignal, onMount, createComputed, on, untrack, For, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
 /** @internal */
@@ -1272,7 +1272,7 @@ const ListItem = (props) => {
         }
         return style;
     });
-    return (<Dynamic component={props._as} ref={elementRef} style={style()}>
+    return (<Dynamic component={props._as} index={props._index} ref={elementRef} style={style()}>
       {props._children}
     </Dynamic>);
 };
@@ -1357,11 +1357,6 @@ const Virtualizer = (props) => {
             scroller.$dispose();
         });
     });
-    createComputed(on(() => props.data.length, (count) => {
-        if (count !== store.$getItemsLength()) {
-            store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
-        }
-    }));
     createComputed(on(() => props.startMargin || 0, (value) => {
         if (value !== store.$getStartSpacerSize()) {
             store.$update(ACTION_START_OFFSET_CHANGE, value);
@@ -1371,9 +1366,53 @@ const Virtualizer = (props) => {
         scroller.$fixScrollJump();
     }));
     const dataSlice = createMemo(() => {
+        const count = props.data.length;
+        untrack(() => {
+            if (count !== store.$getItemsLength()) {
+                store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
+            }
+        });
         const [start, end] = range();
-        return end >= 0 ? props.data.slice(start, end + 1) : [];
+        const items = end >= 0 ? props.data.slice(start, end + 1) : [];
+        const indexes = items.map((_, index) => start + index);
+        if (props.keepMounted) {
+            const startItems = [];
+            const startIndexes = [];
+            const endItems = [];
+            const endIndexes = [];
+            sort(props.keepMounted).forEach((index) => {
+                if (index < 0 || index >= props.data.length)
+                    return;
+                if (index < start) {
+                    startItems.push(props.data[index]);
+                    startIndexes.push(index);
+                }
+                if (index > end) {
+                    endItems.push(props.data[index]);
+                    endIndexes.push(index);
+                }
+            });
+            items.unshift(...startItems);
+            indexes.unshift(...startIndexes);
+            items.push(...endItems);
+            indexes.push(...endIndexes);
+        }
+        return { _items: items, _indexes: indexes };
     });
+    const renderItem = (data, index) => {
+        const offset = createMemo(() => {
+            stateVersion();
+            return store.$getItemOffset(index());
+        });
+        const hide = createMemo(() => {
+            stateVersion();
+            return store.$isUnmeasuredItem(index());
+        });
+        const children = createMemo(() => {
+            return untrack(() => props.children(data, index));
+        });
+        return (<ListItem _as={props.item} _index={index()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal}/>);
+    };
     return (<Dynamic component={props.as} ref={containerRef} style={{
             // contain: "content",
             "overflow-anchor": "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
@@ -1384,41 +1423,48 @@ const Virtualizer = (props) => {
             height: horizontal ? "100%" : totalSize() + "px",
             "pointer-events": isScrolling() ? "none" : undefined,
         }}>
-      <For each={dataSlice()}>
+      <For each={dataSlice()._items}>
         {(data, index) => {
-            const itemIndex = createMemo(() => range()[0] + index());
-            const offset = createMemo(() => {
-                stateVersion();
-                return store.$getItemOffset(itemIndex());
-            });
-            const hide = createMemo(() => {
-                stateVersion();
-                return store.$isUnmeasuredItem(itemIndex());
-            });
-            const children = createMemo(() => {
-                return untrack(() => props.children(data, itemIndex));
-            });
-            return (<ListItem _as={props.item} _index={itemIndex()} _resizer={resizer.$observeItem} _offset={offset()} _hide={hide()} _children={children()} _isHorizontal={horizontal}/>);
+            const itemIndex = createMemo(() => dataSlice()._indexes[index()]);
+            // eslint-disable-next-line solid/reactivity
+            return renderItem(data, itemIndex);
         }}
       </For>
     </Dynamic>);
 };
 
+/**
+ * @jsxImportSource solid-js
+ */
 /**
  * Virtualized list component. See {@link VListProps} and {@link VListHandle}.
  */
 const VList = (props) => {
-    const { ref, data, children, overscan, itemSize, shift, horizontal, cache, onScroll, onScrollEnd, style, ...attrs } = props;
-    return (<div {...attrs} style={{
-            display: horizontal ? "inline-block" : "block",
-            [horizontal ? "overflow-x" : "overflow-y"]: "auto",
+    const [local, others] = splitProps(props, [
+        "ref",
+        "data",
+        "children",
+        "overscan",
+        "itemSize",
+        "shift",
+        "horizontal",
+        "keepMounted",
+        "cache",
+        "item",
+        "onScroll",
+        "onScrollEnd",
+        "style",
+    ]);
+    return (<div {...others} style={{
+            display: local.horizontal ? "inline-block" : "block",
+            [local.horizontal ? "overflow-x" : "overflow-y"]: "auto",
             contain: "strict",
             width: "100%",
             height: "100%",
-            ...props.style,
+            ...local.style,
         }}>
-      <Virtualizer ref={props.ref} data={props.data} overscan={props.overscan} itemSize={props.itemSize} shift={props.shift} horizontal={horizontal} cache={cache} onScroll={props.onScroll} onScrollEnd={props.onScrollEnd}>
-        {props.children}
+      <Virtualizer ref={local.ref} data={local.data} overscan={local.overscan} itemSize={local.itemSize} shift={local.shift} horizontal={local.horizontal} keepMounted={local.keepMounted} cache={local.cache} item={local.item} onScroll={local.onScroll} onScrollEnd={local.onScrollEnd}>
+        {local.children}
       </Virtualizer>
     </div>);
 };
@@ -1482,15 +1528,16 @@ const WindowVirtualizer = (props) => {
             scroller.$dispose();
         });
     });
-    createComputed(on(() => props.data.length, (len) => {
-        if (len !== store.$getItemsLength()) {
-            store.$update(ACTION_ITEMS_LENGTH_CHANGE, [len, props.shift]);
-        }
-    }));
     createEffect(on(stateVersion, () => {
         scroller.$fixScrollJump();
     }));
     const dataSlice = createMemo(() => {
+        const count = props.data.length;
+        untrack(() => {
+            if (count !== store.$getItemsLength()) {
+                store.$update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
+            }
+        });
         const [start, end] = range();
         return end >= 0 ? props.data.slice(start, end + 1) : [];
     });