59 lines
1.2 KiB
JavaScript
59 lines
1.2 KiB
JavaScript
import { makeStyles } from '@mui/styles'
|
|
import TextField from '@mui/material/TextField'
|
|
import classnames from 'classnames'
|
|
import * as R from 'ramda'
|
|
import React, { memo } from 'react'
|
|
|
|
import styles from './TextInput.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const TextInput = memo(
|
|
({
|
|
name,
|
|
isPasswordFilled,
|
|
onChange,
|
|
onBlur,
|
|
value,
|
|
error,
|
|
suffix,
|
|
textAlign,
|
|
width,
|
|
// lg or sm
|
|
size,
|
|
bold,
|
|
className,
|
|
InputProps,
|
|
...props
|
|
}) => {
|
|
const classes = useStyles({ textAlign, width, size })
|
|
const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value)
|
|
const filled = isPasswordFilled || isTextFilled
|
|
const inputClasses = {
|
|
[classes.bold]: bold
|
|
}
|
|
|
|
return (
|
|
<TextField
|
|
variant="standard"
|
|
id={name}
|
|
onChange={onChange}
|
|
onBlur={onBlur}
|
|
error={error}
|
|
value={value}
|
|
classes={{ root: classes.root }}
|
|
className={className}
|
|
InputProps={{
|
|
className: classnames(inputClasses),
|
|
classes: {
|
|
root: classes.size,
|
|
underline: filled ? classes.underline : null
|
|
},
|
|
...InputProps
|
|
}}
|
|
{...props} />
|
|
);
|
|
}
|
|
)
|
|
|
|
export default TextInput
|