fix(react-grid-material-ui): center text when label without icon (#2909)

DevExpress · May 20, 2020 · f14e660 · f14e660
1 parent 3ddc3de
commit f14e660
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 3 deletions.
diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.jsx
@@ -13,19 +13,24 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
     marginBottom: theme.spacing(1.5),
   },
+  withoutIcon: {
+    paddingRight: '13px',
+    paddingLeft: '13px',
+  },
   draftCell: {
     opacity: 0.3,
   },
 });
 
-const label = (showSortingControls, sortingEnabled, sortingDirection, column) => {
+const label = (showSortingControls, sortingEnabled, sortingDirection, column, hovered) => {
   const title = column.title || column.name;
   return showSortingControls
     ? (
       <TableSortLabel
         active={!!sortingDirection}
         direction={sortingDirection === null ? undefined : sortingDirection}
         disabled={!sortingEnabled}
+        hideSortIcon={!hovered}
         tabIndex={-1}
       >
         {title}
@@ -42,8 +47,10 @@ const GroupPanelItemBase = ({
   classes, className,
   ...restProps
 }) => {
+  const [hovered, setHovered] = React.useState(false);
   const chipClassNames = classNames({
     [classes.button]: true,
+    [classes.withoutIcon]: !showSortingControls || (!hovered && sortingDirection === null),
     [classes.draftCell]: draft,
   }, className);
   const onClick = (e) => {
@@ -62,13 +69,17 @@ const GroupPanelItemBase = ({
 
   return (
     <Chip
-      label={label(showSortingControls, sortingEnabled, sortingDirection, column)}
+      label={label(showSortingControls, sortingEnabled, sortingDirection, column, hovered)}
       className={chipClassNames}
       {...showGroupingControls
         ? { onDelete: groupingEnabled ? onGroup : null }
         : null}
       {...showSortingControls
-        ? { onClick: sortingEnabled ? onClick : null }
+        ? {
+          onClick: sortingEnabled ? onClick : null,
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+        }
         : null}
       {...restProps}
     />

diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-item.test.jsx
@@ -187,4 +187,76 @@ describe('GroupPanelItem', () => {
     expect(tree.hasClass(classes.button))
       .toBeTruthy();
   });
+
+  describe('sorting label', () => {
+    it('should add class "buttonWithoutIcon" if not show sorting control', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.simulate('mouseenter');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.simulate('mouseleave');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+    });
+
+    it('should add class "buttonWithoutIcon" if show sorting control but not sorted or hovered', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+          sortingDirection={null}
+          showSortingControls
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+    });
+
+    it('should remove class "buttonWithoutIcon" if sorted', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+          sortingDirection={null}
+          showSortingControls
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.setProps({ sortingDirection: 'asc' });
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(false);
+    });
+
+    it('should remove class "buttonWithoutIcon" on hover', () => {
+      const tree = shallow((
+        <GroupPanelItem
+          item={{ column: { name: 'test' } }}
+          sortingDirection={null}
+          showSortingControls
+        />
+      ));
+
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+
+      tree.simulate('mouseenter');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(false);
+
+      tree.simulate('mouseleave');
+      expect(tree.hasClass(classes.withoutIcon))
+        .toBe(true);
+    });
+  });
 });