mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Merge circle into line component

Browse Source
This commit is contained in:
afc163 2016-04-05 16:51:26 +08:00
parent 11702fddda
commit befe1fc521
11 changed files with 145 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/progress/Circle.jsx
View File

@ -1,4 +1,4 @@
import { Circle as Progresscircle } from 'rc-progress';
import { RcProgressCircle } from 'rc-progress';
import React from 'react';
import Icon from '../icon';
@ -65,7 +65,7 @@ export default class Circle extends React.Component {
return (
<div className={`${prefixCls}-circle-wrap status-${props.status}`} style={props.style}>
<div className={`${prefixCls}-circle-inner`} style={style}>
<Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
<RcProgressCircle percent={props.percent} strokeWidth={props.strokeWidth}
strokeColor={statusColorMap[props.status]} trailColor={props.trailColor} />
{progressInfo}
</div>

123
components/progress/Line.jsx
View File

@ -1,71 +1,96 @@
import React from 'react';
import React, { PropTypes } from 'react';
import Icon from '../icon';
import { Circle } from 'rc-progress';
import classNames from 'classnames';
const statusColorMap = {
normal: '#2db7f5',
exception: '#ff5500',
success: '#87d068'
};
const prefixCls = 'ant-progress';
export default class Line extends React.Component {
static defaultProps = {
type: 'line',
percent: 0,
strokeWidth: 10,
status: 'normal', // exception active
showInfo: true,
trailColor: '#f3f3f3'
trailColor: '#f3f3f3',
prefixCls: 'ant-progress',
}
static propTypes = {
status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
showInfo: React.PropTypes.bool,
percent: React.PropTypes.number,
strokeWidth: React.PropTypes.number,
trailColor: React.PropTypes.string,
format: React.PropTypes.func,
status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
showInfo: PropTypes.bool,
percent: PropTypes.number,
strokeWidth: PropTypes.number,
trailColor: PropTypes.string,
format: PropTypes.func,
}
render() {
let props = { ...this.props };
if (parseInt(props.percent, 10) === 100) {
props.status = 'success';
}
const { prefixCls, status, format, percent, trailColor,
type, strokeWidth, width, className, showInfo, ...restProps } = this.props;
const progressStatus = (parseInt(percent, 10) >= 100 && !('status' in this.props))
? 'success' : (status || 'normal');
let progressInfo;
let fullCls = '';
let progress;
const textFormatter = format || (percentNumber => `${percentNumber}%`);
const format = props.format || (percent => `${percent}%`);
if (props.showInfo) {
if (props.status === 'exception') {
progressInfo = (
<span className={`${prefixCls}-line-text`}>
{props.format ? format(props.percent) : <Icon type="cross-circle" />}
</span>
);
} else if (props.status === 'success') {
progressInfo = (
<span className={`${prefixCls}-line-text`}>
{props.format ? format(props.percent) : <Icon type="check-circle" />}
</span>
);
if (showInfo) {
let text;
const iconType = type === 'circle' ? '' : '-circle';
if (progressStatus === 'exception') {
text = format ? textFormatter(percent) : <Icon type={`cross${iconType}`} />;
} else if (progressStatus === 'success') {
text = format ? textFormatter(percent) : <Icon type={`check${iconType}`} />;
} else {
progressInfo = (
<span className={`${prefixCls}-line-text`}>{format(props.percent)}</span>
);
text = textFormatter(percent);
}
} else {
fullCls = ` ${prefixCls}-line-wrap-full`;
progressInfo = <span className={`${prefixCls}-text`}>{text}</span>;
}
let percentStyle = {
width: `${props.percent}%`,
height: props.strokeWidth
};
if (type === 'line') {
const percentStyle = {
width: `${percent}%`,
height: strokeWidth || 10,
};
progress = (
<div>
<div className={`${prefixCls}-outer`}>
<div className={`${prefixCls}-inner`}>
<div className={`${prefixCls}-bg`} style={percentStyle}></div>
</div>
</div>
{progressInfo}
</div>
);
} else if (type === 'circle') {
const circleSize = width || 132;
const circleStyle = {
width: circleSize,
height: circleSize,
fontSize: circleSize * 0.16 + 6,
};
progress = (
<div className={`${prefixCls}-inner`} style={circleStyle}>
<Circle percent={percent} strokeWidth={strokeWidth || 6}
strokeColor={statusColorMap[progressStatus]} trailColor={trailColor} />
{progressInfo}
</div>
);
}
const classString = classNames({
[`${prefixCls}`]: true,
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-status-${progressStatus}`]: true,
[`${prefixCls}-show-info`]: showInfo,
[className]: !!className,
});
return (
<div className={`${prefixCls}-line-wrap clearfix status-${props.status}${fullCls}`} style={props.style}>
<div className={`${prefixCls}-line-outer`}>
<div className={`${prefixCls}-line-inner`}>
<div className={`${prefixCls}-line-bg`} style={percentStyle}></div>
</div>
</div>
{progressInfo}
<div {...restProps} className={classString}>
{progress}
</div>
);
}

3
components/progress/demo/circle-dynamic.md
View File

@ -7,7 +7,6 @@ title: 进度圈动态展示
````jsx
import { Progress, Button, Icon } from 'antd';
const ProgressCircle = Progress.Circle;
const ButtonGroup = Button.Group;
const MyProgress = React.createClass({
@ -33,7 +32,7 @@ const MyProgress = React.createClass({
render() {
return (
<div>
<ProgressCircle percent={this.state.percent} />
<Progress type="circle" percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />

7
components/progress/demo/circle-mini.md
View File

@ -7,13 +7,12 @@ title: 小型进度圈
````jsx
import { Progress } from 'antd';
const ProgressCircle = Progress.Circle;
ReactDOM.render(
<div>
<ProgressCircle percent={30} width={80} />
<ProgressCircle percent={70} width={80} status="exception" />
<ProgressCircle percent={100} width={80} />
<Progress type="circle" percent={30} width={80} />
<Progress type="circle" percent={70} width={80} status="exception" />
<Progress type="circle" percent={100} width={80} />
</div>
, mountNode);
````

7
components/progress/demo/circle.md
View File

@ -7,13 +7,12 @@ title: 进度圈
````jsx
import { Progress } from 'antd';
const ProgressCircle = Progress.Circle;
ReactDOM.render(
<div>
<ProgressCircle percent={75} />
<ProgressCircle percent={70} status="exception" />
<ProgressCircle percent={100} />
<Progress type="circle" percent={75} />
<Progress type="circle" percent={70} status="exception" />
<Progress type="circle" percent={100} />
</div>
, mountNode);
````

4
components/progress/demo/dynamic.md
View File

@ -7,7 +7,6 @@ title: 动态展示
````jsx
import { Progress, Button, Icon } from 'antd';
const ProgressLine = Progress.Line;
const ButtonGroup = Button.Group;
const MyProgress = React.createClass({
@ -33,7 +32,7 @@ const MyProgress = React.createClass({
render() {
return (
<div>
<ProgressLine percent={this.state.percent} />
<Progress percent={this.state.percent} />
<ButtonGroup>
<Button type="ghost" onClick={this.decline}>
<Icon type="minus" />
@ -49,4 +48,3 @@ const MyProgress = React.createClass({
ReactDOM.render(<MyProgress />, mountNode);
````

11
components/progress/demo/format.md
View File

@ -7,20 +7,19 @@ title: 自定义文字格式
````jsx
import { Progress } from 'antd';
const ProgressCircle = Progress.Circle;
ReactDOM.render(
<div>
<ProgressCircle percent={75} format={percent => `${percent / 10.0}折` } />
<ProgressCircle percent={100} format={() => '成功'} />
<Progress type="circle" percent={75} format={percent => `${percent / 10.0}折` } />
<Progress type="circle" percent={100} format={() => '成功'} />
</div>
, mountNode);
````
<style>
.ant-progress-circle-wrap,
.ant-progress-line-wrap {
.ant-progress-circle,
.ant-progress-line {
margin-right: 8px;
margin-bottom: 5px;
margin-bottom: 8px;
}
</style>

9
components/progress/demo/line-mini.md
View File

@ -7,14 +7,13 @@ title: 小型进度条
````jsx
import { Progress } from 'antd';
const ProgressLine = Progress.Line;
ReactDOM.render(
<div style={{ width: 170 }}>
<ProgressLine percent={30} strokeWidth={5} />
<ProgressLine percent={50} strokeWidth={5} status="active" />
<ProgressLine percent={70} strokeWidth={5} status="exception" />
<ProgressLine percent={100} strokeWidth={5} />
<Progress percent={30} strokeWidth={5} />
<Progress percent={50} strokeWidth={5} status="active" />
<Progress percent={70} strokeWidth={5} status="exception" />
<Progress percent={100} strokeWidth={5} />
</div>
, mountNode);
````

11
components/progress/demo/line.md
View File

@ -7,15 +7,14 @@ title: 进度条
````jsx
import { Progress } from 'antd';
const ProgressLine = Progress.Line;
ReactDOM.render(
<div>
<ProgressLine percent={30} />
<ProgressLine percent={50} status="active" />
<ProgressLine percent={70} status="exception" />
<ProgressLine percent={100} />
<ProgressLine percent={50} showInfo={false} />
<Progress percent={30} />
<Progress percent={50} status="active" />
<Progress percent={70} status="exception" />
<Progress percent={100} />
<Progress percent={50} showInfo={false} />
</div>
, mountNode);
````

11
components/progress/index.jsx
View File

@ -1,7 +1,12 @@
import React from 'react';
import Line from './Line';
import Circle from './Circle';
export default {
Line,
Circle,
const Progress = Line;
Progress.Line = Line;
Progress.Circle = (props) => {
return <Circle {...props} />;
};
export default Progress;

69
style/components/progress.less
View File

@ -1,39 +1,41 @@
@progress-prefix-cls: ant-progress;
.@{progress-prefix-cls} {
&-line-wrap,
&-circle-wrap {
display: inline-block;
}
&-line-wrap {
display: inline-block;
&-line {
width: 100%;
font-size: 12px;
position: relative;
}
&-line-outer {
padding-right: 45px;
&-outer {
display: inline-block;
width: 100%;
margin-right: -45px;
.@{progress-prefix-cls}-line-wrap-full & {
margin-right: 0;
padding-right: 0;
margin-right: 0;
padding-right: 0;
.@{progress-prefix-cls}-show-info & {
padding-right: 45px;
margin-right: -45px;
}
}
&-line-inner {
&-inner {
display: inline-block;
width: 100%;
background-color: #f3f3f3;
border-radius: 100px;
vertical-align: middle;
}
&-line-bg {
&-bg {
border-radius: 100px;
background-color: @info-color;
transition: all 0.3s linear 0s;
position: relative;
}
&-line-text {
&-text {
width: 35px;
text-align: left;
font-size: 1em;
@ -45,8 +47,9 @@
font-size: 12px;
}
}
&-line-wrap.status-active {
.@{progress-prefix-cls}-line-bg:before {
&-status-active {
.@{progress-prefix-cls}-bg:before {
content: "";
opacity: 0;
position: absolute;
@ -56,31 +59,35 @@
bottom: 0;
background: #fff;
border-radius: 10px;
animation: progress-active 2s ease infinite;
animation: ant-progress-active 2s @ease-out-quint infinite;
}
}
&-line-wrap.status-exception {
.@{progress-prefix-cls}-line-bg {
&-status-exception {
.@{progress-prefix-cls}-bg {
background-color: @error-color;
}
.@{progress-prefix-cls}-line-text {
.@{progress-prefix-cls}-text {
color: @error-color;
}
}
&-line-wrap.status-success {
.@{progress-prefix-cls}-line-bg {
&-status-success {
.@{progress-prefix-cls}-bg {
background-color: @success-color;
}
.@{progress-prefix-cls}-line-text {
.@{progress-prefix-cls}-text {
color: @success-color;
}
}
&-circle-inner {
&-circle &-inner {
position: relative;
line-height: 1;
background-color: transparent;
}
&-circle-text {
&-circle &-text {
display: block;
position: absolute;
width: 100%;
@ -90,24 +97,26 @@
transform: translateY(-50%);
left: 0;
font-family: tahoma;
margin: 0;
.anticon {
font-size: 14 / 12em;
}
}
&-circle-wrap.status-exception {
.@{progress-prefix-cls}-circle-text {
&-circle &-status-exception {
.@{progress-prefix-cls}-text {
color: @error-color;
}
}
&-circle-wrap.status-success {
.@{progress-prefix-cls}-circle-text {
&-circle &-status-success {
.@{progress-prefix-cls}-text {
color: @success-color;
}
}
}
@keyframes progress-active {
@keyframes ant-progress-active {
0% {
opacity: .3;
width: 0;