fix(react-scheduler): pass formatDate func into DnD drafts (#2031)

DevExpress · May 16, 2019 · 63df375 · 63df375
1 parent 068ffbe
commit 63df375
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 65 deletions.
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/drag-drop/appointments.jsx b/packages/dx-react-scheduler-material-ui/src/templates/drag-drop/appointments.jsx
@@ -24,7 +24,7 @@ const sourceStyles = {
 };
 
 const DraftAppointmentBase = ({
-  classes, className, data,
+  classes, className, data, formatDate,
   type, fromPrev, toNext, ...restProps
 }) => (
   <Appointment
@@ -37,6 +37,7 @@ const DraftAppointmentBase = ({
       data={data}
       type={type}
       recurringIconComponent={Repeat}
+      formatDate={formatDate}
     />
     {toNext && <SplitIndicator position={POSITION_END} appointmentType={type} />}
   </Appointment>
@@ -47,6 +48,7 @@ DraftAppointmentBase.propTypes = {
   data: PropTypes.object.isRequired,
   fromPrev: PropTypes.bool.isRequired,
   toNext: PropTypes.bool.isRequired,
+  formatDate: PropTypes.func.isRequired,
   className: PropTypes.string,
   type: PropTypes.string,
 };

diff --git a/packages/dx-react-scheduler/src/plugins/appointments.jsx b/packages/dx-react-scheduler/src/plugins/appointments.jsx
@@ -31,38 +31,38 @@ export class Appointments extends React.PureComponent {
           name="appointment"
         >
           {params => (
-            <Container style={params.style}>
-              <TemplatePlaceholder name="appointmentTop" params={{ data: params.data, type: params.type, slice: params.fromPrev }} />
-              <TemplatePlaceholder name="appointmentContent" params={params} />
-              <TemplatePlaceholder name="appointmentBottom" params={{ data: params.data, type: params.type, slice: params.toNext }} />
-            </Container>
+            <TemplateConnector>
+              {({ formatDate }) => (
+                <Container style={params.style}>
+                  <TemplatePlaceholder name="appointmentTop" params={{ data: params.data, type: params.type, slice: params.fromPrev }} />
+                  <TemplatePlaceholder name="appointmentContent" params={{ ...params, formatDate }} />
+                  <TemplatePlaceholder name="appointmentBottom" params={{ data: params.data, type: params.type, slice: params.toNext }} />
+                </Container>
+              )}
+            </TemplateConnector>
           )}
         </Template>
 
         <Template name="appointmentContent">
           {({
-            onClick, onDoubleClick,
+            onClick, onDoubleClick, formatDate,
             data, type, style, fromPrev, toNext,
             ...restParams
           }) => (
-            <TemplateConnector>
-              {({ formatDate }) => (
-                <Appointment
-                  data={data}
-                  {...createClickHandlers(onClick, onDoubleClick)}
-                  {...restParams}
-                >
-                  {fromPrev && <SplitIndicator position={POSITION_START} appointmentType={type} />}
-                  <AppointmentContent
-                    data={data}
-                    type={type}
-                    recurringIconComponent={recurringIconComponent}
-                    formatDate={formatDate}
-                  />
-                  {toNext && <SplitIndicator position={POSITION_END} appointmentType={type} />}
-                </Appointment>
-              )}
-            </TemplateConnector>
+            <Appointment
+              data={data}
+              {...createClickHandlers(onClick, onDoubleClick)}
+              {...restParams}
+            >
+              {fromPrev && <SplitIndicator position={POSITION_START} appointmentType={type} />}
+              <AppointmentContent
+                data={data}
+                type={type}
+                recurringIconComponent={recurringIconComponent}
+                formatDate={formatDate}
+              />
+              {toNext && <SplitIndicator position={POSITION_END} appointmentType={type} />}
+            </Appointment>
           )}
         </Template>
       </Plugin>

diff --git a/packages/dx-react-scheduler/src/plugins/drag-drop-provider.jsx b/packages/dx-react-scheduler/src/plugins/drag-drop-provider.jsx
@@ -22,6 +22,28 @@ import {
   POSITION_END,
 } from '@devexpress/dx-scheduler-core';
 
+const renderAppointmentItems = (items, formatDate, data, Wrapper, Appointment) => (
+  items.length > 0 ? (
+    <Wrapper>
+      {items.map(({
+        dataItem, type, fromPrev, toNext, ...geometry
+      }, index) => (
+        <Appointment
+          key={index.toString()}
+          data={data}
+          style={getAppointmentStyle(geometry)}
+          type={type}
+          fromPrev={fromPrev}
+          toNext={toNext}
+          formatDate={formatDate}
+        />
+      ))}
+    </Wrapper>
+  ) : (
+    null
+  )
+);
+
 const pluginDependencies = [
   { name: 'EditingState' },
   { name: 'Appointments' },
@@ -264,46 +286,20 @@ export class DragDropProvider extends React.PureComponent {
 
         <Template name="allDayPanel">
           <TemplatePlaceholder />
-          {(this.allDayDraftAppointments.length > 0 ? (
-            <Container>
-              {this.allDayDraftAppointments.map(({
-                dataItem, type, fromPrev, toNext, ...geometry
-              }, index) => (
-                <DraftAppointment
-                  key={index.toString()}
-                  data={draftData}
-                  style={getAppointmentStyle(geometry)}
-                  type={type}
-                  fromPrev={fromPrev}
-                  toNext={toNext}
-                />
-              ))}
-            </Container>
-          ) : (
-            null
-          ))}
+          <TemplateConnector>
+            {({ formatDate }) => renderAppointmentItems(
+              this.allDayDraftAppointments, formatDate, draftData, Container, DraftAppointment,
+            )}
+          </TemplateConnector>
         </Template>
 
         <Template name="main">
           <TemplatePlaceholder />
-          {(this.timeTableDraftAppointments.length > 0 ? (
-            <Container>
-              {this.timeTableDraftAppointments.map(({
-                dataItem, type, fromPrev, toNext, ...geometry
-              }, index) => (
-                <DraftAppointment
-                  key={index.toString()}
-                  data={draftData}
-                  style={getAppointmentStyle(geometry)}
-                  type={type}
-                  fromPrev={fromPrev}
-                  toNext={toNext}
-                />
-              ))}
-            </Container>
-          ) : (
-            null
-          ))}
+          <TemplateConnector>
+            {({ formatDate }) => renderAppointmentItems(
+              this.timeTableDraftAppointments, formatDate, draftData, Container, DraftAppointment,
+            )}
+          </TemplateConnector>
         </Template>
       </Plugin>
     );

diff --git a/packages/dx-react-scheduler/src/plugins/drag-drop-provider.test.jsx b/packages/dx-react-scheduler/src/plugins/drag-drop-provider.test.jsx
@@ -28,6 +28,7 @@ jest.mock('@devexpress/dx-scheduler-core', () => ({
 
 const defaultDeps = {
   getter: {
+    formatDate: jest.fn(),
     currentDate: '2018-07-04',
     viewCellsData: [
       [{ startDate: new Date('2018-06-25') }, {}],
@@ -168,14 +169,17 @@ describe('DragDropProvider', () => {
         .toBeCalledWith('appointment data');
     });
     it('should render draft appointment component', () => {
-      const draftAppointment = () => <div className="custom-class" />;
+      const draftAppointment = props => <div {...props} className="custom-class" />;
 
       const { tree, onOver } = mountPlugin({ draftAppointmentComponent: draftAppointment });
 
       onOver({ payload: 1, clientOffset: 1 });
 
-      expect(tree.update().find('.custom-class').exists())
+      const draftAppt = tree.update().find('.custom-class');
+      expect(draftAppt.exists())
         .toBeTruthy();
+      expect(draftAppt.at(1).prop('formatDate'))
+        .toBe(defaultDeps.getter.formatDate);
     });
     it('should render source appointment component', () => {
       const deps = {
@@ -184,18 +188,22 @@ describe('DragDropProvider', () => {
             data: {
               id: 1,
             },
+            formatDate: jest.fn(),
           },
         },
       };
-      const sourceAppointment = () => <div className="custom-class" />;
+      const sourceAppointment = props => <div {...props} className="custom-class" />;
 
       const { tree, onOver } = mountPlugin({ sourceAppointmentComponent: sourceAppointment }, deps);
 
       onOver({ payload: { id: 1 }, clientOffset: 1 });
       tree.update();
 
-      expect(tree.find('.custom-class').exists())
+      const sourceAppt = tree.update().find('.custom-class');
+      expect(sourceAppt.exists())
         .toBeTruthy();
+      expect(sourceAppt.at(0).prop('formatDate'))
+        .toBe(deps.template.appointmentContent.formatDate);
     });
     it('should render resize component', () => {
       const deps = {