fix(react-scheduler): fix horizontal scale flickering (T1151128) (#3641)

* fix scheduler horizontal scale flickering * add tests
DevExpress · Mar 16, 2023 · fc2b29e · fc2b29e
1 parent 0135366
commit fc2b29e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/main-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/main-layout.jsx
@@ -2,7 +2,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material';
 import classNames from 'clsx';
-import { scrollingStrategy, getBorder, getBrightBorder } from '../utils';
+import {
+  scrollingStrategy,
+  getBorder,
+  getBrightBorder,
+  getEmptyCellWidth,
+} from '../utils';
 import { GROUPING_PANEL_VERTICAL_CELL_WIDTH, LEFT_PANEL_WIDTH_SPACING } from '../constants';
 
 const PREFIX = 'MainLayout';
@@ -61,8 +66,8 @@ const StyledDiv = styled('div', {
   [`& .${classes.dayScaleEmptyCell}`]: {
     display: 'flex',
     alignItems: 'flex-end',
-    width: leftPanelWidth || theme.spacing(calculatedLeftPanelWidth) + 1,
-    minWidth: leftPanelWidth || theme.spacing(calculatedLeftPanelWidth) + 1,
+    width: getEmptyCellWidth(theme, leftPanelWidth, calculatedLeftPanelWidth),
+    minWidth: getEmptyCellWidth(theme, leftPanelWidth, calculatedLeftPanelWidth),
   },
   [`& .${classes.flexRow}`]: {
     display: 'flex',

diff --git a/packages/dx-react-scheduler-material-ui/src/templates/utils.js b/packages/dx-react-scheduler-material-ui/src/templates/utils.js
@@ -71,3 +71,5 @@ export const getViewCellKey = (startDate, groups) => {
 };
 
 export const addCommaAndSpaceToString = string => string && `${string},\xa0`;
+
+export const getEmptyCellWidth = (theme, width, calculatedWidth) => (width ? `${width}px` : `calc(${theme.spacing(calculatedWidth)} + 1px)`);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/utils.test.js b/packages/dx-react-scheduler-material-ui/src/templates/utils.test.js
@@ -2,6 +2,7 @@ import {
   getWidthInPixels,
   getViewCellKey,
   getResourceColor,
+  getEmptyCellWidth,
 } from './utils';
 
 describe('Utils', () => {
@@ -42,4 +43,12 @@ describe('Utils', () => {
         .toBe('Main color');
     });
   });
+  describe('#getEmptyCellWidth', () => {
+    it('should return the exact width as a string (if provided)', () => {
+      expect(getEmptyCellWidth(undefined, 81, 91)).toBe('81px');
+    });
+    it('should ask the theme to calculate the width if none was provided', () => {
+      expect(getEmptyCellWidth({ spacing: width => `${width * 10}px` }, undefined, 8)).toBe('calc(80px + 1px)');
+    });
+  });
 });