chore: DropdownMenuGroupのNameTextをmemo化

kufu · Jan 22, 2025 · 0590fe2 · 0590fe2
1 parent cf0977c
commit 0590fe2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 31 deletions.
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx
@@ -96,7 +96,7 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
         onlyIconTrigger={onlyIconTrigger}
         triggerIcon={triggerIcon}
         triggerSize={triggerSize}
-        className={styles.triggerWrapper}
+        wrapperStyle={styles.triggerWrapper}
         buttonStyle={styles.triggerButton}
       />
       <DropdownContent>
@@ -111,24 +111,21 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
 const MemoizedTriggerButton = React.memo<
   Pick<Props, 'onlyIconTrigger' | 'triggerSize' | 'label' | 'triggerIcon'> &
     ElementProps & { wrapperStyle: string; buttonStyle: string }
->(
-  ({ onlyIconTrigger, triggerSize, label, triggerIcon, wrapperStyle, buttonStyle, ...rest }) => (
-    <DropdownTrigger className={wrapperStyle}>
-      <Button
-        {...rest}
-        suffix={<ButtonSuffixIcon onlyIconTrigger={onlyIconTrigger} />}
-        size={triggerSize}
-        square={onlyIconTrigger}
-        className={buttonStyle}
-      >
-        <TriggerLabel label={label} onlyIconTrigger={onlyIconTrigger} triggerIcon={triggerIcon} />
-      </Button>
-    </DropdownTrigger>
-  ),
-  [],
-)
-
-const TriggerLabel = React.memo<Pick<Props, 'label' | 'onlyIconTrigger' | 'triggerIcon'>>(
+>(({ onlyIconTrigger, triggerSize, label, triggerIcon, wrapperStyle, buttonStyle, ...rest }) => (
+  <DropdownTrigger className={wrapperStyle}>
+    <Button
+      {...rest}
+      suffix={<ButtonSuffixIcon onlyIconTrigger={onlyIconTrigger} />}
+      size={triggerSize}
+      square={onlyIconTrigger}
+      className={buttonStyle}
+    >
+      <TriggerLabelText label={label} onlyIconTrigger={onlyIconTrigger} triggerIcon={triggerIcon} />
+    </Button>
+  </DropdownTrigger>
+))
+
+const TriggerLabelText = React.memo<Pick<Props, 'label' | 'onlyIconTrigger' | 'triggerIcon'>>(
   ({ label, onlyIconTrigger, triggerIcon }) => {
     if (!onlyIconTrigger) {
       return label

diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx
@@ -47,19 +47,17 @@ export const DropdownMenuGroup: React.FC<Props & ElementProps> = ({
 
   return (
     <li className={styles.group}>
-      {name && (
-        <Text
-          as="p"
-          size="S"
-          weight="bold"
-          color="TEXT_GREY"
-          leading="NONE"
-          className={styles.groupName}
-        >
-          {name}
-        </Text>
-      )}
+      <NameText className={styles.groupName}>{name}</NameText>
       <ul>{renderButtonList(children)}</ul>
     </li>
   )
 }
+
+const NameText = React.memo<PropsWithChildren<{ className: string }>>(
+  ({ children, className }) =>
+    children && (
+      <Text as="p" size="S" weight="bold" color="TEXT_GREY" leading="NONE" className={className}>
+        {children}
+      </Text>
+    ),
+)