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