{"version":3,"file":"ActionDialogContentInner.cjs","sources":["../../../../src/components/Dialog/ControlledActionDialog/ActionDialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\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\nexport type ActionDialogHelpers = {\n  close: () => void\n}\n\nexport type AbstractProps = PropsWithChildren<\n  DialogBodyProps & {\n    /** ダイアログタイトル */\n    heading: DialogHeadingProps\n    /** アクションボタンのラベル */\n    actionText: ReactNode\n    /** アクションボタンのスタイル */\n    actionTheme?: 'primary' | 'secondary' | 'danger'\n    /**\n     * アクションボタンをクリックした時に発火するコールバック関数\n     * @param e マウスイベント\n     * @param helpers ダイアログ操作のためのヘルパー関数\n     */\n    onClickAction: (e: MouseEvent<Element>, helpers: ActionDialogHelpers) => void\n    /** アクションボタンを無効にするかどうか */\n    actionDisabled?: boolean\n    /** 閉じるボタンを無効にするかどうか */\n    closeDisabled?: boolean\n    /** ダイアログフッターの左端操作領域 */\n    subActionArea?: ReactNode\n    /** コンポーネント内の文言を変更するための関数を設定 */\n    decorators?: DecoratorsType<'closeButtonLabel'>\n  }\n>\n\nexport type ActionDialogContentInnerProps = AbstractProps & {\n  onClickClose: () => void\n  responseStatus?: ResponseStatus\n}\n\nconst ACTION_AREA_CLUSTER_GAP = { row: 0.5, column: 1 } as const\n\nexport const ActionDialogContentInner: FC<ActionDialogContentInnerProps> = ({\n  children,\n  heading,\n  contentBgColor,\n  contentPadding,\n  actionText,\n  actionTheme,\n  onClickAction,\n  onClickClose,\n  responseStatus,\n  actionDisabled,\n  closeDisabled,\n  subActionArea,\n  decorators,\n}) => {\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const styles = 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  return (\n    <Section className={styles.wrapper}>\n      <DialogHeading {...heading} />\n      <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>\n        {children}\n      </DialogBody>\n      <Stack gap={0.5} className={styles.actionArea}>\n        <Cluster justify=\"space-between\">\n          {subActionArea}\n          <ActionAreaCluster\n            onClickClose={onClickClose}\n            onClickAction={onClickAction}\n            closeDisabled={closeDisabled}\n            actionDisabled={actionDisabled}\n            loading={calcedResponseStatus.isProcessing}\n            actionTheme={actionTheme}\n            decorators={decorators}\n            actionText={actionText}\n            className={styles.buttonArea}\n          />\n        </Cluster>\n        <DialogContentResponseStatusMessage\n          responseStatus={calcedResponseStatus}\n          className={styles.message}\n        />\n      </Stack>\n    </Section>\n  )\n}\n\nconst ActionAreaCluster = memo<\n  Pick<\n    ActionDialogContentInnerProps,\n    | 'onClickClose'\n    | 'onClickAction'\n    | 'closeDisabled'\n    | 'actionDisabled'\n    | 'actionTheme'\n    | 'decorators'\n    | 'actionText'\n  > & { loading: boolean; className: string }\n>(\n  ({\n    onClickClose,\n    onClickAction,\n    closeDisabled,\n    actionDisabled,\n    loading,\n    actionTheme,\n    decorators,\n    actionText,\n    className,\n  }) => {\n    const handleClickAction = useCallback(\n      (e: MouseEvent<Element>) => {\n        onClickAction(e, { close: onClickClose })\n      },\n      [onClickAction, onClickClose],\n    )\n\n    return (\n      <Cluster gap={ACTION_AREA_CLUSTER_GAP} className={className}>\n        <CloseButton\n          onClick={onClickClose}\n          disabled={closeDisabled || loading}\n          decorators={decorators}\n        />\n        <ActionButton\n          variant={actionTheme}\n          disabled={actionDisabled}\n          loading={loading}\n          onClick={handleClickAction}\n        >\n          {actionText}\n        </ActionButton>\n      </Cluster>\n    )\n  },\n)\n\nconst ActionButton = memo<\n  PropsWithChildren<{\n    variant: ActionDialogContentInnerProps['actionTheme']\n    disabled: ActionDialogContentInnerProps['actionDisabled']\n    loading: boolean\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void\n  }>\n>(({ variant = 'primary', disabled, loading, onClick, children }) => (\n  <Button\n    type=\"submit\"\n    variant={variant}\n    disabled={disabled}\n    loading={loading}\n    onClick={onClick}\n    className=\"smarthr-ui-Dialog-actionButton\"\n  >\n    {children}\n  </Button>\n))\n\nconst CloseButton = memo<\n  Pick<ActionDialogContentInnerProps, 'decorators'> & {\n    onClick: ActionDialogContentInnerProps['onClickClose']\n    disabled: boolean\n  }\n>(({ onClick, disabled, decorators }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      closeButtonLabel: localize({\n        id: 'smarthr-ui/ActionDialog/closeButtonLabel',\n        defaultText: 'キャンセル',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators(decoratorDefaultTexts, decorators)\n\n  return (\n    <Button onClick={onClick} disabled={disabled} className=\"smarthr-ui-Dialog-closeButton\">\n      {decorated.closeButtonLabel}\n    </Button>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA;AAEO;AAeL;AAEA;AACE;;;;;;;;;AAsCJ;AAEA;AAuBI;;AAGE;;AAqBJ;AAGF;AAoBA;AAME;AAEA;;AAGM;AACA;;AAEH;;;AAWL;;"}