@gravity-ui/uikit
Version:
Gravity UI base styling and components
34 lines (33 loc) • 3.03 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PasswordInput = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const hooks_1 = require("../../../hooks/index.js");
const ActionTooltip_1 = require("../../ActionTooltip/index.js");
const Button_1 = require("../../Button/index.js");
const ClipboardButton_1 = require("../../ClipboardButton/index.js");
const Icon_1 = require("../../Icon/index.js");
const cn_1 = require("../../utils/cn.js");
const TextInput_1 = require("../TextInput/index.js");
const constants_1 = require("./constants.js");
const i18n_1 = require("./i18n/index.js");
const utils_1 = require("./utils.js");
require("./PasswordInput.css");
const b = (0, cn_1.block)('password-input');
const PasswordInput = (props) => {
const { autoComplete, controlProps, endContent, hideCopyButton = false, hideRevealButton = false, showCopyTooltip = false, showRevealTooltip = false, size = 'm', } = props;
const [inputValue, setInputValue] = (0, hooks_1.useControlledState)(props.value, props.defaultValue ?? '', props.onUpdate);
const [revealValue, setRevealValue] = (0, hooks_1.useControlledState)(props.revealValue, false, props.onRevealValueUpdate);
const { actionButtonSize, iconSize } = (0, utils_1.getActionButtonSizeAndIconSize)(size);
const additionalEndContent = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [endContent, inputValue && !hideCopyButton && !props.disabled ? ((0, jsx_runtime_1.jsx)(ClipboardButton_1.ClipboardButton, { view: "flat-secondary", text: inputValue, hasTooltip: showCopyTooltip, size: actionButtonSize, className: b('copy-button'), qa: constants_1.PasswordInputQa.copyButton })) : null, hideRevealButton ? null : ((0, jsx_runtime_1.jsx)(ActionTooltip_1.ActionTooltip, { disabled: !showRevealTooltip, title: revealValue ? (0, i18n_1.i18n)('label_hide-password') : (0, i18n_1.i18n)('label_show-password'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { qa: constants_1.PasswordInputQa.revealButton, view: "flat-secondary", disabled: props.disabled, onClick: () => setRevealValue(!revealValue), size: actionButtonSize, onMouseDown: (event) => event.preventDefault(), "aria-label": revealValue ? (0, i18n_1.i18n)('label_hide-password') : (0, i18n_1.i18n)('label_show-password'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { data: revealValue ? icons_1.EyeSlash : icons_1.Eye, size: iconSize }) }) }))] }));
return ((0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ...props, type: revealValue ? 'text' : 'password', endContent: additionalEndContent, autoComplete: autoComplete ? autoComplete : 'new-password', controlProps: {
...controlProps,
className: b('input-control', controlProps?.className),
}, value: inputValue, onUpdate: setInputValue }));
};
exports.PasswordInput = PasswordInput;
//# sourceMappingURL=PasswordInput.js.map