Fix: isomorphic badge & spin

close #1300 again

components/badge/ScrollNumber.jsx

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
+import { findDOMNode } from 'react-dom';
 import { isCssAnimationSupported } from 'css-animation';
-const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
 
 function getNumberArray(num) {
   return num ?
@@ -34,6 +34,12 @@ export default class ScrollNumber extends React.Component {
     };
   }
 
+  componentDidMount() {
+    if (!isCssAnimationSupported) {
+      findDOMNode(this).className += ' not-support-css-animation';
+    }
+  }
+
   getPositionByNum(num, i) {
     if (this.state.animateStarted) {
       return 10 + num;
@@ -77,10 +83,11 @@ export default class ScrollNumber extends React.Component {
     }
   }
 
-  renderNumberList() {
+  renderNumberList(position) {
     const childrenToReturn = [];
     for (let i = 0; i < 30; i++) {
-      childrenToReturn.push(<p key={i}>{i % 10}</p>);
+      const currentClassName = (position === i) ? 'current' : null;
+      childrenToReturn.push(<p key={i} className={currentClassName}>{i % 10}</p>);
     }
     return childrenToReturn;
   }
@@ -99,7 +106,7 @@ export default class ScrollNumber extends React.Component {
         height,
       },
       key: i,
-    }, this.renderNumberList());
+    }, this.renderNumberList(position));
   }
 
   renderNumberElement() {
@@ -116,17 +123,10 @@ export default class ScrollNumber extends React.Component {
       ...this.props,
       className: `${this.props.prefixCls} ${this.props.className}`
     };
-    if (isBrowser && isCssAnimationSupported) {
-      return createElement(
-        this.props.component,
-        props,
-        this.renderNumberElement()
-      );
-    }
     return createElement(
       this.props.component,
       props,
-      props.count
+      this.renderNumberElement()
     );
   }
 }

components/spin/demo/basic.md

@@ -9,7 +9,5 @@
 ````jsx
 import { Spin } from 'antd';
 
-ReactDOM.render(
-  <Spin />
-, mountNode);
+ReactDOM.render(<Spin />, mountNode);
 ````

components/spin/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import { isCssAnimationSupported } from 'css-animation';
-const isBrowser = (typeof document !== 'undefined' && typeof window !== 'undefined');
 
 export default class Spin extends React.Component {
   static defaultProps = {
@@ -18,6 +18,13 @@ export default class Spin extends React.Component {
     return !!(this.props && this.props.children);
   }
 
+  componentDidMount() {
+    if (!isCssAnimationSupported) {
+      // Show text in IE8/9
+      findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`;
+    }
+  }
+
   render() {
     const { className, size, prefixCls, tip } = this.props;
 
@@ -27,21 +34,17 @@ export default class Spin extends React.Component {
       [`${prefixCls}-lg`]: size === 'large',
       [className]: !!className,
       [`${prefixCls}-spining`]: this.props.spining,
+      [`${prefixCls}-show-text`]: !!this.props.tip,
     });
 
-    let spinElement;
-    if (!isBrowser || !isCssAnimationSupported || 'tip' in this.props) {
-      // not support for animation, just use text instead
-      spinElement = <div className={spinClassName}>{tip || '加载中...'}</div>;
-    } else {
-      spinElement = (
-        <div className={spinClassName}>
-          <span className={`${prefixCls}-dot ${prefixCls}-dot-first`} />
-          <span className={`${prefixCls}-dot ${prefixCls}-dot-second`} />
-          <span className={`${prefixCls}-dot ${prefixCls}-dot-third`} />
-        </div>
-      );
-    }
+    const spinElement = (
+      <div className={spinClassName}>
+        <span className={`${prefixCls}-dot ${prefixCls}-dot-first`} />
+        <span className={`${prefixCls}-dot ${prefixCls}-dot-second`} />
+        <span className={`${prefixCls}-dot ${prefixCls}-dot-third`} />
+        <div className={`${prefixCls}-text`}>{tip || '加载中...'}</div>
+      </div>
+    );
 
     if (this.isNestedPattern()) {
       return (

style/components/badge.less

@@ -79,6 +79,15 @@ a & {
     display: inline-block;
     transition: transform .3s @ease-in-out;
   }
+  // for IE8/9 display
+  &.not-support-css-animation &-only {
+    > p {
+      display: none;
+      &.current {
+        display: block;
+      }
+    }
+  }
 }
 
 @keyframes antZoomBadgeIn {

style/components/spin.less

@@ -95,6 +95,15 @@
       margin-left: @spin-dot-size-lg;
     }
   }
+
+  &-text,
+  &&-show-text &-dot {
+    display: none;
+  }
+
+  &&-show-text &-text {
+    display: block;
+  }
 }
 
 // pulse