Merge 1.x-stable

components/affix/demo/on-change.md

@@ -8,13 +8,8 @@ title: 固定状态改变的回调
 ````jsx
 import { Affix, Button } from 'antd';
 
-
-const onChange = function (affixed) {
-  console.log(affixed); // true or false
-};
-
 ReactDOM.render(
-  <Affix offsetTop={120} onChange={onChange}>
+  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>固定在距离顶部 120px 的位置</Button>
   </Affix>
 , mountNode);

components/affix/index.tsx

@@ -4,6 +4,7 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import warning from 'warning';
 import assign from 'object-assign';
+import shallowequal from 'shallowequal';
 
 function getScroll(w, top) {
   let ret = w[`page${top ? 'Y' : 'X'}Offset`];
@@ -61,6 +62,20 @@ export default class Affix extends React.Component<AffixProps, any> {
     };
   }
 
+  setAffixStyle(affixStyle) {
+    const originalAffixStyle = this.state.affixStyle;
+    if (shallowequal(affixStyle, originalAffixStyle)) {
+      return;
+    }
+    this.setState({ affixStyle }, () => {
+      const affixed = !!this.state.affixStyle;
+      if ((affixStyle && !originalAffixStyle) ||
+          (!affixStyle && originalAffixStyle)) {
+        this.props.onChange(affixed);
+      }
+    });
+  }
+
   handleScroll = () => {
     let { offsetTop, offsetBottom, offset } = this.props;
 
@@ -84,33 +99,23 @@ export default class Affix extends React.Component<AffixProps, any> {
 
     if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
       // Fixed Top
-      if (!this.state.affixStyle) {
-        this.setState({
-          affixStyle: {
+      this.setAffixStyle({
         position: 'fixed',
         top: offsetTop,
         left: elemOffset.left,
         width: ReactDOM.findDOMNode(this).offsetWidth,
-          },
-        }, () => this.props.onChange(!!this.state.affixStyle));
-      }
+      });
     } else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
                offsetMode.bottom) {
       // Fixed Bottom
-      if (!this.state.affixStyle) {
-        this.setState({
-          affixStyle: {
+      this.setAffixStyle({
         position: 'fixed',
         bottom: offsetBottom,
         left: elemOffset.left,
         width: ReactDOM.findDOMNode(this).offsetWidth,
-          },
-        }, () => this.props.onChange(!!this.state.affixStyle));
-      }
-    } else if (this.state.affixStyle) {
-      this.setState({
-        affixStyle: null,
-      }, () => this.props.onChange(!!this.state.affixStyle));
+      });
+    } else {
+      this.setAffixStyle(null);
     }
   }
 

components/upload/index.tsx

@@ -206,9 +206,9 @@ export default class Upload extends React.Component {
   }
 
   onChange = (info) => {
-    this.setState({
-      fileList: info.fileList,
-    });
+    if (!('fileList' in this.props)) {
+      this.setState({ fileList: info.fileList });
+    }
     this.props.onChange(info);
   }
 

package.json

@@ -70,6 +70,7 @@
     "rc-util": "~3.1.0",
     "react-addons-pure-render-mixin": "^15.0.0",
     "react-slick": "~0.12.0",
+    "shallowequal": "^0.2.2",
     "warning": "~3.0.0"
   },
   "devDependencies": {
@@ -106,7 +107,7 @@
     "pre-commit": "1.x",
     "querystring": "^0.2.0",
     "ramda": "^0.21.0",
-    "rc-scroll-anim": "~0.2.11",
+    "rc-scroll-anim": "~0.3.0",
     "rc-tween-one": "~0.6.20",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",

site/theme/template/Home/Page1.jsx

@@ -19,13 +19,15 @@ function onScrollEvent(e) {
 
 export default function Page1() {
   return (
-    <ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
-      <TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
-        style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }}
-      />
-      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
-        hideProps={{ child: null }}
+    <ScrollOverPack scrollName="page1" className="content-wrapper page"
+      playScale={1} replay scrollEvent={onScrollEvent}
+      hideProps={{ image: { reverse: true } }}
     >
+      <TweenOne key="image" className="image1 image-wrapper"
+        animation={{ x: 0, opacity: 1, duration: 550 }}
+        style={{ transform: 'translateX(-100px)', opacity: 0 }}
+      />
+      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
         <h2 key="h2">最佳实践</h2>
         <p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
         <div key="button">

site/theme/template/Home/Page2.jsx

@@ -7,10 +7,12 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page2() {
   return (
-    <ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
-      <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
-        leaveReverse
-        hideProps={{ child: null }}
+    <ScrollOverPack scrollName="page2"
+      className="content-wrapper page" playScale={1} replay
+      hideProps={{ image: { reverse: true } }}
+    >
+      <QueueAnim className="text-wrapper left-text" delay={300} key="text"
+        duration={550} type="bottom" leaveReverse
       >
         <h2 key="h2">设计模式</h2>
         <p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
@@ -23,8 +25,9 @@ export default function Page2() {
           </Link>
         </div>
       </QueueAnim>
-      <TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
-        style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }}
+      <TweenOne key="image" className="image2 image-wrapper"
+        animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
+        style={{ transform: 'translateX(100px)', opacity: 0 }}
       />
     </ScrollOverPack>
   );

site/theme/template/Home/Page3.jsx

@@ -7,12 +7,15 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page3() {
   return (
-    <ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay>
-      <TweenOne key="image" className="image3 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
-        style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }}
+    <ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay
+      hideProps={{ image: { reverse: true } }}
+    >
+      <TweenOne key="image" className="image3 image-wrapper"
+        animation={{ x: 0, opacity: 1, duration: 550 }}
+        style={{ transform: 'translateX(-100px)', opacity: 0 }}
       />
-      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{ top: '40%' }}
-        hideProps={{ child: null }}
+      <QueueAnim className="text-wrapper" delay={300} key="text" duration={550}
+        leaveReverse style={{ top: '40%' }}
       >
         <h2 key="h2">丰富的基础组件</h2>
         <p key="p" style={{ maxWidth: 280 }}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>

site/theme/template/Home/Page4.jsx

@@ -5,15 +5,17 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page4() {
   return (
-    <ScrollOverPack scrollName="page4" className="content-wrapper page" playScale={1}>
-      <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
-        hideProps={{ child: null }}
+    <ScrollOverPack scrollName="page4" className="content-wrapper page"
+      playScale={1} hideProps={{ image: { reverse: true } }}
+    >
+      <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550}
+        leaveReverse type="bottom"
       >
         <h2 key="h2">微小·确定·幸福</h2>
         <p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
       </QueueAnim>
       <TweenOne key="image" className="image4 bottom-wrapper" animation={{ y: 0, opacity: 1, duration: 550, delay: 550 }}
-        style={{ transform: 'translateY(50px)', opacity: 0 }} hideProps={{ reverse: true }}
+        style={{ transform: 'translateY(50px)', opacity: 0 }}
       />
     </ScrollOverPack>
   );