vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-06 20:10:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

extract list expansion container to separate component

Browse Source
This commit is contained in:
jeffvli
2025-10-07 17:44:55 -07:00
parent a068b9ca3d
commit 4600e56b94
6 changed files with 42 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/expanded-list-container.module.css
+3
View File
@@ -0,0 +1,3 @@
.container {
height: 500px;
}
src/renderer/components/item-list/expanded-list-container.tsx
+32
View File
@@ -0,0 +1,32 @@
import { motion, Variants } from 'motion/react';
import { ReactNode } from 'react';
import styles from './expanded-list-container.module.css';
const expandedAnimationVariants: Variants = {
hidden: {
height: 0,
minHeight: 0,
},
show: {
minHeight: '300px',
transition: {
duration: 0.3,
ease: 'easeInOut',
},
},
};
export const ExpandedListContainer = ({ children }: { children: ReactNode }) => {
return (
<motion.div
animate="show"
className={styles.listExpandedContainer}
exit="hidden"
initial="hidden"
variants={expandedAnimationVariants}
>
{children}
</motion.div>
);
};
src/renderer/components/item-list/item-grid-list/item-grid-list.module.css
-5
View File
@@ -23,8 +23,3 @@
padding: var(--theme-spacing-sm);
overflow: hidden;
}
.list-expanded-container {
width: 100%;
height: 100%;
}
src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+3 -8
View File
@@ -15,6 +15,7 @@ import {
} from 'react';
import { List, ListImperativeAPI, RowComponentProps, useListRef } from 'react-window-v2';
import { ExpandedListContainer } from '../expanded-list-container';
import styles from './item-grid-list.module.css';
import { getDataRowsCount, ItemCard } from '/@/renderer/components/item-card/item-card';
@@ -271,15 +272,9 @@ export const ItemGridList = ({
/>
<AnimatePresence>
{hasExpanded && (
<motion.div
animate="show"
className={styles.listExpandedContainer}
exit="hidden"
initial="hidden"
variants={expandedAnimationVariants}
>
<ExpandedListContainer>
<ExpandedListItem internalState={internalState} itemType={itemType} />
</motion.div>
</ExpandedListContainer>
)}
</AnimatePresence>
</motion.div>
src/renderer/components/item-list/item-table-list/item-table-list.module.css
-4
View File
@@ -127,7 +127,3 @@
transparent 100%
);
}
.list-expanded-container {
height: 500px;
}
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+4 -24
View File
@@ -2,7 +2,7 @@
import { useMergedRef } from '@mantine/hooks';
import clsx from 'clsx';
import { AnimatePresence, motion, Variants } from 'motion/react';
import { AnimatePresence, motion } from 'motion/react';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import {
type JSXElementConstructor,
@@ -18,6 +18,7 @@ import { type CellComponentProps, Grid, type GridProps } from 'react-window-v2';
import styles from './item-table-list.module.css';
import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded-list-container';
import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
import {
ItemListStateActions,
@@ -77,20 +78,6 @@ interface ItemTableListProps {
size?: 'compact' | 'default';
}
const expandedAnimationVariants: Variants = {
hidden: {
height: 0,
minHeight: 0,
},
show: {
minHeight: '300px',
transition: {
duration: 0.3,
ease: 'easeInOut',
},
},
};
export const ItemTableList = ({
CellComponent,
columns,
@@ -856,16 +843,9 @@ export const ItemTableList = ({
</div>
<AnimatePresence initial={false}>
{hasExpanded && (
<motion.div
animate="show"
className={styles.listExpandedContainer}
exit="hidden"
initial="hidden"
style={{ height: '500px' }}
variants={expandedAnimationVariants}
>
<ExpandedListContainer>
<ExpandedListItem internalState={internalState} itemType={itemType} />
</motion.div>
</ExpandedListContainer>
)}
</AnimatePresence>
</motion.div>