CSS cleanups, fixes, and reimplementations (#1780)

* Clean up a bit of the core css, and Header type * Row css cleanup * Fix fragment id prop warning in dev mode * context menu styling * Fix missing background color on frozen cells * Use flex to align cells vertically, small optimizations * header cells = cells * Use sticky position for frozen header cells as well * Fix tests * Editor styling * Fix tests * bit more padding * small fixes * Redo checkbox styling * more draggable header cell fixes * fix NumericFilter style * Align cells vertically using line-height * pull header sort arrows to the right * Fix tests * set line-height on the root * Couple cleanups * rdg-cell * more renaming * center filters again * Add MUI icons package * Replace glyphicons * harmonize frozen cell styles * Fix jest performance * Scroll the header as a whole, skip some refs * Fix tests * Fix sortable header cell text overflow * Fix tests
adazzle · Oct 15, 2019 · a007e17 · a007e17
1 parent fc4b090
commit a007e17
Show file tree

Hide file tree

Showing 48 changed files with 405 additions and 491 deletions.
diff --git a/examples/demos/example08-sortable-cols.js b/examples/demos/example08-sortable-cols.js
@@ -14,37 +14,31 @@ export default class extends React.Component {
       {
         key: 'task',
         name: 'Title',
-        width: 200,
         sortable: true
       },
       {
         key: 'priority',
         name: 'Priority',
-        width: 200,
         sortable: true
       },
       {
         key: 'issueType',
         name: 'Issue Type',
-        width: 200,
         sortable: true
       },
       {
         key: 'complete',
         name: '% Complete',
-        width: 200,
         sortable: true
       },
       {
         key: 'startDate',
         name: 'Start Date',
-        width: 200,
         sortable: true
       },
       {
         key: 'completeDate',
         name: 'Expected Complete',
-        width: 200,
         sortable: true
       }
     ];

diff --git a/examples/demos/example27-cell-actions.js b/examples/demos/example27-cell-actions.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDataGrid from 'react-data-grid';
 import { Data, Formatters } from 'react-data-grid-addons';
+import { Clear, Link, FileCopy } from '@material-ui/icons';
 import faker from 'faker';
 import Wrapper from './Wrapper';
 
@@ -133,18 +134,18 @@ export default class extends React.Component {
     if (column.key === 'county' && row.id === 'id_0') {
       return [
         {
-          icon: <span className="glyphicon glyphicon-remove" />,
+          icon: <Clear />,
           callback() { alert('Deleting'); }
         },
         {
-          icon: <span className="glyphicon glyphicon-link" />,
+          icon: <Link />,
           actions: [
             {
               text: 'Edit Cell',
               callback() { alert('Edit Cell'); }
             },
             {
-              text: <><span className="fa fa-copy" /> Copy Cell</>,
+              text: <><FileCopy /> Copy Cell</>,
               callback() { alert('Copied'); }
             }
           ]

diff --git a/jest.config.js b/jest.config.js
@@ -23,6 +23,7 @@ module.exports = {
   moduleNameMapper: {
     '^react-data-grid$': '<rootDir>/packages/react-data-grid/src/',
     '^react-data-grid-addons$': '<rootDir>/packages/react-data-grid-addons/src/',
+    '^@material-ui/icons$': '<rootDir>/test/iconsMock.ts',
     '\\.css$': '<rootDir>/test/fileMock.js'
   },
   setupFiles: [

diff --git a/packages/react-data-grid-addons/package.json b/packages/react-data-grid-addons/package.json
@@ -25,7 +25,7 @@
     "build": "tsc"
   },
   "dependencies": {
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react-contextmenu": "^2.11.0",
     "react-data-grid": "^7.0.0-alpha.20",

diff --git a/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx b/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx
@@ -45,31 +45,19 @@ export default function NumericFilter<R>({ column, onChange }: Props<R>) {
   }
 
   const inputKey = `header-filter-${column.key as keyof R}`;
-  const columnStyle: React.CSSProperties = {
-    float: 'left',
-    marginRight: 5,
-    maxWidth: '80%'
-  };
-  const badgeStyle: React.CSSProperties = {
-    cursor: 'help'
-  };
 
   const tooltipText = 'Input Methods: Range (x-y), Greater Then (>x), Less Then (<y)';
 
   return (
-    <div>
-      <div style={columnStyle}>
-        <input
-          key={inputKey}
-          placeholder="e.g. 3,10-15,>20"
-          className="form-control input-sm"
-          onChange={handleChange}
-          onKeyPress={handleKeyPress}
-        />
-      </div>
-      <div className="input-sm">
-        <span className="badge" style={badgeStyle} title={tooltipText}>?</span>
-      </div>
+    <div className="rdg-filter-container">
+      <input
+        key={inputKey}
+        className="rdg-filter"
+        placeholder="e.g. 3,10-15,>20"
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+      <span className="rdg-filter-badge" title={tooltipText}>?</span>
     </div>
   );
 }

diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { DragSource, DropTarget } from 'react-dnd';
 
 class DraggableHeaderCell extends React.Component {
@@ -21,18 +22,13 @@ class DraggableHeaderCell extends React.Component {
       canDrop
     } = this.props;
 
-    let opacity = 1;
-    if (isDragging) {
-      opacity = 0.2;
-    }
-
     // set drag source and drop target on header cell
     // width: 0 - otherwise drag clone was wrongly positioned
     return connectDragSource(
       connectDropTarget(
         <div
-          style={{ width: 0, cursor: 'move', opacity }}
-          className={isOver && canDrop ? 'rdg-can-drop' : ''}
+          className={classNames('rdg-draggable-header-cell', { 'rdg-can-drop': isOver && canDrop })}
+          style={{ opacity: isDragging ? 0.2 : 1 }}
         >
           {this.props.children}
         </div>

diff --git a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js
@@ -23,7 +23,7 @@ class DraggableHeaderCell extends Component {
     if (isDragging) {
       return null;
     }
-    return connectDragSource(<div style={{ cursor: 'move' }}>{this.props.children}</div>);
+    return connectDragSource(<div className="rdg-draggable-header-cell">{this.props.children}</div>);
   }
 }
 

diff --git a/packages/react-data-grid-addons/src/draggable/RowDragLayer.js b/packages/react-data-grid-addons/src/draggable/RowDragLayer.js
@@ -69,9 +69,9 @@ class CustomDragLayer extends Component {
           if (c.formatter) {
             const Formatter = c.formatter;
             const dependentValues = typeof c.getRowMetaData === 'function' ? c.getRowMetaData(item, c) : {};
-            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="react-grid-Cell" style={{ padding: '5px' }}><Formatter dependentValues={dependentValues} value={item[c.key]} /></td>);
+            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="rdg-cell" style={{ padding: '5px' }}><Formatter dependentValues={dependentValues} value={item[c.key]} /></td>);
           } else {
-            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="react-grid-Cell" style={{ padding: '5px' }}>{item[c.key]}</td>);
+            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="rdg-cell" style={{ padding: '5px' }}>{item[c.key]}</td>);
           }
         }
       });

diff --git a/packages/react-data-grid-addons/src/editors/DropDownEditor.js b/packages/react-data-grid-addons/src/editors/DropDownEditor.js
@@ -63,7 +63,7 @@ export default class DropDownEditor extends React.Component {
     return (
       <select
         ref={this.setSelectRef}
-        style={{ width: '100%' }}
+        className="rdg-select-editor"
         defaultValue={this.props.value}
         onBlur={this.props.onBlur}
       >

diff --git a/packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js b/packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js
@@ -23,11 +23,6 @@ describe('DropDownEditor', () => {
       );
     });
 
-    it('should pass width=100% to the select node as an inline style', () => {
-      const Select = TestUtils.findRenderedDOMComponentWithTag(component, 'select');
-      expect(Select.style.width).toBe('100%');
-    });
-
     it('should pass the value to the select node as an inline value', () => {
       const Select = TestUtils.findRenderedDOMComponentWithTag(component, 'select');
       expect(Select.value).toBe('option2');

diff --git a/packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx b/packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { Delete } from '@material-ui/icons';
 
 interface Props {
   name: string;
@@ -13,9 +14,8 @@ export default function GroupedColumnButton({ name, columnKey, onColumnGroupDele
   );
 
   return (
-    <div className="grouped-col-btn btn btn-sm">
-      <span className="grouped-col-btn__name">{name}</span>
-      <span className="grouped-col-btn__remove glyphicon glyphicon-trash" onClick={onClick} />
+    <div className="grouped-col-btn btn">
+      {name} <Delete onClick={onClick} />
     </div>
   );
 }
diff --git a/packages/react-data-grid-addons/style/rdg-contextmenu.less b/packages/react-data-grid-addons/style/rdg-contextmenu.less
@@ -0,0 +1,39 @@
+.react-contextmenu {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.24);
+
+  font-size: 14px;
+  line-height: 2;
+  white-space: nowrap;
+
+  > .react-contextmenu-item:not(:last-child) {
+    border-bottom: 1px solid #ddd;
+  }
+
+  .react-contextmenu-submenu > & {
+    margin-top: -1px;
+  }
+}
+
+.react-contextmenu-item:not(.react-contextmenu-submenu) {
+  padding: 0 12px;
+}
+
+.react-contextmenu-item--selected {
+  background-color: darken(#fff, 4%);
+}
+
+.react-contextmenu-submenu > .react-contextmenu-item {
+  &::after {
+    content: "▶";
+    margin-left: 12px;
+    margin-right: -6px;
+  }
+
+  &:not(.react-contextmenu-item--active) + .react-contextmenu {
+    display: none;
+  }
+}
diff --git a/packages/react-data-grid-addons/style/rdg-image.less b/packages/react-data-grid-addons/style/rdg-image.less
@@ -4,4 +4,5 @@
   display: inline-block;
   height: 40px;
   width: 40px;
-}
+  vertical-align: middle;
+}
diff --git a/packages/react-data-grid-addons/style/rdg-toolbar.less b/packages/react-data-grid-addons/style/rdg-toolbar.less
@@ -15,7 +15,7 @@
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.42857143;
+  line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -43,9 +43,12 @@
 .react-grid-Toolbar .grouped-col-btn + .grouped-col-btn {
   margin-left: 5px;
 }
-.react-grid-Toolbar .grouped-col-btn__remove {
-  margin-left: 5px;
+
+.grouped-col-btn > .MuiSvgIcon-root {
+  font-size: 18px;
+  vertical-align: middle;
 }
+
 .react-grid-Toolbar .tools {
   float: right;
   position: relative;

diff --git a/packages/react-data-grid-addons/style/react-data-grid-addons.less b/packages/react-data-grid-addons/style/react-data-grid-addons.less
@@ -1,3 +1,19 @@
+@import 'rdg-contextmenu.less';
 @import 'rdg-drop-target.less';
 @import 'rdg-image.less';
 @import 'rdg-toolbar.less';
+
+.rdg-dragging {
+  cursor: grabbing;
+}
+
+.rdg-draggable-header-cell {
+  cursor: move;
+  display: inline-block;
+  height: inherit;
+  background-color: inherit;
+}
+
+.rdg-can-drop {
+  background-color: #ececec;
+}
diff --git a/packages/react-data-grid/package.json b/packages/react-data-grid/package.json
@@ -27,8 +27,10 @@
     "build": "tsc"
   },
   "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
     "classnames": "^2.2.6",
-    "react-is": "^16.8.4",
+    "react-is": "^16.10.2",
     "shallowequal": "^1.1.0",
     "tslib": "^1.10.0"
   },

diff --git a/packages/react-data-grid/src/Canvas.tsx b/packages/react-data-grid/src/Canvas.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { isElement } from 'react-is';
 
 import Row from './Row';
@@ -80,7 +80,7 @@ export default function Canvas<R>({
   rowHeight,
   rowKey,
   rowRenderer,
-  RowsContainer = Fragment,
+  RowsContainer,
   rowsCount,
   scrollToRowIndex,
   selectedRows
@@ -275,12 +275,26 @@ export default function Canvas<R>({
     );
   }
 
-  const paddingTop = rowOverscanStartIdx * rowHeight;
-  const paddingBottom = (rowsCount - 1 - rowOverscanEndIdx) * rowHeight;
+  let grid = (
+    <div
+      className="rdg-grid"
+      style={{
+        width: columnMetrics.totalColumnWidth,
+        paddingTop: rowOverscanStartIdx * rowHeight,
+        paddingBottom: (rowsCount - 1 - rowOverscanEndIdx) * rowHeight
+      }}
+    >
+      {getRows()}
+    </div>
+  );
+
+  if (RowsContainer !== undefined) {
+    grid = <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>{grid}</RowsContainer>;
+  }
 
   return (
     <div
-      className="react-grid-Canvas"
+      className="rdg-viewport"
       style={{ height }}
       ref={canvas}
       onScroll={handleScroll}
@@ -311,11 +325,7 @@ export default function Canvas<R>({
         editorPortalTarget={editorPortalTarget}
         {...interactionMasksMetaData}
       />
-      <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>
-        <div className="rdg-rows-container" style={{ width: columnMetrics.totalColumnWidth, paddingTop, paddingBottom }}>
-          {getRows()}
-        </div>
-      </RowsContainer>
+      {grid}
     </div>
   );
 }