From f2f34f60439a1e530b98fdb34e1a6285873f36f5 Mon Sep 17 00:00:00 2001 From: Mizoue Atsushi Date: Thu, 6 Feb 2025 11:47:59 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20decorators=E3=81=AB=E5=AF=BE=E3=81=99?= =?UTF-8?q?=E3=82=8B=E5=87=A6=E7=90=86=E3=82=92=E5=85=B1=E9=80=9A=E5=8C=96?= =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=80=81useDecora?= =?UTF-8?q?tors=E3=82=92=E5=AE=9A=E7=BE=A9=E3=81=99=E3=82=8B=20(#5326)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Browser/Browser.tsx | 2 +- .../src/components/Button/Button.tsx | 2 +- .../ComboBox/MultiComboBox/MultiComboBox.tsx | 2 +- .../SingleComboBox/SingleComboBox.tsx | 2 +- .../src/components/ComboBox/useListBox.tsx | 3 +- .../ActionDialog/ActionDialogContentInner.tsx | 3 +- .../FormDialog/FormDialogContentInner.tsx | 3 +- .../MessageDialogContentInner.tsx | 3 +- .../src/components/Dialog/ModelessDialog.tsx | 3 +- .../src/components/DropZone/DropZone.tsx | 3 +- .../FilterDropdown/FilterDropdown.tsx | 3 +- .../Dropdown/SortDropdown/SortDropdown.tsx | 3 +- .../Header/AppLauncher/AppLauncher.tsx | 3 +- .../LanguageSwitcher/LanguageSwitcher.tsx | 3 +- .../InformationPanel/InformationPanel.tsx | 3 +- .../Input/SearchInput/SearchInput.tsx | 3 +- .../src/components/InputFile/InputFile.tsx | 3 +- .../components/PageCounter/PageCounter.tsx | 3 +- .../src/components/Select/Select.tsx | 3 +- .../src/components/Table/ThCheckbox.tsx | 3 +- .../src/components/Text/RangeSeparator.tsx | 3 +- .../src/components/Textarea/Textarea.tsx | 73 ++++++------------- .../Textarea/stories/Textarea.stories.tsx | 23 ++++++ .../smarthr-ui/src/hooks/useDecorators.ts | 27 +++++++ packages/smarthr-ui/src/types/Decorator.ts | 7 -- packages/smarthr-ui/src/types/index.ts | 1 - 26 files changed, 98 insertions(+), 92 deletions(-) create mode 100644 packages/smarthr-ui/src/hooks/useDecorators.ts delete mode 100644 packages/smarthr-ui/src/types/Decorator.ts diff --git a/packages/smarthr-ui/src/components/Browser/Browser.tsx b/packages/smarthr-ui/src/components/Browser/Browser.tsx index 3f6596696e..b8828a8c64 100644 --- a/packages/smarthr-ui/src/components/Browser/Browser.tsx +++ b/packages/smarthr-ui/src/components/Browser/Browser.tsx @@ -1,7 +1,7 @@ import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react' import { tv } from 'tailwind-variants' -import { DecoratorsType } from '../../types' +import { type DecoratorsType } from '../../hooks/useDecorators' import { Text } from '../Text' import { BrowserColumn } from './BrowserColumn' diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx index 13f3c718e9..d0c3aa42c6 100644 --- a/packages/smarthr-ui/src/components/Button/Button.tsx +++ b/packages/smarthr-ui/src/components/Button/Button.tsx @@ -3,8 +3,8 @@ import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { usePortal } from '../../hooks/usePortal' -import { DecoratorsType } from '../../types' import { Loader } from '../Loader' import { VisuallyHiddenText } from '../VisuallyHiddenText' diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx index c6f6d8e1ac..09e6c4facb 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx @@ -15,6 +15,7 @@ import { useId } from 'react' import innerText from 'react-innertext' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { useOuterClick } from '../../../hooks/useOuterClick' import { genericsForwardRef } from '../../../libs/util' import { textColor } from '../../../themes' @@ -27,7 +28,6 @@ import { useOptions } from '../useOptions' import { MultiSelectedItem } from './MultiSelectedItem' import { hasParentElementByClassName } from './multiComboBoxHelper' -import type { DecoratorsType } from '../../../types' import type { BaseProps, ComboBoxItem } from '../types' type Props = BaseProps & { diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx index 8898d4dfed..053af77e0b 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx @@ -17,6 +17,7 @@ import innerText from 'react-innertext' import { tv } from 'tailwind-variants' import { useClick } from '../../../hooks/useClick' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { genericsForwardRef } from '../../../libs/util' import { textColor } from '../../../themes' import { UnstyledButton } from '../../Button' @@ -25,7 +26,6 @@ import { Input } from '../../Input' import { useListBox } from '../useListBox' import { useOptions } from '../useOptions' -import type { DecoratorsType } from '../../../types' import type { BaseProps, ComboBoxItem } from '../types' type Props = BaseProps & { diff --git a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx index eca85e675b..bbe874e38c 100644 --- a/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/useListBox.tsx @@ -11,6 +11,7 @@ import React, { } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { useEnhancedEffect } from '../../hooks/useEnhancedEffect' import { usePortal } from '../../hooks/usePortal' import { spacing } from '../../themes' @@ -23,8 +24,6 @@ import { ComboBoxItem, ComboBoxOption } from './types' import { useActiveOption } from './useActiveOption' import { usePartialRendering } from './usePartialRendering' -import type { DecoratorsType } from '../../types' - type Props = { options: Array> dropdownHelpMessage?: ReactNode diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx index 414bec0910..26ea7b34f4 100644 --- a/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContentInner.tsx @@ -2,6 +2,7 @@ import React, { type FC, type PropsWithChildren, type ReactNode, useCallback, useMemo } from 'react' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Cluster, Stack } from '../../Layout' import { ResponseMessage } from '../../ResponseMessage' @@ -10,7 +11,7 @@ import { DialogBody, type Props as DialogBodyProps } from '../DialogBody' import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader' import { dialogContentInner } from '../dialogInnerStyle' -import type { DecoratorsType, ResponseMessageType } from '../../../types' +import type { ResponseMessageType } from '../../../types' export type BaseProps = PropsWithChildren< DialogHeaderProps & diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx index be9ba580da..5c6642aa1a 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx @@ -8,6 +8,7 @@ import React, { } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Cluster, Stack } from '../../Layout' import { ResponseMessage } from '../../ResponseMessage' @@ -16,7 +17,7 @@ import { DialogBody, Props as DialogBodyProps } from '../DialogBody' import { DialogHeader, type Props as DialogHeaderProps } from '../DialogHeader' import { dialogContentInner } from '../dialogInnerStyle' -import type { DecoratorsType, ResponseMessageType } from '../../../types' +import type { ResponseMessageType } from '../../../types' export type BaseProps = PropsWithChildren< DialogHeaderProps & diff --git a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx index 1c282bcebe..d0a591f6aa 100644 --- a/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx @@ -1,5 +1,6 @@ import React, { type FC, useMemo } from 'react' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Cluster } from '../../Layout' import { Section } from '../../SectioningContent' @@ -7,8 +8,6 @@ import { DialogBody, Props as DialogBodyProps } from '../DialogBody' import { DialogHeader, Props as DialogHeaderProps } from '../DialogHeader' import { dialogContentInner } from '../dialogInnerStyle' -import type { DecoratorsType } from '../../../types' - export type BaseProps = DialogHeaderProps & DialogBodyProps & { /** ダイアログの説明 */ diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx index 6f5c8f6b38..6f9582f303 100644 --- a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx @@ -17,6 +17,7 @@ import React, { import Draggable from 'react-draggable' import { VariantProps, tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { useHandleEscape } from '../../hooks/useHandleEscape' import { Base, BaseElementProps } from '../Base' import { Button } from '../Button' @@ -26,8 +27,6 @@ import { DialogBody, type Props as DialogBodyProps } from './DialogBody' import { DialogOverlap } from './DialogOverlap' import { useDialogPortal } from './useDialogPortal' -import type { DecoratorsType } from '../../types' - type Props = PropsWithChildren<{ /** * ダイアログのヘッダ部分の内容 diff --git a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx index ead14d1e92..46f2211fb5 100644 --- a/packages/smarthr-ui/src/components/DropZone/DropZone.tsx +++ b/packages/smarthr-ui/src/components/DropZone/DropZone.tsx @@ -14,11 +14,10 @@ import React, { } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { Button } from '../Button' import { FaFolderOpenIcon } from '../Icon' -import type { DecoratorsType } from '../../types' - const dropZone = tv({ slots: { wrapper: [ diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx index 25450cc27f..ccec28c018 100644 --- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx @@ -4,6 +4,7 @@ import React, { ComponentProps, FC, ReactNode, useMemo } from 'react' import innerText from 'react-innertext' import { tv } from 'tailwind-variants' +import { type DecoratorType, type DecoratorsType } from '../../../hooks/useDecorators' import { Button, BaseProps as ButtonProps } from '../../Button' import { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon' import { Cluster, Stack } from '../../Layout' @@ -13,7 +14,7 @@ import { DropdownCloser } from '../DropdownCloser' import { DropdownContent } from '../DropdownContent' import { DropdownTrigger } from '../DropdownTrigger' -import type { DecoratorType, DecoratorsType, ResponseMessageType } from '../../../types' +import type { ResponseMessageType } from '../../../types' type Props = { isFiltered?: boolean diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx index 56f4dfceb0..f5427ec3c2 100644 --- a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx @@ -3,6 +3,7 @@ import React, { ComponentPropsWithRef } from 'react' import { type FC, type MouseEventHandler } from 'react' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Fieldset } from '../../Fieldset' import { FormControl } from '../../FormControl' @@ -16,8 +17,6 @@ import { DropdownTrigger } from '../DropdownTrigger' import { useSortDropdown } from './useSortDropdown' -import type { DecoratorsType } from '../../../types' - type SortFieldType = { value: string } & Omit, 'value'> diff --git a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx index b144fc5703..1a7a5a3776 100644 --- a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx +++ b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx @@ -1,6 +1,7 @@ import React, { HTMLAttributes, ReactNode, useMemo } from 'react' import { VariantProps, tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { Button } from '../../Button' import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown' import { Heading } from '../../Heading' @@ -8,8 +9,6 @@ import { FaCaretDownIcon, FaToolboxIcon } from '../../Icon' import { Cluster, Stack } from '../../Layout' import { TextLink } from '../../TextLink' -import type { DecoratorsType } from '../../../types' - type Category = { type?: string heading: ReactNode diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx index 84c3c68d70..b870c3d600 100644 --- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx +++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx @@ -3,12 +3,13 @@ import React, { HTMLAttributes, ReactNode, useCallback, useMemo } from 'react' import { VariantProps, tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { tabbable } from '../../../libs/tabbable' import { Button } from '../../Button' import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown' import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon' -import type { DecoratorsType, LocaleMap } from '../../../types' +import type { LocaleMap } from '../../../types' export type Props = { narrow?: boolean diff --git a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx index df3708d612..2628c11239 100644 --- a/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx +++ b/packages/smarthr-ui/src/components/InformationPanel/InformationPanel.tsx @@ -11,6 +11,7 @@ import React, { } from 'react' import { VariantProps, tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { Base, BaseElementProps } from '../Base' import { Button } from '../Button' import { Heading, HeadingTagTypes } from '../Heading' @@ -18,8 +19,6 @@ import { FaCaretDownIcon, FaCaretUpIcon } from '../Icon' import { Cluster } from '../Layout' import { ResponseMessage } from '../ResponseMessage' -import type { DecoratorsType } from '../../types' - type AbstractProps = PropsWithChildren<{ /** パネルのタイトル */ title: React.ReactNode diff --git a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx index b680d91f76..fabcf131b1 100644 --- a/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx +++ b/packages/smarthr-ui/src/components/Input/SearchInput/SearchInput.tsx @@ -1,11 +1,10 @@ import React, { ComponentProps, forwardRef, useMemo } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../../hooks/useDecorators' import { FaMagnifyingGlassIcon } from '../../Icon' import { InputWithTooltip } from '../InputWithTooltip' -import type { DecoratorsType } from '../../../types' - type Props = Omit, 'tooltipMessage' | 'prefix'> & { /** 入力欄の説明を紐付けるツールチップに表示するメッセージ */ tooltipMessage: React.ReactNode diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx index fed78b2c04..44b5b5065d 100644 --- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx +++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx @@ -12,13 +12,12 @@ import React, { } from 'react' import { VariantProps, tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { BaseColumn } from '../Base' import { Button } from '../Button' import { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon' import { Stack } from '../Layout' -import type { DecoratorsType } from '../../types' - const inputFile = tv({ slots: { wrapper: 'smarthr-ui-InputFile shr-block', diff --git a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx index b49355ec5f..08155b824a 100644 --- a/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx +++ b/packages/smarthr-ui/src/components/PageCounter/PageCounter.tsx @@ -1,11 +1,10 @@ import React, { ComponentPropsWithoutRef, useMemo } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators' import { Cluster } from '../Layout' import { RangeSeparator, Text } from '../Text' -import type { DecoratorType, DecoratorsType } from '../../types' - type Props = { start: number end: number diff --git a/packages/smarthr-ui/src/components/Select/Select.tsx b/packages/smarthr-ui/src/components/Select/Select.tsx index e581883fef..78743469ab 100644 --- a/packages/smarthr-ui/src/components/Select/Select.tsx +++ b/packages/smarthr-ui/src/components/Select/Select.tsx @@ -9,12 +9,11 @@ import React, { } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators' import { isIOS, isMobileSafari } from '../../libs/ua' import { genericsForwardRef } from '../../libs/util' import { FaSortIcon } from '../Icon' -import type { DecoratorType, DecoratorsType } from '../../types' - type Option = { value: T } & Omit, 'value'> diff --git a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx index cc17c4fbdc..06e6da8539 100644 --- a/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx +++ b/packages/smarthr-ui/src/components/Table/ThCheckbox.tsx @@ -1,13 +1,12 @@ import React, { ComponentProps, forwardRef, useMemo } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType } from '../../hooks/useDecorators' import { Balloon } from '../Balloon' import { CheckBox, Props as CheckBoxProps } from '../CheckBox' import { Th } from './Th' -import type { DecoratorsType } from '../../types' - type Props = { decorators?: DecoratorsType<'checkAllInvisibleLabel'> & { checkColumnName?: (text: string) => string diff --git a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx index 5356e5163c..bca1828f4c 100644 --- a/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx +++ b/packages/smarthr-ui/src/components/Text/RangeSeparator.tsx @@ -1,9 +1,8 @@ import React, { useMemo } from 'react' +import { type DecoratorType, type DecoratorsType } from '../../hooks/useDecorators' import { VisuallyHiddenText } from '../VisuallyHiddenText' -import type { DecoratorType, DecoratorsType } from '../../types' - type Props = { decorators?: DecoratorsType<'text' | 'visuallyHiddenText'> } diff --git a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx index 9446a033d2..0496a97bb2 100644 --- a/packages/smarthr-ui/src/components/Textarea/Textarea.tsx +++ b/packages/smarthr-ui/src/components/Textarea/Textarea.tsx @@ -16,13 +16,12 @@ import React, { } from 'react' import { tv } from 'tailwind-variants' +import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators' import { debounce } from '../../libs/debounce' import { lineHeight } from '../../themes' import { defaultHtmlFontSize } from '../../themes/createFontSize' import { VisuallyHiddenText } from '../VisuallyHiddenText' -import type { DecoratorsType } from '../../types' - type Props = { /** 入力値にエラーがあるかどうか */ error?: boolean @@ -39,13 +38,7 @@ type Props = { /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */ maxLetters?: number /** コンポーネント内の文言を変更するための関数を設定 */ - decorators?: DecoratorsType< - | 'beforeMaxLettersCount' - | 'afterMaxLettersCount' - | 'afterMaxLettersCountExceeded' - | 'beforeScreenReaderMaxLettersDescription' - | 'afterScreenReaderMaxLettersDescription' - > + decorators?: DecoratorsType /** * @deprecated placeholder属性は非推奨です。別途ヒント用要素の設置を検討してください。 */ @@ -66,12 +59,14 @@ const getStringLength = (value: string | number | readonly string[]) => { return formattedValue.length - (formattedValue.match(surrogatePairs) || []).length } -const TEXT_BEFORE_MAXLETTERS_COUNT = 'あと' -const TEXT_AFTER_MAXLETTERS_COUNT = '文字' -const TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED = 'オーバー' - -const SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION = '最大' -const SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION = '文字入力できます' +const DECORATOR_DEFAULT_TEXTS = { + beforeMaxLettersCount: 'あと', + afterMaxLettersCount: '文字', + afterMaxLettersCountExceeded: 'オーバー', + beforeScreenReaderMaxLettersDescription: '最大', + afterScreenReaderMaxLettersDescription: '文字入力できます', +} as const +type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS const textarea = tv({ slots: { @@ -141,34 +136,7 @@ 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?.(TEXT_BEFORE_MAXLETTERS_COUNT) || - TEXT_BEFORE_MAXLETTERS_COUNT, - afterMaxLettersCount: - decorators?.afterMaxLettersCount?.(TEXT_AFTER_MAXLETTERS_COUNT) || - TEXT_AFTER_MAXLETTERS_COUNT, - maxLettersCountExceeded: - decorators?.afterMaxLettersCountExceeded?.(TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED) || - TEXT_AFTER_MAXLETTERS_COUNT_EXCEEDED, - beforeScreenReaderMaxLettersDescription: - decorators?.beforeScreenReaderMaxLettersDescription?.( - SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION, - ) || SCREEN_READER_BEFORE_MAXLETTERS_DESCRIPTION, - afterScreenReaderMaxLettersDescription: - decorators?.afterScreenReaderMaxLettersDescription?.( - SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION, - ) || SCREEN_READER_AFTER_MAXLETTERS_DESCRIPTION, - }), - [decorators], - ) + const decorated = useDecorators(DECORATOR_DEFAULT_TEXTS, decorators) const getCounterMessage = useCallback( (counterValue: number) => { @@ -179,8 +147,8 @@ export const Textarea = forwardRef( return ( <> {counterValue - maxLetters} - {afterMaxLettersCount} - {maxLettersCountExceeded} + {decorated.afterMaxLettersCount} + {decorated.afterMaxLettersCountExceeded} ) } @@ -188,13 +156,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]) @@ -319,9 +292,9 @@ export const Textarea = forwardRef( {srCounterMessage} - {beforeScreenReaderMaxLettersDescription} + {decorated.beforeScreenReaderMaxLettersDescription} {maxLetters} - {afterScreenReaderMaxLettersDescription} + {decorated.afterScreenReaderMaxLettersDescription} ) : ( diff --git a/packages/smarthr-ui/src/components/Textarea/stories/Textarea.stories.tsx b/packages/smarthr-ui/src/components/Textarea/stories/Textarea.stories.tsx index 3de94e8e5d..f23bd63e53 100644 --- a/packages/smarthr-ui/src/components/Textarea/stories/Textarea.stories.tsx +++ b/packages/smarthr-ui/src/components/Textarea/stories/Textarea.stories.tsx @@ -85,6 +85,29 @@ export const MaxLetters: StoryObj = { }, } +export const Decorators: StoryObj = { + name: 'decorators', + args: { + decorators: { + beforeMaxLettersCount: (org) => <>beforeMaxLettersCount({org}), + afterMaxLettersCount: (org) => <>afterMaxLettersCount({org}), + afterMaxLettersCountExceeded: (org) => <>afterMaxLettersCountExceeded({org}), + beforeScreenReaderMaxLettersDescription: (org) => ( + <>beforeScreenReaderMaxLettersDescription({org}) + ), + afterScreenReaderMaxLettersDescription: (org) => ( + <>afterScreenReaderMaxLettersDescription({org}) + ), + }, + }, + render: (args) => ( + <> +