refactor(react-scheduler): transfer DOM operations into theme package (#2068)

BREAKING CHANGE:

`AllDayPanel` plugin's layout component now doesn't have the `allDayPanel` property. To specify cell elements use `setCellElementsMeta` property.

```diff
...
<AllDayyPanel
  layoutComponent={({
-   allDayPanelRef,
+   setCellElementsMeta,
     ...restProps
  }) => (
    <AllDayPanel.Layout>
-      allDayPanelRef={allDayPanelRef}
+      setCellElementsMeta={setCellElementsMeta}
       {...restProps}
    />
  )}
/>
...
```

Author: MaximKudriavtsev

packages/dx-react-scheduler-material-ui/src/plugins/day-view.jsx

@@ -9,7 +9,6 @@ import { Container as AppointmentLayer } from '../templates/appointment/containe
 import { Layout as TimeScaleLayout } from '../templates/views/vertical/time-scale/layout';
 import { Cell as TimeScaleCell } from '../templates/views/vertical/time-scale/cell';
 
-import { TimeTableContainer } from '../templates/views/common/time-table/layout-container';
 import { Layout as TimeTableLayout } from '../templates/views/vertical/time-table/layout';
 import { Cell as TimeTableCell } from '../templates/views/vertical/time-table/cell';
 
@@ -27,7 +26,6 @@ export const DayView = withComponents({
   DayScaleLayout,
   DayScaleCell,
   DayScaleRow: Row,
-  TimeTableContainer,
   TimeTableLayout,
   TimeTableCell,
   TimeTableRow: Row,

packages/dx-react-scheduler-material-ui/src/plugins/month-view.jsx

@@ -5,7 +5,6 @@ import { HorizontalViewLayout as Layout } from '../templates/layouts/horizontal-
 import { Row } from '../templates/views/common/row';
 import { Container as AppointmentLayer } from '../templates/appointment/container';
 
-import { TimeTableContainer } from '../templates/views/common/time-table/layout-container';
 import { Layout as TimeTableLayout } from '../templates/views/horizontal/time-table/layout';
 import { Cell as TimeTableCell } from '../templates/views/horizontal/time-table/cell';
 
@@ -18,7 +17,6 @@ export const MonthView = withComponents({
   DayScaleLayout,
   DayScaleCell,
   DayScaleRow: Row,
-  TimeTableContainer,
   TimeTableLayout,
   TimeTableCell,
   TimeTableRow: Row,

packages/dx-react-scheduler-material-ui/src/plugins/week-view.jsx

@@ -9,7 +9,6 @@ import { Container as AppointmentLayer } from '../templates/appointment/containe
 import { Layout as TimeScaleLayout } from '../templates/views/vertical/time-scale/layout';
 import { Cell as TimeScaleCell } from '../templates/views/vertical/time-scale/cell';
 
-import { TimeTableContainer } from '../templates/views/common/time-table/layout-container';
 import { Layout as TimeTableLayout } from '../templates/views/vertical/time-table/layout';
 import { Cell as TimeTableCell } from '../templates/views/vertical/time-table/cell';
 
@@ -26,7 +25,6 @@ export const WeekView = withComponents({
   DayScaleLayout,
   DayScaleCell,
   DayScaleRow: Row,
-  TimeTableContainer,
   TimeTableLayout,
   TimeTableCell,
   TimeTableRow: Row,

packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.jsx

@@ -1,58 +1,86 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import Table from '@material-ui/core/Table';
-import TableHead from '@material-ui/core/TableHead';
+import TableBody from '@material-ui/core/TableBody';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { cellsMeta } from '../utils';
 
 const styles = {
   table: {
     tableLayout: 'fixed',
   },
 };
 
-const LayoutBase = ({
-  cellsData,
-  allDayPanelRef,
-  classes, className,
-  cellComponent: Cell,
-  rowComponent: Row,
-  ...restProps
-}) => (
-  <Table
-    className={classNames(classes.table, className)}
-    ref={allDayPanelRef}
-    {...restProps}
-  >
-    <TableHead>
-      <Row>
-        {cellsData.map(({
-          startDate,
-          endDate,
-        }) => (
-          <Cell
-            key={startDate}
-            startDate={startDate}
-            endDate={endDate}
-          />
-        ))}
-      </Row>
-    </TableHead>
-  </Table>
-);
+class LayoutBase extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.table = React.createRef();
+  }
+
+  componentDidMount() {
+    this.setCells();
+  }
+
+  componentDidUpdate() {
+    this.setCells();
+  }
+
+  setCells() {
+    const { setCellElementsMeta } = this.props;
+
+    const tableElement = this.table.current;
+    setCellElementsMeta(cellsMeta(tableElement));
+  }
+
+  render() {
+    const {
+      setCellElementsMeta,
+      cellsData,
+      classes, className,
+      cellComponent: Cell,
+      rowComponent: Row,
+      formatDate,
+      ...restProps
+    } = this.props;
+
+    return (
+      <Table
+        ref={this.table}
+        className={classNames(classes.table, className)}
+        {...restProps}
+      >
+        <TableBody>
+          <Row>
+            {cellsData.map(({
+              startDate,
+              endDate,
+            }) => (
+              <Cell
+                key={startDate}
+                startDate={startDate}
+                endDate={endDate}
+              />
+            ))}
+          </Row>
+        </TableBody>
+      </Table>
+    );
+  }
+}
 
 LayoutBase.propTypes = {
-  allDayPanelRef: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
+  formatDate: PropTypes.func.isRequired,
   cellsData: PropTypes.arrayOf(Array).isRequired,
-  cellComponent: PropTypes.func,
-  rowComponent: PropTypes.func,
+  cellComponent: PropTypes.func.isRequired,
+  rowComponent: PropTypes.func.isRequired,
+  setCellElementsMeta: PropTypes.func.isRequired,
   className: PropTypes.string,
 };
 LayoutBase.defaultProps = {
   className: undefined,
-  cellComponent: () => null,
-  rowComponent: () => null,
 };
 
 export const Layout = withStyles(styles, { name: 'Layout' })(LayoutBase);

packages/dx-react-scheduler-material-ui/src/templates/all-day-panel/layout.test.jsx

@@ -1,25 +1,34 @@
 import * as React from 'react';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import { getClasses, createMount } from '@material-ui/core/test-utils';
 import { Layout } from './layout';
 
 describe('AllDayPanel', () => {
   let classes;
-  let shallow;
+  let mount;
   const defaultProps = {
-    allDayPanelRef: () => null,
+    setCellElementsMeta: jest.fn(),
     cellsData: [{ startDate: 1 }, { startDate: 2 }],
+    cellComponent: () => <td />,
+    /* eslint-disable-next-line */
+    rowComponent: ({ children }) => <tr>{children}</tr>,
   };
   beforeAll(() => {
     classes = getClasses(
       <Layout {...defaultProps}>
         <div />
       </Layout>,
     );
-    shallow = createShallow({ dive: true });
+  });
+  beforeEach(() => {
+    mount = createMount();
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
+    mount.cleanUp();
   });
   describe('Layout', () => {
     it('should pass className to the root element', () => {
-      const tree = shallow((
+      const tree = mount((
         <Layout {...defaultProps} className="custom-class">
           <div />
         </Layout>
@@ -31,18 +40,18 @@ describe('AllDayPanel', () => {
         .toBeTruthy();
     });
     it('should pass rest props to the root element', () => {
-      const tree = shallow((
+      const tree = mount((
         <Layout {...defaultProps} data={{ a: 1 }}>
           <div />
         </Layout>
       ));
 
-      expect(tree.find(`.${classes.table}`).props().data)
+      expect(tree.find(`.${classes.table}`).at(0).props().data)
         .toMatchObject({ a: 1 });
     });
     it('should render array of days', () => {
       const cell = () => <td />;
-      const tree = shallow((
+      const tree = mount((
         <Layout {...defaultProps} cellComponent={cell}>
           <div />
         </Layout>
@@ -51,5 +60,20 @@ describe('AllDayPanel', () => {
       expect(tree.find(cell))
         .toHaveLength(2);
     });
+    it('should calls setCellElementsMeta', () => {
+      const tree = mount((
+        <Layout
+          {...defaultProps}
+        />
+      ));
+
+      expect(defaultProps.setCellElementsMeta)
+        .toBeCalledTimes(1);
+
+      tree.setProps({ className: 'a' });
+
+      expect(defaultProps.setCellElementsMeta)
+        .toBeCalledTimes(2);
+    });
   });
 });

packages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.jsx

@@ -4,6 +4,7 @@ import { AUTO_HEIGHT } from '@devexpress/dx-scheduler-core';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { scrollingStrategy } from '../utils';
 
 const styles = theme => ({
   container: {
@@ -17,29 +18,50 @@ const styles = theme => ({
     overflow: 'visible',
     background: theme.palette.background.paper,
   },
-  main: {
+  timeTable: {
     position: 'relative',
   },
 });
 
-export class HorizontalViewLayoutBase extends React.PureComponent {
+class HorizontalViewLayoutBase extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.layout = React.createRef();
+    this.layoutHeader = React.createRef();
+  }
+
+  componentDidMount() {
+    this.setScrollingStrategy();
+  }
+
+  componentDidUpdate() {
+    this.setScrollingStrategy();
+  }
+
+  setScrollingStrategy() {
+    const { setScrollingStrategy } = this.props;
+
+    setScrollingStrategy(scrollingStrategy(this.layout.current, this.layoutHeader.current));
+  }
+
   render() {
     const {
-      dayScaleComponent: Navbar,
-      timeTableComponent: Main,
+      dayScaleComponent: DayScale,
+      timeTableComponent: TimeTable,
+      setScrollingStrategy,
       classes,
-      layoutRef,
-      layoutHeaderRef,
       height,
       className,
       style,
       ...restProps
     } = this.props;
 
     const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };
+
     return (
       <Grid
-        ref={layoutRef}
+        ref={this.layout}
         className={classNames(classes.container, className)}
         container
         direction="column"
@@ -48,17 +70,17 @@ export class HorizontalViewLayoutBase extends React.PureComponent {
         {...restProps}
       >
         <Grid
-          ref={layoutHeaderRef}
+          ref={this.layoutHeader}
           item
           className={classes.stickyHeader}
         >
-          <Navbar />
+          <DayScale />
         </Grid>
         <Grid
           item
-          className={classes.main}
+          className={classes.timeTable}
         >
-          <Main />
+          <TimeTable />
         </Grid>
       </Grid>
     );
@@ -69,10 +91,9 @@ HorizontalViewLayoutBase.propTypes = {
   // oneOfType is a workaround because withStyles returns react object
   dayScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   timeTableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  classes: PropTypes.object.isRequired,
-  layoutRef: PropTypes.object.isRequired,
-  layoutHeaderRef: PropTypes.object.isRequired,
+  setScrollingStrategy: PropTypes.func.isRequired,
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   style: PropTypes.object,
 };

packages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.test.jsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
 import { getClasses, createShallow } from '@material-ui/core/test-utils';
 import { HorizontalViewLayout } from './horizontal-view-layout';
+import { scrollingStrategy } from '../utils';
+
+jest.mock('../utils', () => ({
+  scrollingStrategy: jest.fn(),
+}));
 
 describe('Horizontal View Layout', () => {
   const defaultProps = {
     dayScaleComponent: () => null,
     timeTableComponent: () => null,
-    layoutRef: React.createRef(),
-    layoutHeaderRef: React.createRef(),
     height: 1000,
+    setScrollingStrategy: jest.fn(),
   };
   let classes;
   let shallow;
   beforeAll(() => {
     classes = getClasses(<HorizontalViewLayout {...defaultProps} />);
     shallow = createShallow({ dive: true });
+    scrollingStrategy.mockImplementation(() => undefined);
   });
 
   it('should pass className to the root element', () => {
@@ -54,4 +59,14 @@ describe('Horizontal View Layout', () => {
     expect(tree.prop('style'))
       .toMatchObject({ height: 1 });
   });
+
+  it('should call the scrollingStrategy function', () => {
+    scrollingStrategy.mockClear();
+    shallow((
+      <HorizontalViewLayout {...defaultProps} />
+    ));
+
+    expect(scrollingStrategy)
+      .toBeCalledTimes(1);
+  });
 });