Merge pull request #420 from qoretechnologies/bugfix/performance-fixes

Performance fixes #1
qoretechnologies · Dec 11, 2024 · 3042918 · 3042918
2 parents 044e571 + 66b1226
commit 3042918
Show file tree

Hide file tree

Showing 8 changed files with 661 additions and 618 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.18",
+  "version": "0.48.19",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -133,6 +133,13 @@ const getButtonMainColor = (
   return theme.main;
 };
 
+const getButtonTextColor = ({ minimal, transparent, color, theme }) =>
+  minimal || transparent
+    ? isAchromatic(color)
+      ? getReadableColorFrom(theme.originalMain, true)
+      : saturate(1, tint(0.8, color))
+    : getReadableColorFrom(color, true);
+
 export const StyledAnimatedTextWrapper = styled.span`
   min-width: 5px;
   overflow: hidden;
@@ -208,11 +215,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   color: ${({ color, minimal, transparent, theme, effect }) => {
     const finalColor = getButtonMainColor(theme, color, effect);
 
-    return minimal || transparent
-      ? isAchromatic(finalColor)
-        ? getReadableColorFrom(theme.originalMain, true)
-        : saturate(1, tint(0.8, finalColor))
-      : getReadableColorFrom(finalColor, true);
+    return getButtonTextColor({ minimal, transparent, color: finalColor, theme });
   }};
 
   ${InactiveIconScale};
@@ -324,6 +327,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   .reqore-button-description {
     padding-top: ${({ size }) => PADDING_FROM_SIZE[size] / 2}px;
+    color: ${({ theme, color, minimal, transparent }) =>
+      rgba(getButtonTextColor({ minimal, transparent, color, theme }), 0.7)};
   }
 `;
 
@@ -377,23 +382,39 @@ export const ButtonBadge = memo(
 
     const content = Array.isArray(props.content) ? props.content : [props.content];
 
-    const leftBadges = content.filter(
-      (badge) => typeof badge === 'string' || typeof badge === 'number' || !badge?.align
+    const leftBadges = useMemo(
+      () =>
+        content.filter(
+          (badge) => typeof badge === 'string' || typeof badge === 'number' || !badge?.align
+        ),
+      [content]
     );
-    const rightBadges = content.filter(
-      (badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'
+
+    const rightBadges = useMemo(
+      () =>
+        content.filter(
+          (badge) =>
+            typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'
+        ),
+      [content]
     );
-    const middleBadges = content.filter(
-      (badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'center'
+
+    const middleBadges = useMemo(
+      () =>
+        content.filter(
+          (badge) =>
+            typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'center'
+        ),
+      [content]
     );
 
-    const buildContent = (badge: TReqoreBadge) => {
+    const buildContent = useCallback((badge: TReqoreBadge) => {
       if (typeof badge === 'string' || typeof badge === 'number') {
         return { label: badge, align: undefined };
       }
 
       return { ...badge, align: undefined };
-    };
+    }, []);
 
     return (
       <>
@@ -480,15 +501,11 @@ const ReqoreButton = memo(
       useTooltip(buttonRef, tooltip);
 
       // If color or intent was specified, set the color
-      const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
+      const customColor = useMemo(
+        () => (intent ? theme.main : changeLightness(theme.main, 0.07)),
+        [intent, theme.main]
+      );
       const _flat = minimal ? flat : flat === true;
-
-      const color: TReqoreHexColor = customColor
-        ? minimal
-          ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
-          : getReadableColorFrom(customColor, true)
-        : getReadableColor(theme, undefined, undefined, true);
-
       const _children = useMemo(() => label || children, [label, children]);
       const _compact = compact ?? theme.buttons?.compact ?? !children;
       const hasLeftIcon = icon || leftIconProps?.image;
@@ -684,7 +701,6 @@ const ReqoreButton = memo(
               effect={{
                 textSize: getOneLessSize(size),
                 weight: 'light',
-                color: `${color}90`,
                 textAlign,
                 ...descriptionEffect,
               }}