mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
fix for code review
This commit is contained in:
KgTong
parent
103104b256
commit
ea0e9b7d6a
@ -12,14 +12,14 @@ var Spin = antd.Spin;
|
||||
var container = document.getElementById('components-spin-demo-full-page-load');
|
||||
|
||||
var pageStyle = {
|
||||
paddingBottom: '60px',
|
||||
paddingTop: '60px',
|
||||
textAlign: 'center'
|
||||
paddingBottom: '60px',
|
||||
paddingTop: '60px',
|
||||
textAlign: 'center'
|
||||
}
|
||||
|
||||
React.render(
|
||||
<div style={ pageStyle }>
|
||||
<Spin size="lg" />
|
||||
</div>, container);
|
||||
ReactDOM.render(
|
||||
<div style={ pageStyle }>
|
||||
<Spin size="large" type="primary" />
|
||||
</div>, container);
|
||||
|
||||
````
|
||||
@ -11,26 +11,23 @@ var Spin = antd.Spin;
|
||||
var container = document.getElementById('components-spin-demo-page-element');
|
||||
|
||||
var divStyle = {
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.05)',
|
||||
textAlign: 'center',
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.05)',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '20px',
|
||||
padding: '.66em 1.5em',
|
||||
margin: '20px 0'
|
||||
}
|
||||
|
||||
React.render(
|
||||
<div>
|
||||
<div style={ divStyle }>
|
||||
<Spin size="md" />
|
||||
</div>
|
||||
<div style={ divStyle }>
|
||||
<Spin size="md" type="primary" />
|
||||
</div>
|
||||
<div style={ divStyle }>
|
||||
<Spin size="md" type="inverted" />
|
||||
</div>
|
||||
</div>, container);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={ divStyle }>
|
||||
<Spin />
|
||||
</div>
|
||||
<div style={ divStyle }>
|
||||
<Spin type="primary" />
|
||||
</div>
|
||||
</div>, container);
|
||||
|
||||
````
|
||||
@ -4,32 +4,37 @@ import { classSet } from 'rc-util';
|
||||
let AntSpin = React.createClass({
|
||||
getDefaultProps() {
|
||||
return {
|
||||
size: 'sm',
|
||||
size: 'default',
|
||||
type: 'default'
|
||||
};
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
className: React.PropTypes.string,
|
||||
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||
type: React.PropTypes.oneOf(['default', 'primary', 'inverted'])
|
||||
size: React.PropTypes.oneOf(['small', 'default', 'large']),
|
||||
type: React.PropTypes.oneOf(['default', 'primary'])
|
||||
},
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const prefix = 'ant-spin';
|
||||
const {type, size, className, ...others} = this.props;
|
||||
const sizeCls = ({
|
||||
'large': 'lg',
|
||||
'small': 'sm'
|
||||
})[size] || '';
|
||||
|
||||
let className = classSet({
|
||||
spin: 1,
|
||||
[`spin-${props.type}`]: 1,
|
||||
[`spin-${props.size}`]: 1,
|
||||
[props.className]: !!props.className
|
||||
let componentClassName = classSet({
|
||||
'ant-spin': true,
|
||||
[`${prefix}-${type}`]: type,
|
||||
[`${prefix}-${sizeCls}`]: sizeCls,
|
||||
[className]: !!className
|
||||
});
|
||||
|
||||
return (
|
||||
<div {...this.props} className={ className }>
|
||||
<span className="spin-dot spin-dot-first" />
|
||||
<span className="spin-dot spin-dot-second" />
|
||||
<span className="spin-dot spin-dot-third" />
|
||||
<div {...this.props} className={ componentClassName }>
|
||||
<span className="ant-spin-dot ant-spin-dot-first" />
|
||||
<span className="ant-spin-dot ant-spin-dot-second" />
|
||||
<span className="ant-spin-dot ant-spin-dot-third" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -15,6 +15,6 @@
|
||||
## API
|
||||
|
||||
| 参数 | 类型 | 默认值 |说明 |
|
||||
|------------|----------------|-------------|--------------|
|
||||
| size | enum | sm | spin组件中点的大小，可选值为sm md lg
|
||||
| type | enum | default | spin组件中点的而色值，可选值为default primary inverted
|
||||
|-----------|----------------|-------------|--------------|
|
||||
| size | enum | default | spin组件中点的大小，可选值为large default small
|
||||
| type | enum | default | spin组件中点的而色值，可选值为default primary
|
||||
@ -600,7 +600,7 @@ let AntTable = React.createClass({
|
||||
let spinClass = `${paginationPatchClass} ant-table-spin-holder`;
|
||||
|
||||
spinEl = <div className={spinClass}>
|
||||
<Spin size="md" type="primary"/>
|
||||
<Spin type="primary"/>
|
||||
</div>;
|
||||
|
||||
spinWrapperClass = ' ant-table-loading';
|
||||
|
||||
@ -1,70 +1,64 @@
|
||||
@import "../mixins/index";
|
||||
|
||||
@spin-prefix-cls: ant-spin;
|
||||
|
||||
// root of component
|
||||
// ------------------------------
|
||||
|
||||
.spin {
|
||||
display: inline-block;
|
||||
font-size: @spin-dot-size;
|
||||
height: @spin-dot-size;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.@{spin-prefix-cls} {
|
||||
display: inline-block;
|
||||
font-size: @spin-dot-size;
|
||||
height: @spin-dot-size;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
// dots
|
||||
// ------------------------------
|
||||
// dots
|
||||
// ------------------------------
|
||||
|
||||
&-dot {
|
||||
.animation(antSpinPulse 1s infinite ease-in-out);
|
||||
.square(1em);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
&-dot-second {
|
||||
.animation-delay(200ms);
|
||||
margin-left: 1em;
|
||||
}
|
||||
&-dot-third {
|
||||
.animation-delay(400ms);
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.spin-dot {
|
||||
.animation(pulse 1s infinite ease-in-out);
|
||||
.square(1em);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
&.spin-dot-second {
|
||||
.animation-delay(200ms);
|
||||
margin-left: 1em;
|
||||
}
|
||||
&.spin-dot-third {
|
||||
.animation-delay(400ms);
|
||||
margin-left: 1em;
|
||||
}
|
||||
// Types
|
||||
// ------------------------------
|
||||
|
||||
// Types
|
||||
// ------------------------------
|
||||
// default
|
||||
&-default > &-dot { background-color: @spin-dot-default; }
|
||||
|
||||
// default
|
||||
.spin-default > .spin-dot { background-color: @spin-dot-default; }
|
||||
// primary
|
||||
&-primary > &-dot { background-color: @primary-color; }
|
||||
|
||||
// primary
|
||||
.spin-primary > .spin-dot { background-color: @spin-dot-primary; }
|
||||
// Sizes
|
||||
// ------------------------------
|
||||
|
||||
// inverted
|
||||
.spin-inverted > .spin-dot { background-color: @spin-dot-inverted; }
|
||||
// small
|
||||
&-sm {
|
||||
font-size: @spin-dot-size-sm;
|
||||
height: @spin-dot-size-sm;
|
||||
}
|
||||
|
||||
|
||||
// Sizes
|
||||
// ------------------------------
|
||||
|
||||
// small
|
||||
.spin-sm {
|
||||
font-size: @spin-dot-size-sm;
|
||||
height: @spin-dot-size-sm;
|
||||
}
|
||||
|
||||
// large
|
||||
.spin-lg {
|
||||
font-size: @spin-dot-size-lg;
|
||||
height: @spin-dot-size-lg;
|
||||
// large
|
||||
&-lg {
|
||||
font-size: @spin-dot-size-lg;
|
||||
height: @spin-dot-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// pulse
|
||||
@-webkit-keyframes pulse {
|
||||
0%, 80%, 100% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 80%, 100% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
@keyframes antSpinPulse {
|
||||
0%, 80%, 100% { opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
@ -142,10 +142,7 @@
|
||||
// Spin
|
||||
// --------------------------------
|
||||
@spin-dot-default : #999;
|
||||
@spin-dot-inverted : #fff;
|
||||
@spin-dot-primary : #2db7f5;
|
||||
|
||||
@spin-dot-size : 8px;
|
||||
@spin-dot-size-sm : @spin-dot-size / 2;
|
||||
@spin-dot-size-lg : @spin-dot-size * 2;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user