fix(react-scheduler): make it possible to create an appointment after…

… cancelled drag-drop (#2307)
DevExpress · Sep 11, 2019 · b666250 · b666250
1 parent d3d1df7
commit b666250
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx
@@ -24,7 +24,6 @@ export const Layout = React.memo(({
   );
 
   const onCommitButtonClick = () => {
-    handleClose();
     commit(currentValue);
   };
 

diff --git a/packages/dx-react-scheduler/src/plugins/edit-recurrence-menu.test.tsx b/packages/dx-react-scheduler/src/plugins/edit-recurrence-menu.test.tsx
@@ -16,6 +16,8 @@ describe('EditRecurrenceMenu', () => {
     action: {
       commitChangedAppointment: jest.fn(),
       commitDeletedAppointment: jest.fn(),
+      cancelChangedAppointment: jest.fn(),
+      stopEditAppointment: jest.fn(),
     },
   };
   const defaultProps = {
@@ -159,4 +161,21 @@ describe('EditRecurrenceMenu', () => {
     expect(defaultDeps.action.commitDeletedAppointment)
       .toBeCalled();
   });
+  it('should cancel appointment editing', () => {
+    const tree = mount((
+      <PluginHost>
+        {pluginDepsToComponents(defaultDeps, { getter: {} })}
+        <EditRecurrenceMenu
+          {...defaultProps}
+        />
+      </PluginHost>
+    ));
+
+    tree.find(defaultProps.layoutComponent).prop('handleClose')();
+
+    expect(defaultDeps.action.cancelChangedAppointment)
+      .toBeCalled();
+    expect(defaultDeps.action.stopEditAppointment)
+      .toBeCalled();
+  });
 });
diff --git a/packages/dx-react-scheduler/src/plugins/edit-recurrence-menu.tsx b/packages/dx-react-scheduler/src/plugins/edit-recurrence-menu.tsx
@@ -71,17 +71,25 @@ class EditRecurrenceMenuBase extends React.PureComponent<
     }
   }
 
-  commit = memoize((editAction, deleteAction, payload) => {
+  commit = memoize((editAction, deleteAction, payload) => (type) => {
     if (payload) {
-      return type => deleteAction({ deletedAppointmentData: payload, type });
+      deleteAction({ deletedAppointmentData: payload, type });
+    } else {
+      editAction(type);
     }
-    return type => editAction(type);
+    this.closeMenu();
   });
 
   closeMenu = () => {
     this.setState({ isOpen: false, deletedAppointmentData: null });
   }
 
+  cancelEditing = memoize((cancelAction, stopEditAction) => () => {
+    stopEditAction();
+    cancelAction();
+    this.closeMenu();
+  });
+
   availableOperations = memoize((getMessage, menuAvailableOperations) =>
     menuAvailableOperations.map(({ value }) => ({
       value,
@@ -120,10 +128,16 @@ class EditRecurrenceMenuBase extends React.PureComponent<
 
         <Template name="overlay">
           <TemplateConnector>
-            {(getters, { commitChangedAppointment, commitDeletedAppointment }) => {
+            {(getters, {
+              commitChangedAppointment, commitDeletedAppointment,
+              cancelChangedAppointment, stopEditAppointment,
+            }) => {
               const commit = this.commit(
                 commitChangedAppointment, commitDeletedAppointment, deletedAppointmentData,
               );
+              const cancelEditing = this.cancelEditing(
+                cancelChangedAppointment, stopEditAppointment,
+              );
 
               return (
                 <Overlay
@@ -134,7 +148,7 @@ class EditRecurrenceMenuBase extends React.PureComponent<
                   <Layout
                     isDeleting={!!deletedAppointmentData}
                     buttonComponent={buttonComponent}
-                    handleClose={this.closeMenu}
+                    handleClose={cancelEditing}
                     commit={commit}
                     availableOperations={availableOperations}
                     getMessage={getMessage}