feat(react-scheduler): add mobile adaptability to the Scheduler

packages/dx-react-scheduler-demos/src/demo-data/tasks.js

@@ -213,18 +213,21 @@ export const priorities = [
     title: 'Low',
     color: '#81c784',
     activeColor: '#43a047',
+    shortTitle: 'L',
   },
   {
     id: 2,
     title: 'Medium',
     color: '#4fc3f7',
     activeColor: '#039be5',
+    shortTitle: 'M',
   },
   {
     id: 3,
     title: 'High',
     color: '#ff8a65',
     activeColor: '#f4511e',
+    shortTitle: 'H',
   },
 ];
 

packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx

@@ -37,6 +37,8 @@ const filterTasks = (items, priorityId) => items.filter(task => (
   !priorityId || task.priorityId === priorityId
 ));
 const getPriorityById = priorityId => priorities.find(({ id }) => id === priorityId).title;
+const getShortPriorityById = priorityId => priorities
+  .find(({ id }) => id === priorityId).shortTitle;
 
 const createClassesByPriorityId = (
   priorityId, classes,
@@ -71,6 +73,11 @@ const styles = theme => ({
   prioritySelector: {
     marginLeft: theme.spacing(2),
     minWidth: 140,
+    '@media (max-width: 500px)': {
+      minWidth: 0,
+      fontSize: '0.75rem',
+      marginLeft: theme.spacing(0.5),
+    },
   },
   prioritySelectorItem: {
     display: 'flex',
@@ -83,6 +90,16 @@ const styles = theme => ({
     marginRight: theme.spacing(2),
     display: 'inline-block',
   },
+  priorityText: {
+    '@media (max-width: 500px)': {
+      display: 'none',
+    },
+  },
+  priorityShortText: {
+    '@media (min-width: 500px)': {
+      display: 'none',
+    },
+  },
   defaultBullet: {
     background: theme.palette.divider,
   },
@@ -138,14 +155,17 @@ const styles = theme => ({
 const PrioritySelectorItem = ({ id, classes }) => {
   let bulletClass = classes.defaultBullet;
   let text = 'All Tasks';
+  let shortText = 'All';
   if (id) {
     bulletClass = createClassesByPriorityId(id, classes, { background: true });
     text = getPriorityById(id);
+    shortText = getShortPriorityById(id);
   }
   return (
     <div className={classes.prioritySelectorItem}>
       <span className={`${classes.priorityBullet} ${bulletClass}`} />
-      {text}
+      <span className={classes.priorityText}>{text}</span>
+      <span className={classes.priorityShortText}>{shortText}</span>
     </div>
   );
 };

packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx

@@ -12,7 +12,7 @@ import { appointments } from '../../../demo-data/appointments';
 const formatDayScaleDate = (date, options) => {
   const momentDate = moment(date);
   const { weekday } = options;
-  return momentDate.format(weekday ? 'dddd' : 'D');
+  return momentDate.format(weekday ? 'dd' : 'D');
 };
 const formatTimeScaleDate = date => moment(date).format('hh:mm:ss');
 

packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx

@@ -2,20 +2,35 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { withStyles } from '@material-ui/core/styles';
 
-export const Layout = React.memo(({
+const styles = ({ typography }) => ({
+  title: {
+    ...typography.h6,
+  },
+  '@media (max-width: 500px)': {
+    title: {
+      fontSize: '1.1rem',
+    },
+  },
+});
+
+const LayoutBase = React.memo(({
   buttonComponent: Button,
   handleCancel,
   handleConfirm,
   getMessage,
   isDeleting,
   appointmentData,
+  classes,
   ...restProps
 }) => (
   <div
     {...restProps}
   >
-    <DialogTitle>{getMessage(isDeleting ? 'confirmDeleteMessage' : 'confirmCancelMessage')}</DialogTitle>
+    <DialogTitle className={classes.title} disableTypography>
+      {getMessage(isDeleting ? 'confirmDeleteMessage' : 'confirmCancelMessage')}
+    </DialogTitle>
     <DialogActions>
       <Button onClick={handleCancel} title={getMessage('cancelButton')} />
       <Button
@@ -27,7 +42,7 @@ export const Layout = React.memo(({
   </div>
 ));
 
-Layout.propTypes = {
+LayoutBase.propTypes = {
   buttonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   handleCancel: PropTypes.func,
   handleConfirm: PropTypes.func,
@@ -42,12 +57,15 @@ Layout.propTypes = {
     additionalInformation: PropTypes.string,
     allDay: PropTypes.bool,
   }),
+  classes: PropTypes.object.isRequired,
 };
 
-Layout.defaultProps = {
+LayoutBase.defaultProps = {
   handleCancel: () => undefined,
   handleConfirm: () => undefined,
   getMessage: () => undefined,
   isDeleting: false,
   appointmentData: { startDate: new Date(), endDate: new Date() },
 };
+
+export const Layout = withStyles(styles, { name: 'Layout' })(LayoutBase);

packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.test.jsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createShallow, getClasses } from '@material-ui/core/test-utils';
 import { Layout } from './layout';
 
 describe('ConfirmationDialog', () => {
   let shallow;
+  let classes;
   const defaultProps = {
     handleCancel: jest.fn(),
     handleConfirm: jest.fn(),
@@ -12,7 +13,8 @@ describe('ConfirmationDialog', () => {
     buttonComponent: ({ children }) => <div>{children}</div>,
   };
   beforeAll(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<Layout {...defaultProps} />);
   });
   beforeEach(() => {
     jest.resetAllMocks();
@@ -27,6 +29,14 @@ describe('ConfirmationDialog', () => {
       expect(tree.props().data)
         .toMatchObject({ testData: 'testData' });
     });
+    it('should render its elements properly', () => {
+      const tree = shallow((
+        <Layout {...defaultProps} />
+      ));
+
+      expect(tree.find(`.${classes.title}`).exists())
+        .toBeTruthy();
+    });
     it('should handle click on close button', () => {
       const tree = shallow((
         <Layout {...defaultProps} />

packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx

@@ -11,7 +11,7 @@ const styles = ({ spacing }) => ({
     '@media (max-width: 500px)': {
       width: spacing(4),
       height: spacing(4),
-      padding:0,
+      padding: 0,
     },
   },
 });

packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx

@@ -6,14 +6,33 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { withStyles } from '@material-ui/core/styles';
 
-export const Layout = React.memo(({
+const styles = ({ typography }) => ({
+  title: {
+    ...typography.h6,
+  },
+  content: {
+    fontSize: '1rem',
+  },
+  '@media (max-width: 500px)': {
+    title: {
+      fontSize: '1.1rem',
+    },
+    content: {
+      fontSize: '0.9rem',
+    },
+  },
+});
+
+const LayoutBase = React.memo(({
   buttonComponent: Button,
   handleClose,
   commit,
   availableOperations,
   getMessage,
   isDeleting,
+  classes,
   ...restProps
 }) => {
   const [currentValue, setCurrentValue] = React.useState(availableOperations[0].value);
@@ -31,7 +50,9 @@ export const Layout = React.memo(({
     <div
       {...restProps}
     >
-      <DialogTitle>{getMessage(isDeleting ? 'menuDeleteTitle' : 'menuEditTitle')}</DialogTitle>
+      <DialogTitle className={classes.title} disableTypography>
+        {getMessage(isDeleting ? 'menuDeleteTitle' : 'menuEditTitle')}
+      </DialogTitle>
       <DialogContent>
         <RadioGroup
           value={currentValue}
@@ -43,6 +64,7 @@ export const Layout = React.memo(({
               control={<Radio />}
               label={operation.title}
               key={operation.value}
+              classes={{ label: classes.content }}
             />
           ))}
         </RadioGroup>
@@ -55,18 +77,21 @@ export const Layout = React.memo(({
   );
 });
 
-Layout.propTypes = {
+LayoutBase.propTypes = {
   buttonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   availableOperations: PropTypes.array.isRequired,
   handleClose: PropTypes.func,
   commit: PropTypes.func,
   getMessage: PropTypes.func,
   isDeleting: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
 };
 
-Layout.defaultProps = {
+LayoutBase.defaultProps = {
   handleClose: () => undefined,
   commit: () => undefined,
   getMessage: () => undefined,
   isDeleting: false,
 };
+
+export const Layout = withStyles(styles, { name: 'Layout' })(LayoutBase);

packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.test.jsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createShallow, getClasses, createMount } from '@material-ui/core/test-utils';
 import { Layout } from './layout';
 
 describe('EditRecurrenceMenu', () => {
   let shallow;
+  let classes;
+  let mount;
   const defaultProps = {
     availableOperations: [{ value: '1', title: 'operation1' }],
     handleClose: jest.fn(),
@@ -13,7 +15,9 @@ describe('EditRecurrenceMenu', () => {
     buttonComponent: ({ children }) => <div>{children}</div>,
   };
   beforeAll(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
+    mount = createMount();
+    classes = getClasses(<Layout {...defaultProps} />);
   });
   beforeEach(() => {
     jest.resetAllMocks();
@@ -28,6 +32,16 @@ describe('EditRecurrenceMenu', () => {
       expect(tree.props().data)
         .toMatchObject({ testData: 'testData' });
     });
+    it('should render its elements properly', () => {
+      const tree = mount((
+        <Layout {...defaultProps} />
+      ));
+
+      expect(tree.find(`.${classes.title}`).exists())
+        .toBeTruthy();
+      expect(tree.find(`.${classes.content}`))
+        .toHaveLength(3);
+    });
     it('should handle click on close button', () => {
       const tree = shallow((
         <Layout {...defaultProps} />