fix(react-scheduler): set Scheduler's height to Root instead of body (#…

…2189) BREAKING CHANGE: `DayView` plugin's, `WeekView` plugin's and `MonthView` plugin's layout component now doesn't have the `height` property. `height` is now `Scheduler` plugin's root component property. ```diff ... <DayView layoutComponent={({ - height, ...restProps }) => ( <DayView.Layout - height={height} {...restProps} /> )} /> ... <WeekView layoutComponent={({ - height, ...restProps }) => ( <WeekView.Layout - height={height} {...restProps} /> )} /> ... <MonthView layoutComponent={({ - height, ...restProps }) => ( <MonthView.Layout - height={height} {...restProps} /> )} /> ... <Scheduler rootComponent={({ + height, ...restProps }) => ( <Scheduler.Root + height={height} {...restProps} /> )} /> ... ```
DevExpress · Jul 25, 2019 · 46bef67 · 46bef67
1 parent 47666b7
commit 46bef67
Show file tree

Hide file tree

Showing 22 changed files with 130 additions and 138 deletions.
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx
@@ -1,4 +1,7 @@
+import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
+import * as PropTypes from 'prop-types';
+import { AUTO_HEIGHT } from '@devexpress/dx-scheduler-core';
 import { ContainerBase } from './common/container';
 
 const styles = {
@@ -7,7 +10,32 @@ const styles = {
     // NOTE: fix sticky positioning in Safari
     width: '100%',
     height: '100%',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
   },
 };
 
