From 6c140a5a315bd3a58c5bca18db3dca30a8efe767 Mon Sep 17 00:00:00 2001 From: Maxim Kudryavtsev Date: Fri, 24 May 2019 14:51:46 +0300 Subject: [PATCH] feat(react-scheduler): add a capability to set Scheduler's height (#2043) --- .../material-ui/week-view.jsx | 1 + .../material-ui/basic-setup.jsx | 6 ++--- .../material-ui/custom-template.jsx | 1 + .../scheduler-basic/material-ui/day.jsx | 4 ++-- .../material-ui/simple-template.jsx | 1 + .../scheduler-basic/material-ui/week.jsx | 1 + .../material-ui/controlled.jsx | 1 + .../material-ui/controlled.jsx | 1 + .../material-ui/delete-confirmation.jsx | 1 + .../material-ui/drag-drop.jsx | 1 + .../material-ui/uncontrolled.jsx | 1 + .../material-ui/demo.jsx | 5 +++- .../material-ui/demo.jsx | 1 + .../material-ui/demo.jsx | 11 +++++++-- .../material-ui/custom-formatting.jsx | 1 + .../material-ui/locale.jsx | 1 + .../material-ui/basic.jsx | 6 ++--- .../material-ui/controlled.jsx | 1 + .../scheduler-tooltip/material-ui/custom.jsx | 1 + .../material-ui/uncontrolled.jsx | 1 + .../material-ui/controlled.jsx | 4 +--- .../material-ui/external-control.jsx | 1 + .../material-ui/uncontrolled.jsx | 1 + .../api/dx-react-scheduler-material-ui.api.md | 1 + .../src/templates/layout.jsx | 23 ++++++++----------- .../layouts/horizontal-view-layout.jsx | 6 ++++- .../layouts/vertical-view-layout.jsx | 8 ++++++- .../api/dx-react-scheduler.api.md | 3 +++ .../dx-react-scheduler/docs/guides/views.md | 4 ++-- .../docs/reference/day-view.md | 1 + .../docs/reference/month-view.md | 1 + .../docs/reference/scheduler.md | 3 ++- .../docs/reference/week-view.md | 1 + .../src/plugins/day-view.test.tsx | 5 +++- .../src/plugins/day-view.tsx | 4 +++- .../src/plugins/month-view.test.tsx | 5 +++- .../src/plugins/month-view.tsx | 3 ++- .../src/plugins/scheduler-core.test.tsx | 15 ++++++++++++ .../src/plugins/scheduler-core.tsx | 2 ++ .../src/plugins/week-view.test.tsx | 5 +++- .../src/plugins/week-view.tsx | 3 ++- packages/dx-react-scheduler/src/scheduler.tsx | 3 +++ .../src/types/scheduler/scheduler.types.ts | 2 ++ .../src/types/views/month-view.types.ts | 2 ++ .../src/types/views/view.types.ts | 2 ++ packages/dx-scheduler-core/src/constants.ts | 2 ++ 46 files changed, 119 insertions(+), 38 deletions(-) diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx index 97e83c2ae2..555fdaf67b 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-all-day-panel/material-ui/week-view.jsx @@ -27,6 +27,7 @@ export default class Demo extends React.PureComponent { ( @@ -23,7 +23,7 @@ export default () => ( /> diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx index e3c3909390..c715cd034b 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/custom-template.jsx @@ -76,6 +76,7 @@ export default class Demo extends React.PureComponent { diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx index 7c390b1166..f3c173d32c 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-basic/material-ui/simple-template.jsx @@ -40,6 +40,7 @@ export default class Demo extends React.PureComponent { - + - - + + diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx index 8923e459b5..0a0dffb171 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-tooltip/material-ui/controlled.jsx @@ -96,6 +96,7 @@ export default class Demo extends React.PureComponent { - - diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx index 6af14218b7..1d91f3c238 100644 --- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx +++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/external-control.jsx @@ -57,6 +57,7 @@ export default class Demo extends React.PureComponent { & { // @public (undocumented) export interface SchedulerProps { data?: Array; + height?: number | `auto`; locale?: string | Array; rootComponent?: React.ComponentType; } diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx index 9d474e61bd..c9b5ce1462 100644 --- a/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx +++ b/packages/dx-react-scheduler-material-ui/src/templates/layout.jsx @@ -1,16 +1,13 @@ -import * as React from 'react'; -import * as PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { ContainerBase } from './common/container'; -export const Root = ({ children, ...restProps }) => ( -
- {children} -
-); - -Root.propTypes = { - children: PropTypes.node, +const styles = { + container: { + WebkitOverflowScrolling: 'touch', + // NOTE: fix sticky positioning in Safari + width: '100%', + height: '100%', + }, }; -Root.defaultProps = { - children: undefined, -}; +export const Root = withStyles(styles, { name: 'Root' })(ContainerBase); 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 index 9a61829fa3..e255f14802 100644 --- 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,5 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; +import { AUTO_HEIGHT } from '@devexpress/dx-scheduler-core'; import RootRef from '@material-ui/core/RootRef'; import Grid from '@material-ui/core/Grid'; import { withStyles } from '@material-ui/core/styles'; @@ -7,7 +8,6 @@ import { withStyles } from '@material-ui/core/styles'; const styles = theme => ({ container: { overflowY: 'auto', - height: 700, }, stickyHeader: { top: 0, @@ -30,8 +30,10 @@ export class HorizontalViewLayoutBase extends React.PureComponent { classes, layoutRef, layoutHeaderRef, + height, } = this.props; + const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` }; return ( ({ container: { overflowY: 'auto', - height: 700, }, stickyHeader: { top: 0, @@ -32,13 +32,18 @@ export class VerticalViewLayoutBase extends React.PureComponent { classes, layoutRef, layoutHeaderRef, + height, } = this.props; + const containerStyle = height === AUTO_HEIGHT ? { height: '100%' } : { height: `${height}px` }; return ( ; + height: number | 'auto'; // (undocumented) layoutHeaderRef: React.RefObject; layoutRef: React.RefObject; @@ -484,6 +485,7 @@ export type SchedulerDateTime = Date | number | string; // @public (undocumented) export interface SchedulerProps { data: AppointmentModel[]; + height: number | 'auto'; locale: string | string[]; rootComponent: React.ComponentType; } @@ -543,6 +545,7 @@ export namespace VerticalView { export interface LayoutProps { dayScaleComponent: React.ComponentType; dayScaleEmptyCellComponent: React.ComponentType; + height: number | 'auto'; // (undocumented) layoutHeaderRef: React.RefObject; // (undocumented) diff --git a/packages/dx-react-scheduler/docs/guides/views.md b/packages/dx-react-scheduler/docs/guides/views.md index 3c5fe78276..00a7dc0453 100644 --- a/packages/dx-react-scheduler/docs/guides/views.md +++ b/packages/dx-react-scheduler/docs/guides/views.md @@ -14,7 +14,7 @@ The `DayView` displays appointments for a specific date. The Scheduler arranges appointments from top to bottom. If their time intervals overlap, their widths decrease and they are placed next to each other. -The [time scale](fundamentals.md#overview)'s duration is 24 hours. To change this value, define the `startDayHour` and `endDayHour` in the view plugin. In the following example, the time scale starts at 9 a.m. and ends at 7 p.m. +The [time scale](fundamentals.md#overview)'s duration is 24 hours. To change this value, define the `startDayHour` and `endDayHour` in the view plugin. In the following example, the time scale starts at 9 a.m. and ends at 2 p.m. .embedded-demo({ "path": "scheduler-basic/day", "showThemeSelector": true }) @@ -28,7 +28,7 @@ You can use the [WeekView](../reference/week-view.md) plugin's `excludedDays` pr ## Month View -The `MonthView` displays appointments for a month. +The [MonthView](../reference/month-view.md) displays appointments for a month. The Scheduler arranges appointments left to right. An appointment's size depends on its duration in days. Appointments that last less than a day occupy the entire day cell. diff --git a/packages/dx-react-scheduler/docs/reference/day-view.md b/packages/dx-react-scheduler/docs/reference/day-view.md index ad99ffe4b4..55edca546a 100644 --- a/packages/dx-react-scheduler/docs/reference/day-view.md +++ b/packages/dx-react-scheduler/docs/reference/day-view.md @@ -62,6 +62,7 @@ Describes properties passed to a component that renders a day view layout. Field | Type | Description ------|------|------------ +height | number | `auto` | The layout's height. timeScaleComponent | ComponentType<[DayView.TimeScaleLayoutProps](#dayviewtimescalelayoutprops)> | A component that renders a time scale layout. dayScaleComponent | ComponentType<[DayView.DayScaleLayoutProps](#dayviewdayscalelayoutprops)> | A component that renders a day scale layout. timeTableComponent | ComponentType<[DayView.TimeTableLayoutProps](#dayviewtimetablelayoutprops)> | A component that renders a time table layout. diff --git a/packages/dx-react-scheduler/docs/reference/month-view.md b/packages/dx-react-scheduler/docs/reference/month-view.md index c73d71454d..3402176293 100644 --- a/packages/dx-react-scheduler/docs/reference/month-view.md +++ b/packages/dx-react-scheduler/docs/reference/month-view.md @@ -57,6 +57,7 @@ Describes properties passed to a component that renders a month view layout. Field | Type | Description ------|------|------------ +height | number | `auto` | The layout's height. dayScaleComponent | ComponentType<[MonthView.DayScaleLayoutProps](#monthviewdayscalelayoutprops)> | A component that renders a day scale layout. timeTableComponent | ComponentType<[MonthView.TimeTableLayoutProps](#monthviewtimetablelayoutprops)> | 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 index f82e7d8096..b1b2dac0e5 100644 --- a/packages/dx-react-scheduler/docs/reference/scheduler.md +++ b/packages/dx-react-scheduler/docs/reference/scheduler.md @@ -23,8 +23,9 @@ import { Scheduler } from '@devexpress/dx-react-scheduler'; Name | Type | Default | Description -----|------|---------|------------ data | Array<[AppointmentModel](#appointmentmodel)> | | An array of appointment data objects. -rootComponent | ComponentType<[Scheduler.RootProps](#schedulerrootprops)> | | A component that renders the root layout. +height | number | `auto` | `auto` | The scheduler's height. If the property value is `auto` the Scheduler will have the same size as the container component. locale | string | Array<string> | 'en-US' | The locale according to which dates should be formatted. +rootComponent | ComponentType<[Scheduler.RootProps](#schedulerrootprops)> | | A component that renders the root layout. ## Interfaces diff --git a/packages/dx-react-scheduler/docs/reference/week-view.md b/packages/dx-react-scheduler/docs/reference/week-view.md index e41d3bbda8..1be2b5ea9e 100644 --- a/packages/dx-react-scheduler/docs/reference/week-view.md +++ b/packages/dx-react-scheduler/docs/reference/week-view.md @@ -64,6 +64,7 @@ Describes properties passed to a component that renders a week view layout. Field | Type | Description ------|------|------------ +height | number | `auto` | The layout's height. timeScaleComponent | ComponentType<[WeekView.TimeScaleLayoutProps](#weekviewtimescalelayoutprops)> | A component that renders a time scale layout. dayScaleComponent | ComponentType<[WeekView.DayScaleLayoutProps](#weekviewdayscalelayoutprops)> | A component that renders a day scale layout. timeTableComponent | ComponentType<[WeekView.TimeTableLayoutProps](#weekviewtimetablelayoutprops)> | A component that renders a time table layout. diff --git a/packages/dx-react-scheduler/src/plugins/day-view.test.tsx b/packages/dx-react-scheduler/src/plugins/day-view.test.tsx index 77eaf36f98..23bffff8da 100644 --- a/packages/dx-react-scheduler/src/plugins/day-view.test.tsx +++ b/packages/dx-react-scheduler/src/plugins/day-view.test.tsx @@ -32,6 +32,7 @@ const defaultDeps = { [{}, { startDate: new Date('2018-08-05') }], ], formatDate: jest.fn(), + layoutHeight: 300, }, template: { body: {}, @@ -246,13 +247,15 @@ describe('Day View', () => { {pluginDepsToComponents(defaultDeps)}
} + layoutComponent={({ height }) =>
} /> )); expect(tree.find('.view-layout').exists()) .toBeTruthy(); + expect(tree.find('.view-layout').props().height) + .toBe(defaultDeps.getter.layoutHeight); }); it('should render time scale', () => { diff --git a/packages/dx-react-scheduler/src/plugins/day-view.tsx b/packages/dx-react-scheduler/src/plugins/day-view.tsx index a0fd24e357..0a2596dc2f 100644 --- a/packages/dx-react-scheduler/src/plugins/day-view.tsx +++ b/packages/dx-react-scheduler/src/plugins/day-view.tsx @@ -57,6 +57,7 @@ class DayViewBase extends React.PureComponent { static components: PluginComponents = { layoutComponent: 'Layout', + layoutContainer: 'LayoutContainer', appointmentLayerComponent: 'AppointmentLayer', dayScaleEmptyCellComponent: 'DayScaleEmptyCell', timeScaleLayoutComponent: 'TimeScaleLayout', @@ -199,7 +200,7 @@ class DayViewBase extends React.PureComponent {