Browse Source

Fix: isomorphic badge & spin

close #1300 again
pull/1307/head
afc163 9 years ago
parent
commit
f13e40b887
  1. 24
      components/badge/ScrollNumber.jsx
  2. 4
      components/spin/demo/basic.md
  3. 31
      components/spin/index.jsx
  4. 9
      style/components/badge.less
  5. 9
      style/components/spin.less

24
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()
);
}
}

4
components/spin/demo/basic.md

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

31
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 (

9
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 {

9
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

Loading…
Cancel
Save