Add onChange option to sortable

docs.md

@@ -216,6 +216,7 @@ unless `false` is passed as the second parameter._
 -   `ascending`: Whether the sort is initially ascending (default=`true`)
 -   `sortPath`: The initial `sortPath`
 -   `sortFunc`: The initial `sortFunc`
+-   `onChange`: A callback that will be fired whenever the sorting state is updated
 
 **Parameters**
 

src/sortable.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { orderBy, get, wrapDisplayName } from './utils'
+import { orderBy, get, wrapDisplayName, noop } from './utils'
 
 /**
  * A function that returns a React HOC that provides a sort function the wrapped component.
@@ -29,6 +29,7 @@ import { orderBy, get, wrapDisplayName } from './utils'
  * - `ascending`: Whether the sort is initially ascending (default=`true`)
  * - `sortPath`: The initial `sortPath`
  * - `sortFunc`: The initial `sortFunc`
+ * - `onChange`: A callback that will be fired whenever the sorting state is updated
  *
  * @name sortable
  * @type Function
@@ -73,7 +74,7 @@ import { orderBy, get, wrapDisplayName } from './utils'
 export default function sortable (options={}) {
 
   // Arguments are used to set initial state in constructor
-  const { ascending=true, sortPath, sortFunc } = options
+  const { ascending=true, sortPath, sortFunc, onChange=noop } = options
 
   return WrappedComponent => 
 
@@ -129,6 +130,10 @@ export default function sortable (options={}) {
         }
       }
 
+      componentDidUpdate () {
+        return onChange(this.state)
+      }
+
       render () {
         const { ascending, sortPath } = this.state
         return (

src/utils.js

@@ -5,6 +5,7 @@ export {
   every,
   isUndefined as isUndef,
   map,
+  noop,
   orderBy,
   once,
   stubTrue,

test/sortable.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
 import { sortable } from '../src/'
 
 test('sortable has correct displayName', () => {
@@ -13,9 +13,9 @@ test('sortable provides a working sort function', () => {
   const Wrapper = sortable({
     sortPath: 'age'
   })(Wrapped)
-  const component = shallow(<Wrapper/>)
+  const component = mount(<Wrapper/>)
   // Check sort function
-  const { sort } = component.props()
+  const { sort } = component.find(Wrapped).props()
   const unsorted = [{ age: 2 }, { age: 1 }, { age: 3 }]
   const sorted = [{ age: 1 }, { age: 2 }, { age: 3 }]
   expect(sort(unsorted)).toEqual(sorted)
@@ -24,39 +24,55 @@ test('sortable provides a working sort function', () => {
 test('sortable setter functions work', () => {
   const Wrapped = () => <h1>Hi</h1>
   const Wrapper = sortable({ ascending: false })(Wrapped)
-  const component = shallow(<Wrapper/>)
+  const component = mount(<Wrapper/>)
   // Check ascending
-  const { setAscending, setSortFunc } = component.props()
-  expect(component.props().ascending).toEqual(false)
+  const { setAscending, setSortFunc } = component.find(Wrapped).props()
+  expect(component.find(Wrapped).props().ascending).toEqual(false)
   setAscending(true)
   component.update()
-  expect(component.props().ascending).toEqual(true)
-  // Check sortFunc
+  expect(component.find(Wrapped).props().ascending).toEqual(true)
+  // // Check sortFunc
   const reverseSortFunc = (a, b) => (a > b) ? -1 : 1
   const unsorted = [1, 3, 2]
   const sorted = [3, 2, 1]
   setSortFunc(reverseSortFunc)
-  component.update()
-  expect(component.props().sort(unsorted)).toEqual(sorted)
+  expect(component.find(Wrapped).props().sort(unsorted)).toEqual(sorted)
 })
 
 test('sortable setSortPath toggles sort order', () => {
   const Wrapped = () => <h1>Hi</h1>
   const Wrapper = sortable({ sortPath: 'foo' })(Wrapped)
-  const component = shallow(<Wrapper/>)
+  const component = mount(<Wrapper/>)
   // Check setSortPath
-  const { setSortPath } = component.props()
-  expect(component.props().ascending).toEqual(true)
+  const { setSortPath } = component.find(Wrapped).props()
+  expect(component.find(Wrapped).props().ascending).toEqual(true)
   // Expect toggle if path is unchanged
   setSortPath('foo')
   component.update()
-  expect(component.props().ascending).toEqual(false)
+  expect(component.find(Wrapped).props().ascending).toEqual(false)
   // Expect no toggle if flag is passed
   setSortPath('foo', false)
   component.update()
-  expect(component.props().ascending).toEqual(false)
+  expect(component.find(Wrapped).props().ascending).toEqual(false)
   // Expect ascending set to true if path is different
   setSortPath('bar')
   component.update()
-  expect(component.props().ascending).toEqual(true)
+  expect(component.find(Wrapped).props().ascending).toEqual(true)
 })
+
+test('sortable onChange is called when sort state is updated', () => {
+  const Wrapped = () => <h1>Hi</h1>
+  const onChange = jest.fn()
+  const Wrapper = sortable({
+    sortPath: 'age',
+    onChange,
+  })(Wrapped)
+  const component = mount(<Wrapper/>)
+  const { setSortPath } = component.find(Wrapped).props()
+  setSortPath('age')
+  expect(onChange).toHaveBeenCalledWith({
+    ascending: false,
+    sortPath: 'age',
+    sortFunc: undefined,
+  })
+})