Merge 1.x-stable

2024-12-02 20:19:44 +08:00 · 2016-07-09 16:03:47 +08:00 · 2016-07-09 16:03:47 +08:00 · 28c470cb37
commit 28c470cb37
parent 94fe25f1b3 4ac775212f
8 changed files with 66 additions and 55 deletions
--- a/components/affix/demo/on-change.md
+++ b/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);
--- a/components/affix/index.tsx
+++ b/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: {
-            position: 'fixed',
-            top: offsetTop,
-            left: elemOffset.left,
-            width: ReactDOM.findDOMNode(this).offsetWidth,
-          },
-        }, () => this.props.onChange(!!this.state.affixStyle));
-      }
+      this.setAffixStyle({
+        position: 'fixed',
+        top: offsetTop,
+        left: elemOffset.left,
+        width: ReactDOM.findDOMNode(this).offsetWidth,
+      });
    } else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
               offsetMode.bottom) {
      // Fixed Bottom
-      if (!this.state.affixStyle) {
-        this.setState({
-          affixStyle: {
-            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));
+      this.setAffixStyle({
+        position: 'fixed',
+        bottom: offsetBottom,
+        left: elemOffset.left,
+        width: ReactDOM.findDOMNode(this).offsetWidth,
+      });
+    } else {
+      this.setAffixStyle(null);
    }
  }

--- a/components/upload/index.tsx
+++ b/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);
  }

--- a/package.json
+++ b/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",
--- a/site/theme/template/Home/Page1.jsx
+++ b/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 }}
+    <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
-        hideProps={{ child: null }}
-      >
+      <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">
--- a/site/theme/template/Home/Page2.jsx
+++ b/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>
  );
--- a/site/theme/template/Home/Page3.jsx
+++ b/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>
--- a/site/theme/template/Home/Page4.jsx
+++ b/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>
  );