diff options
author | Amine El Mouafik <412895+kytwb@users.noreply.github.com> | 2021-02-08 10:34:45 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-08 10:34:45 +0100 |
commit | 035002ceedf78d5ec73eabc0df7f06139939b967 (patch) | |
tree | 1c0d1e9531bae05fb65d70b9ea25baf404b74fe1 /packages/forms | |
parent | docs: add k0staa as a contributor (#1193) (diff) | |
download | ferdium-app-035002ceedf78d5ec73eabc0df7f06139939b967.tar.gz ferdium-app-035002ceedf78d5ec73eabc0df7f06139939b967.tar.zst ferdium-app-035002ceedf78d5ec73eabc0df7f06139939b967.zip |
Synchronize with Franz 5.6.0 (#1033)
Co-authored-by: FranzBot <i18n@meetfranz.com>
Co-authored-by: vantezzen <hello@vantezzen.io>
Co-authored-by: Makazzz <makazzzpro@live.ca>
Co-authored-by: Stefan Malzner <stefan@adlk.io>
Co-authored-by: Amine Mouafik <amine@mouafik.fr>
Diffstat (limited to 'packages/forms')
-rw-r--r-- | packages/forms/package.json | 6 | ||||
-rw-r--r-- | packages/forms/src/index.ts | 1 | ||||
-rw-r--r-- | packages/forms/src/textarea/index.tsx | 128 | ||||
-rw-r--r-- | packages/forms/src/textarea/styles.ts | 53 |
4 files changed, 185 insertions, 3 deletions
diff --git a/packages/forms/package.json b/packages/forms/package.json index 18b6d2244..f61b787ac 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json | |||
@@ -1,7 +1,7 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/forms", | 2 | "name": "@meetfranz/forms", |
3 | "version": "1.1.0", | 3 | "version": "1.2.1", |
4 | "description": "React form components for Ferdi", | 4 | "description": "React form components for Franz", |
5 | "main": "lib/index.js", | 5 | "main": "lib/index.js", |
6 | "scripts": { | 6 | "scripts": { |
7 | "dev": "tsc -w", | 7 | "dev": "tsc -w", |
@@ -35,5 +35,5 @@ | |||
35 | "react-dom": "16.7.0", | 35 | "react-dom": "16.7.0", |
36 | "react-jss": "^8.6.1" | 36 | "react-jss": "^8.6.1" |
37 | }, | 37 | }, |
38 | "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61" | 38 | "gitHead": "00db2bddccb8bb8ad7d29b8d032876c798b8bbf3" |
39 | } | 39 | } |
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index ea47fe25e..45a9ed8e3 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | export { Input } from './input'; | 1 | export { Input } from './input'; |
2 | export { Textarea } from './textarea'; | ||
2 | export { Toggle } from './toggle'; | 3 | export { Toggle } from './toggle'; |
3 | export { Button } from './button'; | 4 | export { Button } from './button'; |
4 | export { Select } from './select'; | 5 | export { Select } from './select'; |
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); | ||
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts new file mode 100644 index 000000000..c1cbd76a5 --- /dev/null +++ b/packages/forms/src/textarea/styles.ts | |||
@@ -0,0 +1,53 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import CSS from 'csstype'; | ||
3 | |||
4 | export default (theme: Theme) => ({ | ||
5 | label: { | ||
6 | '& > div': { | ||
7 | marginTop: 5, | ||
8 | }, | ||
9 | }, | ||
10 | disabled: { | ||
11 | opacity: theme.inputDisabledOpacity, | ||
12 | }, | ||
13 | formModifier: { | ||
14 | background: 'none', | ||
15 | border: 0, | ||
16 | borderLeft: theme.inputBorder, | ||
17 | padding: '4px 20px 0', | ||
18 | outline: 'none', | ||
19 | |||
20 | '&:active': { | ||
21 | opacity: 0.5, | ||
22 | }, | ||
23 | |||
24 | '& svg': { | ||
25 | fill: theme.inputModifierColor, | ||
26 | }, | ||
27 | }, | ||
28 | textarea: { | ||
29 | background: 'none', | ||
30 | border: 0, | ||
31 | fontSize: theme.uiFontSize, | ||
32 | outline: 'none', | ||
33 | padding: 8, | ||
34 | width: '100%', | ||
35 | color: theme.inputColor, | ||
36 | |||
37 | '&::placeholder': { | ||
38 | color: theme.inputPlaceholderColor, | ||
39 | }, | ||
40 | }, | ||
41 | wrapper: { | ||
42 | background: theme.inputBackground, | ||
43 | border: theme.inputBorder, | ||
44 | borderRadius: theme.borderRadiusSmall, | ||
45 | boxSizing: 'border-box' as CSS.BoxSizingProperty, | ||
46 | display: 'flex', | ||
47 | order: 1, | ||
48 | width: '100%', | ||
49 | }, | ||
50 | hasError: { | ||
51 | borderColor: theme.brandDanger, | ||
52 | }, | ||
53 | }); | ||