Merge pull request #1087 from jkruder/duplicate-table-calls

Removed duplicate table calls and support multiple tables
mui · Jul 9, 2015 · 68f9e82 · 68f9e82
2 parents 6986b93 + 2ddb639
commit 68f9e82
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/docs/src/app/components/pages/components/table.jsx b/docs/src/app/components/pages/components/table.jsx
@@ -12,6 +12,7 @@ class TablePage extends React.Component {
 
     this._onToggle = this._onToggle.bind(this);
     this.onChange = this._onChange.bind(this);
+    this._onRowSelection = this._onRowSelection.bind(this);
 
     this.state = {
       fixedHeader: true,
@@ -21,6 +22,7 @@ class TablePage extends React.Component {
       selectable: true,
       multiSelectable: false,
       canSelectAll: false,
+      deselectOnClickaway: true,
       height: '300px',
       rowData: this._getRowData()
     };
@@ -70,6 +72,7 @@ this.state = {
   selectable: true,
   multiSelectable: false,
   canSelectAll: false,
+  deselectOnClickaway: true,
   height: '300px',
   rowData: rowData
 };
@@ -106,7 +109,9 @@ let footerCols = {id: {content: 'ID'}, name: {content: 'Name'}, status: {content
   showRowHover={this.state.showRowHover}
   selectable={this.state.selectable}
   multiSelectable={this.state.multiSelectable}
-  canSelectAll={this.state.canSelectAll} />
+  canSelectAll={this.state.canSelectAll}
+  deselectOnClickaway={this.state.deselectOnClickaway}
+  onRowSelection={this._onRowSelection} />
     `;
 
     let desc = 'Data table component.';
@@ -139,6 +144,12 @@ let footerCols = {id: {content: 'ID'}, name: {content: 'Name'}, status: {content
             header: 'optional',
             desc: 'The default value of a table column. The initial value is 50px.'
           },
+          {
+            name: 'deselectOnClickAway',
+            type: 'boolean',
+            header: 'default: true',
+            desc: 'Controls whether or not to deselect all selected rows after clicking outside the table.'
+          },
           {
             name: 'displayRowCheckbox',
             type: 'boolean',
@@ -292,13 +303,15 @@ let footerCols = {id: {content: 'ID'}, name: {content: 'Name'}, status: {content
             columnOrder={colOrder}
             rowData={this.state.rowData}
             height={this.state.height}
+            deselectOnClickaway={this.state.deselectOnClickaway}
             fixedHeader={this.state.fixedHeader}
             fixedFooter={this.state.fixedFooter}
             stripedRows={this.state.stripedRows}
             showRowHover={this.state.showRowHover}
             selectable={this.state.selectable}
             multiSelectable={this.state.multiSelectable}
-            canSelectAll={this.state.canSelectAll} />
+            canSelectAll={this.state.canSelectAll}
+            onRowSelection={this._onRowSelection} />
 
           <div style={propContainerStyle}>
             <h3>Table Properties</h3>
@@ -349,6 +362,12 @@ let footerCols = {id: {content: 'ID'}, name: {content: 'Name'}, status: {content
               onToggle={this._onToggle}
               defaultToggled={this.state.canSelectAll} />
 
+            <Toggle
+              name='deselectOnClickaway'
+              label='Deselect On Clickaway'
+              onToggle={this._onToggle}
+              defaultToggled={this.state.deselectOnClickaway} />
+
           </div>
         </div>
       </ComponentDoc>
@@ -377,6 +396,10 @@ let footerCols = {id: {content: 'ID'}, name: {content: 'Name'}, status: {content
     state[e.target.name] = toggled;
     this.setState(state);
   }
+
+  _onRowSelection(rows) {
+    console.log(rows);
+  }
 }
 
 module.exports = TablePage;
diff --git a/src/table/table-row.jsx b/src/table/table-row.jsx
@@ -88,7 +88,7 @@ let TableRow = React.createClass({
     }
 
     return (
-      <tr className={className} onClick={this._onRowClick} style={this.getStyles().root}>
+      <tr className={className} style={this.getStyles().root}>
         {this._getColumns(columns)}
       </tr>
     );
@@ -133,8 +133,7 @@ let TableRow = React.createClass({
         name={key}
         value='selected'
         disabled={!this.props.selectable}
-        defaultChecked={this.props.selected}
-        onCheck={this._onCheck} />;
+        defaultChecked={this.props.selected} />;
 
     return {
       content: checkbox,
@@ -159,7 +158,10 @@ let TableRow = React.createClass({
 
   _onCellClick(e, columnIndex) {
     if (this.props.selectable && this.props.onCellClick) this.props.onCellClick(e, this.props.rowNumber, columnIndex);
-    if (this.refs.rowSelectCB !== undefined) this.refs.rowSelectCB.setChecked(!this.refs.rowSelectCB.isChecked());
+    if (this.refs.rowSelectCB !== undefined) {
+      this.refs.rowSelectCB.setChecked(!this.refs.rowSelectCB.isChecked());
+      e.ctrlKey = true;
+    }
     this._onRowClick(e);
   },
 
@@ -179,11 +181,6 @@ let TableRow = React.createClass({
     }
   },
 
-  _onCheck(e) {
-    e.ctrlKey = true;
-    this._onCellClick(e, 0);
-  },
-
 });
 
 module.exports = TableRow;
diff --git a/src/table/table.jsx b/src/table/table.jsx
@@ -19,6 +19,7 @@ let Table = React.createClass({
     canSelectAll: React.PropTypes.bool,
     columnOrder: React.PropTypes.array,
     defaultColumnWidth: React.PropTypes.string,
+    deselectOnClickaway: React.PropTypes.bool,
     displayRowCheckbox: React.PropTypes.bool,
     displaySelectAll: React.PropTypes.bool,
     fixedFooter: React.PropTypes.bool,
@@ -45,6 +46,7 @@ let Table = React.createClass({
     return {
       canSelectAll: false,
       defaultColumnWidth: '50px',
+      deselectOnClickaway: true,
       displayRowCheckbox: true,
       displaySelectAll: true,
       fixedFooter: true,
@@ -108,7 +110,9 @@ let Table = React.createClass({
   },
 
   componentClickAway() {
-    if (this.state.selectedRows.length) this.setState({ selectedRows: [] });
+    if (this.props.deselectOnClickaway && this.state.selectedRows.length) {
+      this.setState({ selectedRows: [] });
+    }
   },
 
   render() {
@@ -311,6 +315,8 @@ let Table = React.createClass({
   },
 
   _handleRowClick(e, rowNumber) {
+    e.stopPropagation();
+
     if (this.props.selectable) {
       // Prevent text selection while selecting rows.
       window.getSelection().removeAllRanges();
@@ -354,8 +360,8 @@ let Table = React.createClass({
   },
 
   _handleCellClick(e, rowNumber, columnNumber) {
+    e.stopPropagation();
     if (this.props.onCellClick) this.props.onCellClick(rowNumber, this._getColumnId(columnNumber));
-    this._handleRowClick(e, rowNumber);
   },
 
   _handleRowHover(e, rowNumber) {