diff options
Diffstat (limited to 'packages')
-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 | ||||
-rw-r--r-- | packages/ui/package-lock.json | 95 | ||||
-rw-r--r-- | packages/ui/package.json | 7 |
6 files changed, 236 insertions, 54 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 | }); | ||
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 8fa68a29b..64020c004 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json | |||
@@ -1,63 +1,20 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/ui", | 2 | "name": "@meetfranz/ui", |
3 | "version": "0.0.0", | 3 | "version": "1.0.0", |
4 | "lockfileVersion": 1, | 4 | "lockfileVersion": 1, |
5 | "requires": true, | 5 | "requires": true, |
6 | "dependencies": { | 6 | "dependencies": { |
7 | "@mdi/js": { | ||
8 | "version": "3.3.92", | ||
9 | "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.3.92.tgz", | ||
10 | "integrity": "sha512-l+12IwTycHlijWMiRWBAssm0RSgkQiwMthIy/EcBAdSqtnsHnFjHq+aI2MBZ8/AYX0QBxNUv4+EN0SXZgNkWDg==" | ||
11 | }, | ||
12 | "@mdi/react": { | 7 | "@mdi/react": { |
13 | "version": "1.1.0", | 8 | "version": "1.1.0", |
14 | "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz", | 9 | "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz", |
15 | "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw==" | 10 | "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw==" |
16 | }, | 11 | }, |
17 | "@meetfranz/theme": { | 12 | "@meetfranz/theme": { |
18 | "version": "file:../theme", | 13 | "version": "1.0.14", |
14 | "resolved": "https://registry.npmjs.org/@meetfranz/theme/-/theme-1.0.14.tgz", | ||
15 | "integrity": "sha512-iWP+3ifiNum98sHKiNdUJK+R0p4Z7TT8OenA1N2BnSC6CFob+dLhzAK+o5lxcyEcKZKYDwd7JKRZj93wqpBPpg==", | ||
19 | "requires": { | 16 | "requires": { |
20 | "color": "^3.1.0" | 17 | "color": "^3.1.0" |
21 | }, | ||
22 | "dependencies": { | ||
23 | "color": { | ||
24 | "version": "3.1.0", | ||
25 | "bundled": true, | ||
26 | "requires": { | ||
27 | "color-convert": "^1.9.1", | ||
28 | "color-string": "^1.5.2" | ||
29 | } | ||
30 | }, | ||
31 | "color-convert": { | ||
32 | "version": "1.9.3", | ||
33 | "bundled": true, | ||
34 | "requires": { | ||
35 | "color-name": "1.1.3" | ||
36 | } | ||
37 | }, | ||
38 | "color-name": { | ||
39 | "version": "1.1.3", | ||
40 | "bundled": true | ||
41 | }, | ||
42 | "color-string": { | ||
43 | "version": "1.5.3", | ||
44 | "bundled": true, | ||
45 | "requires": { | ||
46 | "color-name": "^1.0.0", | ||
47 | "simple-swizzle": "^0.2.2" | ||
48 | } | ||
49 | }, | ||
50 | "is-arrayish": { | ||
51 | "version": "0.3.2", | ||
52 | "bundled": true | ||
53 | }, | ||
54 | "simple-swizzle": { | ||
55 | "version": "0.2.2", | ||
56 | "bundled": true, | ||
57 | "requires": { | ||
58 | "is-arrayish": "^0.3.1" | ||
59 | } | ||
60 | } | ||
61 | } | 18 | } |
62 | }, | 19 | }, |
63 | "asap": { | 20 | "asap": { |
@@ -65,6 +22,37 @@ | |||
65 | "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", | 22 | "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", |
66 | "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" | 23 | "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" |
67 | }, | 24 | }, |
25 | "color": { | ||
26 | "version": "3.1.2", | ||
27 | "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", | ||
28 | "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", | ||
29 | "requires": { | ||
30 | "color-convert": "^1.9.1", | ||
31 | "color-string": "^1.5.2" | ||
32 | } | ||
33 | }, | ||
34 | "color-convert": { | ||
35 | "version": "1.9.3", | ||
36 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", | ||
37 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", | ||
38 | "requires": { | ||
39 | "color-name": "1.1.3" | ||
40 | } | ||
41 | }, | ||
42 | "color-name": { | ||
43 | "version": "1.1.3", | ||
44 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", | ||
45 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" | ||
46 | }, | ||
47 | "color-string": { | ||
48 | "version": "1.5.3", | ||
49 | "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", | ||
50 | "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", | ||
51 | "requires": { | ||
52 | "color-name": "^1.0.0", | ||
53 | "simple-swizzle": "^0.2.2" | ||
54 | } | ||
55 | }, | ||
68 | "core-js": { | 56 | "core-js": { |
69 | "version": "1.2.7", | 57 | "version": "1.2.7", |
70 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", | 58 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", |
@@ -110,6 +98,11 @@ | |||
110 | "safer-buffer": ">= 2.1.2 < 3" | 98 | "safer-buffer": ">= 2.1.2 < 3" |
111 | } | 99 | } |
112 | }, | 100 | }, |
101 | "is-arrayish": { | ||
102 | "version": "0.3.2", | ||
103 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", | ||
104 | "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" | ||
105 | }, | ||
113 | "is-stream": { | 106 | "is-stream": { |
114 | "version": "1.1.0", | 107 | "version": "1.1.0", |
115 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", | 108 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", |
@@ -188,6 +181,14 @@ | |||
188 | "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", | 181 | "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", |
189 | "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" | 182 | "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" |
190 | }, | 183 | }, |
184 | "simple-swizzle": { | ||
185 | "version": "0.2.2", | ||
186 | "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", | ||
187 | "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", | ||
188 | "requires": { | ||
189 | "is-arrayish": "^0.3.1" | ||
190 | } | ||
191 | }, | ||
191 | "spin.js": { | 192 | "spin.js": { |
192 | "version": "2.3.2", | 193 | "version": "2.3.2", |
193 | "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", | 194 | "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", |
diff --git a/packages/ui/package.json b/packages/ui/package.json index 214437093..fefe06f4c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json | |||
@@ -1,7 +1,7 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/ui", | 2 | "name": "@meetfranz/ui", |
3 | "version": "1.0.0", | 3 | "version": "1.1.0", |
4 | "description": "React UI components for Ferdi", | 4 | "description": "React UI 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", |
@@ -23,7 +23,6 @@ | |||
23 | "author": "Stefan Malzner <stefan@adlk.io>", | 23 | "author": "Stefan Malzner <stefan@adlk.io>", |
24 | "license": "Apache-2.0", | 24 | "license": "Apache-2.0", |
25 | "dependencies": { | 25 | "dependencies": { |
26 | "@mdi/js": "^3.3.92", | ||
27 | "@mdi/react": "^1.1.0", | 26 | "@mdi/react": "^1.1.0", |
28 | "@meetfranz/theme": "^1.0.14", | 27 | "@meetfranz/theme": "^1.0.14", |
29 | "react-loader": "^2.4.5" | 28 | "react-loader": "^2.4.5" |
@@ -34,5 +33,5 @@ | |||
34 | "react-dom": "16.7.0", | 33 | "react-dom": "16.7.0", |
35 | "react-jss": "^8.6.1" | 34 | "react-jss": "^8.6.1" |
36 | }, | 35 | }, |
37 | "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61" | 36 | "gitHead": "254da30f801169fac376bda1439b46cabbb491ad" |
38 | } | 37 | } |