Merge pull request #70 from makotot/onupdate

add onupdate

Author: makotot

.eslintrc

@@ -1,8 +1,5 @@
 {
   "parser": "babel-eslint",
-  "ecmaFeatures": {
-    "jsx": true
-  },
 
   "plugins": [
     "react"

package.json

@@ -33,42 +33,42 @@
   "author": "makotot",
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^7.1.1",
-    "ava": "^0.19.1",
+    "autoprefixer": "^7.1.2",
+    "ava": "^0.22.0",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.5.2",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-hmre": "^1.1.1",
     "construct-css": "https://github.com/makotot/construct.git",
     "css-loader": "^0.28.4",
     "cssnano": "^3.10.0",
-    "enzyme": "^2.8.2",
-    "eslint": "^3.19.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-react": "^7.0.1",
-    "html-webpack-plugin": "^2.28.0",
+    "enzyme": "^2.9.1",
+    "eslint": "^4.4.1",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-react": "^7.2.1",
+    "html-webpack-plugin": "^2.30.1",
     "node-sass": "^4.5.3",
     "normalize.css": "^7.0.0",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.6",
     "react-addons-perf": "^15.4.2",
     "react-highlight": "^0.10.0",
-    "react-test-renderer": "^15.5.4",
-    "sass-loader": "^6.0.5",
-    "style-loader": "^0.17.0",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.5"
+    "react-test-renderer": "^15.6.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.4",
+    "webpack-dev-server": "^2.7.1"
   },
   "peerDependencies": {
     "react": ">=0.14.0",
     "react-dom": ">=0.14.0"
   },
   "dependencies": {
-    "babel-runtime": "^6.23.0",
+    "babel-runtime": "^6.25.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.10"
   },

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {}

src/js/app.jsx

@@ -29,6 +29,11 @@ class App extends React.Component {
               className="c-side-nav__list nav-list"
               style={ {fontWeight: 300} }
               offset={ -20 }
+              onUpdate={
+                () => {
+                  console.log(this)
+                }
+              }
             >
               <li className="c-side-nav__item"><a href="#section-1" className="c-side-nav__link">Getting Started</a></li>
               <li className="c-side-nav__item"><a href="#section-2" className="c-side-nav__link">Example</a></li>
@@ -136,6 +141,10 @@ class App extends React.Component {
                         <td className="c-table__data">rootEl</td>
                         <td className="c-table__data">Name of the element of scrollable container that can be used with <code>{'querySelector'}</code> [optional].</td>
                       </tr>
+                      <tr>
+                        <td className="c-table__data">onUpdate</td>
+                        <td className="c-table__data">Function to be executed when the active item has been updated [optional].</td>
+                      </tr>
                     </tbody>
                   </table>
                 </div>

src/js/lib/Scrollspy.jsx

@@ -3,6 +3,16 @@ import React from 'react'
 import classNames from 'classnames'
 import throttle from './throttle'
 
+function isEqualArray(a, b) {
+  return (
+    a.length === b.length
+    &&
+    a.every((item, index) => {
+      return item === b[index]
+    })
+  )
+}
+
 export default class Scrollspy extends React.Component {
 
   static get PropTypes () {
@@ -14,6 +24,7 @@ export default class Scrollspy extends React.Component {
       componentTag: PropTypes.string,
       offset: PropTypes.number,
       rootEl: PropTypes.string,
+      onUpdate: PropTypes.func,
     }
   }
 
@@ -24,6 +35,7 @@ export default class Scrollspy extends React.Component {
       style: {},
       componentTag: 'ul',
       offset: 0,
+      onUpdate() {},
     }
   }
 
@@ -178,13 +190,24 @@ export default class Scrollspy extends React.Component {
 
   _spy (targets) {
     const elemensViewState = this._getElemsViewState(targets)
+    const currentStatuses = this.state.inViewState
 
     this.setState({
       inViewState: elemensViewState.viewStatusList,
       isScrolledPast: elemensViewState.scrolledPast
+    }, () => {
+      this._update(currentStatuses)
     })
   }
 
+  _update (prevStatuses) {
+    if (isEqualArray(this.state.inViewState, prevStatuses)) {
+      return
+    }
+
+    this.props.onUpdate()
+  }
+
   _handleSpy () {
     throttle(this._spy(), 100)
   }