fix nanoanim removal

mat-sz · Oct 25, 2023 · c7c141b · c7c141b
1 parent 98a40f9
commit c7c141b
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 35 deletions.
diff --git a/web/src/animationSettings.ts b/web/src/animationSettings.ts
diff --git a/web/src/components/NetworkTile.tsx b/web/src/components/NetworkTile.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18not';
-import { motion } from 'nanoanim';
 import { IoAdd } from 'react-icons/io5';
 import { ClientModel } from '@filedrop/types';
 
 import styles from './NetworkTile.module.scss';
-import { animationPropsOpacity } from '../animationSettings.js';
 import { TargetTile } from './TargetTile.js';
 import { networkStore } from '../stores/index.js';
 
@@ -34,11 +32,7 @@ export const NetworkTile: React.FC<NetworkTileProps> = ({
   };
 
   return (
-    <motion.div
-      {...animationPropsOpacity}
-      onClick={onClick}
-      className={styles.wrapper}
-    >
+    <div onClick={onClick} className={styles.wrapper}>
       <TargetTile client={client} variant="big" className={clsx(styles.tile)}>
         {!onSelect && (
           <input
@@ -60,6 +54,6 @@ export const NetworkTile: React.FC<NetworkTileProps> = ({
         </div>
       </TargetTile>
       <div className={styles.name}>{client.clientName}</div>
-    </motion.div>
+    </div>
   );
 };
diff --git a/web/src/components/Status.tsx b/web/src/components/Status.tsx
@@ -4,17 +4,13 @@ import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
 import styles from './Status.module.scss';
-import { animationPropsOpacity } from '../animationSettings.js';
 import { connection } from '../stores/index.js';
 
 export const Status: React.FC = observer(() => {
   const { t } = useTranslation();
 
   return !connection.connected && !connection.disconnectReason ? (
-    <div
-      {...animationPropsOpacity}
-      className={clsx(styles.status, styles.error)}
-    >
+    <div className={clsx(styles.status, styles.error)}>
       <div>{t('state.connecting')}</div>
     </div>
   ) : null;

diff --git a/web/src/sections/Chat/ChatItem.tsx b/web/src/sections/Chat/ChatItem.tsx
@@ -1,11 +1,9 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18not';
-import { motion } from 'nanoanim';
 import { observer } from 'mobx-react-lite';
 import clsx from 'clsx';
 
 import styles from './ChatItem.module.scss';
-import { animationPropsSlide } from '../../animationSettings.js';
 import { ChatItemModel } from '../../types/Models.js';
 import { copy } from '../../utils/copy.js';
 import { TargetTile } from '../../components/TargetTile.js';
@@ -45,11 +43,10 @@ export const ChatItem: React.FC<ChatItemProps> = observer(({ item }) => {
   }, [setExpanded]);
 
   return (
-    <motion.li
+    <li
       className={clsx(styles.item, {
         [styles.expanded]: expanded,
       })}
-      {...animationPropsSlide}
     >
       <div className={styles.info}>
         {client && <TargetTile client={client} />}
@@ -67,6 +64,6 @@ export const ChatItem: React.FC<ChatItemProps> = observer(({ item }) => {
           {t('chat.showMore')}
         </button>
       )}
-    </motion.li>
+    </li>
   );
 });
diff --git a/web/src/sections/Chat/index.tsx b/web/src/sections/Chat/index.tsx
@@ -7,7 +7,6 @@ import clsx from 'clsx';
 
 import styles from './index.module.scss';
 import { ChatItem } from './ChatItem.js';
-import { animationPropsOpacity } from '../../animationSettings.js';
 import { IconButton } from '../../components/IconButton.js';
 import { applicationStore, chatStore } from '../../stores/index.js';
 import { TargetTile } from '../../components/TargetTile.js';
@@ -87,7 +86,7 @@ export const ChatSection: React.FC = observer(() => {
       </div>
       <React.Fragment key={chatStore.currentChannel}>
         {chat.length === 0 ? (
-          <div className={styles.empty} {...animationPropsOpacity}>
+          <div className={styles.empty}>
             <IoChatbox />
             <div className={styles.title}>{t('emptyChat.title')}</div>
             <div>

diff --git a/web/src/sections/Transfers/Transfer/index.tsx b/web/src/sections/Transfers/Transfer/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { motion } from 'nanoanim';
 import { observer } from 'mobx-react-lite';
 
 import styles from './index.module.scss';
-import { animationPropsSlide } from '../../../animationSettings.js';
 import { TransferState } from '../../../types/TransferState.js';
 import { formatFileName, formatFileSize } from '../../../utils/file.js';
 import { humanTime } from '../../../utils/time.js';
@@ -31,7 +29,7 @@ export const TransferInfo: React.FC<TransferProps> = observer(
     const left = humanTime(transfer.timeLeft());
 
     return (
-      <motion.li className={styles.transfer} {...animationPropsSlide}>
+      <li className={styles.transfer}>
         <TransferIcon transfer={transfer} />
         <div className={styles.state}>
           <div className={styles.filename}>
@@ -68,7 +66,7 @@ export const TransferInfo: React.FC<TransferProps> = observer(
           </div>
         </div>
         <TransferActions transfer={transfer} />
-      </motion.li>
+      </li>
     );
   }
 );