diff options
Diffstat (limited to 'src/features/workspaces/components/CreateWorkspaceForm.tsx')
-rw-r--r-- | src/features/workspaces/components/CreateWorkspaceForm.tsx | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.tsx b/src/features/workspaces/components/CreateWorkspaceForm.tsx new file mode 100644 index 000000000..eafe9f36a --- /dev/null +++ b/src/features/workspaces/components/CreateWorkspaceForm.tsx | |||
@@ -0,0 +1,97 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
5 | import Input from '../../../components/ui/input/index'; | ||
6 | import Button from '../../../components/ui/button'; | ||
7 | import Form from '../../../lib/Form'; | ||
8 | import { required } from '../../../helpers/validation-helpers'; | ||
9 | import { workspaceStore } from '../index'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | submitButton: { | ||
13 | id: 'settings.workspace.add.form.submitButton', | ||
14 | defaultMessage: 'Create workspace', | ||
15 | }, | ||
16 | name: { | ||
17 | id: 'settings.workspace.add.form.name', | ||
18 | defaultMessage: 'Name', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | const styles = { | ||
23 | form: { | ||
24 | display: 'flex', | ||
25 | }, | ||
26 | input: { | ||
27 | flexGrow: 1, | ||
28 | marginRight: '10px', | ||
29 | }, | ||
30 | submitButton: { | ||
31 | height: 'inherit', | ||
32 | }, | ||
33 | }; | ||
34 | |||
35 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
36 | isSubmitting: boolean; | ||
37 | onSubmit: (...args: any[]) => void; | ||
38 | } | ||
39 | |||
40 | @observer | ||
41 | class CreateWorkspaceForm extends Component<IProps> { | ||
42 | form: Form; | ||
43 | |||
44 | constructor(props: IProps) { | ||
45 | super(props); | ||
46 | |||
47 | this.form = new Form({ | ||
48 | fields: { | ||
49 | name: { | ||
50 | label: this.props.intl.formatMessage(messages.name), | ||
51 | placeholder: this.props.intl.formatMessage(messages.name), | ||
52 | value: '', | ||
53 | validators: [required], | ||
54 | }, | ||
55 | }, | ||
56 | }); | ||
57 | } | ||
58 | |||
59 | submitForm(): void { | ||
60 | this.form.submit({ | ||
61 | onSuccess: async form => { | ||
62 | const { onSubmit } = this.props; | ||
63 | const values = form.values(); | ||
64 | onSubmit(values); | ||
65 | }, | ||
66 | }); | ||
67 | } | ||
68 | |||
69 | render(): ReactElement { | ||
70 | const { classes, isSubmitting, intl } = this.props; | ||
71 | const { form } = this; | ||
72 | |||
73 | return ( | ||
74 | <div className={classes.form}> | ||
75 | <Input | ||
76 | {...form.$('name').bind()} | ||
77 | className={classes.input} | ||
78 | showLabel={false} | ||
79 | onEnterKey={this.submitForm.bind(this, form)} | ||
80 | focus={workspaceStore.isUserAllowedToUseFeature} | ||
81 | /> | ||
82 | <Button | ||
83 | className={`${classes.submitButton} franz-form__button`} | ||
84 | type="submit" | ||
85 | label={intl.formatMessage(messages.submitButton)} | ||
86 | onClick={this.submitForm.bind(this, form)} | ||
87 | busy={isSubmitting} | ||
88 | buttonType={isSubmitting ? 'secondary' : 'primary'} | ||
89 | /> | ||
90 | </div> | ||
91 | ); | ||
92 | } | ||
93 | } | ||
94 | |||
95 | export default injectIntl( | ||
96 | withStyles(styles, { injectTheme: true })(CreateWorkspaceForm), | ||
97 | ); | ||