chore: useDecoratorsを定義

kufu · Jan 24, 2025 · 2f643da · 2f643da
1 parent 5ef9eda
commit 2f643da
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 37 deletions.
diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx
@@ -15,7 +15,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { type DecoratorsType } from '../../libs/decorator'
+import { type DecoratorsType, useDecorators } from '../../libs/decorator'
 import { debounce } from '../../libs/debounce'
 import { lineHeight } from '../../themes'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'
@@ -120,34 +120,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
     const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0)
     const [srCounterMessage, setSrCounterMessage] = useState<ReactNode>('')
 
-    const {
-      afterMaxLettersCount,
-      beforeMaxLettersCount,
-      maxLettersCountExceeded,
-      beforeScreenReaderMaxLettersDescription,
-      afterScreenReaderMaxLettersDescription,
-    } = useMemo(
-      () => ({
-        beforeMaxLettersCount:
-          decorators?.beforeMaxLettersCount?.(DECORATOR_DEFAULT_TEXTS.beforeMaxLettersCount) ||
-          DECORATOR_DEFAULT_TEXTS.beforeMaxLettersCount,
-        afterMaxLettersCount:
-          decorators?.afterMaxLettersCount?.(DECORATOR_DEFAULT_TEXTS.afterMaxLettersCount) ||
-          DECORATOR_DEFAULT_TEXTS.afterMaxLettersCount,
-        maxLettersCountExceeded:
-          decorators?.afterMaxLettersCountExceeded?.(
-            DECORATOR_DEFAULT_TEXTS.afterMaxLettersCountExceeded,
-          ) || DECORATOR_DEFAULT_TEXTS.afterMaxLettersCountExceeded,
-        beforeScreenReaderMaxLettersDescription:
-          decorators?.beforeScreenReaderMaxLettersDescription?.(
-            DECORATOR_DEFAULT_TEXTS.beforeScreenReaderMaxLettersDescription,
-          ) || DECORATOR_DEFAULT_TEXTS.beforeScreenReaderMaxLettersDescription,
-        afterScreenReaderMaxLettersDescription:
-          decorators?.afterScreenReaderMaxLettersDescription?.(
-            DECORATOR_DEFAULT_TEXTS.afterScreenReaderMaxLettersDescription,
-          ) || DECORATOR_DEFAULT_TEXTS.afterScreenReaderMaxLettersDescription,
-      }),
-      [decorators],
+    const decorated = useDecorators<keyof typeof DECORATOR_DEFAULT_TEXTS>(
+      DECORATOR_DEFAULT_TEXTS,
+      decorators,
     )
 
     const getCounterMessage = useCallback(
@@ -159,22 +134,27 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           return (
             <>
               {counterValue - maxLetters}
-              {afterMaxLettersCount}
-              {maxLettersCountExceeded}
+              {decorated.afterMaxLettersCount}
+              {decorated.afterMaxLettersCountExceeded}
             </>
           )
         }
 
         // あと{count}文字
         return (
           <>
-            {beforeMaxLettersCount}
+            {decorated.beforeMaxLettersCount}
             {maxLetters - counterValue}
-            {afterMaxLettersCount}
+            {decorated.afterMaxLettersCount}
           </>
         )
       },
-      [maxLetters, maxLettersCountExceeded, afterMaxLettersCount, beforeMaxLettersCount],
+      [
+        maxLetters,
+        decorated.afterMaxLettersCountExceeded,
+        decorated.afterMaxLettersCount,
+        decorated.beforeMaxLettersCount,
+      ],
     )
 
     const counterVisualMessage = useMemo(() => getCounterMessage(count), [count, getCounterMessage])
@@ -300,9 +280,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
         </span>
         <VisuallyHiddenText aria-live="polite">{srCounterMessage}</VisuallyHiddenText>
         <VisuallyHiddenText id={maxLettersNoticeId}>
-          {beforeScreenReaderMaxLettersDescription}
+          {decorated.beforeScreenReaderMaxLettersDescription}
           {maxLetters}
-          {afterScreenReaderMaxLettersDescription}
+          {decorated.afterScreenReaderMaxLettersDescription}
         </VisuallyHiddenText>
       </span>
     ) : (

diff --git a/packages/smarthr-ui/src/libs/decorator.ts b/packages/smarthr-ui/src/libs/decorator.ts
@@ -1,7 +1,27 @@
-import { ReactNode } from 'react'
+import { ReactNode, useMemo } from 'react'
 
 export type DecoratorsType<T extends string> = {
   [K in T]?: DecoratorType
 }
 
 export type DecoratorType = (text: string) => ReactNode
+
+export const useDecorators = <T extends string>(
+  defaultTexts: { [K in T]: string },
+  decorators: DecoratorsType<T> | undefined,
+) =>
+  useMemo(() => {
+    if (!decorators) {
+      return defaultTexts
+    }
+
+    const decorated = {} as { [K in T]: ReactNode }
+
+    for (const key in defaultTexts) {
+      const value = defaultTexts[key]
+
+      decorated[key] = decorators[key]?.(value) || value
+    }
+
+    return decorated
+  }, [decorators, defaultTexts])