From 665a9182d34f631c7b43bdff71335d8aa72ddd74 Mon Sep 17 00:00:00 2001
From: jljsj <liangjun.jiang@alipay.com>
Date: Mon, 12 Dec 2016 17:37:54 +0800
Subject: [PATCH] add element location

---
 README.md                |  5 +++--
 examples/scrollScreen.js | 36 +++++++++++++++++++-----------------
 package.json             |  2 +-
 src/ScrollElement.jsx    |  7 +++++--
 src/ScrollOverPack.jsx   |  1 +
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 00435f2..5cc2254 100644
--- a/README.md
+++ b/README.md
@@ -120,12 +120,13 @@ ScrollAnim.scrollScreen.unMount();
 | id | string         | null    | need to location the id，parallax the `location` or link the `to`, need to use |
 | 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; |
 
 > Note: if the element is not the above component, you need to location this element; please use the `Element`
 
 ### OverPack 
 
-OverPack inherit Element; `component` `playScale` `onChange` refer to  `Element`;
+OverPack inherit Element; `component` `playScale` `onChange` `location` refer to  `Element`;
 
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
@@ -137,7 +138,7 @@ OverPack inherit Element; `component` `playScale` `onChange` refer to  `Element`
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
 | animation      | object / array | `null`  | animation data     |
-| location  | string         | `null`  | location, `Element` the id, only scroll name |
+| location  | string         | `null`  | location, the parent id |
 | always    | boolean        | `true`  | -            |
 | component | string         | `div`   | -            |
 
diff --git a/examples/scrollScreen.js b/examples/scrollScreen.js
index 93be4a3..adb393b 100644
--- a/examples/scrollScreen.js
+++ b/examples/scrollScreen.js
@@ -90,23 +90,25 @@ class Demo extends React.Component {
           </div>
         </QueueAnim>
       </Element>
-      <ScrollOverPack
-        id="page1"
-        className="page1"
-        playScale={1}
-        replay
-        hideProps={{ 0: { reverse: true } }}
-      >
-        <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
-          每次进入都启动播放
-        </TweenOne>
-        <QueueAnim key="1" style={{ height: 100 }}>
-          <div key="0" className="demo"></div>
-          <div key="1" className="demo"></div>
-          <div key="2" className="demo"></div>
-          <div key="3" className="demo"></div>
-        </QueueAnim>
-      </ScrollOverPack>
+      <div id="page1">
+        <ScrollOverPack
+          className="page1"
+          playScale={1}
+          replay
+          hideProps={{ 0: { reverse: true } }}
+          location="page1"
+        >
+          <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
+            每次进入都启动播放
+          </TweenOne>
+          <QueueAnim key="1" style={{ height: 100 }}>
+            <div key="0" className="demo"></div>
+            <div key="1" className="demo"></div>
+            <div key="2" className="demo"></div>
+            <div key="3" className="demo"></div>
+          </QueueAnim>
+        </ScrollOverPack>
+      </div>
 
       <ScrollOverPack
         className="pack-page page2"
diff --git a/package.json b/package.json
index 26ff1ca..876f129 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",
diff --git a/src/ScrollElement.jsx b/src/ScrollElement.jsx
index c52bd76..e405f93 100644
--- a/src/ScrollElement.jsx
+++ b/src/ScrollElement.jsx
@@ -9,7 +9,9 @@ const noop = () => {
 class ScrollElement extends React.Component {
   componentDidMount() {
     this.dom = ReactDOM.findDOMNode(this);
-    if (this.props.id) {
+    if (this.props.location) {
+      mapped.register(this.props.location, document.getElementById(this.props.location));
+    } else if (this.props.id) {
       mapped.register(this.props.id, this.dom);
     }
     const date = Date.now();
@@ -57,7 +59,7 @@ class ScrollElement extends React.Component {
 
   render() {
     const { ...props } = this.props;
-    ['component', 'playScale'].forEach(key => delete props[key]);
+    ['component', 'playScale', 'location'].forEach(key => delete props[key]);
     return React.createElement(this.props.component, { ...props });
   }
 }
@@ -67,6 +69,7 @@ ScrollElement.propTypes = {
   playScale: React.PropTypes.any,
   id: React.PropTypes.string,
   onChange: React.PropTypes.func,
+  location: React.PropTypes.string,
 };
 
 ScrollElement.defaultProps = {
diff --git a/src/ScrollOverPack.jsx b/src/ScrollOverPack.jsx
index 2c8a46e..b19af18 100644
--- a/src/ScrollOverPack.jsx
+++ b/src/ScrollOverPack.jsx
@@ -52,6 +52,7 @@ class ScrollOverPack extends ScrollElement {
       'always',
       'scrollEvent',
       'hideProps',
+      'location',
     ].forEach(key => delete placeholderProps[key]);
     let childToRender;
     if (!this.oneEnter && !this.state.show) {