Merge pull request #984 from NellyHaglund/feature/ProgressBar-custom-…

…display-value Fixed #978 - Add custom display value option in progress bar
primefaces · Aug 27, 2019 · d546a71 · d546a71
2 parents 390992a + 82026ab
commit d546a71
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/components/progressbar/ProgressBar.js b/src/components/progressbar/ProgressBar.js
@@ -6,7 +6,6 @@ export class ProgressBar extends Component {
 
  static defaultProps = {
  id: null,
- value: null,
  showValue: true,
  unit: '%',
  style: null,
@@ -18,14 +17,20 @@ export class ProgressBar extends Component {
  id: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  showValue: PropTypes.bool,
+ displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  unit: PropTypes.string,
  style: PropTypes.object,
  className: PropTypes.string,
  mode: PropTypes.string
  };
 
  renderLabel() {
- if (this.props.showValue && this.props.value) {
+ if (this.props.showValue && 'displayValue' in this.props) {
+ return (
+ <div className="p-progressbar-label">{this.props.displayValue}</div>
+ );
+ }
+ else if (this.props.showValue && 'value' in this.props) {
  return (
  <div className="p-progressbar-label">{this.props.value + this.props.unit}</div>
  );

diff --git a/src/showcase/progressbar/ProgressBarDemo.js b/src/showcase/progressbar/ProgressBarDemo.js
@@ -11,7 +11,10 @@ export class ProgressBarDemo extends Component {
  super();
  this.state = {
  value1: 0, 
- value2: 50
+ value2: 50,
+ value3: 40,
+ totalItems: 5,
+ completedItems: 2
  };
  }
 
@@ -58,6 +61,9 @@ export class ProgressBarDemo extends Component {
  <h3>Static</h3>
  <ProgressBar value={this.state.value2}></ProgressBar>
 
+ <h3>Custom display value</h3>
+ <ProgressBar value={this.state.value3} displayValue={`${this.state.completedItems}/${this.state.totalItems}`}></ProgressBar>
+
  <h3>Indeterminate</h3>
  <ProgressBar mode="indeterminate" style={{height: '6px'}}></ProgressBar>
  </div>
@@ -132,6 +138,12 @@ import {ProgressBar} from 'primereact/progressbar';
  <td>true</td>
  <td>Show or hide progress bar value.</td>
  </tr>
+ <tr>
+ <td>displayValue</td>
+ <td>string</td>
+ <td>null</td>
+ <td>Custom display value</td>
+ </tr>
  <tr>
  <td>unit</td>
  <td>string</td>
@@ -215,7 +227,10 @@ export class ProgressBarDemo extends Component {
  super();
  this.state = {
  value1: 0, 
- value2: 50
+ value2: 50,
+ value3: 40,
+ totalItems: 5,
+ completedItems: 2
  };
  }
 
@@ -262,6 +277,9 @@ export class ProgressBarDemo extends Component {
  <h3>Static</h3>
  <ProgressBar value={this.state.value2}></ProgressBar>
 
+ <h3>Custom display value</h3>
+ <ProgressBar value={this.state.value3} displayValue={\`\${this.state.completedItems}/\${this.state.totalItems}\`}></ProgressBar>
+
  <h3>Indeterminate</h3>
  <ProgressBar mode="indeterminate" style={{height: '6px'}}></ProgressBar>
  </div>