93 lines
2.4 KiB
React
93 lines
2.4 KiB
React
|
import { useTheme } from "@emotion/react";
|
||
|
|
import {
|
||
|
|
IconButton,
|
||
|
|
InputAdornment,
|
||
|
|
Stack,
|
||
|
|
TextField,
|
||
|
|
Typography,
|
||
|
|
} from "@mui/material";
|
||
|
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
||
|
|
import Visibility from "@mui/icons-material/Visibility";
|
||
|
|
import "./index.css";
|
||
|
|
|
||
|
|
const Field = ({
|
||
|
|
type,
|
||
|
|
id,
|
||
|
|
label,
|
||
|
|
isRequired,
|
||
|
|
isVisible,
|
||
|
|
setVisibility,
|
||
|
|
autoComplete,
|
||
|
|
placeholder,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
error,
|
||
|
|
disabled,
|
||
|
|
}) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack gap={theme.gap.xs} className={`field field-${type}`}>
|
||
|
|
{label && (
|
||
|
|
<Typography component="h1">
|
||
|
|
{label}
|
||
|
|
{isRequired ? <span>*</span> : ""}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
<TextField
|
||
|
|
type={
|
||
|
|
type === "password"
|
||
|
|
? isVisible
|
||
|
|
? "text"
|
||
|
|
: type
|
||
|
|
: type === "website"
|
||
|
|
? "text"
|
||
|
|
: type
|
||
|
|
}
|
||
|
|
id={id}
|
||
|
|
autoComplete={autoComplete}
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
disabled={disabled}
|
||
|
|
InputProps={
|
||
|
|
type === "website"
|
||
|
|
? {
|
||
|
|
startAdornment: <Typography component="h5">http://</Typography>,
|
||
|
|
}
|
||
|
|
: type === "password" && {
|
||
|
|
endAdornment: (
|
||
|
|
<InputAdornment position="end">
|
||
|
|
<IconButton
|
||
|
|
aria-label="toggle password visibility"
|
||
|
|
onClick={() => setVisibility((show) => !show)}
|
||
|
|
tabIndex={-1}
|
||
|
|
sx={{
|
||
|
|
color: theme.palette.section.borderColor,
|
||
|
|
padding: theme.gap.xs,
|
||
|
|
"&:focus": {
|
||
|
|
outline: "none",
|
||
|
|
},
|
||
|
|
"& .MuiTouchRipple-root": {
|
||
|
|
pointerEvents: "none",
|
||
|
|
display: "none",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{!isVisible ? <VisibilityOff /> : <Visibility />}
|
||
|
|
</IconButton>
|
||
|
|
</InputAdornment>
|
||
|
|
),
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
{error && (
|
||
|
|
<Typography component="p" className="input-error" mt={theme.gap.xs}>
|
||
|
|
{error}
|
||
|
|
</Typography>
|
||
|
|
)}
|
||
|
|
</Stack>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Field;
|