1 | import * as React from 'react';
|
2 |
|
3 | import TextareaStyle from './Textarea.styled';
|
4 |
|
5 | export interface IProps {
|
6 | feedback?: string|Object;
|
7 | placeholder: string;
|
8 | isInvalid?: boolean|string;
|
9 | isWarning?: boolean|string;
|
10 | comment?: string;
|
11 | label?: string;
|
12 | css?: string|Object;
|
13 | passwordType?: boolean;
|
14 | onChange: ({ target }: any) => void|any;
|
15 | onBlur?: ({ target }: any) => void|any;
|
16 | value?: string|number;
|
17 | minLength?: number;
|
18 | maxLength?: number;
|
19 | name?: string;
|
20 | min?: string;
|
21 | max?: string;
|
22 | disabled?: boolean;
|
23 | rows?: number;
|
24 | }
|
25 |
|
26 | export default class Textarea extends React.PureComponent<IProps> {
|
27 | state = {
|
28 | value: '',
|
29 | rows: 1,
|
30 | minRows: 1
|
31 | }
|
32 |
|
33 | onChange = ({ currentTarget }: React.SyntheticEvent<HTMLTextAreaElement>) => {
|
34 | const textareaLineHeight = 22;
|
35 | const { minRows } = this.state;
|
36 |
|
37 | const previousRows = currentTarget.rows;
|
38 | currentTarget.rows = minRows;
|
39 |
|
40 | const currentRows = ~~(currentTarget.scrollHeight / textareaLineHeight);
|
41 |
|
42 | if (currentRows === previousRows) {
|
43 | currentTarget.rows = currentRows;
|
44 | }
|
45 |
|
46 | this.props.onChange(currentTarget);
|
47 | this.setState({
|
48 | value: currentTarget.value,
|
49 | rows: currentRows,
|
50 | });
|
51 | }
|
52 |
|
53 | render () {
|
54 | const { feedback, comment, label, placeholder, isInvalid, isWarning } = this.props;
|
55 | const moreInformationInInput = feedback || comment || isInvalid || isWarning;
|
56 |
|
57 | return (
|
58 | <TextareaStyle.GroupInput>
|
59 | <TextareaStyle.Textarea
|
60 | {...this.props}
|
61 | value={this.state.value}
|
62 | onChange={this.onChange}
|
63 | rows={this.state.rows}
|
64 | />
|
65 | <label>{label || placeholder}</label>
|
66 | <span className='bar' />
|
67 | {(moreInformationInInput) && <span className='feedback'>{moreInformationInInput}</span>}
|
68 | </TextareaStyle.GroupInput>
|
69 | );
|
70 | }
|
71 | }
|