diff options
Diffstat (limited to 'packages/forms/src/textarea/index.tsx')
-rw-r--r-- | packages/forms/src/textarea/index.tsx | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx new file mode 100644 index 000000000..cd691a507 --- /dev/null +++ b/packages/forms/src/textarea/index.tsx | |||
@@ -0,0 +1,128 @@ | |||
1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | ||
2 | import Icon from '@mdi/react'; | ||
3 | import classnames from 'classnames'; | ||
4 | import React, { Component, createRef } from 'react'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { IFormField, IWithStyle } from '../typings/generic'; | ||
8 | |||
9 | import { Error } from '../error'; | ||
10 | import { Label } from '../label'; | ||
11 | import { Wrapper } from '../wrapper'; | ||
12 | |||
13 | import styles from './styles'; | ||
14 | |||
15 | interface IData { | ||
16 | [index: string]: string; | ||
17 | } | ||
18 | |||
19 | interface IProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IFormField, IWithStyle { | ||
20 | focus?: boolean; | ||
21 | data: IData; | ||
22 | textareaClassName?: string; | ||
23 | } | ||
24 | |||
25 | class TextareaComponent extends Component<IProps> { | ||
26 | static defaultProps = { | ||
27 | focus: false, | ||
28 | onChange: () => {}, | ||
29 | onBlur: () => {}, | ||
30 | onFocus: () => {}, | ||
31 | showLabel: true, | ||
32 | disabled: false, | ||
33 | rows: 5, | ||
34 | }; | ||
35 | |||
36 | private textareaRef = createRef<HTMLTextAreaElement>(); | ||
37 | |||
38 | componentDidMount() { | ||
39 | const { data } = this.props; | ||
40 | |||
41 | if (this.textareaRef && this.textareaRef.current && data) { | ||
42 | Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | onChange(e: React.ChangeEvent<HTMLTextAreaElement>) { | ||
47 | const { | ||
48 | onChange, | ||
49 | } = this.props; | ||
50 | |||
51 | if (onChange) { | ||
52 | onChange(e); | ||
53 | } | ||
54 | } | ||
55 | |||
56 | render() { | ||
57 | const { | ||
58 | classes, | ||
59 | className, | ||
60 | disabled, | ||
61 | error, | ||
62 | focus, | ||
63 | id, | ||
64 | textareaClassName, | ||
65 | label, | ||
66 | showLabel, | ||
67 | value, | ||
68 | name, | ||
69 | placeholder, | ||
70 | spellCheck, | ||
71 | onBlur, | ||
72 | onFocus, | ||
73 | minLength, | ||
74 | maxLength, | ||
75 | required, | ||
76 | rows, | ||
77 | noMargin, | ||
78 | } = this.props; | ||
79 | |||
80 | return ( | ||
81 | <Wrapper | ||
82 | className={className} | ||
83 | identifier="franz-textarea" | ||
84 | noMargin={noMargin} | ||
85 | > | ||
86 | <Label | ||
87 | title={label} | ||
88 | showLabel={showLabel} | ||
89 | htmlFor={id} | ||
90 | className={classes.label} | ||
91 | isRequired={required} | ||
92 | > | ||
93 | <div | ||
94 | className={classnames({ | ||
95 | [`${textareaClassName}`]: textareaClassName, | ||
96 | [`${classes.wrapper}`]: true, | ||
97 | [`${classes.disabled}`]: disabled, | ||
98 | [`${classes.hasError}`]: error, | ||
99 | })}> | ||
100 | <textarea | ||
101 | autoFocus={focus} | ||
102 | id={id} | ||
103 | name={name} | ||
104 | placeholder={placeholder} | ||
105 | spellCheck={spellCheck} | ||
106 | className={classes.textarea} | ||
107 | ref={this.textareaRef} | ||
108 | onChange={this.onChange.bind(this)} | ||
109 | onFocus={onFocus} | ||
110 | onBlur={onBlur} | ||
111 | disabled={disabled} | ||
112 | minLength={minLength} | ||
113 | maxLength={maxLength} | ||
114 | rows={rows} | ||
115 | > | ||
116 | {value} | ||
117 | </textarea> | ||
118 | </div> | ||
119 | </Label> | ||
120 | {error && ( | ||
121 | <Error message={error} /> | ||
122 | )} | ||
123 | </Wrapper> | ||
124 | ); | ||
125 | } | ||
126 | } | ||
127 | |||
128 | export const Textarea = injectSheet(styles)(TextareaComponent); | ||