diff options
Diffstat (limited to 'packages/forms/src/textarea')
-rw-r--r-- | packages/forms/src/textarea/index.tsx | 126 | ||||
-rw-r--r-- | packages/forms/src/textarea/styles.ts | 54 |
2 files changed, 0 insertions, 180 deletions
diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx deleted file mode 100644 index 1b16698eb..000000000 --- a/packages/forms/src/textarea/index.tsx +++ /dev/null | |||
@@ -1,126 +0,0 @@ | |||
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); | ||
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts deleted file mode 100644 index ff3a3202b..000000000 --- a/packages/forms/src/textarea/styles.ts +++ /dev/null | |||
@@ -1,54 +0,0 @@ | |||
1 | import { Property } from 'csstype'; | ||
2 | |||
3 | import { Theme } from '../../../theme'; | ||
4 | |||
5 | export default (theme: Theme) => ({ | ||
6 | label: { | ||
7 | '& > div': { | ||
8 | marginTop: 5, | ||
9 | }, | ||
10 | }, | ||
11 | disabled: { | ||
12 | opacity: theme.inputDisabledOpacity, | ||
13 | }, | ||
14 | formModifier: { | ||
15 | background: 'none', | ||
16 | border: 0, | ||
17 | borderLeft: theme.inputBorder, | ||
18 | padding: '4px 20px 0', | ||
19 | outline: 'none', | ||
20 | |||
21 | '&:active': { | ||
22 | opacity: 0.5, | ||
23 | }, | ||
24 | |||
25 | '& svg': { | ||
26 | fill: theme.inputModifierColor, | ||
27 | }, | ||
28 | }, | ||
29 | textarea: { | ||
30 | background: 'none', | ||
31 | border: 0, | ||
32 | fontSize: theme.uiFontSize, | ||
33 | outline: 'none', | ||
34 | padding: 8, | ||
35 | width: '100%', | ||
36 | color: theme.inputColor, | ||
37 | |||
38 | '&::placeholder': { | ||
39 | color: theme.inputPlaceholderColor, | ||
40 | }, | ||
41 | }, | ||
42 | wrapper: { | ||
43 | background: theme.inputBackground, | ||
44 | border: theme.inputBorder, | ||
45 | borderRadius: theme.borderRadiusSmall, | ||
46 | boxSizing: 'border-box' as Property.BoxSizing, | ||
47 | display: 'flex', | ||
48 | order: 1, | ||
49 | width: '100%', | ||
50 | }, | ||
51 | hasError: { | ||
52 | borderColor: theme.brandDanger, | ||
53 | }, | ||
54 | }); | ||