animate on props changed

maheshbasnet089 · Mar 7, 2024 · 576fa01 · 576fa01
1 parent 48fdb89
commit 576fa01
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/tapShareFrontend/src/components/DynamicFileTypeIcon.jsx b/tapShareFrontend/src/components/DynamicFileTypeIcon.jsx
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { PiFile } from "react-icons/pi";
 
-const iconMap = {
+export const iconMap = {
   mp3: "PiFileAudio",
   archive: "PiFileArchive",
   code: "PiFileCode",
@@ -15,14 +15,15 @@ const iconMap = {
   webp: "PiFileImage",
   jpg: "PiFileJpg",
   js: "PiFileJs",
+  javascript: "PiFileJs",
   jsx: "PiFileJsx",
   pdf: "PiFilePdf",
   png: "PiFilePng",
   ppt: "PiFilePpt",
   pptx: "PiFilePpt",
   sql: "PiFileSql",
   svg: "PiFileSvg",
-  text: "PiFileText",
+  plain: "PiFileText",
   txt: "PiFileText",
   ts: "PiFileTs",
   tsx: "PiFileTsx",
@@ -39,6 +40,8 @@ const iconMap = {
 const DynamicIcon = ({ name }) => {
   const [IconComponent, setIconComponent] = useState(null);
   const iconName = name.split(".").pop().toLowerCase();
+  const key = name.split(".").length > 1 && iconName.length > 1;
+
   useEffect(() => {
     const importIcon = async () => {
       try {
@@ -55,7 +58,7 @@ const DynamicIcon = ({ name }) => {
     importIcon();
   }, [iconName]);
 
-  return IconComponent ? <IconComponent /> : <PiFile />;
+  return IconComponent ? <IconComponent key={name} className="animate-[scale_300ms]" /> : <PiFile key={key ? iconName : key} className={`${!key ? "hidden": !iconMap[iconName] ? "animate-shake" : "animate-[scale_300ms]"}`} />;
 };
 
 export default DynamicIcon;