From b779a98d7a083a080d427a99b85869a28bb6ff82 Mon Sep 17 00:00:00 2001
From: Eric Abbott <ericabbott1@gmail.com>
Date: Wed, 5 Apr 2017 00:10:17 -0700
Subject: [PATCH] Change precedence in 'getResolvedState' (#166)

* Change precedence in 'getResolvedState'
  * Previously existing props would overwrite passed in state
  * Now passed in state gets precedence

* added a controlled table example to storybook
---
 .storybook/config.js       |   2 +
 src/lifecycle.js           |   2 +-
 stories/ControlledTable.js | 155 +++++++++++++++++++++++++++++++++++++
 3 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 stories/ControlledTable.js

diff --git a/.storybook/config.js b/.storybook/config.js
index 8a1117d..585424b 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -25,6 +25,7 @@ import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
 import NoDataText from '../stories/NoDataText.js'
 import Footers from '../stories/Footers.js'
 import Filtering from '../stories/Filtering.js'
+import ControlledTable from '../stories/ControlledTable.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -55,4 +56,5 @@ configure(() => {
     .add('Custom "No Data" Text', NoDataText)
     .add('Footers', Footers)
     .add('Custom Filtering', Filtering)
+    .add('Controlled Component', ControlledTable)
 }, module)
diff --git a/src/lifecycle.js b/src/lifecycle.js
index 024fe2e..8557505 100644
--- a/src/lifecycle.js
+++ b/src/lifecycle.js
@@ -19,8 +19,8 @@ export default {
   getResolvedState (props, state) {
     const resolvedState = {
       ..._.compactObject(this.state),
-      ..._.compactObject(state),
       ..._.compactObject(this.props),
+      ..._.compactObject(state),
       ..._.compactObject(props)
     }
     return resolvedState
diff --git a/stories/ControlledTable.js b/stories/ControlledTable.js
new file mode 100644
index 0000000..53e0c96
--- /dev/null
+++ b/stories/ControlledTable.js
@@ -0,0 +1,155 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+const data = _.map(_.range(5553), d => {
+  return {
+    firstName: namor.generate({ words: 1, numLen: 0 }),
+    lastName: namor.generate({ words: 1, numLen: 0 }),
+    age: Math.floor(Math.random() * 30)
+  }
+})
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age'
+  }]
+}]
+
+class ControlledTable extends React.Component {
+  constructor() {
+    super()
+    this.sortChange = this.sortChange.bind(this)
+    this.state = {
+      sorting: [],
+      page: 0,
+      pageSize: 10
+    }
+  }
+
+  sortChange(column, shift) {
+    if(shift)
+      alert('Shift click not implemented in this demo')
+    var sort = {id: column.id}
+    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
+      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
+    else
+      sort.asc = true
+    this.setState({
+      sorting: [sort]
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            sorting={this.state.sorting}
+            onSortingChange={this.sortChange}
+            page={this.state.page}
+            onPageChange={page => this.setState({page})}
+            pageSize={this.state.pageSize}
+            onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: For simplicity, multi-sort is not implemented in this demo</em>
+        </div>
+        <CodeHighlight>{() => getCode()}</CodeHighlight>
+      </div>
+    )
+  }
+}
+
+function getCode () {
+  return `const data = _.map(_.range(5553), d => {
+  return {
+    firstName: namor.generate({ words: 1, numLen: 0 }),
+    lastName: namor.generate({ words: 1, numLen: 0 }),
+    age: Math.floor(Math.random() * 30)
+  }
+})
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age'
+  }]
+}]
+
+class ControlledTable extends React.Component {
+  constructor() {
+    super()
+    this.sortChange = this.sortChange.bind(this)
+    this.pageChange = this.pageChange.bind(this)
+    this.pageSizeChange = this.pageSizeChange.bind(this)
+    this.state = {
+      sorting: [],
+      page: 0,
+      pageSize: 10
+    }
+  }
+
+  sortChange(column, shift) {
+    if(shift)
+      alert('Shift click not implemented in this demo')
+    var sort = {id: column.id}
+    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
+      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
+    else
+      sort.asc = true
+    this.setState({
+      sorting: [sort]
+    })
+  }
+
+  render() {
+    return (
+      <ReactTable
+        className='-striped -highlight'
+        data={data}
+        columns={columns}
+        sorting={this.state.sorting}
+        onSortingChange={this.sortChange}
+        page={this.state.page}
+        onPageChange={page => this.setState({page})}
+        pageSize={this.state.pageSize}
+        onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
+      />
+    )
+  }
+}`
+}
+
+export default () => <ControlledTable />
\ No newline at end of file