Function PromptElement

packages/shared/src/components/modals/Prompt.tsx:20–94

(props: Partial<ModalProps>)

);

export function PromptElement(props: Partial<ModalProps>): ReactElement | null {
  const { prompt } = usePrompt();
  if (!prompt || !prompt.options) {
    return null;
  }
  const { options } = prompt;
  const { onFail, onSuccess } = prompt;
  const {
    title,
    description,
    icon,
    content,
    promptSize = Modal.Size.Small,
    cancelButton = {},
    okButton = {},
    className = {},
    shouldCloseOnOverlayClick,
  } = options;
  return (
    <Modal
      isOpen
      kind={Modal.Kind.FlexibleCenter}
      size={promptSize}
      onRequestClose={onFail}
      className={className.modal}
      overlayClassName="!z-max"
      isDrawerOnMobile
      drawerProps={{ displayCloseButton: false, appendOnRoot: true }}
      shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
      {...props}
    >
      <Modal.Body>
        {icon && <div className="mx-auto mb-2">{icon}</div>}
        <Title className={className.title}>{title}</Title>
        {!!description && (
          <Description className={className.description}>
            {description}
          </Description>
        )}
        {content}
        <Buttons className={className.buttons}>
          {cancelButton !== null && (
            <Button
              variant={cancelButton.variant ?? ButtonVariant.Secondary}
              color={cancelButton.color}
              icon={cancelButton.icon}
              iconPosition={cancelButton.iconPosition}
              onClick={onFail}
              {...cancelButton}
              className={classNames(
                'w-full tablet:w-auto',
                cancelButton.className,
              )}
            >
              {cancelButton?.title ?? 'Cancel'}
            </Button>
          )}
          {okButton !== null && (