feat: Step つき FormDialog の実装 #4972
Conversation
commit: |
| onSubmit={(closeDialog, e, step) => { | ||
| action('executed')() | ||
| setResponseMessage(undefined) | ||
| if (step && step === 2) { | ||
| closeDialog() | ||
| } | ||
| }} |
There was a problem hiding this comment.
もやポイント1
closeDialog の実行は FormDialog の使用する側なので、使用する側で最後のページかのチェックをする必要があります！
| title={steppable ? `${title}${titleSuffix}` : title} | ||
| titleId={titleId} | ||
| subtitle={subtitle} | ||
| titleTag={titleTag} | ||
| contentBgColor={contentBgColor} | ||
| contentPadding={contentPadding} | ||
| actionText={actionText} | ||
| actionText={steppable ? getActionText(actionText) : actionText} | ||
| actionTheme={actionTheme} | ||
| actionDisabled={actionDisabled} | ||
| closeDisabled={closeDisabled} | ||
| subActionArea={subActionArea} | ||
| subActionArea={steppable ? renderSubActionButton() : subActionArea} | ||
| onClickClose={handleClickClose} | ||
| onSubmit={handleSubmitAction} | ||
| responseMessage={responseMessage} | ||
| decorators={decorators} | ||
| steppable={steppable} | ||
| > | ||
| {children} | ||
| {steppable ? childrenSteps[activeStep] : children} |
There was a problem hiding this comment.
もやポイント2？
props 渡す箇所で三項演算子書き過ぎかもなぁと考えています！
There was a problem hiding this comment.
steppable が false のときでも actionText は actionText={getActionText(actionText)} としても動くから、まとめてしまっても良いかも？（stepが1個しか無いとして扱える）
There was a problem hiding this comment.
useStepDialog に hasStep を渡してあげて、hooks 内で同じ条件をかけばいけるんですけど、通常 FormDialog の actionText ロジックをカスタムフックス内で持っちゃうとわかりにくくなっちゃうかな〜と思ってきました！
|
|
||
| import { FocusTrapRef } from './FocusTrap' | ||
|
|
||
| const NEXT_BUTTON_LABEL = '次へ' |
There was a problem hiding this comment.
聞きたいポイント
次へのラベルは変えることがなさそうと思ったのですが、変更している例があれば教えてほしいです 🙏
There was a problem hiding this comment.
submit のボタンテキストは props.actionText で定義されているのに対して戻るボタンは props.decorators.closeButtonLabel() で渡せるようになっているので次へテキストをどうわたせるようにするか迷っています
schktjm
requested review from
s-sasaki-0529,
hiroki0525 and
masuP9
and removed request for
a team
| */ | ||
| onSubmit: (closeDialog: () => void, e: FormEvent<HTMLFormElement>, activeStep?: number) => void | ||
| /** Stepつきダイアログか否か */ | ||
| steppable?: boolean |
There was a problem hiding this comment.
[IMO] Step可能かどうか（steppable）、というより、Stepがあるかどうか（isSteps）、もしくはStepを持っているかどうか（hasSteps）の方が良さそうに思いました（hasSteps推し）
There was a problem hiding this comment.
steppable がひと単語で直感的に気に入りつつも、誤字ですか？って怒られ続けたのでたしかに Stepを持っているかとかのようが良い気がしました！
| getActionText, | ||
| handleNextSteps, | ||
| renderSubActionButton, | ||
| } = useStepDialog(children) |
There was a problem hiding this comment.
[nits]
今から根本から作り変えることになってしまいますし、今のコードでもちゃんと動いていそうなのでnits程度にとどめておくのですが、 FormDialog とは別のコンポーネントに切り出すのが良いのかなぁ...と思いました。
理由としては次の感じです。
- コンポーネントのインターフェースがちょっと特殊
- propsが
hasStep:true の場合のみ、次のページ数のようにステップ付きかどうかで関数に渡される引数が変わる - 暗黙的に各ステップとして
Dialogの子コンポーネントを下記のように配置されることが利用者側に要求される
- propsが
<FormDialog>
// これは一個目のステップ
<Hoge />
// これは二個目のステップ
<Fuga />
</FormDialog>- ステップ付きダイアログ専用のロジックが混入する
- 特に
useStepDialogのロジックもhasStepを使わない場合は不要なhooksになってしまう。
- 特に
There was a problem hiding this comment.
レビューありがとうございますー！全然アリだと思います！
定例で相談したとき、簡単に書けそうだったら FormDialog に hasStep 生やす程度でできたら嬉しいということを聞いたんですが、もやポイントに書いた通り onClose の発火タイミングを使用している側で調整したりする必要があったりで複雑そうな雰囲気があったので！
|
[Q] |
|
Form が数 step 分重なっているという認識だったので各 step ごとに onSubmit でもいいかな〜と思ったのですが、最後に処理を投げるという目線で見ると onSubmit は完了時だけのほうが良さそうですね！ |
関連URL
asana: https://app.asana.com/0/1206535203416259/1208178713972396/f
イメージ図: https://kufuinc.slack.com/archives/CGC58MW01/p1725506017398559?thread_ts=1725505216.026419&cid=CGC58MW01
概要
FormDialog に
steppable="true"を渡すことで、ステップ付きダイアログを使えるようにします。イメージ図
Step つきダイアログで実現したいこと
変更内容
<FocusTrap>にフォーカスが当たるように、 ref のフォワーディングをしたsteppable: booleanの props を追加useStepDialog.tsxを新規作成確認方法
storybook の Form Dialog With Steps の動作確認をお願いします！
http://localhost:6006/?path=/story/dialog%EF%BC%88%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%EF%BC%89-dialog--form-dialog-with-step