@grafana/ui/dist/esm/components/ConfirmModal/ConfirmContent.mjs.map

Grafana Components Library

{"version":3,"file":"ConfirmContent.mjs","sources":["../../../../src/components/ConfirmModal/ConfirmContent.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Button, ButtonVariant } from '../Button/Button';\nimport { Field } from '../Forms/Field';\nimport { Input } from '../Input/Input';\nimport { Stack } from '../Layout/Stack/Stack';\nimport { JustifyContent } from '../Layout/types';\nimport { ResponsiveProp } from '../Layout/utils/responsiveness';\n\nexport interface ConfirmContentProps {\n  /** Modal content */\n  body: React.ReactNode;\n  /** Modal description */\n  description?: React.ReactNode;\n  /** Text for confirm button */\n  confirmButtonLabel: string;\n  /** Confirm button variant */\n  confirmButtonVariant?: ButtonVariant;\n  /** Text user needs to fill in before confirming */\n  confirmPromptText?: string;\n  /** Text for dismiss button */\n  dismissButtonLabel?: string;\n  /** Variant for dismiss button */\n  dismissButtonVariant?: ButtonVariant;\n  /** Text for alternative button */\n  alternativeButtonLabel?: string;\n  /** Justify for buttons placement */\n  justifyButtons?: ResponsiveProp<JustifyContent>;\n  /** Confirm action callback\n   * Return a promise to disable the confirm button until the promise is resolved\n   */\n  onConfirm(): void | Promise<void>;\n  /** Dismiss action callback */\n  onDismiss(): void;\n  /** Alternative action callback */\n  onAlternative?(): void;\n  /** Disable the confirm button and the confirm text input if needed */\n  disabled?: boolean;\n}\n\nexport const ConfirmContent = ({\n  body,\n  confirmPromptText,\n  confirmButtonLabel,\n  confirmButtonVariant,\n  dismissButtonVariant,\n  dismissButtonLabel,\n  onConfirm,\n  onDismiss,\n  onAlternative,\n  alternativeButtonLabel,\n  description,\n  justifyButtons = 'flex-end',\n  disabled,\n}: ConfirmContentProps) => {\n  const [isDisabled, setIsDisabled] = useState(disabled);\n  const styles = useStyles2(getStyles);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const onConfirmationTextChange = (event: React.FormEvent<HTMLInputElement>) => {\n    setIsDisabled(confirmPromptText?.toLowerCase().localeCompare(event.currentTarget.value.toLowerCase()) !== 0);\n  };\n\n  useEffect(() => {\n    buttonRef.current?.focus();\n  }, []);\n\n  useEffect(() => {\n    setIsDisabled(disabled ? true : Boolean(confirmPromptText));\n  }, [confirmPromptText, disabled]);\n\n  const onConfirmClick = async () => {\n    if (disabled === undefined) {\n      setIsDisabled(true);\n    }\n    try {\n      await onConfirm();\n    } finally {\n      if (disabled === undefined) {\n        setIsDisabled(false);\n      }\n    }\n  };\n\n  const { handleSubmit } = useForm();\n  const placeholder = t('grafana-ui.confirm-content.placeholder', 'Type \"{{confirmPromptText}}\" to confirm', {\n    confirmPromptText,\n  });\n  return (\n    <form onSubmit={handleSubmit(onConfirmClick)}>\n      <div className={styles.text}>\n        {body}\n        {description ? <div className={styles.description}>{description}</div> : null}\n        {confirmPromptText ? (\n          <div className={styles.confirmationInput}>\n            <Stack alignItems=\"flex-start\">\n              <Field disabled={disabled}>\n                <Input placeholder={placeholder} onChange={onConfirmationTextChange} />\n              </Field>\n            </Stack>\n          </div>\n        ) : null}\n      </div>\n      <div className={styles.buttonsContainer}>\n        <Stack justifyContent={justifyButtons} gap={2} wrap=\"wrap\">\n          <Button variant={dismissButtonVariant} onClick={onDismiss} fill=\"outline\">\n            {dismissButtonLabel}\n          </Button>\n          <Button\n            type=\"submit\"\n            variant={confirmButtonVariant}\n            disabled={isDisabled}\n            ref={buttonRef}\n            data-testid={selectors.pages.ConfirmModal.delete}\n          >\n            {confirmButtonLabel}\n          </Button>\n          {onAlternative ? (\n            <Button variant=\"primary\" onClick={onAlternative}>\n              {alternativeButtonLabel}\n            </Button>\n          ) : null}\n        </Stack>\n      </div>\n    </form>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  text: css({\n    fontSize: theme.typography.h5.fontSize,\n    color: theme.colors.text.primary,\n  }),\n  description: css({\n    fontSize: theme.typography.body.fontSize,\n  }),\n  confirmationInput: css({\n    paddingTop: theme.spacing(1),\n  }),\n  buttonsContainer: css({\n    paddingTop: theme.spacing(3),\n  }),\n});\n"],"names":[],"mappings":"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"}