refactor(react-scheduler): add display name to views (#2134)

BREAKING CHANGE: `ViewSwitcher` plugin's switcher component now doesn't have the `currentViewName` and `availableViewNames` properties. To specify the current view name use `currentView` property consisting of 2 fields: `name` and `displayName`. To provide available views, use availableViews property, which is an array of elements with `name` and `displayName` fields. ```diff ... <ViewSwitcher switcherComponent={({ - currentViewName, + currentView, - avalableViewNames, + availableViews, ...restProps }) => ( <ViewSwitcher.Switcher - currentViewName={currentViewName} + currentView={currentView} - availableViewNames={availableViewNames} + availableViews={availableViews} {...restProps} /> )} /> ... ```
DevExpress · Jul 5, 2019 · 4c20034 · 4c20034
1 parent c851a48
commit 4c20034
Show file tree

Hide file tree

Showing 24 changed files with 284 additions and 110 deletions.
diff --git a/...react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx b/...react-scheduler-demos/src/demo-sources/scheduler-view-switcher/material-ui/controlled.jsx
@@ -19,7 +19,7 @@ export default class Demo extends React.PureComponent {
 
     this.state = {
       data: appointments,
-      currentViewName: 'Work Week',
+      currentViewName: 'work-week',
     };
     this.currentViewNameChange = (currentViewName) => {
       this.setState({ currentViewName });
@@ -46,7 +46,8 @@ export default class Demo extends React.PureComponent {
             endDayHour={19}
           />
           <WeekView
-            name="Work Week"
+            name="work-week"
+            displayName="Work Week"
             excludedDays={[0, 6]}
             startDayHour={9}
             endDayHour={19}

diff --git a/packages/dx-react-scheduler-material-ui/api/dx-react-scheduler-material-ui.api.md b/packages/dx-react-scheduler-material-ui/api/dx-react-scheduler-material-ui.api.md
@@ -312,6 +312,7 @@ export interface DayViewProps {
   dayScaleEmptyCellComponent?: React.ComponentType<DayView_2.DayScaleEmptyCellProps>;
   dayScaleLayoutComponent?: React.ComponentType<DayView_2.DayScaleLayoutProps>;
   dayScaleRowComponent?: React.ComponentType<DayView_2.RowProps>;
+  displayName?: string;
   endDayHour?: number;
   intervalCount?: number;
   layoutComponent?: React.ComponentType<DayView_2.LayoutProps>;
@@ -420,6 +421,7 @@ export interface MonthViewProps {
   dayScaleCellComponent?: React.ComponentType<MonthView_2.DayScaleCellProps>;
   dayScaleLayoutComponent?: React.ComponentType<MonthView_2.DayScaleLayoutProps>;
   dayScaleRowComponent?: React.ComponentType<MonthView_2.RowProps>;
+  displayName?: string;
   firstDayOfWeek?: number;
   intervalCount?: number;
   layoutComponent?: React.ComponentType<MonthView_2.LayoutProps>;
@@ -577,6 +579,7 @@ export interface WeekViewProps {
   dayScaleEmptyCellComponent?: React.ComponentType<WeekView_2.DayScaleEmptyCellProps>;
   dayScaleLayoutComponent?: React.ComponentType<WeekView_2.DayScaleLayoutProps>;
   dayScaleRowComponent?: React.ComponentType<WeekView_2.RowProps>;
+  displayName?: string;
   endDayHour?: number;
   excludedDays?: Array<number>;
   firstDayOfWeek?: number;

diff --git a/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx b/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx
@@ -27,8 +27,8 @@ const styles = ({ spacing, typography }) => ({
 });
 
 const SwitcherBase = ({
-  currentViewName,
-  availableViewNames,
+  currentView,
+  availableViews,
   onChange, classes,
   ...restProps
 }) => {
@@ -39,7 +39,7 @@ const SwitcherBase = ({
   return (
     <Select
       classes={{ root: classes.root }}
-      value={currentViewName}
+      value={currentView.name}
       onChange={handleChange}
       input={(
         <OutlinedInput
@@ -49,13 +49,13 @@ const SwitcherBase = ({
       )}
       {...restProps}
     >
-      {availableViewNames.map(viewName => (
+      {availableViews.map(({ name, displayName }) => (
         <MenuItem
-          value={viewName}
-          key={viewName}
+          value={name}
+          key={name}
           className={classes.menuItem}
         >
-          {viewName}
+          {displayName}
         </MenuItem>
       ))}
     </Select>
@@ -65,13 +65,18 @@ const SwitcherBase = ({
 SwitcherBase.propTypes = {
   onChange: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
-  currentViewName: PropTypes.string,
-  availableViewNames: PropTypes.arrayOf(PropTypes.string),
+  currentView: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+  }).isRequired,
+  availableViews: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+  })),
 };
 
 SwitcherBase.defaultProps = {
-  currentViewName: undefined,
-  availableViewNames: [],
+  availableViews: [],
 };
 
 export const Switcher = withStyles(styles)(SwitcherBase, { name: 'Switcher' });
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.test.jsx
@@ -7,6 +7,9 @@ describe('ViewSwitcher', () => {
   let shallow;
   const defaultProps = {
     onChange: jest.fn(),
+    currentView: {
+      name: 'Test view name',
+    },
   };
   beforeAll(() => {
     shallow = createShallow({ dive: true });
@@ -33,7 +36,13 @@ describe('ViewSwitcher', () => {
     });
     it('should render items depend of available view names', () => {
       const tree = shallow((
-        <Switcher {...defaultProps} availableViewNames={['Week', 'Month']} />
+        <Switcher
+          {...defaultProps}
+          availableViews={[
+            { name: 'Week', displayName: 'Week' },
+            { name: 'Month', displayName: 'Month' },
+          ]}
+        />
       ));
 
       expect(tree.find(MenuItem))

diff --git a/packages/dx-react-scheduler/api/dx-react-scheduler.api.md b/packages/dx-react-scheduler/api/dx-react-scheduler.api.md
@@ -494,6 +494,12 @@ export interface SchedulerProps {
     rootComponent: React.ComponentType<Scheduler.RootProps>;
 }
 
+// @public
+export interface SchedulerView {
+  displayName: string;
+  name: string;
+}
+
 // @public (undocumented)
 export type ScrollingStrategy = {
   topBoundary: number;
@@ -616,6 +622,7 @@ export interface VerticalViewProps {
   dayScaleEmptyCellComponent: React.ComponentType<VerticalView.DayScaleEmptyCellProps>;
   dayScaleLayoutComponent: React.ComponentType<VerticalView.DayScaleLayoutProps>;
   dayScaleRowComponent: React.ComponentType<VerticalView.RowProps>;
+  displayName?: string;
   endDayHour?: number;
   intervalCount?: number;
   layoutComponent: React.ComponentType<VerticalView.LayoutProps>;
@@ -654,17 +661,14 @@ export const ViewSwitcher: React.ComponentType<ViewSwitcherProps>;
 // @public (undocumented)
 export namespace ViewSwitcher {
   export interface SwitcherProps {
-    // (undocumented)
-    availableViewNames: string[];
-    currentViewName: string;
-    // (undocumented)
-    onChange: (payload?: any) => void;
+    availableViews: SchedulerView[];
+    currentView: SchedulerView;
+    onChange: (nextViewName: string) => void;
   }
 }
 
 // @public (undocumented)
 export interface ViewSwitcherProps {
-  // (undocumented)
   switcherComponent: React.ComponentType<ViewSwitcher.SwitcherProps>;
 }
 

diff --git a/packages/dx-react-scheduler/docs/guides/view-switching.md b/packages/dx-react-scheduler/docs/guides/view-switching.md
@@ -22,7 +22,7 @@ In uncontrolled mode, use the `ViewState` plugin's `defaultCurrentViewName` prop
 
 ### Controlled Mode
 
-In controlled mode, use the `ViewState` plugin's `currentViewName` property to specify the view and handle the `onCurrentViewNameChange` event to control the view's state externally:
+In controlled mode, use the `ViewState` plugin's `currentViewName` property to specify the view and handle the `onCurrentViewNameChange` event to control the view's state externally. Use the `name` property to specify the view's unique identifier and the `displayName` property to specify the view's display name:
 
 .embedded-demo({ "path": "scheduler-view-switcher/controlled", "showThemeSelector": true })
 

diff --git a/packages/dx-react-scheduler/docs/reference/day-view.md b/packages/dx-react-scheduler/docs/reference/day-view.md
@@ -26,9 +26,10 @@ none
 
 Name | Type | Default | Description
 -----|------|---------|------------
-name? | string | `Day` | The view name. Required if you use several `DayView` plugins.
+name? | string | `Day` | The view's unique identifier. Required if you use several `DayView` plugins.
+displayName? | string |  | The view's name used in UI plugins. The default value is `name`.
 intervalCount? | number | 1 | Multiplies the default view interval.
-cellDuration? | number | 30 | Specifies the cell duration in minutes.
+cellDuration? | number | 30 | Specifies the cell's duration in minutes.
 startDayHour? | number | 0 | Specifies the start hour of the view time scale.
 endDayHour? | number | 24 | Specifies the end hour of the view time scale.
 layoutComponent | ComponentType&lt;[DayView.LayoutProps](#dayviewlayoutprops)&gt; | | A component that renders a day view layout.

diff --git a/packages/dx-react-scheduler/docs/reference/month-view.md b/packages/dx-react-scheduler/docs/reference/month-view.md
@@ -26,7 +26,8 @@ none
 
 Name | Type | Default | Description
 -----|------|---------|------------
-name? | string | `Month` | The view name. Required if you use several `MonthView` plugins.
+name? | string | `Day` | The view's unique identifier. Required if you use several `MonthView` plugins.
+displayName? | string |  | The view's name used in UI plugins. The default value is equal to `name`.
 firstDayOfWeek? | number | 0 | Specifies first day of week.
 intervalCount? | number | 1 | Multiplies the default view interval.
 layoutComponent | ComponentType&lt;[MonthView.LayoutProps](#monthviewlayoutprops)&gt; | | A component that renders a month view layout.

diff --git a/packages/dx-react-scheduler/docs/reference/view-switcher.md b/packages/dx-react-scheduler/docs/reference/view-switcher.md
@@ -37,10 +37,19 @@ Properties passed to a component that renders the view switcher.
 
 Field | Type | Description
 ------|------|------------
-currentViewName | string | A displayed view's name.
-availableViewNames | Array&lt;string&gt; | An array of available view's names.
+currentView | [SchedulerView](#schedulerview) | A displayed view.
+availableViews | Array&lt;[SchedulerView](#schedulerview)&gt; | An array of available views.
 onChange | (nextViewName: string) => void | A function that handles changes to the displayed view.
 
+### SchedulerView
+
+Describes a scheduler view object.
+
+Field | Type | Description
+------|------|------------
+name | string | View's unique identifier.
+displayName | string | View's visible name.
+
 ## Plugin Components
 
 Name | Properties | Description

diff --git a/packages/dx-react-scheduler/docs/reference/week-view.md b/packages/dx-react-scheduler/docs/reference/week-view.md
@@ -26,11 +26,12 @@ none
 
 Name | Type | Default | Description
 -----|------|---------|------------
-name? | string | `Week` | The view name. Required if you use several `WeekView` plugins.
-excludedDays? | Array&lt;number&gt; | [] | Specifies the days of week that should not be displayed on the view. Accepts an array of zero-bazed day indexes (0 - Sunday).
+name? | string | `Day` | The view's unique identifier. Required if you use several `WeekView` plugins.
+displayName? | string |  | The view's name used in UI plugins. The default value is equal to `name`.
+excludedDays? | Array&lt;number&gt; | [] | Specifies the days of week that should not be displayed in the view. Accepts an array of zero-bazed day indexes (0 - Sunday).
 firstDayOfWeek? | number | 0 | Specifies the first day of week.
 intervalCount? | number | 1 | Multiplies the default view interval.
-cellDuration? | number | 30 | Specifies the cell duration in minutes.
+cellDuration? | number | 30 | Specifies the cell's duration in minutes.
 startDayHour? | number | 0 | Specifies the start hour of the view time scale.
 endDayHour? | number | 24 | Specifies the end hour of the view time scale.
 layoutComponent | ComponentType&lt;[WeekView.LayoutProps](#weekviewlayoutprops)&gt; | | A component that renders a week view 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
@@ -9,6 +9,7 @@ import {
   endViewDate,
   calculateRectByDateIntervals,
   calculateWeekDateIntervals,
+  availableViews,
   getAppointmentStyle,
   verticalTimeTableRects,
 } from '@devexpress/dx-scheduler-core';
@@ -20,7 +21,7 @@ jest.mock('@devexpress/dx-scheduler-core', () => ({
   viewCellsData: jest.fn(),
   startViewDate: jest.fn(),
   endViewDate: jest.fn(),
-  availableViewNames: jest.fn(),
+  availableViews: jest.fn(),
   calculateRectByDateIntervals: jest.fn(),
   calculateWeekDateIntervals: jest.fn(),
   verticalTimeTableRects: jest.fn(),
@@ -214,7 +215,7 @@ describe('Day View', () => {
         .toBe(2);
     });
 
-    it('should provide the "currentView" getter', () => {
+    it('should provide the "currentView" getter with default "displayName"', () => {
       const tree = mount((
         <PluginHost>
           {pluginDepsToComponents(defaultDeps)}
@@ -225,7 +226,40 @@ describe('Day View', () => {
       ));
 
       expect(getComputedState(tree).currentView)
-        .toEqual({ name: 'Day', type: 'day' });
+        .toEqual({ name: 'Day', type: 'day', displayName: 'Day' });
+    });
+
+    it('should provide the "currentView" getter with user-set "displayName"', () => {
+      const userDisplayName = 'User-set display name';
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <DayView
+            displayName={userDisplayName}
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+
+      expect(getComputedState(tree).currentView)
+        .toEqual({ name: 'Day', type: 'day', displayName: userDisplayName });
+    });
+
+    it('should provide "availableViews" getter', () => {
+      availableViews.mockImplementation(() => 'availableViews');
+      const viewName = 'Custom Month';
+      const tree = mount((
+        <PluginHost>
+          {pluginDepsToComponents(defaultDeps)}
+          <DayView
+            name={viewName}
+            {...defaultProps}
+          />
+        </PluginHost>
+      ));
+
+      expect(getComputedState(tree).availableViews)
+        .toEqual('availableViews');
     });
 
     it('should provide "timeTableElementsMeta" getter', () => {