Merge decba72 into b9738a2

uxcore · Jun 20, 2018 · e42de89 · e42de89
2 parents b9738a2 + decba72
commit e42de89
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 98 deletions.
diff --git a/demo/FloatNavDemo.js b/demo/FloatNavDemo.js
@@ -26,6 +26,10 @@ class Demo extends React.Component {
     console.log('handleClick', link, orderNumber);
   }
 
+  handleActive() {
+    console.log(arguments);
+  }
+
   renderArticle() {
     return (
       <div className="article">
@@ -95,7 +99,7 @@ class Demo extends React.Component {
             <NavItem title={'参选总统'} anchor={'p1-2'} />
             <NavItem title={'宣誓就职'} anchor={'p1-3'} />
           </NavItem>
-          <NavItem title={'多重身份'} anchor={'p2'}>
+          <NavItem title={'多重身份'} anchor={'p2'} onActive={() => console.log('多重身份')}>
             <NavItem title={'名人'} anchor={'p2-1'} />
             <NavItem title={'富商'} anchor={'p2-2'} />
             <NavItem title={'作家'} anchor={'p2-3'} />

diff --git a/index.html b/index.html
@@ -9,10 +9,9 @@
 <body>
     <div id="UXCoreDemo"></div>
     <script src="./node_modules/console-polyfill/index.js"></script>
-    <script src="./node_modules/es5-shim/es5-shim.min.js"></script>
-    <script src="./node_modules/es5-shim/es5-sham.min.js"></script>
-    <script src="./node_modules/react/dist/react-with-addons.js"></script>
-    <script src="./node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="./node_modules/babel-polyfill/dist/polyfill.min.js"></script>
+        <script src="./node_modules/react/umd/react.development.js"></script>
+    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="./dist/demo.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,62 +1,61 @@
 {
- "name": "uxcore-float-nav",
- "version": "0.3.0",
- "description": "uxcore-float-nav component for uxcore.",
- "repository": "https://github.com/uxcore/uxcore-float-nav.git",
- "author": "vincent.bian",
- "main": "build/index.js",
- "scripts": {
-  "start": "uxcore-tools run start",
-  "server": "uxcore-tools run server",
-  "lint": "uxcore-tools run lint",
-  "build": "uxcore-tools run build",
-  "test": "uxcore-tools run test",
-  "coverage": "uxcore-tools run coverage",
-  "pub": "uxcore-tools run pub",
-  "dep": "uxcore-tools run dep",
-  "tnpm-dep": "uxcore-tools run tnpm-dep",
-  "chrome": "uxcore-tools run chrome",
-  "browsers": "uxcore-tools run browsers",
-  "saucelabs": "uxcore-tools run saucelabs",
-  "update": "uxcore-tools run update",
-  "tnpm-update": "uxcore-tools run tnpm-update"
- },
- "bugs": {
-  "url": "http://github.com/uxcore/uxcore-float-nav/issues"
- },
- "keywords": [
-  "react",
-  "react-component",
-  "uxcore-float-nav",
-  "FloatNav",
-  "uxcore",
-  "component",
-  "floatNav"
- ],
- "devDependencies": {
-  "console-polyfill": "^0.2.2",
-  "enzyme": "^3.0.0",
-  "enzyme-adapter-react-15": "^1.0.2",
-  "es5-shim": "^4.5.8",
-  "expect.js": "~0.3.1",
-  "kuma-base": "1.x",
-  "react": "15.x",
-  "react-dom": "15.x",
-  "react-test-renderer": "15.x",
-  "uxcore-kuma": "*",
-  "uxcore-tools": "0.2.x"
- },
- "dependencies": {
-  "classnames": "^2.1.2",
-  "enzyme": "^3.3.0",
-  "es5-shim": "^4.5.10",
-  "kuma-base": "^1.10.0",
-  "lodash": "^4.17.4",
-  "object-assign": "^4.1.1",
-  "prop-types": "^15.6.0",
-  "react": "^15.6.2",
-  "uxcore-kuma": "^10.0.0"
- },
- "contributors": [],
- "license": "MIT"
-}
+  "name": "uxcore-float-nav",
+  "version": "0.3.0",
+  "description": "uxcore-float-nav component for uxcore.",
+  "repository": "https://github.com/uxcore/uxcore-float-nav.git",
+  "author": "vincent.bian",
+  "main": "build/index.js",
+  "scripts": {
+    "start": "uxcore-tools run start",
+    "server": "uxcore-tools run server",
+    "lint": "uxcore-tools run lint",
+    "build": "uxcore-tools run build",
+    "test": "uxcore-tools run test",
+    "coverage": "uxcore-tools run coverage",
+    "pub": "uxcore-tools run pub",
+    "dep": "uxcore-tools run dep",
+    "tnpm-dep": "uxcore-tools run tnpm-dep",
+    "chrome": "uxcore-tools run chrome",
+    "browsers": "uxcore-tools run browsers",
+    "saucelabs": "uxcore-tools run saucelabs",
+    "update": "uxcore-tools run update",
+    "tnpm-update": "uxcore-tools run tnpm-update"
+  },
+  "bugs": {
+    "url": "http://github.com/uxcore/uxcore-float-nav/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "uxcore-float-nav",
+    "FloatNav",
+    "uxcore",
+    "component",
+    "floatNav"
+  ],
+  "devDependencies": {
+    "uxcore-tools": "^0.3.0",
+    "console-polyfill": "^0.2.2",
+    "enzyme": "^3.0.0",
+    "expect.js": "~0.3.1",
+    "kuma-base": "1.x",
+    "react": "16.x",
+    "react-dom": "16.x",
+    "react-test-renderer": "16.x",
+    "uxcore-kuma": "*",
+    "babel-polyfill": "6.x",
+    "enzyme-adapter-react-16": "1.x"
+  },
+  "dependencies": {
+    "classnames": "^2.1.2",
+    "enzyme": "^3.3.0",
+    "es5-shim": "^4.5.10",
+    "kuma-base": "^1.10.0",
+    "lodash": "^4.17.4",
+    "object-assign": "^4.1.1",
+    "react-lifecycles-compat": "^3.0.4",
+    "uxcore-kuma": "^10.0.0"
+  },
+  "contributors": [],
+  "license": "MIT"
+}
diff --git a/src/FloatNav.jsx b/src/FloatNav.jsx
@@ -5,12 +5,34 @@
  * Copyright 2015-2016, Uxcore Team, Alinw.
  * All rights reserved.
  */
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import assign from 'object-assign';
 import throttle from 'lodash/throttle';
 import debounce from 'lodash/debounce';
+import { polyfill } from 'react-lifecycles-compat';
+
+function getAnchors(props) {
+  const { children } = props;
+  let anchors = [];
+  if (children) {
+    if (!children.length) {
+      anchors.push(children.props.anchor);
+      anchors = anchors.concat(getAnchors(children.props));
+    } else {
+      React.Children.forEach(children, (child) => {
+        const childAnchor = child.props.anchor;
+        if (childAnchor) {
+          anchors.push(childAnchor);
+        }
+        anchors = anchors.concat(getAnchors(child.props));
+      });
+    }
+  }
+  return anchors;
+}
 
 class FloatNav extends Component {
 
@@ -43,9 +65,15 @@ class FloatNav extends Component {
     children: PropTypes.any,
   };
 
+  static getDerivedStateFromProps(nextProps) {
+    return {
+      anchors: getAnchors(nextProps),
+    };
+  }
+
   constructor(props) {
     super(props);
-    const anchors = this.getAnchors(props);
+    const anchors = getAnchors(props);
     this.state = {
       activeAnchor: '',
       scrollTop: 0,
@@ -66,11 +94,6 @@ class FloatNav extends Component {
     this.handlePageScroll();
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      anchors: this.getAnchors(nextProps),
-    });
-  }
 
   componentDidUpdate(prevProps) {
     if (prevProps.height !== this.props.height) {
@@ -85,26 +108,6 @@ class FloatNav extends Component {
     window.removeEventListener('scroll', this.handlePageScroll, false);
   }
 
-  getAnchors(props) {
-    const { children } = props;
-    let anchors = [];
-    if (children) {
-      if (!children.length) {
-        anchors.push(children.props.anchor);
-        anchors = anchors.concat(this.getAnchors(children.props));
-      } else {
-        React.Children.forEach(children, (child) => {
-          const childAnchor = child.props.anchor;
-          if (childAnchor) {
-            anchors.push(childAnchor);
-          }
-          anchors = anchors.concat(this.getAnchors(child.props));
-        });
-      }
-    }
-    return anchors;
-  }
-
   updateComponentHeight() {
     this.contentHeight = this.contentEle.offsetHeight;
     this.viewHeight = this.containerEle.offsetHeight;
@@ -306,4 +309,4 @@ class FloatNav extends Component {
   }
 }
 
-export default FloatNav;
+export default polyfill(FloatNav);
diff --git a/src/NavItem.jsx b/src/NavItem.jsx
@@ -9,9 +9,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import assign from 'object-assign';
+import { polyfill } from 'react-lifecycles-compat';
 
 class NavItem extends Component {
-
   static displayName = 'NavItem';
   static defaultProps = {
     title: '',
@@ -47,10 +47,15 @@ class NavItem extends Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.active && !this.props.active) {
+  getSnapshotBeforeUpdate(prevProps) {
+    if (!prevProps.active && this.props.active) {
       this.props.onActive(this.props.anchor, this.root);
     }
+    return null;
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    // hold for getSnapshotBeforeUpdate method
   }
 
   handleClick(e) {
@@ -149,4 +154,4 @@ class NavItem extends Component {
   }
 }
 
-export default NavItem;
+export default polyfill(NavItem);
diff --git a/tests/FloatNav.spec.js b/tests/FloatNav.spec.js
@@ -2,7 +2,7 @@ import expect from 'expect.js';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils, { Simulate } from 'react-dom/test-utils';
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 import Enzyme, { mount } from 'enzyme';
 import FloatNavWrapper from '../src';
 import FloatNavDemo from '../demo/FloatNavDemo';