add: react-visualizer for performant lists
This commit is contained in:
Mahyar Khanbolooki
Generated
+72
-1
@@ -26,6 +26,7 @@
|
||||
"next-usequerystate": "^1.20.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-virtualized": "^9.22.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"zustand": "^5.0.6"
|
||||
},
|
||||
@@ -35,6 +36,7 @@
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-virtualized": "^9.22.2",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.4",
|
||||
"tailwindcss": "^4",
|
||||
@@ -69,6 +71,15 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.27.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
|
||||
"integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
|
||||
@@ -1922,6 +1933,13 @@
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
|
||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
|
||||
@@ -1942,6 +1960,17 @@
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-virtualized": {
|
||||
"version": "9.22.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.22.2.tgz",
|
||||
"integrity": "sha512-0Eg/ME3OHYWGxs+/n4VelfYrhXssireZaa1Uqj5SEkTpSaBu5ctFGOCVxcOqpGXRiEdrk/7uho9tlZaryCIjHA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.35.1",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz",
|
||||
@@ -3087,7 +3116,6 @@
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
@@ -3254,6 +3282,16 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@@ -5954,6 +5992,12 @@
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-remove-scroll": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
|
||||
@@ -6023,6 +6067,33 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-virtualized": {
|
||||
"version": "9.22.6",
|
||||
"resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
|
||||
"integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.7.2",
|
||||
"clsx": "^1.0.4",
|
||||
"dom-helpers": "^5.1.3",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-virtualized/node_modules/clsx": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
||||
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
"next-usequerystate": "^1.20.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-virtualized": "^9.22.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"zustand": "^5.0.6"
|
||||
},
|
||||
@@ -36,6 +37,7 @@
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-virtualized": "^9.22.2",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.4",
|
||||
"tailwindcss": "^4",
|
||||
|
||||
@@ -4,10 +4,9 @@ import Button from '@/components/button/PrimaryButton';
|
||||
import CalendarIcon from '@/components/icons/CalendarIcon';
|
||||
import LocationPinIcon from '@/components/icons/LocationPinIcon';
|
||||
import TabContainer from '@/components/tab/TabContainer'
|
||||
import TabItemRenderer from '@/components/tab/TabItemRenderer'
|
||||
import clsx from 'clsx';
|
||||
import { TabItem } from '@/components/tab/TabItem';
|
||||
import Image from 'next/image';
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import React from 'react'
|
||||
|
||||
const currentOrders = [
|
||||
{
|
||||
@@ -21,25 +20,51 @@ const currentOrders = [
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
address: '1...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
address: '2...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
address: '3...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
function OrdersIndex() {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const categories = [
|
||||
{ id: 0, title: 'سفارشات فعال', image: '/assets/images/food-image.png' },
|
||||
{ id: 1, title: 'سفارشات قبلی', image: '/assets/images/food-image.png' }
|
||||
]
|
||||
|
||||
const updateTab = useCallback((index: number) => {
|
||||
setSelectedTab(index);
|
||||
}, []);
|
||||
|
||||
const firstTab = () => {
|
||||
return currentOrders.map((order) => {
|
||||
return (
|
||||
<div>
|
||||
{currentOrders.map((order) => {
|
||||
return (
|
||||
<div key={order.id} className='w-full px-[17px] mt-4 pt-8 pb-6 bg-white rounded-3xl'>
|
||||
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-white rounded-3xl'>
|
||||
<div className="text-sm2">
|
||||
<div className='flex gap-2'>
|
||||
<LocationPinIcon size={16} />
|
||||
@@ -81,41 +106,24 @@ function OrdersIndex() {
|
||||
<Button className='mt-6 font-medium!'>پیگیری سفارش</Button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='pt-8'>
|
||||
<div>
|
||||
<TabContainer
|
||||
className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
|
||||
{categories.map((item, index) => (
|
||||
<TabItemRenderer
|
||||
key={index}
|
||||
className={''}
|
||||
onClick={() => updateTab(index)}
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
src={item.image}
|
||||
width={24}
|
||||
height={24}
|
||||
alt="category image"
|
||||
/>
|
||||
<span className={clsx(
|
||||
'text-xs transition-all duration-150',
|
||||
index === selectedTab ? 'text-black' : 'text-disabled-text'
|
||||
)}>
|
||||
{item.title}
|
||||
</span>
|
||||
</TabItemRenderer>
|
||||
))}
|
||||
<TabItem title={categories[0].title} imageSrc={categories[0].image}>
|
||||
{firstTab()}
|
||||
</TabItem>
|
||||
<TabItem title={categories[0].title} imageSrc={categories[0].image}>
|
||||
<div>empty</div>
|
||||
</TabItem>
|
||||
</TabContainer>
|
||||
|
||||
{/* First tab */}
|
||||
{selectedTab === 0 && firstTab()}
|
||||
{/* {selectedTab === 0 && firstTab()} */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,66 @@
|
||||
import React, { ReactElement, ReactNode } from 'react'
|
||||
'use client';
|
||||
|
||||
import React, { ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import HorizontalScrollView from '../listview/HorizontalScrollView'
|
||||
import { TabItem, TabItemProps } from './TabItem';
|
||||
import clsx from 'clsx';
|
||||
import TabItemRenderer from './TabItemRenderer';
|
||||
import Image from 'next/image';
|
||||
import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized'
|
||||
|
||||
const cache = new CellMeasurerCache({
|
||||
fixedWidth: true,
|
||||
defaultHeight: 100,
|
||||
});
|
||||
|
||||
|
||||
type Props = {
|
||||
itemRenderer?: (child: ReactNode, index: number) => ReactElement;
|
||||
children: ReactNode;
|
||||
} & React.OlHTMLAttributes<HTMLUListElement>;
|
||||
|
||||
|
||||
function TabContainer({ itemRenderer, children, ...restProps }: Props) {
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
const listRef: React.Ref<List> | undefined = useRef(null)
|
||||
|
||||
const updateTab = useCallback((index: number) => {
|
||||
setSelectedTab(index);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
cache.clearAll();
|
||||
listRef.current?.recomputeRowHeights();
|
||||
}, 0);
|
||||
|
||||
const updateVh = () => {
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
};
|
||||
|
||||
updateVh();
|
||||
window.addEventListener('resize', updateVh);
|
||||
window.addEventListener('orientationchange', updateVh);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateVh);
|
||||
window.removeEventListener('orientationchange', updateVh);
|
||||
};
|
||||
|
||||
}, [selectedTab, children]);
|
||||
|
||||
|
||||
const items = React.Children.toArray(children).filter(
|
||||
(child): child is ReactElement<TabItemProps> =>
|
||||
React.isValidElement(child) && child.type === TabItem
|
||||
);
|
||||
const selectedTabChildren = React.Children.toArray(items[selectedTab].props.children);
|
||||
console.log('children:', selectedTabChildren);
|
||||
|
||||
|
||||
return (
|
||||
<div className='h-full'>
|
||||
<HorizontalScrollView
|
||||
style={{
|
||||
backgroundColor: '#FFFFFF70',
|
||||
@@ -18,8 +70,69 @@ function TabContainer({ itemRenderer, children, ...restProps }: Props) {
|
||||
}}
|
||||
itemRenderer={itemRenderer}
|
||||
{...restProps}>
|
||||
{children}
|
||||
<div
|
||||
className='inline-flex gap-10'>
|
||||
{items.map((item, index) => {
|
||||
const { title, imageSrc }: TabItemProps = item.props;
|
||||
return (
|
||||
<TabItemRenderer
|
||||
key={index}
|
||||
className={''}
|
||||
onClick={() => updateTab(index)}
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
src={imageSrc}
|
||||
width={24}
|
||||
height={24}
|
||||
alt="category image"
|
||||
/>
|
||||
<span className={clsx(
|
||||
'text-xs transition-all duration-150',
|
||||
index === selectedTab ? 'text-black' : 'text-disabled-text'
|
||||
)}>
|
||||
{title}
|
||||
</span>
|
||||
</TabItemRenderer>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</HorizontalScrollView>
|
||||
|
||||
<div style={{ height: 'calc(var(--vh, 1vh) * 100 - 270px)' }} className='pe-2 pt-4 '>
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<List
|
||||
className='noscrollbar'
|
||||
style={{ overflowX: 'hidden' }} // optional
|
||||
ref={listRef}
|
||||
width={width}
|
||||
height={height}
|
||||
rowCount={selectedTabChildren.length}
|
||||
rowHeight={cache.rowHeight}
|
||||
rowRenderer={({ index, key, style, parent }) => (
|
||||
<CellMeasurer
|
||||
key={key}
|
||||
cache={cache}
|
||||
parent={parent}
|
||||
columnIndex={0}
|
||||
rowIndex={index}
|
||||
>
|
||||
{({ measure, registerChild }) => (
|
||||
<div ref={registerChild} style={style} dir='rtl'>
|
||||
<div onLoad={measure}>
|
||||
{selectedTabChildren[index]}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CellMeasurer>
|
||||
)}
|
||||
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
export interface TabItemProps {
|
||||
title: string;
|
||||
imageSrc: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function TabItem({ children }: TabItemProps) {
|
||||
return <>{children}</>; // it just renders children; logic handled by TabContainer
|
||||
}
|
||||
Reference in New Issue
Block a user