zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature-107] multiple lists now uses virtual scroll

Browse Source
This commit is contained in:
MathieuG-P
2024-06-01 20:25:50 +02:00
parent 044174c711
commit 0ea355d75c
12 changed files with 366 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/virtual-scroll/virtual-row.component.tsx
+2 -3
View File
@@ -1,5 +1,6 @@
import { CSSProperties, memo } from "react";
import { CSSProperties } from "react";
import { cn } from "renderer/helpers/css-class.helpers";
import { typedMemo } from "renderer/helpers/typed-memo";
type Props<T> = {
className?: string;
@@ -19,6 +20,4 @@ function VirtualRowComponent<T>({ className, style, items, renderItem }: Props<T
);
}
const typedMemo: <T, P>(c: T, propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean) => T = memo;
export const VirtualRow = typedMemo(VirtualRowComponent);
src/renderer/components/shared/virtual-scroll/virtual-scroll.component.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { useCallback, useLayoutEffect, useRef, useState } from "react";
import { Key, useCallback, useLayoutEffect, useRef, useState } from "react";
import { ListChildComponentProps, ListOnScrollProps, VariableSizeList } from "react-window";
import { cn } from "renderer/helpers/css-class.helpers";
import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
@@ -28,11 +28,11 @@ type Props<T = unknown> = {
itemHeight: number;
items: T[];
renderItem: (item: T) => JSX.Element;
itemKey: (item: T[]) => string;
rowKey: (rowItems: T[]) => Key;
scrollEnd?: ScrollEndHandler;
}
export function VirtualScroll<T = unknown>({ className, classNames, minItemWidth, maxColumns, minColumns, itemHeight, items, scrollEnd, renderItem, itemKey}: Props<T>) {
export function VirtualScroll<T = unknown>({ className, classNames, minItemWidth, maxColumns, minColumns, itemHeight, items, scrollEnd, renderItem, rowKey}: Props<T>) {
const ref = useRef(null);
const listRef = useRef<HTMLDivElement>(null);
@@ -93,7 +93,7 @@ export function VirtualScroll<T = unknown>({ className, classNames, minItemWidth
width="100%" height={listHeight}
layout="vertical"
itemCount={itemsToRender.length}
itemKey={i => itemKey?.(itemsToRender[i]) ?? i}
itemKey={i => rowKey?.(itemsToRender[i]) ?? i}
itemSize={() => itemHeight}
itemData={itemsToRender}
style={{ scrollbarGutter: "stable both-edges" }}