Skip to content

Commit

Permalink
Submit form modals on enter press
Browse files Browse the repository at this point in the history
  • Loading branch information
BenjaVR committed Feb 24, 2019
1 parent 0009c4e commit c30840b
Show file tree
Hide file tree
Showing 5 changed files with 314 additions and 269 deletions.
91 changes: 50 additions & 41 deletions src/components/departments/DepartmentsFormModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
};

this.renderEducationSelectOption = this.renderEducationSelectOption.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleColorChange = this.handleColorChange.bind(this);
this.handleAfterClose = this.handleAfterClose.bind(this);
this.handleClose = this.handleClose.bind(this);
Expand Down Expand Up @@ -148,49 +149,51 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
});

return (
<Modal
visible={this.props.isVisible}
title={this.props.title}
onCancel={this.handleClose}
onOk={this.handleOk}
okText={this.props.okText}
confirmLoading={this.state.isSubmitting}
destroyOnClose={true}
afterClose={this.handleAfterClose}
>
<Form>
<FormItem label="Naam">
{getFieldDecorator<Department>("name", {
validateTrigger: this.state.formValidateTrigger,
rules: [
{ required: true, message: "Naam mag niet leeg zijn" },
],
})(
<Input
autoFocus={true}
disabled={this.state.isSubmitting}
/>,
)}
</FormItem>
<FormItem label="Kleur">
{getFieldDecorator<Department>("color", {
validateTrigger: this.state.formValidateTrigger,
rules: [
{ required: true, message: "Kies een kleur" },
],
})(
<CirclePicker color={this.state.selectedColor} onChange={this.handleColorChange} />,
)}
</FormItem>
<div onKeyDown={this.handleKeyDown}>
<Modal
visible={this.props.isVisible}
title={this.props.title}
onCancel={this.handleClose}
onOk={this.handleOk}
okText={this.props.okText}
confirmLoading={this.state.isSubmitting}
destroyOnClose={true}
afterClose={this.handleAfterClose}
>
<Form>
<FormItem label="Naam">
{getFieldDecorator<Department>("name", {
validateTrigger: this.state.formValidateTrigger,
rules: [
{ required: true, message: "Naam mag niet leeg zijn" },
],
})(
<Input
autoFocus={true}
disabled={this.state.isSubmitting}
/>,
)}
</FormItem>
<FormItem label="Kleur">
{getFieldDecorator<Department>("color", {
validateTrigger: this.state.formValidateTrigger,
rules: [
{ required: true, message: "Kies een kleur" },
],
})(
<CirclePicker color={this.state.selectedColor} onChange={this.handleColorChange} />,
)}
</FormItem>

<h4>Capaciteit per opleiding</h4>
<p>Max. aantal studenten per opleiding voor deze afdeling</p>
{capacitiesFormItems}
<Button type="dashed" onClick={this.handleAddCapacityField} className={styles.fullWidthInputField}>
Voeg capaciteit toe
<h4>Capaciteit per opleiding</h4>
<p>Max. aantal studenten per opleiding voor deze afdeling</p>
{capacitiesFormItems}
<Button type="dashed" onClick={this.handleAddCapacityField} className={styles.fullWidthInputField}>
Voeg capaciteit toe
</Button>
</Form>
</Modal>
</Form>
</Modal>
</div>
);
}

Expand All @@ -200,6 +203,12 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
);
}

private handleKeyDown(event: React.KeyboardEvent): void {
if (event.key === "Enter") {
this.handleOk();
}
}

private handleColorChange(color: ColorResult): void {
this.setState({ selectedColor: color.hex });
}
Expand Down
59 changes: 34 additions & 25 deletions src/components/educations/EducationsFormModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ class EducationFormModal extends React.Component<EducationFormModalProps, IEduca
formValidateTrigger: "",
};

this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleOk = this.handleOk.bind(this);
}
Expand All @@ -53,34 +54,42 @@ class EducationFormModal extends React.Component<EducationFormModalProps, IEduca
const { getFieldDecorator } = this.props.form;

return (
<Modal
visible={this.props.isVisible}
title={this.props.title}
onCancel={this.handleClose}
onOk={this.handleOk}
okText={this.props.okText}
confirmLoading={this.state.isSubmitting}
destroyOnClose={true}
>
<Form>
<FormItem label="Naam">
{getFieldDecorator<Education>("name", {
validateTrigger: this.state.formValidateTrigger,
rules: [
{ required: true, message: "Naam mag niet leeg zijn" },
],
})(
<Input
autoFocus={true}
disabled={this.state.isSubmitting}
/>,
)}
</FormItem>
</Form>
</Modal>
<div onKeyDown={this.handleKeyDown}>
<Modal
visible={this.props.isVisible}
title={this.props.title}
onCancel={this.handleClose}
onOk={this.handleOk}
okText={this.props.okText}
confirmLoading={this.state.isSubmitting}
destroyOnClose={true}
>
<Form>
<FormItem label="Naam">
{getFieldDecorator<Education>("name", {
validateTrigger: this.state.formValidateTrigger,
rules: [
{ required: true, message: "Naam mag niet leeg zijn" },
],
})(
<Input
autoFocus={true}
disabled={this.state.isSubmitting}
/>,
)}
</FormItem>
</Form>
</Modal>
</div>
);
}

private handleKeyDown(event: React.KeyboardEvent): void {
if (event.key === "Enter") {
this.handleOk();
}
}

private handleClose(): void {
this.props.onCloseRequest();
}
Expand Down
Loading

1 comment on commit c30840b

@BenjaVR
Copy link
Owner

@BenjaVR BenjaVR commented on c30840b Feb 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#60

Please sign in to comment.