RDG Tree Cell Expand Styling Issues. (#1316)

* Fix cell actions exmaple. * Fix styling issues for cell expansion and childrow indents. * fix minor styling issue * fix test * remove f describe * address comments * address comments
adazzle · Nov 15, 2018 · edab134 · edab134
1 parent a1ef518
commit edab134
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 179 deletions.
diff --git a/packages/react-data-grid-examples/src/scripts/example27-cell-actions.js b/packages/react-data-grid-examples/src/scripts/example27-cell-actions.js
@@ -3,13 +3,10 @@ const ReactDataGrid = require('react-data-grid');
 const exampleWrapper = require('../components/exampleWrapper');
 const React = require('react');
 const {
-  ToolsPanel: { AdvancedToolbar: Toolbar, GroupedColumnsPanel },
   Data: { Selectors },
-  Draggable: { Container: DraggableContainer },
   Formatters: { ImageFormatter }
 } = require('react-data-grid-addons');
 
-import PropTypes from 'prop-types';
 
 faker.locale = 'en_GB';
 
@@ -50,107 +47,78 @@ const columns = [
     key: 'avartar',
     name: 'Avartar',
     width: 60,
-    formatter: ImageFormatter,
-    draggable: true
+    formatter: ImageFormatter
   },
   {
     key: 'county',
     name: 'County',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'title',
     name: 'Title',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'firstName',
     name: 'First Name',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'lastName',
     name: 'Last Name',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'email',
     name: 'Email',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'street',
     name: 'Street',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'zipCode',
     name: 'ZipCode',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'date',
     name: 'Date',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'bs',
     name: 'bs',
-    draggable: true,
     width: 200
   },
   {
     key: 'catchPhrase',
     name: 'Catch Phrase',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'companyName',
     name: 'Company Name',
-    width: 200,
-    draggable: true
+    width: 200
   },
   {
     key: 'sentence',
     name: 'Sentence',
-    width: 200,
-    draggable: true
+    width: 200
   }
 ];
 
