bump 0.4.0

Author: jljsj33

README.md

@@ -161,6 +161,7 @@ ScrollAnim.scrollScreen.unMount();
 | active    | string         | `active`| selected className  |
 | showHeightActive| string / number / array | `50%` | enter distance window top `50%` add `active`, leave same; is array [enter, leave]; |
 | toShowHeight | boolean     | false   | scroll to `showHeightActive` |
+| offsetTop |  number        |  0      | scroll to elem top offset  |
 | onFocus   | func           | null    | check callback,onFocus({target,to}) |
 | onBlur    | func           | null    | blur callback ｜
 | component | string         | `div`   | -            |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",

src/ScrollLink.jsx

@@ -20,11 +20,6 @@ class ScrollLink extends React.Component {
     this.state = {
       active: false,
     };
-    [
-      'scrollEventListener',
-      'onClick',
-      'raf',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
 
   componentDidMount() {
@@ -44,20 +39,20 @@ class ScrollLink extends React.Component {
     this.cancelRequestAnimationFrame();
   }
 
-  onClick(e) {
+  onClick = (e) => {
     e.preventDefault();
     const docRect = document.documentElement.getBoundingClientRect();
     const elementDom = mapped.get(this.props.location);
     const elementRect = elementDom.getBoundingClientRect();
     this.scrollTop = currentScrollTop();
-    const toTop = Math.round(elementRect.top) - Math.round(docRect.top) + Math.round(this.props.offset?this.props.offset:0);
+    const toTop = Math.round(elementRect.top) - Math.round(docRect.top) + this.props.offsetTop;
     this.toTop = this.props.toShowHeight ?
     toTop - transformArguments(this.props.showHeightActive)[0] : toTop;
     this.initTime = Date.now();
     this.rafID = requestAnimationFrame(this.raf);
   }
 
-  raf() {
+  raf = () => {
     if (this.rafID === -1) {
       return;
     }
@@ -74,12 +69,12 @@ class ScrollLink extends React.Component {
     }
   }
 
-  cancelRequestAnimationFrame() {
+  cancelRequestAnimationFrame = () => {
     requestAnimationFrame.cancel(this.rafID);
     this.rafID = -1;
   }
 
-  scrollEventListener() {
+  scrollEventListener = () => {
     const docRect = document.documentElement.getBoundingClientRect();
     const clientHeight = window.innerHeight ||
       document.documentElement.clientHeight || document.body.clientHeight;
@@ -147,6 +142,7 @@ class ScrollLink extends React.Component {
       'showHeightActive',
       'ease',
       'toShowHeight',
+      'offsetTop',
     ].forEach(key => delete props[key]);
     const reg = new RegExp(active, 'ig');
     const className = props.className || '';
@@ -156,19 +152,16 @@ class ScrollLink extends React.Component {
   }
 }
 
-const stringOrNumber = React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]);
-const stringOrNumberOrArray = React.PropTypes.oneOfType([stringOrNumber, React.PropTypes.array]);
-const objectOrArray = React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]);
-const childPropTypes = React.PropTypes.oneOfType([objectOrArray, React.PropTypes.string]);
 ScrollLink.propTypes = {
   component: React.PropTypes.string,
-  children: childPropTypes,
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
-  style: objectOrArray,
+  style: React.PropTypes.any,
+  offsetTop: React.PropTypes.number,
   duration: React.PropTypes.number,
   active: React.PropTypes.string,
   location: React.PropTypes.string,
-  showHeightActive: stringOrNumberOrArray,
+  showHeightActive: React.PropTypes.any,
   toShowHeight: React.PropTypes.bool,
   ease: React.PropTypes.string,
   onClick: React.PropTypes.func,
@@ -178,6 +171,7 @@ ScrollLink.propTypes = {
 
 ScrollLink.defaultProps = {
   component: 'div',
+  offsetTop: 0,
   duration: 450,
   active: 'active',
   showHeightActive: '50%',

src/ScrollOverPack.jsx

@@ -24,9 +24,6 @@ class ScrollOverPack extends React.Component {
       show: false,
       children: toArrayChildren(this.props.children),
     };
-    [
-      'scrollEventListener',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
 
   componentDidMount() {
@@ -53,7 +50,7 @@ class ScrollOverPack extends React.Component {
     EventListener.removeEventListener(this.eventType, this.scrollEventListener);
   }
 
-  scrollEventListener(e) {
+  scrollEventListener = (e) => {
     const clientHeight = window.innerHeight ||
       document.documentElement.clientHeight || document.body.clientHeight;
     const scrollTop = currentScrollTop();
@@ -136,16 +133,14 @@ class ScrollOverPack extends React.Component {
     return childToRender;
   }
 }
-const objectOrArray = React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]);
-const numberOrArray = React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.array]);
 ScrollOverPack.propTypes = {
   component: React.PropTypes.string,
-  playScale: numberOrArray,
+  playScale: React.PropTypes.any,
   always: React.PropTypes.bool,
   scrollEvent: React.PropTypes.func,
-  children: objectOrArray,
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
-  style: objectOrArray,
+  style: React.PropTypes.any,
   scrollName: React.PropTypes.string,
   replay: React.PropTypes.bool,
   onChange: React.PropTypes.func,

src/ScrollParallax.jsx

@@ -31,9 +31,6 @@ class ScrollParallax extends React.Component {
     this.defaultTweenData = [];
     this.defaultData = [];
     this.state = {};
-    [
-      'scrollEventListener',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
 
   componentDidMount() {
@@ -71,7 +68,7 @@ class ScrollParallax extends React.Component {
     EventListener.removeEventListener(this.eventType, this.scrollEventListener);
   }
 
-  setDefaultData(_vars) {
+  setDefaultData = _vars => {
     const vars = dataToArray(_vars);
     const varsForIn = (item, i) => {
       const playScale = playScaleToArray(item.playScale).map(data => data * this.clientHeight);
@@ -93,7 +90,7 @@ class ScrollParallax extends React.Component {
     vars.forEach(varsForIn);
   }
 
-  scrollEventListener() {
+  scrollEventListener = () => {
     const scrollTop = currentScrollTop();
     this.clientHeight = window.innerHeight ||
       document.documentElement.clientHeight || document.body.clientHeight;
@@ -175,16 +172,14 @@ class ScrollParallax extends React.Component {
   }
 }
 
-const objectOrArray = React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.array]);
-const childPropTypes = React.PropTypes.oneOfType([objectOrArray, React.PropTypes.string]);
 ScrollParallax.propTypes = {
   component: React.PropTypes.string,
-  animation: objectOrArray,
+  animation: React.PropTypes.any,
   always: React.PropTypes.bool,
   location: React.PropTypes.string,
-  children: childPropTypes,
+  children: React.PropTypes.any,
   className: React.PropTypes.string,
-  style: objectOrArray,
+  style: React.PropTypes.any,
   scrollName: React.PropTypes.string,
 };