diff options
Diffstat (limited to 'src/features/workspaces/components/CreateWorkspaceForm.js')
-rw-r--r-- | src/features/workspaces/components/CreateWorkspaceForm.js | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js new file mode 100644 index 000000000..83f6e07f7 --- /dev/null +++ b/src/features/workspaces/components/CreateWorkspaceForm.js | |||
@@ -0,0 +1,93 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import { Input, Button } from '@meetfranz/forms'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | import Form from '../../../lib/Form'; | ||
8 | import { required } from '../../../helpers/validation-helpers'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | submitButton: { | ||
12 | id: 'settings.workspace.add.form.submitButton', | ||
13 | defaultMessage: '!!!Save workspace', | ||
14 | }, | ||
15 | name: { | ||
16 | id: 'settings.workspace.add.form.name', | ||
17 | defaultMessage: '!!!Name', | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | const styles = () => ({ | ||
22 | form: { | ||
23 | display: 'flex', | ||
24 | }, | ||
25 | input: { | ||
26 | flexGrow: 1, | ||
27 | marginRight: '10px', | ||
28 | }, | ||
29 | submitButton: { | ||
30 | height: 'inherit', | ||
31 | marginTop: '3px', | ||
32 | }, | ||
33 | }); | ||
34 | |||
35 | @injectSheet(styles) @observer | ||
36 | class CreateWorkspaceForm extends Component { | ||
37 | static contextTypes = { | ||
38 | intl: intlShape, | ||
39 | }; | ||
40 | |||
41 | static propTypes = { | ||
42 | classes: PropTypes.object.isRequired, | ||
43 | onSubmit: PropTypes.func.isRequired, | ||
44 | }; | ||
45 | |||
46 | form = (() => { | ||
47 | const { intl } = this.context; | ||
48 | return new Form({ | ||
49 | fields: { | ||
50 | name: { | ||
51 | label: intl.formatMessage(messages.name), | ||
52 | placeholder: intl.formatMessage(messages.name), | ||
53 | value: '', | ||
54 | validators: [required], | ||
55 | }, | ||
56 | }, | ||
57 | }); | ||
58 | })(); | ||
59 | |||
60 | submitForm() { | ||
61 | const { form } = this; | ||
62 | form.submit({ | ||
63 | onSuccess: async (f) => { | ||
64 | const { onSubmit } = this.props; | ||
65 | onSubmit(f.values()); | ||
66 | }, | ||
67 | }); | ||
68 | } | ||
69 | |||
70 | render() { | ||
71 | const { intl } = this.context; | ||
72 | const { classes } = this.props; | ||
73 | const { form } = this; | ||
74 | return ( | ||
75 | <div className={classes.form}> | ||
76 | <Input | ||
77 | className={classes.input} | ||
78 | {...form.$('name').bind()} | ||
79 | showLabel={false} | ||
80 | onEnterKey={this.submitForm.bind(this, form)} | ||
81 | /> | ||
82 | <Button | ||
83 | className={classes.submitButton} | ||
84 | type="submit" | ||
85 | label={intl.formatMessage(messages.submitButton)} | ||
86 | onClick={this.submitForm.bind(this, form)} | ||
87 | /> | ||
88 | </div> | ||
89 | ); | ||
90 | } | ||
91 | } | ||
92 | |||
93 | export default CreateWorkspaceForm; | ||