Merge pull request #549 from appfolio/AddOnSortCallback

Add onSort callback to UncontrolledTable
appfolio · May 23, 2019 · 17cf910 · 17cf910
2 parents cbca058 + 4d877b2
commit 17cf910
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/src/components/UncontrolledTable.js b/src/components/UncontrolledTable.js
@@ -18,7 +18,8 @@ export default class UncontrolledTable extends React.Component {
       column: PropTypes.string,
       ascending: PropTypes.bool
     }),
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    onSort: PropTypes.func
   };
 
   static defaultProps = {
@@ -31,7 +32,8 @@ export default class UncontrolledTable extends React.Component {
     sort: {
       ascending: true
     },
-    onSelect: () => {}
+    onSelect: () => {},
+    onSort: () => {}
   };
 
   state = {
@@ -48,21 +50,19 @@ export default class UncontrolledTable extends React.Component {
   );
 
   sortBy = (column, ascending) => {
+    let sort;
     if (this.state.sort.column === column) {
-      this.setState({
-        sort: {
-          column,
-          ascending
-        }
-      });
+      sort = {
+        column,
+        ascending
+      };
     } else {
-      this.setState({
-        sort: {
-          column,
-          ascending: true
-        }
-      });
+      sort = {
+        column,
+        ascending: true
+      };
     }
+    this.setState({ sort }, () => this.props.onSort(sort));
   };
 
   get someSelected() {

diff --git a/stories/Table.js b/stories/Table.js
@@ -149,6 +149,7 @@ storiesOf('Table', module)
         paginated={boolean('paginated', false)}
         pageSize={number('pageSize', 10)}
         onSelect={action('onSelect')}
+        onSort={action('onSort')}
       />
     </div>
   ))

diff --git a/test/components/UncontrolledTable.spec.js b/test/components/UncontrolledTable.spec.js
@@ -397,6 +397,33 @@ describe('<UncontrolledTable />', () => {
     assert.deepStrictEqual(wrapper.find(SortableTable).prop('rows'), [{ name: 'Charlie' }, { name: 'Bravo' }, { name: 'Alpha' }]);
   });
 
+  it('should show correct rows on sort change', () => {
+    const columns = [{ header: 'Name', key: 'name', cell: row => row }, { header: 'Age', key: 'age', cell: row => row }];
+    const rows = [{ name: 'Alpha', age: 1 }, { name: 'Bravo', age: 5 }, { name: 'Charlie', age: 3 }];
+    const onSort = sinon.stub();
+
+    const wrapper = shallow(
+      <UncontrolledTable
+        columns={columns}
+        rows={rows}
+        sort={{ column: 'name', ascending: false }}
+        onSort={onSort}
+      />
+    );
+
+    wrapper.find(SortableTable).prop('columns')[0].onSort(true); // Simulate sort by ascending order
+    sinon.assert.calledWith(onSort, { column: 'name', ascending: true });
+    wrapper.update();
+
+    wrapper.find(SortableTable).prop('columns')[0].onSort(false); // Simulate sort by descending order
+    sinon.assert.calledWith(onSort, { column: 'name', ascending: false });
+    wrapper.update();
+
+    wrapper.find(SortableTable).prop('columns')[1].onSort(false);
+    sinon.assert.calledWith(onSort, { column: 'age', ascending: true });
+    wrapper.update();
+  });
+
   it('should hide columns when hidden', () => {
     const columns = [
       { header: 'Name', cell: row => row },