diff options
author | 2019-02-26 13:31:43 +0100 | |
---|---|---|
committer | 2019-02-26 13:31:43 +0100 | |
commit | ff4c9c7f527e911c37cf02a5d048f5e6652ed253 (patch) | |
tree | 8c47332ecaf852e0d86af918687ff783a3c3d8db /src/features/workspaces/components/CreateWorkspaceForm.js | |
parent | fix bug in form input library (diff) | |
download | ferdium-app-ff4c9c7f527e911c37cf02a5d048f5e6652ed253.tar.gz ferdium-app-ff4c9c7f527e911c37cf02a5d048f5e6652ed253.tar.zst ferdium-app-ff4c9c7f527e911c37cf02a5d048f5e6652ed253.zip |
improve workspace form setup
Diffstat (limited to 'src/features/workspaces/components/CreateWorkspaceForm.js')
-rw-r--r-- | src/features/workspaces/components/CreateWorkspaceForm.js | 29 |
1 files changed, 14 insertions, 15 deletions
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js index d440b9bae..83f6e07f7 100644 --- a/src/features/workspaces/components/CreateWorkspaceForm.js +++ b/src/features/workspaces/components/CreateWorkspaceForm.js | |||
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { Input, Button } from '@meetfranz/forms'; | 5 | import { Input, Button } from '@meetfranz/forms'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | |||
8 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
8 | import { required } from '../../../helpers/validation-helpers'; | ||
9 | 9 | ||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | submitButton: { | 11 | submitButton: { |
@@ -28,11 +28,11 @@ const styles = () => ({ | |||
28 | }, | 28 | }, |
29 | submitButton: { | 29 | submitButton: { |
30 | height: 'inherit', | 30 | height: 'inherit', |
31 | marginTop: '17px', | 31 | marginTop: '3px', |
32 | }, | 32 | }, |
33 | }); | 33 | }); |
34 | 34 | ||
35 | @observer @injectSheet(styles) | 35 | @injectSheet(styles) @observer |
36 | class CreateWorkspaceForm extends Component { | 36 | class CreateWorkspaceForm extends Component { |
37 | static contextTypes = { | 37 | static contextTypes = { |
38 | intl: intlShape, | 38 | intl: intlShape, |
@@ -43,46 +43,45 @@ class CreateWorkspaceForm extends Component { | |||
43 | onSubmit: PropTypes.func.isRequired, | 43 | onSubmit: PropTypes.func.isRequired, |
44 | }; | 44 | }; |
45 | 45 | ||
46 | prepareForm() { | 46 | form = (() => { |
47 | const { intl } = this.context; | 47 | const { intl } = this.context; |
48 | const config = { | 48 | return new Form({ |
49 | fields: { | 49 | fields: { |
50 | name: { | 50 | name: { |
51 | label: intl.formatMessage(messages.name), | 51 | label: intl.formatMessage(messages.name), |
52 | placeholder: intl.formatMessage(messages.name), | 52 | placeholder: intl.formatMessage(messages.name), |
53 | value: '', | 53 | value: '', |
54 | validators: [required], | ||
54 | }, | 55 | }, |
55 | }, | 56 | }, |
56 | }; | 57 | }); |
57 | return new Form(config); | 58 | })(); |
58 | } | ||
59 | 59 | ||
60 | submitForm(form) { | 60 | submitForm() { |
61 | const { form } = this; | ||
61 | form.submit({ | 62 | form.submit({ |
62 | onSuccess: async (f) => { | 63 | onSuccess: async (f) => { |
63 | const { onSubmit } = this.props; | 64 | const { onSubmit } = this.props; |
64 | const values = f.values(); | 65 | onSubmit(f.values()); |
65 | onSubmit(values); | ||
66 | }, | 66 | }, |
67 | onError: async () => {}, | ||
68 | }); | 67 | }); |
69 | } | 68 | } |
70 | 69 | ||
71 | render() { | 70 | render() { |
72 | const { intl } = this.context; | 71 | const { intl } = this.context; |
73 | const { classes } = this.props; | 72 | const { classes } = this.props; |
74 | const form = this.prepareForm(); | 73 | const { form } = this; |
75 | |||
76 | return ( | 74 | return ( |
77 | <div className={classes.form}> | 75 | <div className={classes.form}> |
78 | <Input | 76 | <Input |
79 | className={classes.input} | 77 | className={classes.input} |
80 | {...form.$('name').bind()} | 78 | {...form.$('name').bind()} |
79 | showLabel={false} | ||
81 | onEnterKey={this.submitForm.bind(this, form)} | 80 | onEnterKey={this.submitForm.bind(this, form)} |
82 | /> | 81 | /> |
83 | <Button | 82 | <Button |
84 | className={classes.submitButton} | 83 | className={classes.submitButton} |
85 | type="button" | 84 | type="submit" |
86 | label={intl.formatMessage(messages.submitButton)} | 85 | label={intl.formatMessage(messages.submitButton)} |
87 | onClick={this.submitForm.bind(this, form)} | 86 | onClick={this.submitForm.bind(this, form)} |
88 | /> | 87 | /> |