chore: AppHeader/mobile の内部処理を整理する vol.1

packages/smarthr-ui/src/components/AppHeader/AppHeader.tsx

@@ -13,12 +13,11 @@ export const AppHeader: FC<HeaderProps> = ({ locale, children, ...props }) => {
   //  wovn の言語切替カスタム UI の挿入対象となる DOM ("wovn-embedded-widget-anchor" クラスを持った div) が複数描画されていると、
   //  wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。
   const isDesktop = useMediaQuery(mediaQuery.desktop)
-  const isMobile = useMediaQuery(mediaQuery.mobile)
+  const Header = isDesktop ? DesktopHeader : MobileHeader
 
   return (
     <LocaleContextProvider locale={locale}>
-      <DesktopHeader {...props}>{isDesktop && children}</DesktopHeader>
-      <MobileHeader {...props}>{isMobile && children}</MobileHeader>
+      <Header {...props}>{children}</Header>
     </LocaleContextProvider>
   )
 }

packages/smarthr-ui/src/components/AppHeader/README.md

@@ -27,34 +27,34 @@ export type HeaderProps = ComponentProps<typeof Header> & {
 下記に、少し特殊な動きをするものやパッと見分かりづらいであろうと思われる props だけ補足説明を書きます。
 
 - `locale`
-    - 多言語対応に wovn を使っている場合はこの props は不要です。
+  - 多言語対応に wovn を使っている場合はこの props は不要です。
 - `tenants`
-    - デスクトップ表示時
-        - Header コンポーネントと同じです。
-    - モバイル表示時
-        - ハンバーガーメニューが表示されている場合はメニューの中に、そうでない場合はデスクトップ表示時と同じ箇所 (ロゴの横) に表示されます。
-        - もし既存の独自実装ハンバーガーメニュー内にテナント選択の UI があるなどの理由で「ハンバーガーメニューは表示しないがモバイル表示時にヘッダーにテナント選択の UI を表示したくない」という場合は、ウィンドウサイズが 751px 以下のときに tenants props に undefined を渡すようにしてください。
+  - デスクトップ表示時
+    - Header コンポーネントと同じです。
+  - モバイル表示時
+    - ハンバーガーメニューが表示されている場合はメニューの中に、そうでない場合はデスクトップ表示時と同じ箇所 (ロゴの横) に表示されます。
+    - もし既存の独自実装ハンバーガーメニュー内にテナント選択の UI があるなどの理由で「ハンバーガーメニューは表示しないがモバイル表示時にヘッダーにテナント選択の UI を表示したくない」という場合は、ウィンドウサイズが 751px 以下のときに tenants props に undefined を渡すようにしてください。
 - `navigations`
-    - ヘッダーの下にナビゲーションが表示されるようになります。
-    - AppNavi コンポーネントの buttons props とほぼ同じ型のデータを取ります。
-    - AppNavi コンポーネントの buttons にはなかった、ドロップダウン内でのナビゲーションのグルーピングができるようになっています。
-        - storybook の「VRT Navigation Dropdown Group」を参考にしてください。
-    - **navigations props に値が渡されているときのみ、モバイル表示時にハンバーガーメニューが表示されます。独自実装の ハンバーガーメニューが存在する場合は、navigations props を利用するタイミングで移行してください。**
+  - ヘッダーの下にナビゲーションが表示されるようになります。
+  - AppNavi コンポーネントの buttons props とほぼ同じ型のデータを取ります。
+  - AppNavi コンポーネントの buttons にはなかった、ドロップダウン内でのナビゲーションのグルーピングができるようになっています。
+    - storybook の「VRT Navigation Dropdown Group」を参考にしてください。
+  - **navigations props に値が渡されているときのみ、モバイル表示時にハンバーガーメニューが表示されます。独自実装の ハンバーガーメニューが存在する場合は、navigations props を利用するタイミングで移行してください。**
 - `desktopAdditionalContent`
-    - ユーザー名をクリックしたときのドロップダウンの、「個人設定」の下に入れたいものがある場合に使います。
-    - 見た目の共通化のため、乱用は避けてください
+  - ユーザー名をクリックしたときのドロップダウンの、「個人設定」の下に入れたいものがある場合に使います。
+  - 見た目の共通化のため、乱用は避けてください
 - `desktopNavigationAdditionalContent`
-    - ナビゲーション内で右寄せ、かつリリースノートの左側に入れたい物がある場合に使います。
-    - 見た目の共通化のため、乱用は避けてください
+  - ナビゲーション内で右寄せ、かつリリースノートの左側に入れたい物がある場合に使います。
+  - 見た目の共通化のため、乱用は避けてください
 - `mobileAdditionalContent`
-    - モバイル表示時に、メニュー内に何か追加で起きたいものがある場合に使います。
-    - 見た目の共通化のため、乱用は避けてほしいですが、もし何かしらのパーツを配置する必要がある場合は、デザイナーと相談しながら実装してください。
+  - モバイル表示時に、メニュー内に何か追加で起きたいものがある場合に使います。
+  - 見た目の共通化のため、乱用は避けてほしいですが、もし何かしらのパーツを配置する必要がある場合は、デザイナーと相談しながら実装してください。
 
 ## 多言語対応について
 
 - wovn を使っているアプリの場合
-    - 内部で表示されているテキストに関しては、すべて `woven-enabled="true"` がついています。
-    - 外部から渡すテキストは全て `ReactNode` 型で受け取るようになっているので、`<span woven-enabled="true">ほげ</span>` みたいなものを渡すようにしてください。
+  - 内部で表示されているテキストに関しては、すべて `woven-enabled="true"` がついています。
+  - 外部から渡すテキストは全て `ReactNode` 型で受け取るようになっているので、`<span woven-enabled="true">ほげ</span>` みたいなものを渡すようにしてください。
 - 辞書を持っているアプリの場合
-    - コンポーネント側で辞書を持っているので、`locale` の props を埋めると内部的に持っているテキストは翻訳されます。
-    - 外部から渡すテキストはアプリケーション側で翻訳されたものを渡すようにしてください。
+  - コンポーネント側で辞書を持っているので、`locale` の props を埋めると内部的に持っているテキストは翻訳されます。
+  - 外部から渡すテキストはアプリケーション側で翻訳されたものを渡すようにしてください。

packages/smarthr-ui/src/components/AppHeader/components/mobile/ReleaseNote.tsx

@@ -1,16 +1,17 @@
-import React, { FC, useContext } from 'react'
+import React, { type FC, memo, useContext, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { FaUpRightFromSquareIcon } from '../../../Icon'
 import { Center, Stack } from '../../../Layout'
 import { Loader } from '../../../Loader'
 import { Text } from '../../../Text'
 import { useTranslate } from '../../hooks/useTranslate'
+import { HeaderProps } from '../../types'
 import { Translate } from '../common/Translate'
 
 import { ReleaseNoteContext } from './ReleaseNoteContext'
 
-const releaseNoteStyle = tv({
+const classNameGenerator = tv({
   slots: {
     anchor: ['shr-text-base shr-text-link [&&]:shr-underline', '[&&]:hover:shr-no-underline'],
     icon: ['shr-ms-0.5'],
@@ -22,48 +23,72 @@ const releaseNoteStyle = tv({
   },
 })
 
-export const ReleaseNote: FC = () => {
-  const translate = useTranslate()
+export const ReleaseNote = memo(() => {
   const { releaseNote } = useContext(ReleaseNoteContext)
 
-  if (!releaseNote) {
-    return null
-  }
+  return releaseNote ? <ActualReleaseNote data={releaseNote} /> : null
+})
+
+const ActualReleaseNote: FC<{
+  data: Exclude<Required<HeaderProps>['releaseNote'], null>
+}> = ({ data }) => {
+  const translate = useTranslate()
+  const translated = useMemo(
+    () => ({
+      error: translate('common/releaseNotesLoadError'),
+      seeAll: translate('common/seeAllReleaseNotes'),
+    }),
+    [translate],
+  )
+
+  const classNames = useMemo(() => {
+    const { anchor, icon, indexLinkWrapper, indexLinkAnchor } = classNameGenerator()
 
-  const { anchor, icon, indexLinkWrapper, indexLinkAnchor } = releaseNoteStyle()
+    return {
+      anchor: anchor(),
+      icon: icon(),
+      indexLinkWrapper: indexLinkWrapper(),
+      indexLinkAnchor: indexLinkAnchor(),
+    }
+  }, [])
 
   return (
     <div>
-      {releaseNote.loading ? (
+      {data.loading ? (
         <Center>
           <Loader />
         </Center>
-      ) : releaseNote.error ? (
+      ) : data.error ? (
         <Text>
-          <Translate>{translate('common/releaseNotesLoadError')}</Translate>
+          <Translate>{translated.error}</Translate>
         </Text>
       ) : (
         <Stack>
-          {releaseNote.links.slice(0, 5).map((link) => (
+          {data.links.slice(0, 5).map((link) => (
             <div key={link.url}>
-              <a href={link.url} target="_blank" rel="noopener noreferrer" className={anchor()}>
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={classNames.anchor}
+              >
                 {link.title}
-                <FaUpRightFromSquareIcon className={icon()} />
+                <FaUpRightFromSquareIcon className={classNames.icon} />
               </a>
             </div>
           ))}
         </Stack>
       )}
 
-      <div className={indexLinkWrapper()}>
+      <div className={classNames.indexLinkWrapper}>
         <a
-          href={releaseNote.indexUrl}
+          href={data.indexUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className={indexLinkAnchor()}
+          className={classNames.indexLinkAnchor}
         >
-          <Translate>{translate('common/seeAllReleaseNotes')}</Translate>
-          <FaUpRightFromSquareIcon className={icon()} />
+          <Translate>{translated.seeAll}</Translate>
+          <FaUpRightFromSquareIcon className={classNames.icon} />
         </a>
       </div>
     </div>

packages/smarthr-ui/src/components/AppHeader/components/mobile/TenantSelector.tsx

@@ -1,4 +1,13 @@
-import React, { ComponentProps, FC } from 'react'
+import React, {
+  type ComponentProps,
+  type FC,
+  type MouseEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  memo,
+  useCallback,
+  useMemo,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'
@@ -22,41 +31,73 @@ type Props = {
 }
 
 export const TenantSelector: FC<Props> = ({ tenants, currentTenantId, onTenantSelect }) => {
-  if (!tenants || tenants.length === 0 || !currentTenantId) {
-    return null
-  }
+  const tenantName = useMemo(() => {
+    if (!tenants || !currentTenantId || tenants.length === 0) {
+      return null
+    }
 
-  const tenantName = tenants.find((tenant) => tenant.id === currentTenantId)?.name
+    return tenants.find((tenant) => tenant.id === currentTenantId)?.name
+  }, [tenants, currentTenantId])
 
-  if (!tenantName) {
-    return null
-  }
+  return tenantName ? (
+    <ActualTenantSelector
+      tenants={tenants as ActualProps['tenants']}
+      currentTenantId={currentTenantId}
+      onTenantSelect={onTenantSelect}
+      tenantName={tenantName}
+    />
+  ) : null
+}
 
+type ActualProps = Omit<Props, 'tenants'> &
+  Required<Pick<Props, 'tenants'>> & { tenantName: ReactNode }
+
+const ActualTenantSelector: FC<ActualProps> = ({
+  tenants,
+  currentTenantId,
+  onTenantSelect,
+  tenantName,
+}) => {
   if (tenants.length === 1 || !onTenantSelect) {
     return <Text as="p">{tenantName}</Text>
   }
 
   return (
-    <Dropdown>
-      <DropdownTrigger>
-        <button type="button" className={tenantDropdownTriggerButton()}>
-          {tenantName}
-          <FaCaretDownIcon className="shr-ms-0.5" color="TEXT_BLACK" />
-        </button>
-      </DropdownTrigger>
+    <TenantDropdown
+      tenants={tenants}
+      currentTenantId={currentTenantId}
+      onTenantSelect={onTenantSelect}
+      tenantName={tenantName}
+    />
+  )
+}
+
+const TenantDropdown: FC<
+  Omit<ActualProps, 'onTenantSelect'> & Required<Pick<ActualProps, 'onTenantSelect'>>
+> = ({ tenants, currentTenantId, onTenantSelect, tenantName }) => {
+  const onClickTenantName = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      onTenantSelect(e.currentTarget.value)
+    },
+    [onTenantSelect],
+  )
 
+  return (
+    <Dropdown>
+      <MemoizedTenantDropdownTrigger>{tenantName}</MemoizedTenantDropdownTrigger>
       <DropdownContent controllable>
         <div className="shr-p-0.5">
           {tenants.map((tenant) => {
             const isCurrent = tenant.id === currentTenantId
 
             return (
               <CommonButton
+                key={tenant.id}
                 elementAs="button"
                 type="button"
+                value={tenant.id}
                 current={isCurrent}
-                key={tenant.id}
-                onClick={() => !isCurrent && onTenantSelect(tenant.id)}
+                onClick={isCurrent ? undefined : onClickTenantName}
               >
                 {tenant.name}
               </CommonButton>
@@ -67,3 +108,16 @@ export const TenantSelector: FC<Props> = ({ tenants, currentTenantId, onTenantSe
     </Dropdown>
   )
 }
+
+const MemoizedTenantDropdownTrigger = memo<PropsWithChildren>(({ children }) => {
+  const actualClassName = useMemo(() => tenantDropdownTriggerButton(), [])
+
+  return (
+    <DropdownTrigger>
+      <button type="button" className={actualClassName}>
+        {children}
+        <FaCaretDownIcon className="shr-ms-0.5" color="TEXT_BLACK" />
+      </button>
+    </DropdownTrigger>
+  )
+})