From 67ebec5edd5c501ab925992781fbc9c82c974f75 Mon Sep 17 00:00:00 2001 From: baegofda Date: Tue, 22 Oct 2024 19:12:01 +0900 Subject: [PATCH] =?UTF-8?q?DESIGN-8=20FixedVirtualList=20->=20VirtualList?= =?UTF-8?q?=20(container=20=EB=86=92=EC=9D=B4=20=EC=A0=9C=EA=B1=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../VirtualList.stories.tsx} | 34 +++++++---------- .../VirtualListItem.tsx} | 9 ++--- .../index.tsx | 38 +++++++++++++------ .../types/index.ts | 19 +++++----- src/index.ts | 7 ++-- 5 files changed, 57 insertions(+), 50 deletions(-) rename src/core/components/Virtual/{FixedVirtualList/FixedVirtualList.stories.tsx => VirtualList/VirtualList.stories.tsx} (78%) rename src/core/components/Virtual/{FixedVirtualList/FixedVirtualListItem.tsx => VirtualList/VirtualListItem.tsx} (68%) rename src/core/components/Virtual/{FixedVirtualList => VirtualList}/index.tsx (69%) rename src/core/components/Virtual/{FixedVirtualList => VirtualList}/types/index.ts (55%) diff --git a/src/core/components/Virtual/FixedVirtualList/FixedVirtualList.stories.tsx b/src/core/components/Virtual/VirtualList/VirtualList.stories.tsx similarity index 78% rename from src/core/components/Virtual/FixedVirtualList/FixedVirtualList.stories.tsx rename to src/core/components/Virtual/VirtualList/VirtualList.stories.tsx index c3056cd..d81ee2d 100644 --- a/src/core/components/Virtual/FixedVirtualList/FixedVirtualList.stories.tsx +++ b/src/core/components/Virtual/VirtualList/VirtualList.stories.tsx @@ -2,30 +2,25 @@ import clsx from 'clsx'; import { Meta } from '@storybook/react'; import React, { memo, useEffect, useRef, useState } from 'react'; -import { FixedVirtualListProps } from '@/core/components/Virtual/FixedVirtualList/types'; -import FixedVirtualList from './index'; +import VirtualList from './index'; +import { VirtualListProps } from '@/core/components/Virtual/VirtualList/types'; const meta = { - title: 'core/Virtual/FixedVirtualList', - component: FixedVirtualList, + title: 'core/Virtual/VirtualList', + component: VirtualList, argTypes: { itemHeight: { control: 'number', - description: 'FixedVirtualList item Height', - }, - containerHeight: { - control: 'number', - description: 'FixedVirtualList container Height', + description: 'VirtualList item Height', }, }, -} satisfies Meta; +} satisfies Meta; export default meta; export const Default = ({ itemHeight = 90, - containerHeight = 500, -}: Pick) => { +}: Pick) => { const listRef = useRef(null); const [isLoading, setIsLoading] = useState(true); const [images, setImages] = useState< @@ -72,14 +67,13 @@ export const Default = ({ }; return ( - <> +
- {({ startIndex, endIndex, getTopPosition }) => @@ -87,7 +81,7 @@ export const Default = ({ const { id, author, download_url } = image; return ( - - + ); }) } - - + +
); }; diff --git a/src/core/components/Virtual/FixedVirtualList/FixedVirtualListItem.tsx b/src/core/components/Virtual/VirtualList/VirtualListItem.tsx similarity index 68% rename from src/core/components/Virtual/FixedVirtualList/FixedVirtualListItem.tsx rename to src/core/components/Virtual/VirtualList/VirtualListItem.tsx index d330a6a..f6ae980 100644 --- a/src/core/components/Virtual/FixedVirtualList/FixedVirtualListItem.tsx +++ b/src/core/components/Virtual/VirtualList/VirtualListItem.tsx @@ -1,15 +1,15 @@ import React, { ElementType, memo, PropsWithChildren } from 'react'; import clsx from 'clsx'; -import { FixedVirtualListItemProps } from '@/core/components/Virtual/FixedVirtualList/types'; +import { VirtualListItemProps } from '@/core/components/Virtual/VirtualList/types'; -const FixedVirtualListItem = ({ +const VirtualListItem = ({ topPosition, className, element: Element, children, height, -}: PropsWithChildren>) => { +}: PropsWithChildren>) => { const Component: React.ElementType = Element || 'div'; const classNames = clsx( 'absolute left-0 right-0 top-0 flex items-center will-change-transform', @@ -26,5 +26,4 @@ const FixedVirtualListItem = ({ ); }; - -export default memo(FixedVirtualListItem); +export default memo(VirtualListItem); diff --git a/src/core/components/Virtual/FixedVirtualList/index.tsx b/src/core/components/Virtual/VirtualList/index.tsx similarity index 69% rename from src/core/components/Virtual/FixedVirtualList/index.tsx rename to src/core/components/Virtual/VirtualList/index.tsx index fb04510..9eb5eab 100644 --- a/src/core/components/Virtual/FixedVirtualList/index.tsx +++ b/src/core/components/Virtual/VirtualList/index.tsx @@ -1,24 +1,24 @@ +import clsx from 'clsx'; import React, { ElementType, forwardRef, useCallback, + useEffect, useRef, useState, } from 'react'; -import clsx from 'clsx'; -import FixedVirtualListItem from '@/core/components/Virtual/FixedVirtualList/FixedVirtualListItem'; import { - FixedVirtualListProps, GetTopPositionParams, ReturnType, -} from '@/core/components/Virtual/FixedVirtualList/types'; + VirtualListProps, +} from '@/core/components/Virtual/VirtualList/types'; import { mergeRefs } from '@/utilities/ref'; +import VirtualListItem from '@/core/components/Virtual/VirtualList/VirtualListItem'; -const FixedVirtualList = forwardRef( +const VirtualList = forwardRef( ( { - containerHeight, itemHeight, itemsTotalCount, rootElement: RootElement, @@ -30,6 +30,7 @@ const FixedVirtualList = forwardRef( ) => { const containerRef = useRef(null); const [scrollTop, setScrollTop] = useState(0); + const [containerHeight, setContainerHeight] = useState(0); const visibleCount = Math.ceil(containerHeight / itemHeight); const totalItemsHeight = itemHeight * itemsTotalCount; const classNames = clsx('overflow-y-auto', className); @@ -52,14 +53,27 @@ const FixedVirtualList = forwardRef( [startIndex, itemHeight], ); + useEffect(() => { + const calculateContainerHeight = () => { + if (containerRef.current) { + setContainerHeight(containerRef.current.clientHeight); + } + }; + + calculateContainerHeight(); + + window.addEventListener('resize', calculateContainerHeight); + + return () => { + window.removeEventListener('resize', calculateContainerHeight); + }; + }, []); + return ( ( }, ) as unknown as ReturnType; -FixedVirtualList.displayName = 'FixedVirtualList'; -FixedVirtualList.Item = FixedVirtualListItem; +VirtualList.displayName = 'VirtualList'; +VirtualList.Item = VirtualListItem; -export default FixedVirtualList; +export default VirtualList; diff --git a/src/core/components/Virtual/FixedVirtualList/types/index.ts b/src/core/components/Virtual/VirtualList/types/index.ts similarity index 55% rename from src/core/components/Virtual/FixedVirtualList/types/index.ts rename to src/core/components/Virtual/VirtualList/types/index.ts index a25e53a..4bb1027 100644 --- a/src/core/components/Virtual/FixedVirtualList/types/index.ts +++ b/src/core/components/Virtual/VirtualList/types/index.ts @@ -6,9 +6,9 @@ import { RefAttributes, } from 'react'; -import FixedVirtualListItem from '@/core/components/Virtual/FixedVirtualList/FixedVirtualListItem'; +import VirtualListItem from '@/core/components/Virtual/VirtualList/VirtualListItem'; -export interface FixedVirtualChildrenProps { +export interface VirtualListChildrenProps { startIndex: number; endIndex: number; getTopPosition: ({ index }: GetTopPositionParams) => string; @@ -18,11 +18,10 @@ export interface GetTopPositionParams { index: number; } -export interface FixedVirtualListProps< +export interface VirtualListProps< T extends ElementType = 'div', P extends ElementType = 'div', > extends Pick, 'className'> { - containerHeight: number; itemHeight: number; itemsTotalCount: number; rootElement?: T; @@ -31,21 +30,21 @@ export interface FixedVirtualListProps< startIndex, endIndex, getTopPosition, - }: FixedVirtualChildrenProps) => ReactNode; + }: VirtualListChildrenProps) => ReactNode; } -export interface FixedVirtualListItemProps +export interface VirtualListItemProps extends Pick, 'className'> { element?: T; topPosition: string; height: number; } -export type FixedVirtualListComponent = ForwardRefExoticComponent< - FixedVirtualListProps & RefAttributes +export type VirtualListItemComponent = ForwardRefExoticComponent< + VirtualListProps & RefAttributes >; -export type ReturnType = FixedVirtualListComponent & { +export type ReturnType = VirtualListItemComponent & { displayName: string; - Item: typeof FixedVirtualListItem; + Item: typeof VirtualListItem; }; diff --git a/src/index.ts b/src/index.ts index 14b2601..64fe8d3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,8 +11,8 @@ export { default as DropdownBase } from '@/core/components/Dropdown/DropdownBase export { default as DropdownBaseItem } from '@/core/components/Dropdown/DropdownBase/DropdownItem'; export { default as DropdownBaseItems } from '@/core/components/Dropdown/DropdownBase/DropdownItems'; export { default as DropdownBaseTrigger } from '@/core/components/Dropdown/DropdownBase/DropdownTrigger'; -export { default as FixedVirtualList } from '@/core/components/Virtual/FixedVirtualList'; -export { default as FixedVirtualListItem } from '@/core/components/Virtual/FixedVirtualList/FixedVirtualListItem'; +export { default as VirtualList } from '@/core/components/Virtual/VirtualList'; +export { default as VirtualListItem } from '@/core/components/Virtual/VirtualList/VirtualListItem'; export { default as DropdownFilter } from '@/core/components/Dropdown/DropdownFilter'; export { default as DropdownFilterItem } from '@/core/components/Dropdown/DropdownFilter/DropdownFilterItem'; export { default as DropdownFilterItems } from '@/core/components/Dropdown/DropdownFilter/DropdownFilterItems'; @@ -55,6 +55,7 @@ export { default as Tooltip } from '@/core/components/Tooltip'; export { default as Typography } from '@/core/components/Typography'; export { default as Chip } from '@/core/components/Chip'; export { default as Chips } from '@/core/components/Chips'; -export * from '@/utilities/day'; export { useInput } from '@/core/components/Input/hooks/useInput'; +export * from '@/utilities/day'; +export * from '@/utilities/ref';