mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-18 20:09:08 +02:00
24c11332b5
* refactor: update mui packages * refactor: run mui codemods * refactor: format files after codemods * refactor: fix broken types * refactor: clean up theme * refactor: fix broken tests * refactor: replace @mui/styles with tss-react * refactor: move breakpoints into classes for tss * refactor: fix crash on missing feature description * refactor: remove void classNames * refactor: adjust styles to new defaults * refactor: remove broken rollout slider e2e test * refactor: fix duplicate e2e testid * refactor: update makeStyles after rebase * refactor: add missing snapshot after rebase * refactor: fix TableCellSortable focus styles * refactor: use 1.4 as the default line-height * refactor: hide webkit search field icons * refactor: fix select box label * refactor: make AutocompleteBox smaller * refactor: make heading smaller * refactor: fix toast close icon color * refactor: update snapshots * refactor: add missing test event awaits * refactor: fix default button line-height
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import {
|
|
IconButton,
|
|
InputAdornment,
|
|
TextField,
|
|
TextFieldProps,
|
|
} from '@mui/material';
|
|
import { Visibility, VisibilityOff } from '@mui/icons-material';
|
|
import React, { useState, VFC } from 'react';
|
|
|
|
const PasswordField: VFC<TextFieldProps> = ({ ...rest }) => {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleClickShowPassword = () => {
|
|
setShowPassword(!showPassword);
|
|
};
|
|
|
|
const handleMouseDownPassword = (
|
|
e: React.MouseEvent<HTMLButtonElement>
|
|
) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
const IconComponent = showPassword ? Visibility : VisibilityOff;
|
|
const iconTitle = 'Toggle password visibility';
|
|
|
|
return (
|
|
<TextField
|
|
variant="outlined"
|
|
size="small"
|
|
type={showPassword ? 'text' : 'password'}
|
|
InputProps={{
|
|
style: {
|
|
paddingRight: '0px',
|
|
},
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
onClick={handleClickShowPassword}
|
|
onMouseDown={handleMouseDownPassword}
|
|
size="large"
|
|
>
|
|
<IconComponent titleAccess={iconTitle} />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
{...rest}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default PasswordField;
|