Browse Source

use animation judge function, and remove the loading attribute

pull/435/head
KgTong 9 years ago
parent
commit
ed91ce0931
  1. 15
      components/spin/demo/full-page-load.md
  2. 22
      components/spin/index.jsx
  3. 16
      style/components/spin.less

15
components/spin/demo/full-page-load.md

@ -21,16 +21,19 @@ let App = React.createClass({
}); });
}, },
render() { render() {
return <div> let childEl = (
<Spin loading={this.state.loading} size="large">
<div className="inner-content"> <div className="inner-content">
<img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" width="200px" height="200px" /> <img src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" width="200px" height="200px" />
<div>我是一张图片</div> <div>我是一张图片</div>
</div> </div>
</Spin> );
let spinEl = this.state.loading ? (<Spin size="large"> { childEl } </Spin>) : childEl;
<Button type="primary" onClick={this.enterLoading}>点击切换</Button> return (
</div>; <div>
{ spinEl }
<Button type="primary" onClick={this.enterLoading}>点击切换</Button>
</div>
);
} }
}); });

22
components/spin/index.jsx

@ -1,26 +1,18 @@
import React from 'react'; import React from 'react';
import { classSet } from 'rc-util'; import { classSet } from 'rc-util';
import { isCssAnimationSupported } from 'css-animation';
const AntSpin = React.createClass({ const AntSpin = React.createClass({
getDefaultProps() { getDefaultProps() {
return { return {
size: 'default', size: 'default'
loading: false
}; };
}, },
propTypes: { propTypes: {
loading: React.PropTypes.bool,
className: React.PropTypes.string, className: React.PropTypes.string,
size: React.PropTypes.oneOf(['small', 'default', 'large']) size: React.PropTypes.oneOf(['small', 'default', 'large'])
}, },
getIEVersion() {
let ua = navigator.userAgent.toLowerCase();
let s = ua.match(/msie ([\d.]+)/);
return s ? s[1] : false;
},
isNestedPattern() { isNestedPattern() {
return this.props.children ? true : false; return this.props.children ? true : false;
}, },
@ -28,15 +20,14 @@ const AntSpin = React.createClass({
render() { render() {
const prefix = 'ant-spin'; const prefix = 'ant-spin';
const nestedStatus = this.isNestedPattern(); const nestedStatus = this.isNestedPattern();
const { loading, className, size, ...others } = this.props; const { className, size, ...others } = this.props;
const sizeCls = ({ const sizeCls = ({
'large': 'lg', 'large': 'lg',
'small': 'sm' 'small': 'sm'
})[size] || ''; })[size] || '';
let loadingClassName = classSet({ let loadingClassName = classSet({
'ant-spin-nested-loading': nestedStatus && !!loading, 'ant-spin-nested-loading': nestedStatus
'ant-spin-not-nested-loading': !nestedStatus
}); });
let spinClassName = classSet({ let spinClassName = classSet({
'ant-spin': true, 'ant-spin': true,
@ -44,9 +35,8 @@ const AntSpin = React.createClass({
}); });
let spinEl; let spinEl;
let _IE = this.getIEVersion(); if (!isCssAnimationSupported) {
if (_IE === '8.0' || _IE === '9.0') { // not support for animation, just use text instead
// IE 8 or IE 9
spinEl = <div className={ spinClassName }>加载中...</div>; spinEl = <div className={ spinClassName }>加载中...</div>;
}else { }else {
let spinWrapperClassName = classSet({ let spinWrapperClassName = classSet({

16
style/components/spin.less

@ -7,7 +7,7 @@
.@{spin-prefix-cls} { .@{spin-prefix-cls} {
color: @primary-color; color: @primary-color;
display: none; display: inline-block;
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@ -16,12 +16,11 @@
position: relative; position: relative;
} }
&-nested-loading > &-wrapper{ &-wrapper {
font-size: @spin-dot-size; font-size: @spin-dot-size;
} }
&-nested-loading .ant-spin { &-nested-loading .ant-spin {
display: inline-block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -40,13 +39,6 @@
z-index: 19; z-index: 19;
} }
&-not-nested-loading > &-wrapper {
font-size: @spin-dot-size;
}
&-not-nested-loading .ant-spin{
display: inline-block;
}
// dots // dots
// ------------------------------ // ------------------------------

Loading…
Cancel
Save