{"version":3,"file":"StepFormDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledStepFormDialog/StepFormDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { Button } from '../../Button'\nimport { Cluster, Stack } from '../../Layout'\nimport { Section } from '../../SectioningContent'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogContentResponseStatusMessage } from '../DialogContentResponseStatusMessage'\nimport { DialogHeading, type Props as DialogHeadingProps } from '../DialogHeading'\nimport { dialogContentInner } from '../dialogInnerStyle'\n\nimport { StepFormDialogContext, type StepItem } from './StepFormDialogProvider'\n\nimport type { useStepFormDialogButton } from './useStepFormDialogButton'\n\ntype StepFormHelpers = {\n  /** 指定したステップに移動する関数 */\n  goto: (nextStep: StepItem) => void\n  /** ダイアログを閉じる関数 */\n  close: () => void\n  /** 現在のステップ情報 */\n  currentStep: StepItem\n}\n\ntype CommonButtonType = ReturnType<typeof useStepFormDialogButton>\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** 現在のStepNo */\n    activeStep: number\n    /** submitボタン */\n    submitButton: CommonButtonType\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e フォームイベント\n     * @param helpers ステップ操作用のヘルパー関数群\n     */\n    onSubmit: (e: FormEvent<HTMLFormElement>, helpers: StepFormHelpers) => void\n    /** キャンセルボタン */\n    closeButton: CommonButtonType\n    /** 戻るボタン */\n    backButton: CommonButtonType\n  }\n>\n\nexport type StepFormDialogContentInnerProps = AbstractProps & {\n  firstStep: StepItem\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n  /** ステップの総数 */\n  stepLength: number\n  onClickBack?: () => void\n}\n\nconst BUTTON_COLUMN_GAP = {\n  row: 0.5,\n  column: 1,\n} as const\n\nexport const StepFormDialogContentInner: FC<StepFormDialogContentInnerProps> = ({\n  children,\n  heading,\n  activeStep,\n  contentBgColor,\n  contentPadding,\n  submitButton,\n  closeButton,\n  backButton,\n  stepLength,\n  firstStep,\n  onSubmit,\n  onClickClose,\n  responseStatus,\n  onClickBack,\n}) => {\n  const { currentStep, stepQueue, setCurrentStep, scrollerRef } = useContext(StepFormDialogContext)\n\n  const handleCloseAction = useCallback(() => {\n    onClickClose()\n    setTimeout(() => {\n      // HINT: ダイアログが閉じるtransitionが完了してから初期化をしている\n      stepQueue.current = []\n      setCurrentStep(firstStep)\n    }, 300)\n  }, [firstStep, stepQueue, setCurrentStep, onClickClose])\n\n  const changeCurrentStep = useCallback(\n    (step: Parameters<typeof setCurrentStep>[0]) => {\n      setCurrentStep(step)\n\n      // HINT: stepが切り替わるごとにbodyのscroll位置を先頭に戻す処理\n      if (scrollerRef.current) {\n        scrollerRef.current.scroll(0, 0)\n      }\n    },\n    [setCurrentStep, scrollerRef],\n  )\n\n  const handleSubmitAction = useCallback(\n    (e: FormEvent<HTMLFormElement>) => {\n      e.preventDefault()\n      // HINT: React Potals などで擬似的にformがネストしている場合など、stopPropagationを実行しないと\n      // 親formが意図せずsubmitされてしまう場合がある\n      e.stopPropagation()\n\n      const helpers: StepFormHelpers = {\n        goto: (nextStep: StepItem) => {\n          stepQueue.current.push(currentStep)\n          changeCurrentStep(nextStep)\n        },\n        close: handleCloseAction,\n        currentStep,\n      }\n\n      onSubmit(e, helpers)\n    },\n    [currentStep, stepQueue, onSubmit, handleCloseAction, changeCurrentStep],\n  )\n  const handleBackAction = useCallback(() => {\n    onClickBack?.()\n\n    changeCurrentStep(stepQueue.current.pop() ?? firstStep)\n  }, [firstStep, stepQueue, onClickBack, changeCurrentStep])\n\n  const classNames = useMemo(() => {\n    const { wrapper, actionArea, buttonArea, message } = dialogContentInner()\n\n    return {\n      wrapper: wrapper(),\n      actionArea: actionArea(),\n      buttonArea: buttonArea(),\n      message: message(),\n    }\n  }, [])\n\n  const stepText = stepLength > 1 ? `（${activeStep}/${stepLength}）` : ''\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  return (\n    // eslint-disable-next-line smarthr/a11y-prohibit-sectioning-content-in-form\n    <Section>\n      <form onSubmit={handleSubmitAction}>\n        <div className={classNames.wrapper}>\n          <DialogHeading\n            id={heading.id}\n            sub={heading.sub ? `${heading.sub}${stepText}` : undefined}\n            text={heading.sub ? heading.text : `${heading.text}${stepText}`}\n          />\n          <DialogBody\n            contentPadding={contentPadding}\n            contentBgColor={contentBgColor}\n            ref={scrollerRef}\n          >\n            {children}\n          </DialogBody>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster justify=\"space-between\" gap={{ row: 0.5, column: 2 }}>\n              {!backButton.hidden && activeStep > 1 && (\n                <Button\n                  onClick={handleBackAction}\n                  variant={backButton.theme}\n                  disabled={backButton.disabled || calcedResponseStatus.isProcessing}\n                  className=\"smarthr-ui-Dialog-backButton\"\n                >\n                  {backButton.text}\n                </Button>\n              )}\n              <Cluster gap={BUTTON_COLUMN_GAP} className={classNames.buttonArea}>\n                {!closeButton.hidden && (\n                  <Button\n                    onClick={handleCloseAction}\n                    variant={closeButton.theme}\n                    disabled={closeButton.disabled || calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-closeButton\"\n                  >\n                    {closeButton.text}\n                  </Button>\n                )}\n                {!submitButton.hidden && (\n                  <Button\n                    type=\"submit\"\n                    variant={submitButton.theme}\n                    disabled={submitButton.disabled}\n                    loading={calcedResponseStatus.isProcessing}\n                    className=\"smarthr-ui-Dialog-actionButton\"\n                  >\n                    {submitButton.text}\n                  </Button>\n                )}\n              </Cluster>\n            </Cluster>\n            <DialogContentResponseStatusMessage\n              responseStatus={calcedResponseStatus}\n              className={classNames.message}\n            />\n          </Stack>\n        </div>\n      </form>\n    </Section>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiEA;AACE;AACA;;AAGK;AAgBL;AAEA;AACE;;;AAGE;;;;AAKJ;;;AAKI;;;AAGF;AAIF;;;;;AAOI;AACE;AACE;;;AAGF;;;AAIF;AACF;AAGF;;;;AAMA;AACE;;;;;;;;AAUF;AAEA;;;AAIE;AA4DJ;;"}