@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
37 lines • 1.87 kB
JavaScript
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { InputAdornment } from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import TextField from '../TextField';
import IconButton from '../../buttons/IconButton';
const getIcon = (showPassword) => (showPassword ? React.createElement(VisibilityIcon, null) : React.createElement(VisibilityOffIcon, null));
/**
* Password Fields let users enter passwords that can be hidden/displayed.
* At its core, it uses [TextField](https://github.com/osstotalsoft/rocket-ui-ts/tree/master/src/components/inputs/TextField).
*/
const PasswordField = ({ disabled, error, ...rest }) => {
const [showPassword, setShowPassword] = useState(false);
const handleClickShowPassword = useCallback(() => {
setShowPassword(current => !current);
}, []);
const handleMouseDownPassword = useCallback((event) => {
event.preventDefault();
}, []);
return (React.createElement(TextField, { disabled: disabled, error: error, ...rest, inputProps: {
type: showPassword ? 'text' : 'password'
}, endAdornment: React.createElement(InputAdornment, { position: "end" },
React.createElement(IconButton, { disabled: disabled, size: "small", "aria-label": "toggle password visibility", color: error ? 'error' : 'secondary', variant: "text", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword }, getIcon(showPassword))) }));
};
PasswordField.propTypes = {
/**
* If true, the component is disabled.
*/
disabled: PropTypes.bool,
/**
* If true, the text field and icon are displayed in an error state.
*/
error: PropTypes.bool
};
export default PasswordField;
//# sourceMappingURL=PasswordField.js.map