fix: 🐛 [Icon] Fixed rotate function

✅ Closes: #305
melfore · Jan 11, 2024 · 3269738 · 3269738
1 parent be1ce4d
commit 3269738
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 116 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -78,14 +78,16 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^22.0.6",
     "storybook": "^7.5.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "@mui/system": "^5.15.4"
   },
   "peerDependencies": {
     "@emotion/react": ">= 11.8.2 < 12",
     "@emotion/styled": ">= 11.8.1 < 12",
     "@mui/icons-material": ">= 5.5.1 < 6",
     "@mui/material": ">= 5.5.3 < 6",
     "@mui/x-date-pickers": ">= 6.16.0 < 7",
+    "@mui/system": ">= 5.15.4 < 6",
     "luxon": ">= 3.4.3 < 4",
     "react": ">= 18 < 19",
     "react-dom": ">= 18 < 19",

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -1,6 +1,6 @@
 import React, { cloneElement, FC, memo, PropsWithChildren, ReactElement, ReactNode, useCallback, useMemo } from "react";
-import { ClassNames } from "@emotion/react";
-import { keyframes, Skeleton as MUISkeleton } from "@mui/material";
+import { Skeleton as MUISkeleton } from "@mui/material";
+import { Box } from "@mui/system";
 
 import { IIcon, IIconDimensions, IRenderedIcon } from "../../types/Icon";
 import { logWarn } from "../../utils/logger";
@@ -51,48 +51,35 @@ const Icon: FC<PropsWithChildren<IIcon>> = ({
     return props;
   }, [children, dataCy, dimensions, externalStyle, forwarded, size]);
 
-  const rotateKeyframes = useMemo(
-    () => keyframes`
-      from: {
-        transform: "rotate(0deg)";
-      }
-      to: {
-        transform: "rotate(360deg)";
-      }
-  `,
-    []
-  );
-
   const renderWithAnimation = useCallback(
     (element: ReactElement | ReactNode) => {
-      return (
-        <ClassNames>
-          {({ css }) => {
-            let animation = "none";
-            if (rotate) {
-              animation = css`
-                ${rotateKeyframes} 2s linear infinite
-              `;
-            }
-
-            let className = css`
-              animation: ${animation};
-            `;
-
-            if (forwarded.className) {
-              className = forwarded.className;
-            }
-
-            return (
-              <Adornment badge={badge} tooltip={tooltip}>
-                {cloneElement(element as ReactElement, { ...props, className })}
-              </Adornment>
-            );
+      return rotate ? (
+        <Box
+          sx={{
+            animation: "spin 2s linear infinite",
+            "@keyframes spin": {
+              "0%": {
+                transform: "rotate(360deg)",
+              },
+              "100%": {
+                transform: "rotate(0deg)",
+              },
+            },
+            width: dimensions.width,
+            height: dimensions.width,
           }}
-        </ClassNames>
+        >
+          <Adornment badge={badge} tooltip={tooltip}>
+            {cloneElement(element as ReactElement, { ...props })}
+          </Adornment>
+        </Box>
+      ) : (
+        <Adornment badge={badge} tooltip={tooltip}>
+          {cloneElement(element as ReactElement, { ...props })}
+        </Adornment>
       );
     },
-    [badge, forwarded, props, rotate, rotateKeyframes, tooltip]
+    [badge, props, tooltip, rotate, dimensions]
   );
 
   if (loading) {