Fix #3433: Progressbar dynamic progress bar (#3438)

* Add Dynamic Progressbar Component * Fix : npm run format in progressbar
primefaces · Oct 7, 2022 · cfa58db · cfa58db
1 parent 5489908
commit cfa58db
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/components/lib/progressbar/ProgressBar.css b/components/lib/progressbar/ProgressBar.css
@@ -9,6 +9,10 @@
     position: absolute;
     display: none;
     border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
 }
 
 .p-progressbar-determinate .p-progressbar-value-animate {

diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
@@ -22,8 +22,14 @@ export const ProgressBar = React.memo(
 
             return (
                 <div role="progressbar" id={props.id} ref={elementRef} className={className} style={props.style} aria-valuemin="0" aria-valuenow={props.value} aria-valuemax="100" {...otherProps}>
-                    <div className="p-progressbar-value p-progressbar-value-animate" style={{ width: props.value + '%', display: 'block', backgroundColor: props.color }}></div>
-                    {label}
+                    <div className="p-progressbar-value p-progressbar-value-animate" style={{ width: props.value + '%', display: 'block', backgroundColor: props.color }}>
+                        {props.showValue && (
+                            <div className={`p-progressbar-label`} style={{ display: props.value != null && props.value !== 0 ? 'flex' : 'none' }}>
+                                {' '}
+                                {label}
+                            </div>
+                        )}
+                    </div>
                 </div>
             );
         };