diff options
author | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2021-10-15 16:22:25 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 16:22:25 +0530 |
commit | ec15f83b947fb2daf4ca1a72e3af527dc89512a3 (patch) | |
tree | ea049cee5184a58b5bc09505e723cd19a736c4bd /src/components/ui/textarea/index.tsx | |
parent | chore: move 'packages/ui' into 'src' (no longer an injected package) (#2077) (diff) | |
download | ferdium-app-ec15f83b947fb2daf4ca1a72e3af527dc89512a3.tar.gz ferdium-app-ec15f83b947fb2daf4ca1a72e3af527dc89512a3.tar.zst ferdium-app-ec15f83b947fb2daf4ca1a72e3af527dc89512a3.zip |
chore: move 'packages/forms' into 'src' (no longer an injected package) (#2079)
Diffstat (limited to 'src/components/ui/textarea/index.tsx')
-rw-r--r-- | src/components/ui/textarea/index.tsx | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx new file mode 100644 index 000000000..1b16698eb --- /dev/null +++ b/src/components/ui/textarea/index.tsx | |||
@@ -0,0 +1,126 @@ | |||
1 | import classnames from 'classnames'; | ||
2 | import { Component, createRef, TextareaHTMLAttributes } from 'react'; | ||
3 | import injectSheet from 'react-jss'; | ||
4 | |||
5 | import { IFormField, IWithStyle } from '../typings/generic'; | ||
6 | |||
7 | import { Error } from '../error'; | ||
8 | import { Label } from '../label'; | ||
9 | import { Wrapper } from '../wrapper'; | ||
10 | |||
11 | import styles from './styles'; | ||
12 | |||
13 | interface IData { | ||
14 | [index: string]: string; | ||
15 | } | ||
16 | |||
17 | interface IProps | ||
18 | extends TextareaHTMLAttributes<HTMLTextAreaElement>, | ||
19 | IFormField, | ||
20 | IWithStyle { | ||
21 | focus?: boolean; | ||
22 | data: IData; | ||
23 | textareaClassName?: string; | ||
24 | } | ||
25 | |||
26 | class TextareaComponent extends Component<IProps> { | ||
27 | static defaultProps = { | ||
28 | focus: false, | ||
29 | onChange: () => {}, | ||
30 | onBlur: () => {}, | ||
31 | onFocus: () => {}, | ||
32 | showLabel: true, | ||
33 | disabled: false, | ||
34 | rows: 5, | ||
35 | }; | ||
36 | |||
37 | private textareaRef = createRef<HTMLTextAreaElement>(); | ||
38 | |||
39 | componentDidMount() { | ||
40 | const { data } = this.props; | ||
41 | |||
42 | if (this.textareaRef && this.textareaRef.current && data) { | ||
43 | Object.keys(data).map( | ||
44 | key => (this.textareaRef.current!.dataset[key] = data[key]), | ||
45 | ); | ||
46 | } | ||
47 | } | ||
48 | |||
49 | onChange(e: React.ChangeEvent<HTMLTextAreaElement>) { | ||
50 | const { onChange } = this.props; | ||
51 | |||
52 | if (onChange) { | ||
53 | onChange(e); | ||
54 | } | ||
55 | } | ||
56 | |||
57 | render() { | ||
58 | const { | ||
59 | classes, | ||
60 | className, | ||
61 | disabled, | ||
62 | error, | ||
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 | > | ||
101 | <textarea | ||
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 && <Error message={error} />} | ||
121 | </Wrapper> | ||
122 | ); | ||
123 | } | ||
124 | } | ||
125 | |||
126 | export const Textarea = injectSheet(styles)(TextareaComponent); | ||