diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx index 7f5299a72f..cb5a8dd8ad 100644 --- 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( const [count, setCount] = useState(currentValue ? getStringLength(currentValue) : 0) const [srCounterMessage, setSrCounterMessage] = useState('') - 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( + DECORATOR_DEFAULT_TEXTS, + decorators, ) const getCounterMessage = useCallback( @@ -159,8 +134,8 @@ export const Textarea = forwardRef( return ( <> {counterValue - maxLetters} - {afterMaxLettersCount} - {maxLettersCountExceeded} + {decorated.afterMaxLettersCount} + {decorated.afterMaxLettersCountExceeded} ) } @@ -168,13 +143,18 @@ export const Textarea = forwardRef( // あと{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( {srCounterMessage} - {beforeScreenReaderMaxLettersDescription} + {decorated.beforeScreenReaderMaxLettersDescription} {maxLetters} - {afterScreenReaderMaxLettersDescription} + {decorated.afterScreenReaderMaxLettersDescription} ) : ( diff --git a/packages/smarthr-ui/src/libs/decorator.ts b/packages/smarthr-ui/src/libs/decorator.ts index 88ac3b5760..ffc5532bee 100644 --- 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 = { [K in T]?: DecoratorType } export type DecoratorType = (text: string) => ReactNode + +export const useDecorators = ( + defaultTexts: { [K in T]: string }, + decorators: DecoratorsType | 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])