@selfcommunity/react-ui/lib/esm/shared/PasswordTextField/index.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { IconButton, InputAdornment, TextField } from '@mui/material';
import Icon from '@mui/material/Icon';
const PREFIX = 'SCPasswordTextField';
const Root = styled(TextField, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
export default function PasswordTextField(props) {
    var _a;
    // STATE
    const [showPassword, setShowPassword] = useState(false);
    // HANDLERS
    const handleClick = () => {
        setShowPassword(!showPassword);
    };
    // RENDER
    return (_jsx(Root, Object.assign({ type: showPassword ? 'text' : 'password' }, props, { InputProps: {
            endAdornment: (_jsxs(_Fragment, { children: [(_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment, _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "toggle password visibility", onClick: handleClick, edge: "end" }, { children: showPassword ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "visibility" }) })) }))] }))
        } })));
}