From 774ebf0e30396b9e7c87ea4c6705e2a2fe4ebe29 Mon Sep 17 00:00:00 2001
From: Nelly Haglund <nelly.haglund@ikea.com>
Date: Thu, 8 Aug 2019 11:01:16 +0200
Subject: [PATCH] Add custom display value option in progress bar

Fixes #978
---
 src/components/progressbar/ProgressBar.js   |  9 ++++++++-
 src/showcase/progressbar/ProgressBarDemo.js | 22 +++++++++++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/progressbar/ProgressBar.js b/src/components/progressbar/ProgressBar.js
index c8a95d72a7..c39f2b2aa6 100644
--- a/src/components/progressbar/ProgressBar.js
+++ b/src/components/progressbar/ProgressBar.js
@@ -8,6 +8,7 @@ export class ProgressBar extends Component {
         id: null,
         value: null,
         showValue: true,
+        displayValue: null,
         unit: '%',
         style: null,
         className: null,
@@ -18,6 +19,7 @@ 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,
@@ -25,7 +27,12 @@ export class ProgressBar extends Component {
     };
 
     renderLabel() {
-        if (this.props.showValue && this.props.value) {
+        if (this.props.showValue && this.props.displayValue) {
+            return (
+                <div className="p-progressbar-label">{this.props.displayValue}</div>
+            );
+        }
+        else if (this.props.showValue && this.props.value) {
             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
index ebca46b3c4..d824606dad 100644
--- 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>