feat(react-scheduler): do not show AppointmentForm's Delete Button if a new appointment is being edited

packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.jsx

@@ -67,6 +67,7 @@ const LayoutBase = ({
   fullSize,
   readOnly,
   disableSaveButton,
+  hideDeleteButton,
   ...restProps
 }) => (
   <Grid
@@ -86,12 +87,16 @@ const LayoutBase = ({
     />
     {!readOnly && (
       <>
-        <CommandButton
-          onExecute={onDeleteButtonClick}
-          getMessage={getMessage}
-          id={DELETE_BUTTON}
-        />
-        <div className={classes.line} />
+        {!hideDeleteButton && (
+          <>
+            <CommandButton
+              onExecute={onDeleteButtonClick}
+              getMessage={getMessage}
+              id={DELETE_BUTTON}
+            />
+            <div className={classes.line} />
+          </>
+        )}
         <CommandButton
           getMessage={getMessage}
           disabled={disableSaveButton}
@@ -116,6 +121,7 @@ LayoutBase.propTypes = {
   readOnly: PropTypes.bool,
   children: PropTypes.node,
   disableSaveButton: PropTypes.bool,
+  hideDeleteButton: PropTypes.bool,
 };
 
 LayoutBase.defaultProps = {
@@ -124,6 +130,7 @@ LayoutBase.defaultProps = {
   fullSize: false,
   readOnly: false,
   disableSaveButton: false,
+  hideDeleteButton: false,
 };
 
 export const Layout = withStyles(styles)(LayoutBase, { name: 'Layout' });

packages/dx-react-scheduler-material-ui/src/templates/appointment-form/command/layout.test.jsx

@@ -73,6 +73,19 @@ describe('AppointmentForm command', () => {
         .toEqual(CANCEL_BUTTON);
     });
 
+    it('shouldn\'t render Delete Button if hideDeleteButton prop is true', () => {
+      const tree = shallow((
+        <Layout {...defaultProps} hideDeleteButton />
+      ));
+
+      const buttons = tree.find(defaultProps.commandButtonComponent);
+      expect(buttons).toHaveLength(2);
+      expect(buttons.at(0).prop('id'))
+        .toEqual(CANCEL_BUTTON);
+      expect(buttons.at(1).prop('id'))
+        .toEqual(SAVE_BUTTON);
+    });
+
     it('should call onCommitButtonClick', () => {
       const tree = shallow((
         <Layout {...defaultProps} />

packages/dx-react-scheduler/api/dx-react-scheduler.api.md

@@ -111,6 +111,7 @@ export namespace AppointmentForm {
     disableSaveButton?: boolean;
     fullSize: boolean;
     getMessage: (messageKey: string) => string;
+    hideDeleteButton?: boolean;
     onCancelButtonClick: () => void;
     onCommitButtonClick: () => void;
     onDeleteButtonClick: () => void;

packages/dx-react-scheduler/docs/reference/appointment-form.md

@@ -85,6 +85,7 @@ Field | Type | Description
 readOnly? | boolean | Specifies whether the appointment form is read-only.
 fullSize | boolean | Specifies whether the command layout is full-size.
 disableSaveButton? | boolean | Specifies whether to disable the Save button.
+hideDeleteButton? | boolean | Specifies whether to hide the Delete button.
 onCommitButtonClick | () => void | An event raised when the Commit button is clicked. The event handler should commit appointment changes.
 onCancelButtonClick | () => void | An event raised when the Cancel button is clicked. The event handler should close the appointment form.
 onDeleteButtonClick | () => void | An event raised when the Delete button is clicked. The event handler should delete an appointment.

packages/dx-react-scheduler/src/plugins/appointment-form.test.tsx

@@ -186,6 +186,7 @@ describe('AppointmentForm', () => {
           onDeleteButtonClick: expect.any(Function),
           readOnly: false,
           disableSaveButton: false,
+          hideDeleteButton: false,
         });
     });
 
@@ -203,6 +204,40 @@ describe('AppointmentForm', () => {
       expect(tree.find(defaultProps.commandLayoutComponent).prop('fullSize'))
         .toBeTruthy();
     });
+
+    it('should hide delete button if a new appointment is being edited', () => {
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents({
+            ...defaultDeps,
+            getter: { ...defaultDeps.getter, editingAppointment: undefined },
+          })}
+          <AppointmentForm
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+
+      const templatePlaceholder = tree
+        .find(Template)
+        .filterWhere(node => node.props().name === 'commandLayout');
+
+      const commandLayoutComponent = tree.find(defaultProps.commandLayoutComponent);
+      expect(commandLayoutComponent.exists())
+        .toBeTruthy();
+      expect(commandLayoutComponent.props())
+        .toMatchObject({
+          commandButtonComponent: defaultProps.commandButtonComponent,
+          fullSize: false,
+          getMessage: expect.any(Function),
+          onCancelButtonClick: expect.any(Function),
+          onCommitButtonClick: expect.any(Function),
+          onDeleteButtonClick: expect.any(Function),
+          readOnly: false,
+          disableSaveButton: false,
+          hideDeleteButton: true,
+        });
+    });
   });
 
   it('should render BasicLayout', () => {

packages/dx-react-scheduler/src/plugins/appointment-form.tsx

@@ -292,6 +292,7 @@ class AppointmentFormBase extends React.PureComponent<AppointmentFormProps, Appo
                   readOnly={readOnly}
                   fullSize={isRecurrence}
                   disableSaveButton={!isFormEdited}
+                  hideDeleteButton={isNew}
                 />
               );
             }}

packages/dx-react-scheduler/src/types/editing/appointment-form.types.ts

@@ -39,8 +39,10 @@ export namespace AppointmentForm {
     readOnly?: boolean;
     /** Specifies whether the command layout is full-size. */
     fullSize: boolean;
-    /** Specifies whether to disable the SaveButton. */
+    /** Specifies whether to disable the Save button. */
     disableSaveButton?: boolean;
+    /** Specifies whether to hide the Delete button. */
+    hideDeleteButton?: boolean;
     /** An event raised when the Commit button is clicked. The event handler should commit an appointment changes. */
     onCommitButtonClick: () => void;
     /** An event raised when the Cancel button is clicked. The event handler should close the appointment form. */