61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
// import { TextareaAutosize } from 'react-textarea-autosize'
|
|
import * as React from "react"
|
|
import { Either, isEither, isLeft } from "../../../Data/Either"
|
|
import { List } from "../../../Data/List"
|
|
import { guardReplace, isJust, isMaybe, Just, Maybe, orN } from "../../../Data/Maybe"
|
|
import { classListMaybe } from "../../Utilities/CSS"
|
|
import { TextFieldCounter } from "./TextFieldCounter"
|
|
import { TextFieldError } from "./TextFieldError"
|
|
import { TextFieldHint } from "./TextFieldHint"
|
|
import { TextFieldLabel } from "./TextFieldLabel"
|
|
|
|
interface Props {
|
|
className?: string
|
|
countCurrent?: number
|
|
countMax?: number
|
|
disabled?: boolean
|
|
error?: Maybe<string> | Either<string, any>
|
|
fullWidth?: boolean
|
|
hint?: Maybe<string> | string
|
|
isFieldEmpty: boolean
|
|
label?: Maybe<string> | string
|
|
valid?: boolean
|
|
}
|
|
|
|
export const TextFieldContainer: React.FC<Props> = props => {
|
|
const {
|
|
children,
|
|
className,
|
|
countCurrent,
|
|
countMax,
|
|
disabled,
|
|
error,
|
|
fullWidth,
|
|
hint,
|
|
isFieldEmpty,
|
|
label,
|
|
valid,
|
|
} = props
|
|
|
|
return (
|
|
<div
|
|
className={classListMaybe (List (
|
|
Just ("textfield"),
|
|
Maybe (className),
|
|
guardReplace (orN (fullWidth)) ("fullWidth"),
|
|
guardReplace (orN (disabled)) ("disabled"),
|
|
guardReplace (valid === false
|
|
|| (isMaybe (error) && isJust (error))
|
|
|| (isEither (error) && isLeft (error)))
|
|
("invalid")
|
|
))}
|
|
>
|
|
<TextFieldLabel label={label} />
|
|
{children}
|
|
<TextFieldHint hint={hint} isFieldEmpty={isFieldEmpty} />
|
|
<TextFieldCounter current={countCurrent} max={countMax} />
|
|
<TextFieldError error={error} />
|
|
</div>
|
|
)
|
|
}
|