From afe704887bf15eb65bc1f5a899659ba063f611e4 Mon Sep 17 00:00:00 2001 From: schktjm Date: Wed, 2 Oct 2024 19:50:44 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20FocusTrap=20=E3=82=92=E4=BB=BB?= =?UTF-8?q?=E6=84=8F=E3=81=AE=E3=82=BF=E3=82=A4=E3=83=9F=E3=83=B3=E3=82=B0?= =?UTF-8?q?=E3=81=A7=20focus=20=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=20ref=20=E3=81=AE=E3=83=95=E3=82=A9=E3=83=AF?= =?UTF-8?q?=E3=83=BC=E3=83=87=E3=82=A3=E3=83=B3=E3=82=B0=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Dialog/FocusTrap.tsx | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dialog/FocusTrap.tsx b/packages/smarthr-ui/src/components/Dialog/FocusTrap.tsx index eaae6c7197..3f1f41b5ef 100644 --- a/packages/smarthr-ui/src/components/Dialog/FocusTrap.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FocusTrap.tsx @@ -1,4 +1,12 @@ -import React, { FC, PropsWithChildren, RefObject, useCallback, useEffect, useRef } from 'react' +import React, { + PropsWithChildren, + RefObject, + forwardRef, + useCallback, + useEffect, + useImperativeHandle, + useRef, +} from 'react' import { tabbable } from '../../libs/tabbable' @@ -6,15 +14,29 @@ type Props = PropsWithChildren<{ firstFocusTarget?: RefObject }> -export const FocusTrap: FC = ({ firstFocusTarget, children }) => { - const ref = useRef(null) +export type FocusTrapRef = { + focus: () => void +} + +export const FocusTrap = forwardRef(({ firstFocusTarget, children }, ref) => { + const innerRef = useRef(null) const dummyFocusRef = useRef(null) + useImperativeHandle(ref, () => ({ + focus: () => { + if (firstFocusTarget?.current) { + firstFocusTarget.current.focus() + } else { + dummyFocusRef.current?.focus() + } + }, + })) + const handleKeyDown = useCallback((e: KeyboardEvent) => { - if (e.key !== 'Tab' || ref.current === null) { + if (e.key !== 'Tab' || innerRef.current === null) { return } - const tabbables = tabbable(ref.current).filter((elm) => elm.tabIndex >= 0) + const tabbables = tabbable(innerRef.current).filter((elm) => elm.tabIndex >= 0) if (tabbables.length === 0) { return } @@ -57,10 +79,10 @@ export const FocusTrap: FC = ({ firstFocusTarget, children }) => { }, [firstFocusTarget]) return ( -
+
{/* dummy element for focus management. */}
{children}
) -} +}) From 13cda5f73c66b3cf0e991d7f47732f0fa6d46d98 Mon Sep 17 00:00:00 2001 From: schktjm Date: Wed, 2 Oct 2024 19:53:03 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20steppable=20=E3=81=AA=20FormDialog?= =?UTF-8?q?=20=E7=94=A8=E3=81=AE=E5=AE=9F=E8=A3=85=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Dialog/DialogContentInner.tsx | 11 +++- .../Dialog/FormDialog/FormDialog.tsx | 29 +++++++-- .../FormDialog/FormDialogContentInner.tsx | 9 ++- .../src/components/Dialog/useStepDialog.tsx | 61 +++++++++++++++++++ 4 files changed, 101 insertions(+), 9 deletions(-) create mode 100644 packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx diff --git a/packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx index 005483cd9f..65c65e456c 100644 --- a/packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx @@ -12,7 +12,7 @@ import { tv } from 'tailwind-variants' import { useHandleEscape } from '../../hooks/useHandleEscape' import { DialogOverlap } from './DialogOverlap' -import { FocusTrap } from './FocusTrap' +import { FocusTrap, FocusTrapRef } from './FocusTrap' import { useBodyScrollLock } from './useBodyScrollLock' export type DialogContentInnerProps = PropsWithChildren<{ @@ -49,6 +49,10 @@ export type DialogContentInnerProps = PropsWithChildren<{ * ダイアログの `aria-labelledby` */ ariaLabelledby?: string + /** + * ダイアログトップのフォーカストラップへの ref + */ + focusTrapRef?: RefObject }> type ElementProps = Omit, keyof DialogContentInnerProps> @@ -77,6 +81,7 @@ export const DialogContentInner: FC = ({ ariaLabelledby, children, className, + focusTrapRef, ...rest }) => { const { layoutStyleProps, innerStyle, backgroundStyle } = useMemo(() => { @@ -127,7 +132,9 @@ export const DialogContentInner: FC = ({ aria-modal="true" className={innerStyle} > - {children} + + {children} +
diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx index 40a2c8eccb..abc5c8d18d 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx @@ -3,6 +3,7 @@ import React, { ComponentProps, FormEvent, useCallback, useId } from 'react' import { DialogContentInner } from '../DialogContentInner' import { DialogProps } from '../types' import { useDialogPortal } from '../useDialogPortal' +import { useStepDialog } from '../useStepDialog' import { FormDialogContentInner, FormDialogContentInnerProps } from './FormDialogContentInner' @@ -29,10 +30,20 @@ export const FormDialog: React.FC = ({ portalParent, decorators, id, + steppable, ...props }) => { const { createPortal } = useDialogPortal(portalParent, id) const titleId = useId() + const { + titleSuffix, + focusTrapRef, + childrenSteps, + activeStep, + getActionText, + handleNextSteps, + renderSubActionButton, + } = useStepDialog(children) const handleClickClose = useCallback(() => { if (!props.isOpen) { @@ -47,9 +58,13 @@ export const FormDialog: React.FC = ({ return } - onSubmit(close, e) + if (steppable) { + handleNextSteps() + } + + onSubmit(close, e, activeStep) }, - [onSubmit, props.isOpen], + [onSubmit, props.isOpen, steppable, handleNextSteps, activeStep], ) return createPortal( @@ -58,26 +73,28 @@ export const FormDialog: React.FC = ({ ariaLabelledby={titleId} className={className} onPressEscape={onPressEscape} + focusTrapRef={focusTrapRef} > {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */} - {children} + {steppable ? childrenSteps[activeStep] : children} , ) diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx index 4d6398d687..24441b1706 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx @@ -26,8 +26,13 @@ export type BaseProps = PropsWithChildren< /** * アクションボタンをクリックした時に発火するコールバック関数 * @param closeDialog ダイアログを閉じる関数 + * @param activeStep steppable:true の場合のみ、次のページ数 */ - onSubmit: (closeDialog: () => void, e: FormEvent) => void + onSubmit: ( + closeDialog: () => void, + e: FormEvent, + activeStep?: number, + ) => void /** アクションボタンを無効にするかどうか */ actionDisabled?: boolean /** 閉じるボタンを無効にするかどうか */ @@ -36,6 +41,8 @@ export type BaseProps = PropsWithChildren< subActionArea?: ReactNode /** コンポーネント内の文言を変更するための関数を設定 */ decorators?: DecoratorsType<'closeButtonLabel'> + /** Stepつきダイアログか否か */ + steppable?: boolean } > diff --git a/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx b/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx new file mode 100644 index 0000000000..aa485e8a53 --- /dev/null +++ b/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx @@ -0,0 +1,61 @@ +import React, { Children, ReactNode, useCallback, useMemo, useRef, useState } from 'react' + +import { Button } from '../Button' + +import { FocusTrapRef } from './FocusTrap' + +const NEXT_BUTTON_LABEL = '次へ' + +export const useStepDialog = (children: ReactNode) => { + const [activeStep, setActiveStep] = useState(0) + const focusTrapRef = useRef(null) + + const childrenSteps = useMemo(() => { + const steps: ReactNode[] = [] + Children.map(children, (child) => { + steps.push(child) + }) + return steps + }, [children]) + + const getActionText = (submitActionText: ReactNode) => + activeStep < childrenSteps.length - 1 ? NEXT_BUTTON_LABEL : submitActionText + + const handleNextSteps = useCallback(() => { + if (activeStep + 1 === childrenSteps.length) { + setActiveStep(0) + return + } + focusTrapRef.current?.focus() + setActiveStep((pre) => pre + 1) + }, [activeStep, childrenSteps]) + + const handleBackSteps = useCallback(() => { + if (activeStep > 0) { + focusTrapRef.current?.focus() + setActiveStep((pre) => pre - 1) + } + }, [activeStep]) + + const renderSubActionButton = useCallback(() => { + if (activeStep === 0) { + return null + } + return + }, [activeStep, handleBackSteps]) + + const titleSuffix = useMemo( + () => ` (${activeStep + 1}/${childrenSteps.length})`, + [activeStep, childrenSteps], + ) + + return { + focusTrapRef, + activeStep, + childrenSteps, + titleSuffix, + getActionText, + handleNextSteps, + renderSubActionButton, + } +} From bd4424ee9ecb626a3faa2e690db14159c08df3f8 Mon Sep 17 00:00:00 2001 From: schktjm Date: Wed, 2 Oct 2024 19:54:13 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20Step=20=E3=81=A4=E3=81=8D=20FormDia?= =?UTF-8?q?log=20=E3=81=AE=20story=20=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Dialog/Dialog.stories.tsx | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx index c5b3c21fd4..022ef01b57 100644 --- a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx +++ b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx @@ -4,6 +4,7 @@ import React, { ComponentProps, useRef, useState } from 'react' import styled, { css } from 'styled-components' import { Button } from '../Button' +import { CheckBox } from '../CheckBox' import { DatePicker } from '../DatePicker' import { Fieldset } from '../Fieldset' import { FormControl } from '../FormControl' @@ -312,6 +313,101 @@ Form_Dialog.parameters = { }, } +export const Form_Dialog_With_Step: StoryFn = () => { + const [openedDialog, setOpenedDialog] = useState<'normal' | 'opened' | null>(null) + const [value, setValue] = React.useState('Apple') + const [responseMessage, setResponseMessage] = + useState['responseMessage']>() + const onClickClose = () => { + setOpenedDialog(null) + setResponseMessage(undefined) + } + const onChange = (e: React.ChangeEvent) => setValue(e.currentTarget.name) + + return ( + + + `cancel.(${txt})` }} + onSubmit={(closeDialog, e, step) => { + action('executed')() + setResponseMessage(undefined) + if (step && step === 2) { + closeDialog() + } + }} + onClickClose={onClickClose} + responseMessage={responseMessage} + id="dialog-form" + data-test="form-dialog-content" + width="40em" + steppable={true} + > +
+ +
  • + + Apple + +
    • +
  • + + Orange + +
    • +
  • + + Grape + +
    • +     +
    + + + +
    +
      +
    • + CheckBox +
      • + +
    • + + CheckBox / error + +
      • + +
    • + + CheckBox / disabled + +
      • +
    +
    +     +     + ) +} + +Form_Dialog_With_Step.parameters = { + docs: { + description: { + story: '`FormDialog with step` is a form dialog that can be divided into multiple steps.', + }, + }, +} + export const Remote_Trigger_Form_Dialog: StoryFn = () => ( <>
    From a812f1580cabcda722e0c9555865f960f846639e Mon Sep 17 00:00:00 2001 From: schktjm Date: Wed, 2 Oct 2024 20:14:53 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20FormDialogInner=20=E3=81=AB?= =?UTF-8?q?=E5=BF=85=E8=A6=81=E3=81=AA=E3=81=84=20props=20=E6=8B=A1?= =?UTF-8?q?=E5=BC=B5=E3=82=92=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Dialog/FormDialog/FormDialog.tsx | 13 +++++++++++-- .../Dialog/FormDialog/FormDialogContentInner.tsx | 9 +-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx index abc5c8d18d..7e45d47ad6 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx @@ -7,7 +7,17 @@ import { useStepDialog } from '../useStepDialog' import { FormDialogContentInner, FormDialogContentInnerProps } from './FormDialogContentInner' -type Props = Omit & DialogProps +type Props = Omit & + DialogProps & { + /** + * アクションボタンをクリックした時に発火するコールバック関数 + * @param closeDialog ダイアログを閉じる関数 + * @param activeStep steppable:true の場合のみ、次のページ数 + */ + onSubmit: (closeDialog: () => void, e: FormEvent, activeStep?: number) => void + /** Stepつきダイアログか否か */ + steppable?: boolean + } type ElementProps = Omit, keyof Props> export const FormDialog: React.FC = ({ @@ -92,7 +102,6 @@ export const FormDialog: React.FC = ({ onSubmit={handleSubmitAction} responseMessage={responseMessage} decorators={decorators} - steppable={steppable} > {steppable ? childrenSteps[activeStep] : children} diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx index 24441b1706..4d6398d687 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx @@ -26,13 +26,8 @@ export type BaseProps = PropsWithChildren< /** * アクションボタンをクリックした時に発火するコールバック関数 * @param closeDialog ダイアログを閉じる関数 - * @param activeStep steppable:true の場合のみ、次のページ数 */ - onSubmit: ( - closeDialog: () => void, - e: FormEvent, - activeStep?: number, - ) => void + onSubmit: (closeDialog: () => void, e: FormEvent) => void /** アクションボタンを無効にするかどうか */ actionDisabled?: boolean /** 閉じるボタンを無効にするかどうか */ @@ -41,8 +36,6 @@ export type BaseProps = PropsWithChildren< subActionArea?: ReactNode /** コンポーネント内の文言を変更するための関数を設定 */ decorators?: DecoratorsType<'closeButtonLabel'> - /** Stepつきダイアログか否か */ - steppable?: boolean } > From 653fd5af5c6860e9161e764b41e96b8963a8f7ea Mon Sep 17 00:00:00 2001 From: schktjm Date: Mon, 7 Oct 2024 14:57:57 +0900 Subject: [PATCH 5/7] refactor: steppable -> hasStep --- .../src/components/Dialog/Dialog.stories.tsx | 2 +- .../Dialog/FormDialog/FormDialog.tsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx index 022ef01b57..93e7d2958e 100644 --- a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx +++ b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx @@ -352,7 +352,7 @@ export const Form_Dialog_With_Step: StoryFn = () => { id="dialog-form" data-test="form-dialog-content" width="40em" - steppable={true} + hasStep={true} >
    diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx index 7e45d47ad6..455203dd07 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx @@ -12,11 +12,11 @@ type Props = Omit & /** * アクションボタンをクリックした時に発火するコールバック関数 * @param closeDialog ダイアログを閉じる関数 - * @param activeStep steppable:true の場合のみ、次のページ数 + * @param activeStep hasStep:true の場合のみ、次のページ数 */ onSubmit: (closeDialog: () => void, e: FormEvent, activeStep?: number) => void /** Stepつきダイアログか否か */ - steppable?: boolean + hasStep?: boolean } type ElementProps = Omit, keyof Props> @@ -40,7 +40,7 @@ export const FormDialog: React.FC = ({ portalParent, decorators, id, - steppable, + hasStep, ...props }) => { const { createPortal } = useDialogPortal(portalParent, id) @@ -68,13 +68,13 @@ export const FormDialog: React.FC = ({ return } - if (steppable) { + if (hasStep) { handleNextSteps() } onSubmit(close, e, activeStep) }, - [onSubmit, props.isOpen, steppable, handleNextSteps, activeStep], + [onSubmit, props.isOpen, hasStep, handleNextSteps, activeStep], ) return createPortal( @@ -87,23 +87,23 @@ export const FormDialog: React.FC = ({ > {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */} - {steppable ? childrenSteps[activeStep] : children} + {hasStep ? childrenSteps[activeStep] : children} , ) From 0c6e6ef5a12034062be3a0d34489632133aa926a Mon Sep 17 00:00:00 2001 From: schktjm Date: Mon, 7 Oct 2024 18:27:57 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=E6=AC=A1=E3=81=B8=E3=83=A9?= =?UTF-8?q?=E3=83=99=E3=83=AB=E3=82=92props=E3=81=A7=E6=B8=A1=E3=81=9B?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Dialog/Dialog.stories.tsx | 2 +- .../src/components/Dialog/FormDialog/FormDialog.tsx | 2 +- .../Dialog/FormDialog/FormDialogContentInner.tsx | 2 +- .../src/components/Dialog/useStepDialog.tsx | 12 ++++++++++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx index 93e7d2958e..70945b21a1 100644 --- a/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx +++ b/packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx @@ -339,7 +339,7 @@ export const Form_Dialog_With_Step: StoryFn = () => { title="FormDialog" subtitle="副題" actionText="保存" - decorators={{ closeButtonLabel: (txt) => `cancel.(${txt})` }} + decorators={{ closeButtonLabel: () => '閉じる', nextButtonLabel: () => 'Next' }} onSubmit={(closeDialog, e, step) => { action('executed')() setResponseMessage(undefined) diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx index 455203dd07..c3a176834c 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx @@ -93,7 +93,7 @@ export const FormDialog: React.FC = ({ titleTag={titleTag} contentBgColor={contentBgColor} contentPadding={contentPadding} - actionText={hasStep ? getActionText(actionText) : actionText} + actionText={hasStep ? getActionText(actionText, decorators?.nextButtonLabel) : actionText} actionTheme={actionTheme} actionDisabled={actionDisabled} closeDisabled={closeDisabled} diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx index 4d6398d687..122885c084 100644 --- a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx +++ b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx @@ -35,7 +35,7 @@ export type BaseProps = PropsWithChildren< /** ダイアログフッターの左端操作領域 */ subActionArea?: ReactNode /** コンポーネント内の文言を変更するための関数を設定 */ - decorators?: DecoratorsType<'closeButtonLabel'> + decorators?: DecoratorsType<'closeButtonLabel' | 'nextButtonLabel'> } > diff --git a/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx b/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx index aa485e8a53..7120cc7be8 100644 --- a/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx @@ -18,8 +18,16 @@ export const useStepDialog = (children: ReactNode) => { return steps }, [children]) - const getActionText = (submitActionText: ReactNode) => - activeStep < childrenSteps.length - 1 ? NEXT_BUTTON_LABEL : submitActionText + /** nextButtonLabel の型は DecoratorType に合わせている */ + const getActionText = ( + submitActionText: ReactNode, + nextButtonLabel?: (text: string) => ReactNode, + ) => + activeStep < childrenSteps.length - 1 + ? nextButtonLabel + ? nextButtonLabel(NEXT_BUTTON_LABEL) + : NEXT_BUTTON_LABEL + : submitActionText const handleNextSteps = useCallback(() => { if (activeStep + 1 === childrenSteps.length) { From 846cd41fe246643b887ec9f61f702745546c2284 Mon Sep 17 00:00:00 2001 From: schktjm Date: Tue, 8 Oct 2024 13:12:43 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20DecoratorType=20=E3=82=92?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../smarthr-ui/src/components/Dialog/useStepDialog.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx b/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx index 7120cc7be8..5eb89d2ec4 100644 --- a/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx +++ b/packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx @@ -4,6 +4,8 @@ import { Button } from '../Button' import { FocusTrapRef } from './FocusTrap' +import type { DecoratorType } from '../../types' + const NEXT_BUTTON_LABEL = '次へ' export const useStepDialog = (children: ReactNode) => { @@ -18,11 +20,7 @@ export const useStepDialog = (children: ReactNode) => { return steps }, [children]) - /** nextButtonLabel の型は DecoratorType に合わせている */ - const getActionText = ( - submitActionText: ReactNode, - nextButtonLabel?: (text: string) => ReactNode, - ) => + const getActionText = (submitActionText: ReactNode, nextButtonLabel?: DecoratorType) => activeStep < childrenSteps.length - 1 ? nextButtonLabel ? nextButtonLabel(NEXT_BUTTON_LABEL)