From 66dda8db43b3807ff31ab1106ce153490b4a2d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Tue, 18 Jul 2023 03:09:52 +0300
Subject: [PATCH] Refactor #4602 - For ProgressBar

---
 components/lib/progressbar/ProgressBar.css    |  96 ---------------
 components/lib/progressbar/ProgressBar.js     |  26 ++--
 components/lib/progressbar/ProgressBarBase.js | 115 ++++++++++++++++++
 components/lib/progressbar/progressbar.d.ts   |   5 +
 styles/primereact.css                         |   1 -
 5 files changed, 134 insertions(+), 109 deletions(-)
 delete mode 100644 components/lib/progressbar/ProgressBar.css

diff --git a/components/lib/progressbar/ProgressBar.css b/components/lib/progressbar/ProgressBar.css
deleted file mode 100644
index ffe85cde04..0000000000
--- a/components/lib/progressbar/ProgressBar.css
+++ /dev/null
@@ -1,96 +0,0 @@
-.p-progressbar {
-    position: relative;
-    overflow: hidden;
-}
-
-.p-progressbar-determinate .p-progressbar-value {
-    height: 100%;
-    width: 0%;
-    position: absolute;
-    display: none;
-    border: 0 none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.p-progressbar-determinate .p-progressbar-label {
-    display: inline-flex;
-}
-
-.p-progressbar-determinate .p-progressbar-value-animate {
-    transition: width 1s ease-in-out;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-              animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::after {
-    content: '';
-    position: absolute;
-    background-color: inherit;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    will-change: left, right;
-    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    -webkit-animation-delay: 1.15s;
-            animation-delay: 1.15s;
-}
-
-@-webkit-keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; }
-}
-@keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; }
-}
-
-@-webkit-keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; }
-}
-@keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; }
-}
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
index 3187740598..096e0bd726 100644
--- a/components/lib/progressbar/ProgressBar.js
+++ b/components/lib/progressbar/ProgressBar.js
@@ -1,15 +1,19 @@
 import * as React from 'react';
-import { classNames, mergeProps } from '../utils/Utils';
+import { mergeProps } from '../utils/Utils';
 import { ProgressBarBase } from './ProgressBarBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
 
 export const ProgressBar = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = ProgressBarBase.getProps(inProps, context);
-        const { ptm } = ProgressBarBase.setMetaData({
+        const { ptm, cx, sx } = ProgressBarBase.setMetaData({
             props
         });
+
+        useStyle(ProgressBarBase.css.styles, { name: 'progressbar' });
+
         const elementRef = React.useRef(null);
 
         const createLabel = () => {
@@ -23,13 +27,12 @@ export const ProgressBar = React.memo(
         };
 
         const createDeterminate = () => {
-            const className = classNames('p-progressbar p-component p-progressbar-determinate', props.className);
             const label = createLabel();
             const rootProps = mergeProps(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className,
+                    className: cx('root'),
                     style: props.style,
                     role: 'progressbar',
                     'aria-valuemin': '0',
@@ -41,15 +44,15 @@ export const ProgressBar = React.memo(
             );
             const valueProps = mergeProps(
                 {
-                    className: 'p-progressbar-value p-progressbar-value-animate',
-                    style: { width: props.value + '%', display: 'flex', backgroundColor: props.color }
+                    className: cx('value'),
+                    style: sx('value')
                 },
                 ptm('value')
             );
 
             const labelProps = mergeProps(
                 {
-                    className: 'p-progressbar-label'
+                    className: cx('label')
                 },
                 ptm('label')
             );
@@ -62,12 +65,11 @@ export const ProgressBar = React.memo(
         };
 
         const createIndeterminate = () => {
-            const className = classNames('p-progressbar p-component p-progressbar-indeterminate', props.className);
             const rootProps = mergeProps(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className,
+                    className: cx('root'),
                     style: props.style,
                     role: 'progressbar'
                 },
@@ -77,15 +79,15 @@ export const ProgressBar = React.memo(
 
             const indeterminateContainerProps = mergeProps(
                 {
-                    className: 'p-progressbar-indeterminate-container'
+                    className: cx('indeterminateContainer')
                 },
                 ptm('indeterminateContainer')
             );
 
             const valueProps = mergeProps(
                 {
-                    className: 'p-progressbar-value p-progressbar-value-animate',
-                    style: { backgroundColor: props.color }
+                    className: cx('value'),
+                    style: sx('value')
                 },
                 ptm('value')
             );
diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js
index 297f45c0ac..170ed4a6cc 100644
--- a/components/lib/progressbar/ProgressBarBase.js
+++ b/components/lib/progressbar/ProgressBarBase.js
@@ -1,4 +1,114 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
+
+const classes = {
+    root: ({ props }) => props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate', props.className) : classNames('p-progressbar p-component p-progressbar-determinate', props.className),
+    value: 'p-progressbar-value p-progressbar-value-animate',
+    label: 'p-progressbar-label',
+    indeterminateContainer: 'p-progressbar-indeterminate-container'
+}
+const styles = `
+.p-progressbar {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    display: none;
+    border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    display: inline-flex;
+}
+
+.p-progressbar-determinate .p-progressbar-value-animate {
+    transition: width 1s ease-in-out;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+              animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    -webkit-animation-delay: 1.15s;
+            animation-delay: 1.15s;
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; }
+}
+@keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; }
+}
+`
+
+const inlineStyles = {
+    value: ({ props }) => (props.mode === "indeterminate" ? { backgroundColor: props.color } : { width: props.value + '%', display: 'flex', backgroundColor: props.color })
+}
 
 export const ProgressBarBase = ComponentBase.extend({
     defaultProps: {
@@ -13,5 +123,10 @@ export const ProgressBarBase = ComponentBase.extend({
         displayValueTemplate: null,
         color: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
     }
 });
diff --git a/components/lib/progressbar/progressbar.d.ts b/components/lib/progressbar/progressbar.d.ts
index 27cf1842b6..b0af57d7a3 100644
--- a/components/lib/progressbar/progressbar.d.ts
+++ b/components/lib/progressbar/progressbar.d.ts
@@ -84,6 +84,11 @@ export interface ProgressBarProps extends Omit<React.DetailedHTMLProps<React.HTM
      * @type {ProgressBarPassThroughOptions}
      */
     pt?: ProgressBarPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/styles/primereact.css b/styles/primereact.css
index ca4165067b..55e0d9d4e7 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -34,7 +34,6 @@
 @import "../components/lib/paginator/Paginator.css";
 @import "../components/lib/panelmenu/PanelMenu.css";
 @import "../components/lib/picklist/PickList.css";
-@import "../components/lib/progressbar/ProgressBar.css";
 @import "../components/lib/progressspinner/ProgressSpinner.css";
 @import "../components/lib/sidebar/Sidebar.css";
 @import "../components/lib/slidemenu/SlideMenu.css";