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

add motion animation on list to handle scrollbar sizing shift

Browse Source
This commit is contained in:
jeffvli
2025-11-20 12:36:38 -08:00
parent 427cfe0796
commit 948fc40b3e
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+6 -3
View File
@@ -1,6 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import throttle from 'lodash/throttle'; import throttle from 'lodash/throttle';
import { AnimatePresence } from 'motion/react'; import { AnimatePresence, motion } from 'motion/react';
import { useOverlayScrollbars } from 'overlayscrollbars-react'; import { useOverlayScrollbars } from 'overlayscrollbars-react';
import React, { import React, {
CSSProperties, CSSProperties,
@@ -41,6 +41,7 @@ import {
useItemListState, useItemListState,
} from '/@/renderer/components/item-list/helpers/item-list-state'; } from '/@/renderer/components/item-list/helpers/item-list-state';
import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/types'; import { ItemControls, ItemListHandle } from '/@/renderer/components/item-list/types';
import { animationProps } from '/@/shared/components/animations/animation-props';
import { useElementSize } from '/@/shared/hooks/use-element-size'; import { useElementSize } from '/@/shared/hooks/use-element-size';
import { useMergedRef } from '/@/shared/hooks/use-merged-ref'; import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
import { LibraryItem } from '/@/shared/types/domain-types'; import { LibraryItem } from '/@/shared/types/domain-types';
@@ -618,13 +619,15 @@ export const ItemGridList = ({
useImperativeHandle(ref, () => imperativeHandle, [imperativeHandle]); useImperativeHandle(ref, () => imperativeHandle, [imperativeHandle]);
return ( return (
<div <motion.div
className={styles.itemGridContainer} className={styles.itemGridContainer}
data-overlayscrollbars-initialize="" data-overlayscrollbars-initialize=""
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onMouseDown={(e) => (e.currentTarget as HTMLDivElement).focus()} onMouseDown={(e) => (e.currentTarget as HTMLDivElement).focus()}
ref={mergedContainerRef} ref={mergedContainerRef}
tabIndex={0} tabIndex={0}
{...animationProps.fadeIn}
transition={{ duration: 1, ease: 'anticipate' }}
> >
<AutoSizer> <AutoSizer>
{({ height, width }) => ( {({ height, width }) => (
@@ -657,7 +660,7 @@ export const ItemGridList = ({
</ExpandedListContainer> </ExpandedListContainer>
)} )}
</AnimatePresence> </AnimatePresence>
</div> </motion.div>
); );
}; };
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+6 -3
View File
@@ -2,7 +2,7 @@
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'motion/react'; import { AnimatePresence, motion } from 'motion/react';
import { useOverlayScrollbars } from 'overlayscrollbars-react'; import { useOverlayScrollbars } from 'overlayscrollbars-react';
import React, { import React, {
type JSXElementConstructor, type JSXElementConstructor,
@@ -38,6 +38,7 @@ import {
ItemTableListColumnConfig, ItemTableListColumnConfig,
} from '/@/renderer/components/item-list/types'; } from '/@/renderer/components/item-list/types';
import { PlayerContext, usePlayer } from '/@/renderer/features/player/context/player-context'; import { PlayerContext, usePlayer } from '/@/renderer/features/player/context/player-context';
import { animationProps } from '/@/shared/components/animations/animation-props';
import { useMergedRef } from '/@/shared/hooks/use-merged-ref'; import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
import { LibraryItem } from '/@/shared/types/domain-types'; import { LibraryItem } from '/@/shared/types/domain-types';
import { TableColumn } from '/@/shared/types/types'; import { TableColumn } from '/@/shared/types/types';
@@ -2047,7 +2048,7 @@ export const ItemTableList = ({
]); ]);
return ( return (
<div <motion.div
className={styles.itemTableListContainer} className={styles.itemTableListContainer}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onMouseDown={(e) => { onMouseDown={(e) => {
@@ -2059,6 +2060,8 @@ export const ItemTableList = ({
}} }}
ref={containerFocusRef} ref={containerFocusRef}
tabIndex={0} tabIndex={0}
{...animationProps.fadeIn}
transition={{ duration: 1, ease: 'anticipate' }}
> >
{StickyHeader} {StickyHeader}
{StickyGroupRow} {StickyGroupRow}
@@ -2110,6 +2113,6 @@ export const ItemTableList = ({
</ExpandedListContainer> </ExpandedListContainer>
)} )}
</AnimatePresence> </AnimatePresence>
</div> </motion.div>
); );
}; };