Permalink
Browse files

Fix invalid progress like <Progress precent={120} />

  • Loading branch information...
afc163 committed Apr 18, 2018
1 parent c0e60f8 commit 0eb835772dbaa7ed14babe03fc177821c5bd5ca5
@@ -0,0 +1,85 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Progress render negetive progress 1`] = `
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div>
<div
class="ant-progress-outer"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
-20%
</span>
</div>
</div>
`;
exports[`Progress render negetive successPercent 1`] = `
<div
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
>
<div>
<div
class="ant-progress-outer"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
/>
<div
class="ant-progress-success-bg"
style="width: 0%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
50%
</span>
</div>
</div>
`;
exports[`Progress render out-of-range progress 1`] = `
<div
class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
>
<div>
<div
class="ant-progress-outer"
>
<div
class="ant-progress-inner"
>
<div
class="ant-progress-bg"
style="width: 100%; height: 8px;"
/>
</div>
</div>
<span
class="ant-progress-text"
>
<i
class="anticon anticon-check-circle"
/>
</span>
</div>
</div>
`;
@@ -10,4 +10,19 @@ describe('Progress', () => {
wrapper.setProps({ percent: 50, successPercent: 100 });
expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
});
it('render out-of-range progress', async () => {
const wrapper = mount(<Progress percent={120} />);
expect(wrapper.render()).toMatchSnapshot();
});
it('render negetive progress', async () => {
const wrapper = mount(<Progress percent={-20} />);
expect(wrapper.render()).toMatchSnapshot();
});
it('render negetive successPercent', async () => {
const wrapper = mount(<Progress percent={50} successPercent={-20} />);
expect(wrapper.render()).toMatchSnapshot();
});
});
@@ -31,6 +31,15 @@ export interface ProgressProps {
size?: ProgressSize;
}
const validProgress = (progress: number | undefined) => {
if (!progress || progress < 0) {
return 0;
} else if (progress > 100) {
return 100;
}
return progress;
};
export default class Progress extends React.Component<ProgressProps, {}> {
static Line: any;
static Circle: any;
@@ -84,11 +93,11 @@ export default class Progress extends React.Component<ProgressProps, {}> {
if (type === 'line') {
const percentStyle = {
width: `${percent}%`,
width: `${validProgress(percent)}%`,
height: strokeWidth || (size === 'small' ? 6 : 8),
};
const successPercentStyle = {
width: `${successPercent}%`,
width: `${validProgress(successPercent)}%`,
height: strokeWidth || (size === 'small' ? 6 : 8),
};
const successSegment = successPercent !== undefined
@@ -118,7 +127,7 @@ export default class Progress extends React.Component<ProgressProps, {}> {
progress = (
<div className={`${prefixCls}-inner`} style={circleStyle}>
<Circle
percent={percent}
percent={validProgress(percent)}
strokeWidth={circleWidth}
trailWidth={circleWidth}
strokeColor={(statusColorMap as any)[progressStatus]}

0 comments on commit 0eb8357

Please sign in to comment.