%PDF-
%PDF-
Mini Shell
Mini Shell
import React, { cloneElement, useContext } from "react";
import { node, object } from "prop-types";
import { IconButton } from "@material-ui/core";
import { Visibility, VisibilityOff } from "@material-ui/icons";
import { withStyles } from "@material-ui/core/styles";
import PasswordContext from "./context";
const styles = () => ({
wrapper: {
position: "relative",
},
toggleButton: {
marginTop: "-4px",
position: "absolute",
right: 0,
top: 0,
zIndex: 1,
},
});
function PasswordField({
children,
classes,
}) {
const [passwordVisible, togglePasswordVisibility] = useContext(PasswordContext);
const type = passwordVisible ? "text" : "password";
return (
<div className={classes.wrapper}>
<div className={classes.toggleButton}>
<IconButton
aria-label="toggle password visibility"
onClick={togglePasswordVisibility}
disableFocusRipple
tabIndex="-1"
>
{passwordVisible ? <VisibilityOff /> : <Visibility />}
</IconButton>
</div>
{cloneElement(children, { type })}
</div>
);
}
PasswordField.propTypes = {
children: node.isRequired,
classes: object.isRequired,
};
export default withStyles(styles)(PasswordField);
Zerion Mini Shell 1.0