Merge pull request #17 from react-component/1.0

update 1.0.0
react-component · Mar 21, 2017 · 81ff727 · 81ff727
2 parents 791af25 + 2841c08
commit 81ff727
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 65 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -7,7 +7,7 @@ notifications:
   - yiminghe@gmail.com
 
 node_js:
-- 4.0.0
+- 6.0.0
 
 before_install:
 - |

diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ var React = require('react');
 
 // ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one;
 
-React.render(<ScrollOverPack hideProps={{ tweenOne: { reverse: true } }}>
+React.render(<ScrollOverPack>
   <QueueAnim key='queueAnim'>
     <div key='a'>enter</div>
     <div key='b'>enter</div>
@@ -118,6 +118,7 @@ ScrollAnim.scrollScreen.unMount();
 |-----------|----------------|---------|----------------|
 | component | string         | `div`   | -            |
 | id | string         | null    | need to location the id，parallax the `location` or link the `to`, need to use |
+| targetId  |  string        | null    |  scroll target id, if don't window scroll, parent element is `overflow: scroll`, use parent id to do scroll; [demo refs](http://react-component.github.io/scroll-anim/examples/target.html) |
 | playScale | number / array        | `0.5`   | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
 | onChange  | func           | null     | change callback({ mode, scrollName }); mode: `enter` or `leave` |
 | location  | string         | null     |  v0.6.0 above have,location, the parent id; |
@@ -128,11 +129,13 @@ ScrollAnim.scrollScreen.unMount();
 
 OverPack inherit Element; `component` `playScale` `onChange` `location` refer to  `Element`;
 
+> 1.0.0 remove hideProps;
+
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
 | always    | boolean        | `true`  | back to top, enter replay，as `false` will only play it again, leave does not play |
 | replay    | boolean        | `false` | play every enter, do you want to animate each time you show the current, `false` only scroll to down play animate |
-| hideProps | object         | `null`  | v0.3.0 children hideProps move here. If the child does not have, default: { children: null }. children be `rc-tween-one` { 'userKey': { reverse: true }} |
+| appear | boolean         | `true`  | whether support appear the operation |
 
 ### Parallax
 | name      | type           | default | description    |

diff --git a/examples/link.js b/examples/link.js
@@ -85,7 +85,7 @@ class Demo extends React.Component {
           </div>
         </QueueAnim>
       </Element>
-      <ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }}>
+      <ScrollOverPack id="page1" className="page1">
         <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
           默认进入与出场
         </TweenOne>
@@ -102,7 +102,6 @@ class Demo extends React.Component {
         style={{ backgroundColor: '#0098CE' }}
         always={false}
         id="page2"
-        hideProps={{ 1: { reverse: true } }}
       >
         <div className="page2-title">只进入一次</div>
         <Animate key="0" transitionName="fade" transitionAppear>
@@ -121,7 +120,6 @@ class Demo extends React.Component {
         style={{ backgroundColor: '#174270' }}
         playScale={0.8}
         id="page3"
-        hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"
           className="page2-title"

diff --git a/examples/linkAsynchronous.js b/examples/linkAsynchronous.js
@@ -90,7 +90,7 @@ class Demo extends React.Component {
             </div>
           </QueueAnim>
         </Element>,
-        <ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }} key="1">
+        <ScrollOverPack id="page1" className="page1" key="1">
           <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
             默认进入与出场
           </TweenOne>
@@ -107,7 +107,6 @@ class Demo extends React.Component {
           style={{ backgroundColor: '#0098CE' }}
           always={false}
           id="page2"
-          hideProps={{ 1: { reverse: true } }}
           key="2"
         >
           <div className="page2-title">只进入一次</div>
@@ -127,7 +126,6 @@ class Demo extends React.Component {
           style={{ backgroundColor: '#174270' }}
           playScale={0.8}
           id="page3"
-          hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
           key="3"
         >
           <TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"

diff --git a/examples/scrollScreen.js b/examples/scrollScreen.js
@@ -95,7 +95,6 @@ class Demo extends React.Component {
           className="page1"
           playScale={1}
           replay
-          hideProps={{ 0: { reverse: true } }}
           location="page1"
           style={{ marginTop: 150 }}
         >
@@ -116,7 +115,6 @@ class Demo extends React.Component {
         style={{ backgroundColor: '#174270', height: 500 }}
         id="page2"
         playScale={1}
-        hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne className="tween-one" animation={{ opacity: 1 }} key="t">
           只从上往下时播放
@@ -138,7 +136,6 @@ class Demo extends React.Component {
         always={false}
         id="page3"
         playScale={1}
-        hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne
           animation={{ opacity: 1 }}

diff --git a/examples/simple.js b/examples/simple.js
@@ -30,10 +30,25 @@ class Demo extends React.Component {
       <ScrollOverPack
         id="page1"
         className="page1" replay
-        hideProps={{ 0: { reverse: true } }}
       >
         <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
-          默认进入与出场
+          默认进入与出场, 顶部出场
+        </TweenOne>
+        <QueueAnim key="1">
+          <div key="0" className="demo"></div>
+          <div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
+          <div key="2" className="demo"></div>
+          <div key="3" className="demo"></div>
+        </QueueAnim>
+      </ScrollOverPack>
+
+      <ScrollOverPack
+        id="page4"
+        className="page1"
+        appear={false}
+      >
+        <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
+          默认出场直接出现
         </TweenOne>
         <QueueAnim key="1">
           <div key="0" className="demo"></div>
@@ -48,7 +63,6 @@ class Demo extends React.Component {
         className="pack-page page2"
         style={{ backgroundColor: '#0098CE' }} always={false}
         id="page2"
-        hideProps={{ title: { reverse: true } }}
       >
         <TweenOne key="title" animation={{ opacity: 0, type: 'from' }} className="page2-title">
           只进入一次
@@ -66,7 +80,6 @@ class Demo extends React.Component {
         className="pack-page page3"
         style={{ backgroundColor: '#174270' }}
         playScale={0.8} id="page3"
-        hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne
           animation={{ opacity: 1 }}

diff --git a/examples/target.html b/examples/target.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/target.js b/examples/target.js
@@ -0,0 +1,68 @@
+// use jsx to render html, do not modify simple.html
+
+import 'rc-scroll-anim/assets/index.less';
+import ScrollAnim from 'rc-scroll-anim';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+const _package = require('../package.json');
+const ScrollOverPack = ScrollAnim.OverPack;
+
+class Demo extends React.Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  render() {
+    return (<div style={{ height: '100vh', overflow: 'scroll' }} id="box">
+      <div className="pack-page page0">
+        <QueueAnim className="home-title">
+          <div className="page-title" key="title">
+            <p>{_package.name}@{_package.version}</p>
+          </div>
+          <div className="page-description" key="c">
+            <p>The simple demo</p>
+          </div>
+        </QueueAnim>
+      </div>
+      <ScrollOverPack
+        id="page1"
+        className="page1"
+        replay
+        targetId="box"
+      >
+        <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
+          默认进入与出场, 顶部出场
+        </TweenOne>
+        <QueueAnim key="1">
+          <div key="0" className="demo"></div>
+          <div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
+          <div key="2" className="demo"></div>
+          <div key="3" className="demo"></div>
+        </QueueAnim>
+      </ScrollOverPack>
+
+      <ScrollOverPack
+        id="page4"
+        className="page1"
+        appear={false}
+        style={{ backgroundColor: '#0098CE' }}
+        targetId="box"
+      >
+        <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
+          默认出场直接出现
+        </TweenOne>
+        <QueueAnim key="1">
+          <div key="0" className="demo"></div>
+          <div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
+          <div key="2" className="demo"></div>
+          <div key="3" className="demo"></div>
+        </QueueAnim>
+      </ScrollOverPack>
+
+    </div>);
+  }
+}
+
+ReactDOM.render(<Demo />, document.getElementById('__react-content'));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.6.5",
+  "version": "1.0.0",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",
@@ -58,7 +58,7 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "raf": "3.x",
-    "rc-tween-one": "~0.11.6",
+    "rc-tween-one": "~1.1.2",
     "tween-functions": "1.x"
   }
 }
diff --git a/src/EventDispatcher.js b/src/EventDispatcher.js
@@ -3,9 +3,10 @@ function EventDispatcher(target) {
   this._listeners = {};
   this._eventTarget = target || {};
   this.recoverLists = [];
+  this._listFun = {};
 }
 EventDispatcher.prototype = {
-  addEventListener(type, callback) {
+  addEventListener(type, callback, target) {
     const types = type.split('.');
     const _type = types[0];
     const namespaces = types[1];
@@ -26,16 +27,19 @@ EventDispatcher.prototype = {
         index = i + 1;
       }
     }
-    const func = this.dispatchEvent.bind(this, _type);
-    list.splice(index, 0, { c: callback, n: namespaces, t: _type, func });
-    if (this._eventTarget.addEventListener) {
-      this._eventTarget.addEventListener(_type, func, false);
-    } else if (this._eventTarget.attachEvent) {
-      this._eventTarget.attachEvent(`on${_type}`, func);
+
+    list.splice(index, 0, { c: callback, n: namespaces, t: _type });
+    if (!this._listFun[_type]) {
+      this._listFun[_type] = this._listFun[_type] || this.dispatchEvent.bind(this, _type);
+      if (this._eventTarget.addEventListener) {
+        (target || this._eventTarget).addEventListener(_type, this._listFun[_type], false);
+      } else if (this._eventTarget.attachEvent) {
+        (target || this._eventTarget).attachEvent(`on${_type}`, this._listFun[_type]);
+      }
     }
   },
 
-  removeEventListener(type, callback, force) {
+  removeEventListener(type, callback, target, force) {
     const types = type.split('.');
     const _type = types[0];
     const namespaces = types[1];
@@ -49,12 +53,17 @@ EventDispatcher.prototype = {
       i = list.length;
       while (--i > -1) {
         if (list[i].c === callback && (_force || list[i].n === namespaces)) {
-          if (this._eventTarget.removeEventListener) {
-            this._eventTarget.removeEventListener(list[i].t, list[i].func);
-          } else if (this._eventTarget.detachEvent) {
-            this._eventTarget.detachEvent(`on${list[i].t}`, list[i].func);
-          }
           list.splice(i, 1);
+          if (!list.length) {
+            const func = this._listFun[_type];
+            delete this._listeners[_type];
+            delete this._listFun[_type];
+            if (this._eventTarget.removeEventListener) {
+              (target || this._eventTarget).removeEventListener(_type, func);
+            } else if (this._eventTarget.detachEvent) {
+              (target || this._eventTarget).detachEvent(`on${_type}`, func);
+            }
+          }
           if (!_force) {
             return;
           }
@@ -80,7 +89,7 @@ EventDispatcher.prototype = {
       }
     }
   },
-  removeAllType(type) {
+  removeAllType(type, target) {
     const types = type.split('.');
     const _type = types[0];
     const namespaces = types[1];
@@ -89,16 +98,16 @@ EventDispatcher.prototype = {
       item.n && item.n.match(namespaces)
     ));
     this.recoverLists.forEach(item => {
-      this.removeEventListener(`${item.t}.${item.n}`, item.c);
+      this.removeEventListener(`${item.t}.${item.n}`, item.c, target);
     });
   },
-  reAllType(type) {
+  reAllType(type, target) {
     const types = type.split('.');
     const _type = types[0];
     const namespaces = types[1];
     this.recoverLists = this.recoverLists.map(item => {
       if (item.t === _type && item.n.match(namespaces)) {
-        this.addEventListener(`${item.t}.${item.n}`, item.c);
+        this.addEventListener(`${item.t}.${item.n}`, item.c, target);
         return null;
       }
       return item;

diff --git a/src/ScrollElement.jsx b/src/ScrollElement.jsx
@@ -16,10 +16,14 @@ class ScrollElement extends React.Component {
       mapped.register(this.props.id, this.dom);
     }
     const date = Date.now();
+    const scrollTop = currentScrollTop();
+    if (!scrollTop) {
+      this.scrollEventListener();
+    }
     const length = EventListener._listeners.scroll ? EventListener._listeners.scroll.length : 0;
     this.eventType = `scroll.scrollEvent${date}${length}`;
-    this.scrollEventListener();
-    EventListener.addEventListener(this.eventType, this.scrollEventListener);
+    this.target = this.props.targetId && document.getElementById(this.props.targetId);
+    EventListener.addEventListener(this.eventType, this.scrollEventListener, this.target);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -30,15 +34,15 @@ class ScrollElement extends React.Component {
 
   componentWillUnmount() {
     mapped.unRegister(this.props.id);
-    EventListener.removeEventListener(this.eventType, this.scrollEventListener);
+    EventListener.removeEventListener(this.eventType, this.scrollEventListener, this.target);
   }
 
   getParam = (e) => {
-    this.clientHeight = windowHeight();
-    const scrollTop = currentScrollTop();
-    // 屏幕缩放时的响应，所以放回这里，这个是pack，只处理子级里面的动画，所以marginTop无关系，所以不需减掉；
+    this.clientHeight = this.target ? this.target.getBoundingClientRect().height : windowHeight();
+    const windowScrollTop = this.target ? currentScrollTop() : 0;
+    const scrollTop = this.target ? this.target.scrollTop : currentScrollTop();
     const domRect = this.dom.getBoundingClientRect();
-    const offsetTop = domRect.top + scrollTop;
+    const offsetTop = domRect.top + scrollTop + windowScrollTop;
     this.elementShowHeight = scrollTop - offsetTop + this.clientHeight;
     const playScale = transformArguments(this.props.playScale);
     this.playHeight = this.clientHeight * playScale[0];
@@ -60,7 +64,7 @@ class ScrollElement extends React.Component {
 
   render() {
     const { ...props } = this.props;
-    ['component', 'playScale', 'location'].forEach(key => delete props[key]);
+    ['component', 'playScale', 'location', 'targetId'].forEach(key => delete props[key]);
     return React.createElement(this.props.component, { ...props });
   }
 }
@@ -71,6 +75,7 @@ ScrollElement.propTypes = {
   id: React.PropTypes.string,
   onChange: React.PropTypes.func,
   location: React.PropTypes.string,
+  targetId: React.PropTypes.string,
 };
 
 ScrollElement.defaultProps = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ notifications: @@
       - yiminghe@gmail.com
     node_js:
-    - 4.0.0
+    - 6.0.0
     before_install:
     - |
@@ Expand Down @@