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..9a2979d152 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(['percent', 'ratio']), + ]), /** A progress bar can vary in size. */ size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'huge', 'massive')), @@ -139,29 +134,41 @@ class Progress extends Component { return autoSuccess && (percent >= 100 || value >= total) } - showProgress = () => { - const { label, precision, progress, total, value } = this.props + renderLabel = () => { + const { children, label } = this.props - if (label || progress || !_.isUndefined(precision)) return true - return !(_.every([total, value], _.isUndefined)) + if (!_.isNil(children)) return
{children}
+ return createShorthand('div', val => ({ children: val }), label, { className: 'label' }) + } + + renderProgress = percent => { + const { + precision, + progress, + total, + value, + } = this.props + + if (!progress && _.isUndefined(precision)) return + return ( +
+ { progress !== 'ratio' ? `${percent}%` : `${value}/${total}` } +
+ ) } render() { const { active, attached, - children, className, color, disabled, error, indicating, inverted, - label, size, success, - total, - value, warning, } = this.props @@ -182,19 +189,14 @@ class Progress extends Component { ) const rest = getUnhandledProps(Progress, this.props) const ElementType = getElementType(Progress, this.props) - const percent = this.getPercent() return (
- {this.showProgress() && ( -
- { label !== 'ratio' ? `${percent}%` : `${value}/${total}` } -
- )} + {this.renderProgress(percent)}
- {children &&
{children}
} + {this.renderLabel()}
) } diff --git a/src/modules/Progress/index.d.ts b/src/modules/Progress/index.d.ts index d14318f3ba..e16b4b8b63 100644 --- a/src/modules/Progress/index.d.ts +++ b/src/modules/Progress/index.d.ts @@ -38,7 +38,7 @@ interface ProgressProps { inverted?: string; /** Can be set to either to display progress as percent or ratio. */ - label?: boolean | 'ratio' | 'percent'; + label?: any; /** Current percent complete. */ percent?: number | string; @@ -47,7 +47,7 @@ interface ProgressProps { precision?: number; /** A progress bar can contain a text value indicating current progress. */ - progress?: boolean; + progress?: boolean | 'percent' | 'ratio'; /** A progress bar can vary in size. */ size?: 'tiny' | 'small' | 'medium' | 'large' | 'big'; 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%')