archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2025-12-08 20:25:50 +00:00
Code Issues Projects Releases Wiki Activity

set value boundaries in CircularProgressbar, instead of in Path

Browse Source
This commit is contained in:
Kevin Qi 2019-05-11 14:55:21 -07:00
parent 397e623a2a
commit af4775625e
3 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/CircularProgressbar.tsx
View File

@ -71,7 +71,8 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
} = this.props;
const pathRadius = this.getPathRadius();
const pathRatio = value / (maxValue - minValue);
const boundedValue = Math.min(Math.max(value, minValue), maxValue);
const pathRatio = boundedValue / (maxValue - minValue);
return (
<svg

5
src/Path.tsx
View File

@ -63,10 +63,7 @@ function getDashStyle({
pathRadius: number;
}) {
const diameter = Math.PI * 2 * pathRadius;
// Keep dashRatio between [0, 1]
const boundedDashRatio = Math.min(Math.max(dashRatio, 0), 1);
const gapLength = (1 - boundedDashRatio) * diameter;
const gapLength = (1 - dashRatio) * diameter;
return {
// Have dash be full diameter, and gap be full diameter

2
test/CircularProgressbar.test.tsx
View File

@ -44,7 +44,7 @@ describe('<CircularProgressbar />', () => {
expect(wrapper.find('.CircularProgressbar-text').text()).toEqual('50%');
});
});
describe('props.percentage', () => {
describe('props.value', () => {
test('Renders correct path', () => {
const percentage = 30;
const wrapper = mount(