-export const Root = withStyles(styles, { name: 'Root' })(ContainerBase);
+export const LayoutBase = ({
+  height, style, ...restProps
+}) => {
+  const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };
+
+  return (
+    <ContainerBase
+      style={{ ...containerStyle, ...style }}
+      {...restProps}
+    />
+  );
+};
+
+LayoutBase.propTypes = {
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  style: PropTypes.object,
+};
+
+LayoutBase.defaultProps = {
+  style: null,
+};
+
+export const Root = withStyles(styles, { name: 'Root' })(LayoutBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layout.test.jsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createShallow } from '@material-ui/core/test-utils';
+import { Root } from './layout';
+
+describe('Root layout', () => {
+  const defaultProps = {
+    height: 300,
+  };
+  let shallow;
+  beforeAll(() => {
+    shallow = createShallow({ dive: true });
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <Root {...defaultProps} data={{ a: 1 }} />
+    ));
+
+    expect(tree.prop('data'))
+      .toMatchObject({ a: 1 });
+  });
+
+  it('should pass style to the root element', () => {
+    const tree = shallow((
+      <Root {...defaultProps} style={{ a: 1 }} />
+    ));
+
+    expect(tree.prop('style'))
+      .toMatchObject({ height: '300px', a: 1 });
+  });
+
+  it('should replace style of the root element', () => {
+    const tree = shallow((
+      <Root {...defaultProps} style={{ height: 1 }} />
+    ));
+
+    expect(tree.prop('style'))
+      .toMatchObject({ height: 1 });
+  });
+});
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.jsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-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';
@@ -9,6 +8,7 @@ import { scrollingStrategy } from '../utils';
 const styles = theme => ({
   container: {
     overflowY: 'auto',
+    position: 'relative',
   },
   stickyHeader: {
     top: 0,
@@ -51,37 +51,35 @@ class HorizontalViewLayoutBase extends React.PureComponent {
       timeTableComponent: TimeTable,
       setScrollingStrategy,
       classes,
-      height,
       className,
-      style,
       ...restProps
     } = this.props;
 
-    const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };
-
     return (
       <Grid
         ref={this.layout}
         className={classNames(classes.container, className)}
         container
         direction="column"
         wrap="nowrap"
-        style={{ ...containerStyle, ...style }}
         {...restProps}
       >
-        <Grid
-          ref={this.layoutHeader}
-          item
-          className={classes.stickyHeader}
-        >
-          <DayScale />
-        </Grid>
-        <Grid
-          item
-          className={classes.timeTable}
-        >
-          <TimeTable />
-        </Grid>
+        {/* Fix Safari sticky header https://bugs.webkit.org/show_bug.cgi?id=175029 */}
+        <div>
+          <Grid
+            ref={this.layoutHeader}
+            item
+            className={classes.stickyHeader}
+          >
+            <DayScale />
+          </Grid>
+          <Grid
+            item
+            className={classes.timeTable}
+          >
+            <TimeTable />
+          </Grid>
+        </div>
       </Grid>
     );
   }
@@ -92,15 +90,12 @@ HorizontalViewLayoutBase.propTypes = {
   dayScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   timeTableComponent: PropTypes.oneOfType([PropTypes.func, 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,
 };
 
 HorizontalViewLayoutBase.defaultProps = {
   className: undefined,
-  style: null,
 };
 
 export const HorizontalViewLayout = withStyles(styles, { name: 'HorizontalViewLayout' })(HorizontalViewLayoutBase);
diff --git a/...ages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.test.jsx b/...ages/dx-react-scheduler-material-ui/src/templates/layouts/horizontal-view-layout.test.jsx
@@ -11,7 +11,6 @@ describe('Horizontal View Layout', () => {
   const defaultProps = {
     dayScaleComponent: () => null,
     timeTableComponent: () => null,
-    height: 1000,
     setScrollingStrategy: jest.fn(),
   };
   let classes;
@@ -42,24 +41,6 @@ describe('Horizontal View Layout', () => {
       .toMatchObject({ a: 1 });
   });
 
-  it('should pass style to the root element', () => {
-    const tree = shallow((
-      <HorizontalViewLayout {...defaultProps} style={{ a: 1 }} />
-    ));
-
-    expect(tree.prop('style'))
-      .toMatchObject({ height: '1000px', a: 1 });
-  });
-
-  it('should replace style of the root element', () => {
-    const tree = shallow((
-      <HorizontalViewLayout {...defaultProps} style={{ height: 1 }} />
-    ));
-
-    expect(tree.prop('style'))
-      .toMatchObject({ height: 1 });
-  });
-
   it('should call the scrollingStrategy function', () => {
     scrollingStrategy.mockClear();
     shallow((

diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-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';
@@ -9,6 +8,7 @@ import { scrollingStrategy } from '../utils';
 const styles = theme => ({
   container: {
     overflowY: 'auto',
+    position: 'relative',
   },
   stickyHeader: {
     top: 0,
@@ -53,51 +53,49 @@ class VerticalViewLayoutBase extends React.PureComponent {
       dayScaleEmptyCellComponent: DayScaleEmptyCell,
       setScrollingStrategy,
       classes,
-      height,
       className,
-      style,
       ...restProps
     } = this.props;
 
-    const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` };
-
     return (
       <Grid
         ref={this.layout}
         container
         className={classNames(classes.container, className)}
         direction="column"
         wrap="nowrap"
-        style={{ ...containerStyle, ...style }}
         {...restProps}
       >
-        <Grid item xs="auto" className={classes.stickyHeader}>
-          <Grid
-            ref={this.layoutHeader}
-            container
-            direction="row"
-          >
-            <Grid item xs={1} className={classes.emptySpace}>
-              <DayScaleEmptyCell />
-            </Grid>
-
-            <Grid item xs={11}>
-              <DayScale />
+        {/* Fix Safari sticky header https://bugs.webkit.org/show_bug.cgi?id=175029 */}
+        <div>
+          <Grid item xs="auto" className={classes.stickyHeader}>
+            <Grid
+              ref={this.layoutHeader}
+              container
+              direction="row"
+            >
+              <Grid item xs={1} className={classes.emptySpace}>
+                <DayScaleEmptyCell />
+              </Grid>
+
+              <Grid item xs={11}>
+                <DayScale />
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
 
-        <Grid item xs="auto">
-          <Grid container direction="row">
-            <Grid item xs={1}>
-              <TimeScale />
-            </Grid>
+          <Grid item xs="auto">
+            <Grid container direction="row">
+              <Grid item xs={1}>
+                <TimeScale />
+              </Grid>
 
-            <Grid item xs={11} className={classes.timeTable}>
-              <TimeTable />
+              <Grid item xs={11} className={classes.timeTable}>
+                <TimeTable />
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
+        </div>
       </Grid>
     );
   }
@@ -109,16 +107,13 @@ VerticalViewLayoutBase.propTypes = {
   dayScaleComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   timeTableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   dayScaleEmptyCellComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   setScrollingStrategy: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
-  style: PropTypes.object,
 };
 
 VerticalViewLayoutBase.defaultProps = {
   className: undefined,
-  style: null,
 };
 
 export const VerticalViewLayout = withStyles(styles, { name: 'VerticalViewLayout' })(VerticalViewLayoutBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx
@@ -14,7 +14,6 @@ describe('Vertical View Layout', () => {
     timeTableComponent: () => null,
     dayScaleEmptyCellComponent: () => null,
     setScrollingStrategy: jest.fn(),
-    height: 1000,
   };
   let classes;
   let shallow;
@@ -44,24 +43,6 @@ describe('Vertical View Layout', () => {
       .toMatchObject({ a: 1 });
   });
 
-  it('should pass style to the root element', () => {
-    const tree = shallow((
-      <VerticalViewLayout {...defaultProps} style={{ a: 1 }} />
-    ));
-
-    expect(tree.prop('style'))
-      .toMatchObject({ height: '1000px', a: 1 });
-  });
-
-  it('should replace style of the root element', () => {
-    const tree = shallow((
-      <VerticalViewLayout {...defaultProps} style={{ height: 1 }} />
-    ));
-
-    expect(tree.prop('style'))
-      .toMatchObject({ height: 1 });
-  });
-
   it('should call the scrollingStrategy function', () => {
     scrollingStrategy.mockClear();
     shallow((

diff --git a/packages/dx-react-scheduler/api/dx-react-scheduler.api.md b/packages/dx-react-scheduler/api/dx-react-scheduler.api.md
@@ -444,7 +444,6 @@ export namespace MonthView {
   // (undocumented)
   export interface LayoutProps {
     dayScaleComponent: React.ComponentType<MonthView.DayScaleLayoutProps>;
-    height: number | 'auto';
     setScrollingStrategy: (scrollingStrategy: ScrollingStrategy) => void;
     timeTableComponent: React.ComponentType<MonthView.TimeTableLayoutProps>;
   }
@@ -480,6 +479,7 @@ export const Scheduler: React.ComponentType<SchedulerProps>;
 export namespace Scheduler {
     export interface RootProps {
         children?: React.ReactNode;
+        height: number | 'auto';
     }
 }
 
@@ -582,7 +582,6 @@ export namespace VerticalView {
   export interface LayoutProps {
     dayScaleComponent: React.ComponentType<VerticalView.DayScaleLayoutProps>;
     dayScaleEmptyCellComponent: React.ComponentType<VerticalView.DayScaleEmptyCellProps>;
-    height: number | 'auto';
     setScrollingStrategy: (scrollingStrategy: ScrollingStrategy) => void;
     timeScaleComponent: React.ComponentType<VerticalView.TimeScaleLayoutProps>;
     timeTableComponent: React.ComponentType<VerticalView.TimeTableLayoutProps>;

diff --git a/packages/dx-react-scheduler/docs/reference/day-view.md b/packages/dx-react-scheduler/docs/reference/day-view.md
@@ -63,7 +63,6 @@ Describes properties passed to a component that renders a day view layout.
 
 Field | Type | Description
 ------|------|------------
-height | number &#124; `auto` | The layout's height.
 setScrollingStrategy | (scrollingStrategy: [ScrollingStrategy](./scheduler.md#scrollingstrategy)) => void | A scrollingStrategy callback.
 timeScaleComponent | ComponentType&lt;[DayView.TimeScaleLayoutProps](#dayviewtimescalelayoutprops)&gt; | A component that renders a time scale layout.
 dayScaleComponent | ComponentType&lt;[DayView.DayScaleLayoutProps](#dayviewdayscalelayoutprops)&gt; | A component that renders a day scale layout.

diff --git a/packages/dx-react-scheduler/docs/reference/month-view.md b/packages/dx-react-scheduler/docs/reference/month-view.md
@@ -58,7 +58,6 @@ Describes properties passed to a component that renders a month view layout.
 
 Field | Type | Description
 ------|------|------------
-height | number &#124; `auto` | The layout's height.
 setScrollingStrategy | (scrollingStrategy: [ScrollingStrategy](./scheduler.md#scrollingstrategy)) => void | A scrollingStrategy callback.
 dayScaleComponent | ComponentType&lt;[MonthView.DayScaleLayoutProps](#monthviewdayscalelayoutprops)&gt; | A component that renders a day scale layout.
 timeTableComponent | ComponentType&lt;[MonthView.TimeTableLayoutProps](#monthviewtimetablelayoutprops)&gt; | A component that renders a time table layout.

diff --git a/packages/dx-react-scheduler/docs/reference/scheduler.md b/packages/dx-react-scheduler/docs/reference/scheduler.md
@@ -65,6 +65,7 @@ Describes properties passed to a component that renders the root layout.
 
 Field | Type | Description
 ------|------|------------
+height | number &#124; `auto` | The Scheduler's height.
 children? | ReactNode | A React node used to render the root layout.
 
 ### SchedulerDateTime

diff --git a/packages/dx-react-scheduler/docs/reference/week-view.md b/packages/dx-react-scheduler/docs/reference/week-view.md
@@ -65,7 +65,6 @@ Describes properties passed to a component that renders a week view layout.
 
 Field | Type | Description
 ------|------|------------
-height | number &#124; `auto` | The layout's height.
 setScrollingStrategy | (scrollingStrategy: [ScrollingStrategy](./scheduler.md#scrollingstrategy)) => void | A scrollingStrategy callback.
 timeScaleComponent | ComponentType&lt;[WeekView.TimeScaleLayoutProps](#weekviewtimescalelayoutprops)&gt; | A component that renders a time scale layout.
 dayScaleComponent | ComponentType&lt;[WeekView.DayScaleLayoutProps](#weekviewdayscalelayoutprops)&gt; | A component that renders a day scale layout.