[Table] Fix controlled behavior (mui#6638)

nmatsumoto4 · Apr 20, 2017 · ce4035c · ce4035c
1 parent 3421207
commit ce4035c
Show file tree

Hide file tree

Showing 9 changed files with 339 additions and 193 deletions.
diff --git a/docs/src/app/components/pages/components/Table/ExampleComplex.js b/docs/src/app/components/pages/components/Table/ExampleComplex.js
@@ -1,6 +1,13 @@
-import React from 'react';
-import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn}
-  from 'material-ui/Table';
+import React, {Component} from 'react';
+import {
+  Table,
+  TableBody,
+  TableFooter,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+} from 'material-ui/Table';
 import TextField from 'material-ui/TextField';
 import Toggle from 'material-ui/Toggle';
 
@@ -19,7 +26,6 @@ const tableData = [
   {
     name: 'John Smith',
     status: 'Employed',
-    selected: true,
   },
   {
     name: 'Randal White',
@@ -28,7 +34,6 @@ const tableData = [
   {
     name: 'Stephanie Sanders',
     status: 'Employed',
-    selected: true,
   },
   {
     name: 'Steve Brown',
@@ -48,24 +53,22 @@ const tableData = [
   },
 ];
 
-export default class TableExampleComplex extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      fixedHeader: true,
-      fixedFooter: true,
-      stripedRows: false,
-      showRowHover: false,
-      selectable: true,
-      multiSelectable: false,
-      enableSelectAll: false,
-      deselectOnClickaway: true,
-      showCheckboxes: true,
-      height: '300px',
-    };
-  }
+/**
+ * A more complex example, allowing the table height to be set, and key boolean properties to be toggled.
+ */
+export default class TableExampleComplex extends Component {
+  state = {
+    fixedHeader: true,
+    fixedFooter: true,
+    stripedRows: false,
+    showRowHover: false,
+    selectable: true,
+    multiSelectable: false,
+    enableSelectAll: false,
+    deselectOnClickaway: true,
+    showCheckboxes: true,
+    height: '300px',
+  };
 
   handleToggle = (event, toggled) => {
     this.setState({
@@ -110,7 +113,7 @@ export default class TableExampleComplex extends React.Component {
             stripedRows={this.state.stripedRows}
           >
             {tableData.map( (row, index) => (
-              <TableRow key={index} selected={row.selected}>
+              <TableRow key={index}>
                 <TableRowColumn>{index}</TableRowColumn>
                 <TableRowColumn>{row.name}</TableRowColumn>
                 <TableRowColumn>{row.status}</TableRowColumn>

diff --git a/docs/src/app/components/pages/components/Table/ExampleControlled.js b/docs/src/app/components/pages/components/Table/ExampleControlled.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+} from 'material-ui/Table';
+
+export default class TableExampleControlled extends Component {
+  state = {
+    selected: [1],
+  };
+
+  isSelected = (index) => {
+    return this.state.selected.indexOf(index) !== -1;
+  };
+
+  handleRowSelection = (selectedRows) => {
+    this.setState({
+      selected: selectedRows,
+    });
+  };
+
+  render() {
+    return (
+      <Table onRowSelection={this.handleRowSelection}>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderColumn>ID</TableHeaderColumn>
+            <TableHeaderColumn>Name</TableHeaderColumn>
+            <TableHeaderColumn>Status</TableHeaderColumn>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow selected={this.isSelected(0)}>
+            <TableRowColumn>1</TableRowColumn>
+            <TableRowColumn>John Smith</TableRowColumn>
+            <TableRowColumn>Employed</TableRowColumn>
+          </TableRow>
+          <TableRow selected={this.isSelected(1)}>
+            <TableRowColumn>2</TableRowColumn>
+            <TableRowColumn>Randal White</TableRowColumn>
+            <TableRowColumn>Unemployed</TableRowColumn>
+          </TableRow>
+          <TableRow selected={this.isSelected(2)}>
+            <TableRowColumn>3</TableRowColumn>
+            <TableRowColumn>Stephanie Sanders</TableRowColumn>
+            <TableRowColumn>Employed</TableRowColumn>
+          </TableRow>
+          <TableRow>
+            <TableRowColumn selected={this.isSelected(3)}>4</TableRowColumn>
+            <TableRowColumn>Steve Brown</TableRowColumn>
+            <TableRowColumn>Employed</TableRowColumn>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  }
+}
diff --git a/docs/src/app/components/pages/components/Table/ExampleSimple.js b/docs/src/app/components/pages/components/Table/ExampleSimple.js
@@ -1,7 +1,16 @@
 import React from 'react';
-import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
-
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+} from 'material-ui/Table';
 
+/**
+ * A simple table demonstrating the hierarchy of the `Table` component and its sub-components.
+ */
 const TableExampleSimple = () => (
   <Table>
     <TableHeader>
@@ -32,6 +41,11 @@ const TableExampleSimple = () => (
         <TableRowColumn>Steve Brown</TableRowColumn>
         <TableRowColumn>Employed</TableRowColumn>
       </TableRow>
+      <TableRow>
+        <TableRowColumn>5</TableRowColumn>
+        <TableRowColumn>Christopher Nolan</TableRowColumn>
+        <TableRowColumn>Unemployed</TableRowColumn>
+      </TableRow>
     </TableBody>
   </Table>
 );

diff --git a/docs/src/app/components/pages/components/Table/Page.js b/docs/src/app/components/pages/components/Table/Page.js
@@ -8,6 +8,8 @@ import MarkdownElement from '../../../MarkdownElement';
 import tableReadmeText from './README';
 import TableExampleSimple from './ExampleSimple';
 import tableExampleSimpleCode from '!raw!./ExampleSimple';
+import TableExampleControlled from './ExampleControlled';
+import tableExampleControlledCode from '!raw!./ExampleControlled';
 import TableExampleComplex from './ExampleComplex';
 import tableExampleComplexCode from '!raw!./ExampleComplex';
 
@@ -19,25 +21,24 @@ import tableHeaderColumnCode from '!raw!material-ui/Table/TableHeaderColumn';
 import tableBodyCode from '!raw!material-ui/Table/TableBody';
 import tableFooterCode from '!raw!material-ui/Table/TableFooter';
 
-const descriptions = {
-  simple: 'A simple table demonstrating the hierarchy of the `Table` component and its sub-components.',
-  complex: 'A more complex example, allowing the table height to be set, and key boolean properties to be toggled.',
-};
-
 const TablePage = () => (
   <div>
     <Title render={(previousTitle) => `Table - ${previousTitle}`} />
     <MarkdownElement text={tableReadmeText} />
     <CodeExample
       title="Simple example"
-      description={descriptions.simple}
       code={tableExampleSimpleCode}
     >
       <TableExampleSimple />
     </CodeExample>
+    <CodeExample
+      title="Controlled example"
+      code={tableExampleControlledCode}
+    >
+      <TableExampleControlled />
+    </CodeExample>
     <CodeExample
       title="Complex example"
-      description={descriptions.complex}
       code={tableExampleComplexCode}
     >
       <TableExampleComplex />

diff --git a/src/Table/Table.js b/src/Table/Table.js
@@ -210,8 +210,13 @@ class Table extends Component {
   };
 
   onRowSelection = (selectedRows) => {
-    if (this.state.allRowsSelected) this.setState({allRowsSelected: false});
-    if (this.props.onRowSelection) this.props.onRowSelection(selectedRows);
+    if (this.state.allRowsSelected) {
+      this.setState({allRowsSelected: false});
+    }
+
+    if (this.props.onRowSelection) {
+      this.props.onRowSelection(selectedRows);
+    }
   };
 
   onSelectAll = () => {