fix(react-grid): remove extra space at the right of GroupPanelCell wh…

…en sorting is disabled (#220)
DevExpress · Jul 25, 2017 · 257a337 · 257a337
1 parent fb2c424
commit 257a337
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 21 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx
@@ -37,18 +37,21 @@ export const GroupPanelCell = ({
         </span>
       )}
     </span>
-    &nbsp;
+
     {allowUngroupingByClick && (
-      <i
-        className="glyphicon glyphicon-remove"
-        style={{
-          top: '0',
-          fontSize: '9px',
-          margin: '-5px',
-          padding: '5px',
-        }}
-        onClick={() => groupByColumn({ columnName: column.name })}
-      />)}
+      <span>
+        &nbsp;
+        <i
+          className="glyphicon glyphicon-remove"
+          style={{
+            top: '0',
+            fontSize: '9px',
+            margin: '-5px',
+            padding: '5px',
+          }}
+          onClick={() => groupByColumn({ columnName: column.name })}
+        />
+      </span>)}
   </div>
 );
 

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.test.jsx
@@ -12,7 +12,7 @@ describe('GroupPanelCell', () => {
       />,
     );
 
-    expect(tree.find('div > span').text()).toBe('Test');
+    expect(tree.find('div').text()).toBe('Test');
   });
 
   it('can render the ungroup button', () => {

diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.jsx
@@ -15,14 +15,19 @@ const styleSheet = createStyleSheet('GroupPanelCell', theme => ({
   },
 }));
 
-const label = (allowSorting, sortingDirection, column) => (
-  <TableSortLabel
-    active={allowSorting && !!sortingDirection}
-    direction={sortingDirection}
-  >
-    {column.title || column.name}
-  </TableSortLabel>
-);
+const label = (allowSorting, sortingDirection, column) => {
+  const title = column.title || column.name;
+  return allowSorting
+    ? (
+      <TableSortLabel
+        active={!!sortingDirection}
+        direction={sortingDirection}
+      >
+        {title}
+      </TableSortLabel>
+    )
+    : title;
+};
 
 
 const GroupPanelCellBase = ({

diff --git a/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/group-panel-cell.test.jsx
@@ -13,7 +13,19 @@ describe('GroupPanelCell', () => {
       />,
     );
 
-    expect(tree.find('TableSortLabel').text()).toBe('Test');
+    expect(tree.text()).toBe('Test');
+  });
+
+  it('should not render the "TableSortLabel" component if sorting is disabled', () => {
+    const tree = mountWithStyles(
+      <GroupPanelCell
+        column={{
+          name: 'Test',
+        }}
+      />,
+    );
+
+    expect(tree.find('TableSortLabel').exists()).toBeFalsy();
   });
 
   it('should cancel sorting by using the Ctrl key', () => {