From 389910e075f1a9723ec92d9cc2982053640ed189 Mon Sep 17 00:00:00 2001 From: Mahyar Khanbolooki Date: Tue, 15 Jul 2025 02:10:53 +0330 Subject: [PATCH] add: react-visualizer for performant lists --- package-lock.json | 73 ++++++++++++++- package.json | 2 + src/app/[name]/orders/page.tsx | 84 +++++++++-------- src/components/tab/TabContainer.tsx | 139 +++++++++++++++++++++++++--- src/components/tab/TabItem.tsx | 11 +++ 5 files changed, 257 insertions(+), 52 deletions(-) create mode 100644 src/components/tab/TabItem.tsx diff --git a/package-lock.json b/package-lock.json index 517d50b..57dd7d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f9bfc6e..e1105d5 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/[name]/orders/page.tsx b/src/app/[name]/orders/page.tsx index 9a17eb4..a8b88b3 100644 --- a/src/app/[name]/orders/page.tsx +++ b/src/app/[name]/orders/page.tsx @@ -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 currentOrders.map((order) => { return ( -
+
@@ -81,41 +106,24 @@ function OrdersIndex() {
) - })} -
- ) + }) } return ( -
+
- {categories.map((item, index) => ( - updateTab(index)} - > - category image - - {item.title} - - - ))} + + {firstTab()} + + +
empty
+ {/* First tab */} - {selectedTab === 0 && firstTab()} + {/* {selectedTab === 0 && firstTab()} */}
) } diff --git a/src/components/tab/TabContainer.tsx b/src/components/tab/TabContainer.tsx index aeae2b4..a770087 100644 --- a/src/components/tab/TabContainer.tsx +++ b/src/components/tab/TabContainer.tsx @@ -1,25 +1,138 @@ -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; - function TabContainer({ itemRenderer, children, ...restProps }: Props) { + + const [selectedTab, setSelectedTab] = useState(0); + const listRef: React.Ref | 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 => + React.isValidElement(child) && child.type === TabItem + ); + const selectedTabChildren = React.Children.toArray(items[selectedTab].props.children); + console.log('children:', selectedTabChildren); + + return ( - - {children} - +
+ +
+ {items.map((item, index) => { + const { title, imageSrc }: TabItemProps = item.props; + return ( + updateTab(index)} + > + category image + + {title} + + + ) + })} +
+ + +
+ + {({ height, width }) => ( + ( + + {({ measure, registerChild }) => ( +
+
+ {selectedTabChildren[index]} +
+
+ )} + + )} + + /> + )} + +
+
) } diff --git a/src/components/tab/TabItem.tsx b/src/components/tab/TabItem.tsx new file mode 100644 index 0000000..493af5e --- /dev/null +++ b/src/components/tab/TabItem.tsx @@ -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 +} \ No newline at end of file