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-featured-redux-integration/material-ui/demo.jsx

@@ -29,7 +29,7 @@ const styles = ({ spacing, palette }) => ({
     alignItems: 'center',
   },
   textField: {
-    width: '100px',
+    width: '75px',
     marginLeft: spacing(1),
     marginTop: 0,
     marginBottom: 0,
@@ -43,11 +43,12 @@ const styles = ({ spacing, palette }) => ({
     paddingLeft: spacing(1),
     paddingRight: spacing(1),
     width: spacing(10),
+    '@media (max-width: 800px)': {
+      width: spacing(2),
+      fontSize: '0.75rem',
+    },
   },
   selectedButton: {
-    paddingLeft: spacing(1),
-    paddingRight: spacing(1),
-    width: spacing(10),
     background: palette.primary[400],
     color: palette.primary[50],
     '&:hover': {
@@ -59,6 +60,16 @@ const styles = ({ spacing, palette }) => ({
       borderLeft: `1px solid ${palette.primary[50]}!important`,
     },
   },
+  longButtonText: {
+    '@media (max-width: 800px)': {
+      display: 'none',
+    },
+  },
+  shortButtonText: {
+    '@media (min-width: 800px)': {
+      display: 'none',
+    },
+  },
   title: {
     fontWeight: 'bold',
     overflow: 'hidden',
@@ -118,6 +129,7 @@ const styles = ({ spacing, palette }) => ({
 });
 
 const LOCATIONS = ['Room 1', 'Room 2', 'Room 3'];
+const LOCATIONS_SHORT = [1, 2, 3];
 
 const Appointment = withStyles(styles, { name: 'Appointment' })(({ classes, data, ...restProps }) => (
   <Appointments.Appointment
@@ -179,18 +191,21 @@ const handleButtonClick = (locationName, locations) => {
 };
 
 const getButtonClass = (locations, classes, location) => (
-  locations.indexOf(location) > -1 ? classes.selectedButton : classes.button
+  locations.indexOf(location) > -1 && classes.selectedButton
 );
 
 const LocationSelector = withStyles(styles, { name: 'LocationSelector' })(({ onLocationsChange, locations, classes }) => (
   <ButtonGroup className={classes.locationSelector}>
-    {LOCATIONS.map(location => (
+    {LOCATIONS.map((location, index) => (
       <Button
-        className={getButtonClass(locations, classes, location)}
+        className={classNames(classes.button, getButtonClass(locations, classes, location))}
         onClick={() => onLocationsChange(handleButtonClick(location, locations))}
         key={location}
       >
-        {location}
+        <>
+          <span className={classes.shortButtonText}>{LOCATIONS_SHORT[index]}</span>
+          <span className={classes.longButtonText}>{location}</span>
+        </>
       </Button>
     ))}
   </ButtonGroup>

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

@@ -7,6 +7,8 @@ import {
   WeekView,
   Appointments,
 } from '@devexpress/dx-react-scheduler-material-ui';
+import { withStyles } from '@material-ui/core/styles';
+
 import { appointments } from '../../../demo-data/appointments';
 
 const formatDayScaleDate = (date, options) => {
@@ -16,9 +18,22 @@ const formatDayScaleDate = (date, options) => {
 };
 const formatTimeScaleDate = date => moment(date).format('hh:mm:ss');
 
-const DayScaleCell = (
-  { formatDate, ...restProps },
-) => <WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} />;
+const styles = {
+  dayScaleCell: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+};
+
+const DayScaleCell = withStyles(styles, 'DayScaleCell')((
+  { formatDate, classes, ...restProps },
+) => (
+  <WeekView.DayScaleCell
+    {...restProps}
+    formatDate={formatDayScaleDate}
+    className={classes.dayScaleCell}
+  />
+));
 const TimeScaleCell = (
   { formatDate, ...restProps },
 ) => <WeekView.TimeScaleCell {...restProps} formatDate={formatTimeScaleDate} />;

packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx

@@ -58,7 +58,10 @@ const styles = ({ spacing }) => ({
     },
   },
   invisible: {
-    maxHeight: '500px',
+    maxHeight: 0,
+    '@media (min-width: 700px)': {
+      maxHeight: '500px',
+    },
   },
   label: {
     width: '8em',

packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx

@@ -14,7 +14,6 @@ const styles = ({ spacing, palette, typography }) => ({
     paddingTop: spacing(1),
     backgroundColor: palette.background.paper,
     boxSizing: 'border-box',
-    width: '400px',
     ...typography.body2,
   },
   text: {

packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx

@@ -5,7 +5,6 @@ import { withStyles } from '@material-ui/core/styles';
 
 const styles = ({ spacing, palette }) => ({
   head: {
-    width: '400px',
     position: 'relative',
     paddingLeft: spacing(1),
     paddingRight: spacing(0.5),

packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx

@@ -8,6 +8,10 @@ const verticalTopHorizontalCenterOptions = { vertical: 'top', horizontal: 'cente
 const styles = {
   popover: {
     borderRadius: '8px',
+    width: '400px',
+    '@media (max-width: 500px)': {
+      width: '300px',
+    },
   },
 };
 

packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx

@@ -32,9 +32,17 @@ const styles = ({ palette, spacing }) => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     display: 'flex',
+    '@media (max-width: 500px)': {
+      paddingLeft: spacing(0.5),
+      paddingRight: spacing(0.5),
+    },
   },
   shortContent: {
     padding: spacing(0.25, 1),
+    '@media (max-width: 500px)': {
+      paddingLeft: spacing(0.5),
+      paddingRight: spacing(0.5),
+    },
   },
   shortContainer: {
     display: 'flex',

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

@@ -3,25 +3,45 @@ import * as PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'clsx';
 
-export const NavigationButton = React.memo(({
+const styles = ({ spacing }) => ({
+  button: {
+    '@media (max-width: 500px)': {
+      width: spacing(4),
+      height: spacing(4),
+      padding: 0,
+    },
+  },
+});
+
+const NavigationButtonBase = React.memo(({
   type,
   onClick,
+  classes,
+  className,
   ...restProps
 }) => (
   <IconButton
     onClick={onClick}
+    className={classNames(classes.button, className)}
     {...restProps}
   >
     {type === 'back' ? <ChevronLeft /> : <ChevronRight />}
   </IconButton>
 ));
 
-NavigationButton.propTypes = {
+NavigationButtonBase.propTypes = {
   type: PropTypes.oneOf(['forward', 'back']).isRequired,
   onClick: PropTypes.func,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
 };
 
-NavigationButton.defaultProps = {
+NavigationButtonBase.defaultProps = {
   onClick: () => {},
+  className: undefined,
 };
+
+export const NavigationButton = withStyles(styles, { name: 'NavigationButton' })(NavigationButtonBase);