@dnb/eufemia/components/dialog/parts/DialogAction.js

DNB Eufemia Design System UI Library

"use client";

import { Children, createElement, isValidElement, useCallback, useContext } from 'react';
import { clsx } from 'clsx';
import Button from "../../button/Button.js";
import FormStatus from "../../FormStatus.js";
import Space from "../../space/Space.js";
import ModalContext from "../../modal/ModalContext.js";
import { dispatchCustomElementEvent, combineDescribedBy } from "../../../shared/component-helper.js";
import { Context } from "../../../shared/index.js";
import useId from "../../../shared/helpers/useId.js";
import withComponentMarkers from "../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const fallbackCloseAction = ({
  close
}) => close();
const DialogAction = ({
  declineText = null,
  confirmText = null,
  hideDecline = false,
  hideConfirm = false,
  status,
  onConfirm = fallbackCloseAction,
  onDecline = fallbackCloseAction,
  className,
  children,
  ...props
}) => {
  const {
    translation,
    Button: ButtonContext
  } = useContext(Context);
  const {
    close
  } = useContext(ModalContext);
  let childrenWithCloseFunc;
  const statusId = useId();
  const statusDescribedBy = status ? statusId + '-status' : undefined;
  const onConfirmHandler = useCallback(event => {
    dispatchCustomElementEvent({
      onConfirm
    }, 'onConfirm', {
      event,
      close
    });
  }, [close, onConfirm]);
  const onDeclineHandler = useCallback(event => {
    dispatchCustomElementEvent({
      onDecline
    }, 'onDecline', {
      event,
      close
    });
  }, [close, onDecline]);
  if (children) {
    childrenWithCloseFunc = Children.map(children, child => {
      if (isValidElement(child) && child.type === Button) {
        const childElement = child;
        return createElement(childElement.type, {
          ...(childElement.props || {}),
          onClick: event => {
            dispatchCustomElementEvent(childElement.props, 'onClick', {
              event,
              close
            });
          },
          ...(statusDescribedBy && {
            'aria-describedby': combineDescribedBy(childElement.props, statusDescribedBy)
          })
        }, childElement.props.children);
      } else {
        return child;
      }
    });
  }
  return _jsxs(_Fragment, {
    children: [_jsxs(Space, {
      element: "section",
      className: clsx('dnb-dialog__actions', className),
      ...props,
      children: [childrenWithCloseFunc, !children && !hideDecline && _jsx(Button, {
        text: declineText || translation?.Dialog?.declineText,
        variant: "secondary",
        onClick: onDeclineHandler,
        size: ButtonContext?.size || 'large',
        "aria-describedby": hideConfirm ? statusDescribedBy : undefined
      }), !children && !hideConfirm && _jsx(Button, {
        text: confirmText || translation?.Dialog?.confirmText,
        variant: "primary",
        onClick: onConfirmHandler,
        size: ButtonContext?.size || 'large',
        status: status ? 'error' : undefined,
        "aria-describedby": statusDescribedBy
      })]
    }), _jsx(FormStatus, {
      show: !!status,
      id: statusId + '-form-status',
      textId: statusId + '-status',
      noAnimation: false,
      shellSpace: {
        top: 'small'
      },
      children: status
    })]
  });
};
withComponentMarkers(DialogAction, {
  _supportsSpacingProps: true
});
export default DialogAction;
//# sourceMappingURL=DialogAction.js.map