-
Notifications
You must be signed in to change notification settings - Fork 377
/
Textarea.tsx
69 lines (62 loc) · 1.78 KB
/
Textarea.tsx
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
62
63
64
65
66
67
68
69
import * as React from 'react';
import { Component } from 'react';
import omit from 'lodash-es/omit';
import cx from 'classnames';
import * as autosize from 'autosize';
import { Input } from './Input';
export interface ITextAreaProps {
wrapClass?: string;
widthStyle?: React.CSSProperties;
prefix?: string;
handleKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
inputRef: Input;
inputProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>,
autoSize?: boolean;
showCount?: boolean;
}
export default class Textarea extends Component<ITextAreaProps> {
textarea: HTMLTextAreaElement;
componentDidMount() {
const { autoSize } = this.props;
autoSize && autosize(this.textarea);
}
componentWillUnmount() {
const { autoSize } = this.props;
autoSize && autosize.destroy(this.textarea);
}
render() {
const {
wrapClass,
widthStyle,
prefix,
handleKeyDown,
inputRef,
showCount
} = this.props;
let { inputProps } = this.props;
const { value = '', maxLength } = inputProps;
inputProps = omit(inputProps, ['type', 'showCount', 'autoSize']);
let currentCount = (value as string).length;
currentCount = currentCount > maxLength ? maxLength : currentCount;
return (
<div className={wrapClass} style={widthStyle}>
<textarea
ref={ref => {
inputRef.input = ref;
this.textarea = ref;
}}
className={cx(`${prefix}-textarea`, {
[`${prefix}-textarea-with-count`]: showCount,
})}
{...inputProps}
onKeyDown={handleKeyDown}
/>
{showCount && (
<span className={`${prefix}-textarea-count`}>
{currentCount}/{maxLength}
</span>
)}
</div>
);
}
}