feat: implement rename animation

Quiddlee · Jan 7, 2024 · 601011d · 601011d
1 parent 4535c54
commit 601011d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/Nav/ui/NavigationDrawer.tsx b/src/components/Nav/ui/NavigationDrawer.tsx
@@ -164,7 +164,14 @@ const NavigationDrawer = () => {
                 <span className="animation-delay-200 flex animate-fade-in-standard items-center">
                   <Icon>tab</Icon>
                 </span>
-                <span className="truncate group-hover:pe-8 [&:has(+_article_.visible)]:pe-8">{view.name}</span>
+                <span
+                  style={{
+                    viewTransitionName: `view-list-item-${view.id}`,
+                  }}
+                  className="truncate group-hover:pe-8 [&:has(+_article_.visible)]:pe-8"
+                >
+                  {view.name}
+                </span>
                 <Details id={view.id} />
               </ViewItem>
             )}

diff --git a/src/components/ViewList/ui/RenameViewDialog.tsx b/src/components/ViewList/ui/RenameViewDialog.tsx
@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 
 import useView from '@components/ViewList/hooks/useView';
 import { useLanguage } from '@shared/Context/hooks';
+import viewTransition from '@shared/lib/helpers/viewTransition';
 import Dialog from '@shared/ui/Dialog';
 import FilledTonalButton from '@shared/ui/FilledTonalButton';
 import OutlinedTextField from '@shared/ui/OutlinedTextField';
@@ -39,7 +40,7 @@ const RenameViewDialog: FC<RenameViewDialogProps> = ({ id, open, onToggle }) =>
 
   const handleRename = useCallback(
     (newName: string) => {
-      handleRenameView(id, newName);
+      viewTransition(() => handleRenameView(id, newName));
       handleCloseDialog();
       toast(
         <>