-class CustomToolbar extends React.Component {
-  static propTypes = {
-    groupBy: PropTypes.array.isRequired,
-    onColumnGroupAdded: PropTypes.func.isRequired,
-    onColumnGroupDeleted: PropTypes.func.isRequired
-  };
-
-  render() {
-    return (<Toolbar>
-      <GroupedColumnsPanel groupBy={this.props.groupBy} onColumnGroupAdded={this.props.onColumnGroupAdded} onColumnGroupDeleted={this.props.onColumnGroupDeleted}/>
-      </Toolbar>);
-  }
-}
-
 class Example extends React.Component {
   constructor(props) {
     super(props);
-    let fakeRows = createRows(2000);
-    this.state = {rows: fakeRows, groupBy: [], expandedRows: {}};
+    this.state = { rows: createRows(2000) };
   }
 
   getRows = () => {
-    let rows = Selectors.getRows(this.state);
-    return rows;
+    return Selectors.getRows(this.state);
   };
 
   getRowAt = (index) => {
@@ -162,31 +130,6 @@ class Example extends React.Component {
     return this.getRows().length;
   };
 
-  onColumnGroupAdded = (colName) => {
-    let columnGroups = this.state.groupBy.slice(0);
-    let activeColumn = columns.find((c) => c.key === colName)
-    let isNotInGroups = columnGroups.find((c) => activeColumn.key === c.name) == null;
-    if (isNotInGroups) {
-      columnGroups.push({key: activeColumn.key, name: activeColumn.name});
-    }
-
-    this.setState({groupBy: columnGroups});
-  };
-
-  onColumnGroupDeleted = (name) => {
-    let columnGroups = this.state.groupBy.filter(function(g){
-      return typeof g === 'string' ? g !== name : g.key !== name;
-    });
-    this.setState({groupBy: columnGroups});
-  };
-
-  onRowExpandToggle = ({ columnGroupName, name, shouldExpand }) => {
-    let expandedRows = Object.assign({}, this.state.expandedRows);
-    expandedRows[columnGroupName] = Object.assign({}, expandedRows[columnGroupName]);
-    expandedRows[columnGroupName][name] = {isExpanded: shouldExpand};
-    this.setState({expandedRows: expandedRows});
-  };
-
   getCellActions(column, row) {
     if (column.key === 'county' && row.id === 'id_0') {
       return [
@@ -213,20 +156,15 @@ class Example extends React.Component {
 
   render() {
     return (
-      <DraggableContainer>
-          <ReactDataGrid
-            ref={ node => this.grid = node }
-            enableCellSelect={true}
-            enableDragAndDrop={true}
-            columns={columns}
-            rowGetter={this.getRowAt}
-            rowsCount={this.getSize()}
-            onRowExpandToggle={this.onRowExpandToggle}
-            toolbar={<CustomToolbar groupBy={this.state.groupBy} onColumnGroupAdded={this.onColumnGroupAdded} onColumnGroupDeleted={this.onColumnGroupDeleted}/>}
-            rowHeight={50}
-            minHeight={600}
-            getCellActions={this.getCellActions} />
-      </DraggableContainer>
+      <ReactDataGrid
+        ref={ node => this.grid = node }
+        enableCellSelect={true}
+        columns={columns}
+        rowGetter={this.getRowAt}
+        rowsCount={this.getSize()}
+        rowHeight={55}
+        minHeight={600}
+        getCellActions={this.getCellActions} />
     );
   }
 }
@@ -246,6 +184,5 @@ module.exports = exampleWrapper({
   WrappedComponent: Example,
   exampleName: 'Cell Actions Example',
   exampleDescription,
-  examplePath: './scripts/example27-cell-actions.js',
-  examplePlaygroundLink: undefined
+  examplePath: './scripts/example27-cell-actions.js'
 });
diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js
@@ -309,18 +309,23 @@ class Cell extends React.PureComponent {
     let isExpandCell = this.props.expandableOptions ? this.props.expandableOptions.field === this.props.column.key : false;
     let treeDepth = this.props.expandableOptions ? this.props.expandableOptions.treeDepth : 0;
     let marginLeft = this.props.expandableOptions && isExpandCell ? (this.props.expandableOptions.treeDepth * 30) : 0;
-    let cellExpander;
+
     let cellDeleter;
-    if (this.canExpand()) {
-      cellExpander = <CellExpand expandableOptions={this.props.expandableOptions} onCellExpand={this.onCellExpand} />;
-    }
 
     let isDeleteSubRowEnabled = this.props.cellMetaData.onDeleteSubRow ? true : false;
 
     if (treeDepth > 0 && isExpandCell) {
       cellDeleter = <ChildRowDeleteButton treeDepth={treeDepth} cellHeight={this.props.height} siblingIndex={this.props.expandableOptions.subRowDetails.siblingIndex} numberSiblings={this.props.expandableOptions.subRowDetails.numberSiblings} onDeleteSubRow={this.onDeleteSubRow} isDeleteSubRowEnabled={isDeleteSubRowEnabled} />;
     }
-    return (<div className="react-grid-Cell__value">{cellDeleter}<div style={{ marginLeft: marginLeft }}><span>{CellContent}</span> {this.props.cellControls} {cellExpander}</div></div>);
+    return (
+      <div className="react-grid-Cell__value">
+        {cellDeleter}
+        <div style={{ marginLeft, position: 'relative', top: '50%', transform: 'translateY(-50%)' }}>
+          <span>{CellContent}</span>
+          {this.props.cellControls}
+        </div>
+      </div>
+    );
   };
 
   render() {
@@ -345,6 +350,10 @@ class Cell extends React.PureComponent {
     let events = this.getEvents();
     const tooltip = this.props.tooltip ? (<span className="cell-tooltip-text">{this.props.tooltip}</span>) : null;
 
+    const cellExpander =  this.canExpand() && (
+      <CellExpand expandableOptions={this.props.expandableOptions} onCellExpand={this.onCellExpand} />
+    );
+
     return (
       <div
         {...this.getKnownDivProps()}
@@ -354,6 +363,7 @@ class Cell extends React.PureComponent {
         ref={this.setCellRef}
       >
         {cellActionButtons}
+        {cellExpander}
         {cellContent}
         {tooltip}
       </div>

diff --git a/packages/react-data-grid/src/CellExpander.js b/packages/react-data-grid/src/CellExpander.js
@@ -28,9 +28,11 @@ class CellExpander extends React.Component {
 
   render() {
     return (
-      <span className="rdg-cell-expand" onClick={this.onCellExpand} >
-        {this.state.expanded ? CellExpand.DOWN_TRIANGLE : CellExpand.RIGHT_TRIANGLE}
-      </span>
+      <div className="rdg-cell-expand">
+        <span onClick={this.onCellExpand}>
+          {this.state.expanded ? CellExpand.DOWN_TRIANGLE : CellExpand.RIGHT_TRIANGLE}
+        </span>
+      </div>
     );
   }
 }

diff --git a/packages/react-data-grid/src/__tests__/CellExpand.spec.js b/packages/react-data-grid/src/__tests__/CellExpand.spec.js
diff --git a/packages/react-data-grid/src/__tests__/CellExpander.spec.js b/packages/react-data-grid/src/__tests__/CellExpander.spec.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CellExpander from '../CellExpander';
+import { CellExpand } from 'common/constants';
+
+const setup = (overrideExpandableOptions = {}) => {
+  const props = {
+    expandableOptions: {
+      expanded: true,
+      ...overrideExpandableOptions
+    },
+    onCellExpand: jasmine.createSpy()
+  };
+
+  return {
+    props,
+    wrapper: mount(<CellExpander {...props} />)
+  };
+};
+
+describe('CellExpand', () => {
+  it('should create an instance of CellExpand', () => {
+    const { wrapper } = setup({ expanded: false });
+
+    expect(wrapper.find('.rdg-cell-expand').length).toBe(1);
+    expect(wrapper.find('span').text()).toBe(CellExpand.RIGHT_TRIANGLE);
+  });
+
+  it('should call onCellExpand when clicked', () => {
+    const { wrapper, props } = setup({ expanded: false });
+
+    wrapper.find('span').simulate('click');
+
+    expect(props.onCellExpand.calls.count()).toEqual(1);
+    expect(wrapper.find('span').text()).toBe(CellExpand.DOWN_TRIANGLE);
+  });
+});