chore: Header内にTenantSwitcherコンポーネントを定義

kufu · Jan 16, 2025 · fd37877 · fd37877
1 parent 7492908
commit fd37877
Showing 1 changed file with 39 additions and 30 deletions.
diff --git a/packages/smarthr-ui/src/components/Header/Header.tsx b/packages/smarthr-ui/src/components/Header/Header.tsx
@@ -100,15 +100,6 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
     [logo, enableNew],
   )
 
-  const currentTenantName = useMemo(() => {
-    if (tenants && tenants.length >= 1) {
-      const current = tenants.find(({ id }) => id === currentTenantId)
-      return current ? current.name : tenants[0].name
-    }
-
-    return undefined
-  }, [currentTenantId, tenants])
-
   return (
     <Cluster as="header" justify="space-between" gap={COMMON_GAP} className={styles.wrapper}>
       <Cluster align="center" gap={COMMON_GAP}>
@@ -118,19 +109,12 @@ export const Header: React.FC<PropsWithChildren<Props> & ElementProps> = ({
         {enableNew ? (
           <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />
         ) : (
-          currentTenantName && (
-            <div className={styles.tenantInfo}>
-              {tenants && tenants.length > 1 ? (
-                <MultiTenantDropdownMenuButton
-                  label={currentTenantName}
-                  tenants={tenants}
-                  onTenantSelect={onTenantSelect}
-                />
-              ) : (
-                <OnlyOneTenant className={styles.tenantNameText}>{currentTenantName}</OnlyOneTenant>
-              )}
-            </div>
-          )
+          <TenantSwitcher
+            currentTenantId={currentTenantId}
+            tenants={tenants}
+            styles={styles}
+            onTenantSelect={onTenantSelect}
+          />
         )}
       </Cluster>
       <Cluster align="center" justify="flex-end" gap={CHILDREN_GAP} className={styles.actions}>
@@ -154,6 +138,39 @@ const MemoizedAppLauncher = React.memo<Pick<Props, 'featureName' | 'apps' | 'ena
   },
 )
 
+const TenantSwitcher = React.memo<
+  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {
+    styles: { tenantInfo: string; tenantNameText: string }
+  }
+>(({ currentTenantId, tenants, styles, onTenantSelect }) => {
+  const currentTenantName = useMemo(() => {
+    if (tenants && tenants.length >= 1) {
+      const current = tenants.find(({ id }) => id === currentTenantId)
+      return current ? current.name : tenants[0].name
+    }
+
+    return undefined
+  }, [currentTenantId, tenants])
+
+  return (
+    currentTenantName && (
+      <div className={styles.tenantInfo}>
+        {tenants && tenants.length > 1 ? (
+          <MultiTenantDropdownMenuButton
+            label={currentTenantName}
+            tenants={tenants}
+            onTenantSelect={onTenantSelect}
+          />
+        ) : (
+          <Text color="TEXT_WHITE" className={styles.tenantNameText}>
+            {currentTenantName}
+          </Text>
+        )}
+      </div>
+    )
+  )
+})
+
 const MultiTenantDropdownMenuButton = React.memo<
   Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { label: string }
 >(({ label, tenants, onTenantSelect }) => {
@@ -177,11 +194,3 @@ const MultiTenantDropdownMenuButton = React.memo<
     </HeaderDropdownMenuButton>
   )
 })
-
-const OnlyOneTenant = React.memo<PropsWithChildren<{ className: string }>>(
-  ({ className, children }) => (
-    <Text color="TEXT_WHITE" className={className}>
-      {children}
-    </Text>
-  ),
-)