@grafana/ui/dist/cjs/components/SecretTextArea/SecretTextArea.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');
var IconButton = require('../IconButton/IconButton.cjs');
var Box = require('../Layout/Box/Box.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var TextArea = require('../TextArea/TextArea.cjs');

"use strict";
const CONFIGURED_TEXT = "configured";
const RESET_BUTTON_TEXT = "Reset";
const getStyles = (theme) => {
  return {
    configuredStyle: css.css({
      minHeight: theme.spacing(theme.components.height.md),
      paddingTop: theme.spacing(0.5),
      resize: "none"
    }),
    maskedTextArea: css.css({
      WebkitTextSecurity: "disc"
    }),
    textAreaWrapper: css.css({
      position: "relative"
    }),
    toggleButton: css.css({
      position: "absolute",
      top: theme.spacing(1),
      right: theme.spacing(3),
      zIndex: 1
    })
  };
};
const SecretTextArea = ({ isConfigured, onReset, grow, ...props }) => {
  const [contentVisible, setContentVisible] = React.useState(false);
  const styles = ThemeContext.useStyles2(getStyles);
  const toggleLabel = contentVisible ? i18n.t("grafana-ui.secret-text-area.hide-content", "Hide secret content") : i18n.t("grafana-ui.secret-text-area.show-content", "Show secret content");
  return /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
    /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { grow: grow ? 1 : void 0, children: [
      !isConfigured && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textAreaWrapper, children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          IconButton.IconButton,
          {
            className: styles.toggleButton,
            name: contentVisible ? "eye-slash" : "eye",
            onClick: () => setContentVisible(!contentVisible),
            "aria-label": toggleLabel,
            tooltip: toggleLabel,
            size: "sm"
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(TextArea.TextArea, { ...props, className: css.cx(!contentVisible && styles.maskedTextArea, props.className) })
      ] }),
      isConfigured && /* @__PURE__ */ jsxRuntime.jsx(
        TextArea.TextArea,
        {
          ...props,
          rows: 1,
          disabled: true,
          value: CONFIGURED_TEXT,
          className: css.cx(styles.configuredStyle)
        }
      )
    ] }),
    isConfigured && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: onReset, variant: "secondary", children: RESET_BUTTON_TEXT })
  ] });
};

exports.CONFIGURED_TEXT = CONFIGURED_TEXT;
exports.RESET_BUTTON_TEXT = RESET_BUTTON_TEXT;
exports.SecretTextArea = SecretTextArea;
//# sourceMappingURL=SecretTextArea.cjs.map