@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\n                  placeholder={placeholder}\n                  onChange={onConfirmationTextChange}\n                  data-testid={selectors.pages.ConfirmModal.input}\n                />\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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"}