@grafana/ui/dist/cjs/components/ConfirmButton/ConfirmButton.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 i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Button = require('../Button/Button.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const ConfirmButton = ({
  children,
  className,
  closeOnConfirm,
  confirmText = "Save",
  confirmVariant = "primary",
  disabled = false,
  onCancel,
  onClick,
  onConfirm,
  size = "md"
}) => {
  const mainButtonRef = React.useRef(null);
  const confirmButtonRef = React.useRef(null);
  const [showConfirm, setShowConfirm] = React.useState(false);
  const [shouldRestoreFocus, setShouldRestoreFocus] = React.useState(false);
  const styles = ThemeContext.useStyles2(getStyles);
  React.useEffect(() => {
    var _a, _b;
    if (showConfirm) {
      (_a = confirmButtonRef.current) == null ? void 0 : _a.focus();
      setShouldRestoreFocus(true);
    } else {
      if (shouldRestoreFocus) {
        (_b = mainButtonRef.current) == null ? void 0 : _b.focus();
        setShouldRestoreFocus(false);
      }
    }
  }, [shouldRestoreFocus, showConfirm]);
  const onClickButton = (event) => {
    if (event) {
      event.preventDefault();
    }
    setShowConfirm(true);
    onClick == null ? void 0 : onClick();
  };
  const onClickCancel = (event) => {
    var _a;
    if (event) {
      event.preventDefault();
    }
    setShowConfirm(false);
    (_a = mainButtonRef.current) == null ? void 0 : _a.focus();
    onCancel == null ? void 0 : onCancel();
  };
  const onClickConfirm = (event) => {
    if (event) {
      event.preventDefault();
    }
    onConfirm == null ? void 0 : onConfirm();
    if (closeOnConfirm) {
      setShowConfirm(false);
    }
  };
  const buttonClass = css.cx(className, styles.mainButton, {
    [styles.mainButtonHide]: showConfirm
  });
  const confirmButtonClass = css.cx(styles.confirmButton, {
    [styles.confirmButtonHide]: !showConfirm
  });
  const confirmButtonContainerClass = css.cx(styles.confirmButtonContainer, {
    [styles.confirmButtonContainerHide]: !showConfirm
  });
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: buttonClass, children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { disabled, size, fill: "text", onClick: onClickButton, ref: mainButtonRef, children }) : React__namespace.cloneElement(children, { disabled, onClick: onClickButton, ref: mainButtonRef }) }),
    /* @__PURE__ */ jsxRuntime.jsx("div", { className: confirmButtonContainerClass, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: confirmButtonClass, children: [
      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size, variant: confirmVariant, onClick: onClickConfirm, ref: confirmButtonRef, children: confirmText }),
      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size, fill: "text", onClick: onClickCancel, children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "grafana-ui.confirm-button.cancel", children: "Cancel" }) })
    ] }) })
  ] });
};
ConfirmButton.displayName = "ConfirmButton";
const getStyles = (theme) => {
  return {
    container: css.css({
      alignItems: "center",
      display: "flex",
      justifyContent: "flex-end",
      position: "relative"
    }),
    mainButton: css.css({
      opacity: 1,
      [theme.transitions.handleMotion("no-preference")]: {
        transition: theme.transitions.create(["opacity"], {
          duration: theme.transitions.duration.shortest,
          easing: theme.transitions.easing.easeOut
        })
      },
      zIndex: 2
    }),
    mainButtonHide: css.css({
      opacity: 0,
      [theme.transitions.handleMotion("no-preference")]: {
        transition: theme.transitions.create(["opacity", "visibility"], {
          duration: theme.transitions.duration.shortest,
          easing: theme.transitions.easing.easeIn
        })
      },
      visibility: "hidden",
      zIndex: 0
    }),
    confirmButtonContainer: css.css({
      overflow: "visible",
      position: "absolute",
      pointerEvents: "all",
      right: 0
    }),
    confirmButtonContainerHide: css.css({
      overflow: "hidden",
      pointerEvents: "none"
    }),
    confirmButton: css.css({
      alignItems: "flex-start",
      background: theme.colors.background.primary,
      display: "flex",
      opacity: 1,
      transform: "translateX(0)",
      [theme.transitions.handleMotion("no-preference")]: {
        transition: theme.transitions.create(["opacity", "transform"], {
          duration: theme.transitions.duration.shortest,
          easing: theme.transitions.easing.easeOut
        })
      },
      zIndex: 1
    }),
    confirmButtonHide: css.css({
      opacity: 0,
      transform: "translateX(100%)",
      [theme.transitions.handleMotion("no-preference")]: {
        transition: theme.transitions.create(["opacity", "transform", "visibility"], {
          duration: theme.transitions.duration.shortest,
          easing: theme.transitions.easing.easeIn
        })
      },
      visibility: "hidden"
    })
  };
};

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