@grafana/ui/dist/cjs/components/ConfirmModal/ConfirmContent.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var reactHookForm = require('react-hook-form');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Button = require('../Button/Button.cjs');
var Field = require('../Forms/Field.cjs');
var Input = require('../Input/Input.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');

"use strict";
const ConfirmContent = ({
  body,
  confirmPromptText,
  confirmButtonLabel,
  confirmButtonVariant,
  dismissButtonVariant,
  dismissButtonLabel,
  onConfirm,
  onDismiss,
  onAlternative,
  alternativeButtonLabel,
  description,
  justifyButtons = "flex-end",
  disabled
}) => {
  const [isDisabled, setIsDisabled] = React.useState(disabled);
  const styles = ThemeContext.useStyles2(getStyles);
  const buttonRef = React.useRef(null);
  const onConfirmationTextChange = (event) => {
    setIsDisabled((confirmPromptText == null ? void 0 : confirmPromptText.toLowerCase().localeCompare(event.currentTarget.value.toLowerCase())) !== 0);
  };
  React.useEffect(() => {
    var _a;
    (_a = buttonRef.current) == null ? void 0 : _a.focus();
  }, []);
  React.useEffect(() => {
    setIsDisabled(disabled ? true : Boolean(confirmPromptText));
  }, [confirmPromptText, disabled]);
  const onConfirmClick = async () => {
    if (disabled === void 0) {
      setIsDisabled(true);
    }
    try {
      await onConfirm();
    } finally {
      if (disabled === void 0) {
        setIsDisabled(false);
      }
    }
  };
  const { handleSubmit } = reactHookForm.useForm();
  const stopPropagation = (callback) => {
    return (event) => {
      event.stopPropagation();
      callback(event);
    };
  };
  const placeholder = i18n.t("grafana-ui.confirm-content.placeholder", 'Type "{{confirmPromptText}}" to confirm', {
    confirmPromptText
  });
  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: stopPropagation(handleSubmit(onConfirmClick)), children: [
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.text, children: [
      body,
      description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.description, children: description }) : null,
      confirmPromptText ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.confirmationInput, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { alignItems: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
        Input.Input,
        {
          placeholder,
          onChange: onConfirmationTextChange,
          "data-testid": e2eSelectors.selectors.pages.ConfirmModal.input
        }
      ) }) }) }) : null
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonsContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { justifyContent: justifyButtons, gap: 2, wrap: "wrap", children: [
      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: dismissButtonVariant, onClick: onDismiss, fill: "outline", children: dismissButtonLabel }),
      /* @__PURE__ */ jsxRuntime.jsx(
        Button.Button,
        {
          type: "submit",
          variant: confirmButtonVariant,
          disabled: isDisabled,
          ref: buttonRef,
          "data-testid": e2eSelectors.selectors.pages.ConfirmModal.delete,
          children: confirmButtonLabel
        }
      ),
      onAlternative ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "primary", onClick: onAlternative, children: alternativeButtonLabel }) : null
    ] }) })
  ] });
};
const getStyles = (theme) => ({
  text: css.css({
    fontSize: theme.typography.h5.fontSize,
    color: theme.colors.text.primary
  }),
  description: css.css({
    fontSize: theme.typography.body.fontSize
  }),
  confirmationInput: css.css({
    paddingTop: theme.spacing(1)
  }),
  buttonsContainer: css.css({
    paddingTop: theme.spacing(3)
  })
});

exports.ConfirmContent = ConfirmContent;
//# sourceMappingURL=ConfirmContent.cjs.map