diff --git a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js index d430214490..6a20dd089f 100644 --- a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js +++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js @@ -3,16 +3,16 @@ import { Progress, Segment } from 'semantic-ui-react' const ProgressExampleInverted = () => ( - + Uploading Files - + success - + warning - + error diff --git a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js index 51c1ec95d9..c28db3a3ad 100644 --- a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js +++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js @@ -3,19 +3,19 @@ import { Progress, Segment } from 'semantic-ui-react' const ProgressExampleInvertedColor = () => ( - - - - - - - - - - - - - + + + + + + + + + + + + + ) diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js index 5af5fec978..e817355e1d 100644 --- a/src/modules/Progress/Progress.js +++ b/src/modules/Progress/Progress.js @@ -3,6 +3,7 @@ import _ from 'lodash' import React, { Component, PropTypes } from 'react' import { + createShorthand, customPropTypes, getElementType, getUnhandledProps, @@ -51,16 +52,7 @@ class Progress extends Component { inverted: PropTypes.bool, /** Can be set to either to display progress as percent or ratio. */ - label: customPropTypes.every([ - customPropTypes.some([ - customPropTypes.demand(['percent']), - customPropTypes.demand(['total', 'value']), - ]), - PropTypes.oneOfType([ - PropTypes.bool, - PropTypes.oneOf(['ratio', 'percent']), - ]), - ]), + label: customPropTypes.itemShorthand, /** Current percent complete. */ percent: customPropTypes.every([ @@ -75,7 +67,10 @@ class Progress extends Component { precision: PropTypes.number, /** A progress bar can contain a text value indicating current progress. */ - progress: PropTypes.bool, + progress: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.oneOf(['ratio', 'percent']), + ]), /** A progress bar can vary in size. */ size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'huge', 'massive')), @@ -125,6 +120,17 @@ class Progress extends Component { if (!_.isUndefined(total) && !_.isUndefined(value)) return value / total * 100 } + getLabel = () => { + const { label } = this.props + + return createShorthand( + 'div', + val => ({ children: val }), + label, + { className: 'label' } + ) + } + getPercent = () => { const { precision } = this.props const percent = _.clamp(this.calculatePercent(), 0, 100) @@ -140,10 +146,9 @@ class Progress extends Component { } showProgress = () => { - const { label, precision, progress, total, value } = this.props + const { precision, progress } = this.props - if (label || progress || !_.isUndefined(precision)) return true - return !(_.every([total, value], _.isUndefined)) + return progress || !_.isUndefined(precision) } render() { @@ -157,7 +162,7 @@ class Progress extends Component { error, indicating, inverted, - label, + progress, size, success, total, @@ -190,11 +195,11 @@ class Progress extends Component {
{this.showProgress() && (
- { label !== 'ratio' ? `${percent}%` : `${value}/${total}` } + { progress !== 'ratio' ? `${percent}%` : `${value}/${total}` }
)}
- {children &&
{children}
} + {!_.isNil(children) ? this.getLabel() :
{children}
} ) } diff --git a/test/specs/modules/Progress/Progress-test.js b/test/specs/modules/Progress/Progress-test.js index 886132094f..501a8d846c 100644 --- a/test/specs/modules/Progress/Progress-test.js +++ b/test/specs/modules/Progress/Progress-test.js @@ -96,22 +96,11 @@ describe('Progress', () => { }) describe('label', () => { - it('displays the progress as a percentage by default', () => { - shallow() - .should.have.descendants('.progress') - .and.contain.text('20%') - }) - it('displays the progress as a ratio when set to "ratio"', () => { - shallow() + it('shows the label text when provided', () => { + shallow() .children() - .find('.progress') - .should.contain.text('1/2') - }) - it('displays the progress as a percentage when set to "percent"', () => { - shallow() - .children() - .find('.progress') - .should.contain.text('50%') + .find('.label') + .should.contain.text('some-label') }) }) @@ -131,6 +120,23 @@ describe('Progress', () => { .find('.bar') .should.not.have.descendants('.progress') }) + it('displays the progress as a percentage by default', () => { + shallow() + .should.have.descendants('.progress') + .and.contain.text('20%') + }) + it('displays the progress as a ratio when set to "ratio"', () => { + shallow() + .children() + .find('.progress') + .should.contain.text('1/2') + }) + it('displays the progress as a percentage when set to "percent"', () => { + shallow() + .children() + .find('.progress') + .should.contain.text('50%') + }) it('shows the percent complete', () => { shallow() .children() @@ -191,7 +197,7 @@ describe('Progress', () => { describe('total/value', () => { it('calculates the percent complete', () => { - shallow() + shallow() .children() .find('.progress') .should.contain.text('50%')