61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import React, { HTMLProps } from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import './Input.scss';
|
|
|
|
interface State {
|
|
hasBlurred: boolean;
|
|
/**
|
|
* @description when the input has not had any values inputted yet
|
|
* e.g. "Pristine" condition
|
|
*/
|
|
isStateless: boolean;
|
|
}
|
|
|
|
interface OwnProps extends HTMLProps<HTMLTextAreaElement> {
|
|
isValid: boolean;
|
|
showValidAsPlain?: boolean;
|
|
}
|
|
|
|
class TextArea extends React.Component<OwnProps, State> {
|
|
public state: State = {
|
|
hasBlurred: false,
|
|
isStateless: true
|
|
};
|
|
|
|
public render() {
|
|
const { showValidAsPlain, isValid, ...htmlProps } = this.props;
|
|
const classname = classnames(
|
|
this.props.className,
|
|
'input-group-input',
|
|
this.state.isStateless ? '' : isValid ? (showValidAsPlain ? '' : '') : `invalid`,
|
|
this.state.hasBlurred && 'has-blurred'
|
|
);
|
|
|
|
return (
|
|
<textarea
|
|
{...htmlProps}
|
|
onBlur={e => {
|
|
this.setState({ hasBlurred: true });
|
|
if (this.props && this.props.onBlur) {
|
|
this.props.onBlur(e);
|
|
}
|
|
}}
|
|
onChange={this.handleOnChange}
|
|
className={classname}
|
|
/>
|
|
);
|
|
}
|
|
|
|
private handleOnChange = (args: React.FormEvent<HTMLTextAreaElement>) => {
|
|
if (this.state.isStateless) {
|
|
this.setState({ isStateless: false });
|
|
}
|
|
if (this.props.onChange) {
|
|
this.props.onChange(args);
|
|
}
|
|
};
|
|
}
|
|
|
|
export default TextArea;
|