File size: 2,096 Bytes
95b5a04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import PropTypes from 'prop-types';
// material-ui
import Divider from '@mui/material/Divider';
import InputAdornment from '@mui/material/InputAdornment';
import InputLabel from '@mui/material/InputLabel';
import OutlinedInput from '@mui/material/OutlinedInput';
import MUIFormControl from '@mui/material/FormControl';
export default function FormControl({ captionLabel, formState, iconPrimary, iconSecondary, placeholder, textPrimary, textSecondary }) {
const IconPrimary = iconPrimary;
const primaryIcon = iconPrimary ? <IconPrimary fontSize="small" sx={{ color: 'grey.700' }} /> : null;
const IconSecondary = iconSecondary;
const secondaryIcon = iconSecondary ? <IconSecondary fontSize="small" sx={{ color: 'grey.700' }} /> : null;
const errorState = formState === 'error';
return (
<MUIFormControl fullWidth error={errorState}>
<InputLabel>{captionLabel}</InputLabel>
<OutlinedInput
placeholder={placeholder}
type="text"
label={captionLabel}
startAdornment={
<>
{primaryIcon && <InputAdornment position="start">{primaryIcon}</InputAdornment>}
{textPrimary && (
<>
<InputAdornment position="start">{textPrimary}</InputAdornment>
<Divider sx={{ height: 28, m: 0.5, mr: 1.5 }} orientation="vertical" />
</>
)}
</>
}
endAdornment={
<>
{secondaryIcon && <InputAdornment position="end">{secondaryIcon}</InputAdornment>}
{textSecondary && (
<>
<Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
<InputAdornment position="end">{textSecondary}</InputAdornment>
</>
)}
</>
}
/>
</MUIFormControl>
);
}
FormControl.propTypes = {
captionLabel: PropTypes.string,
formState: PropTypes.string,
iconPrimary: PropTypes.any,
iconSecondary: PropTypes.any,
placeholder: PropTypes.string,
textPrimary: PropTypes.string,
textSecondary: PropTypes.string
};
|