From 772fb50a32e99f491ccac0a2a5235b6d9f93fb68 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Fri, 7 Jul 2023 16:20:09 +0300
Subject: [PATCH] Refactor #4602 - for Knob

---
 components/lib/knob/Knob.css    | 18 ----------------
 components/lib/knob/Knob.js     | 27 ++++++++++--------------
 components/lib/knob/KnobBase.js | 37 ++++++++++++++++++++++++++++++++-
 components/lib/knob/knob.d.ts   |  5 +++++
 styles/primereact.css           |  1 -
 5 files changed, 52 insertions(+), 36 deletions(-)
 delete mode 100644 components/lib/knob/Knob.css

diff --git a/components/lib/knob/Knob.css b/components/lib/knob/Knob.css
deleted file mode 100644
index 0a488dbcf5..0000000000
--- a/components/lib/knob/Knob.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@keyframes dash-frame {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
-.p-knob-range {
-    fill: none;
-    transition: stroke .1s ease-in;
-}
-.p-knob-value {
-    animation-name: dash-frame;
-    animation-fill-mode: forwards;
-    fill: none;
-}
-.p-knob-text {
-    font-size: 1.3rem;
-    text-align: center;
-}
\ No newline at end of file
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
index 6a9d423c47..9142e1eb06 100644
--- a/components/lib/knob/Knob.js
+++ b/components/lib/knob/Knob.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useEventListener } from '../hooks/Hooks';
-import { classNames, mergeProps } from '../utils/Utils';
-import { KnobBase } from './KnobBase';
 import { PrimeReactContext } from '../api/Api';
+import { useEventListener, useStyle } from '../hooks/Hooks';
+import { mergeProps } from '../utils/Utils';
+import { KnobBase } from './KnobBase';
 
 const radius = 40;
 const midX = 50;
@@ -14,7 +14,10 @@ export const Knob = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = KnobBase.getProps(inProps, context);
-        const { ptm } = KnobBase.setMetaData({
+
+        useStyle(KnobBase.css.styles, { name: 'primereact_knob_style' });
+
+        const { ptm, cx } = KnobBase.setMetaData({
             props
         });
         const elementRef = React.useRef(null);
@@ -155,21 +158,13 @@ export const Knob = React.memo(
             getElement: () => elementRef.current
         }));
 
-        const otherProps = KnobBase.getOtherProps(props);
-        const className = classNames(
-            'p-knob p-component',
-            {
-                'p-disabled': props.disabled
-            },
-            props.className
-        );
         const labelProps = mergeProps(
             {
                 x: 50,
                 y: 57,
                 textAnchor: 'middle',
                 fill: props.textColor,
-                className: 'p-knob-text',
+                className: cx('label'),
                 name: props.name
             },
             ptm('label')
@@ -181,7 +176,7 @@ export const Knob = React.memo(
             {
                 ref: elementRef,
                 id: props.id,
-                className,
+                className: cx('root'),
                 style: props.style
             },
             ptm('root')
@@ -206,7 +201,7 @@ export const Knob = React.memo(
                 d: rangePath,
                 strokeWidth: props.strokeWidth,
                 stroke: props.rangeColor,
-                className: 'p-knob-range'
+                className: cx('range')
             },
             ptm('range')
         );
@@ -216,7 +211,7 @@ export const Knob = React.memo(
                 d: valuePath,
                 strokeWidth: props.strokeWidth,
                 stroke: props.valueColor,
-                className: 'p-knob-value'
+                className: cx('value')
             },
             ptm('value')
         );
diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js
index 26e6f4f31c..198a020d92 100644
--- a/components/lib/knob/KnobBase.js
+++ b/components/lib/knob/KnobBase.js
@@ -1,5 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { ObjectUtils } from '../utils/Utils';
+import { classNames } from '../utils/utils';
 
 export const KnobBase = ComponentBase.extend({
     defaultProps: {
@@ -23,5 +23,40 @@ export const KnobBase = ComponentBase.extend({
         valueTemplate: '{value}',
         onChange: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            range: 'p-knob-range',
+            value: 'p-knob-value',
+            label: 'p-knob-text',
+            root: ({ props }) =>
+                classNames(
+                    'p-knob p-component',
+                    {
+                        'p-disabled': props.disabled
+                    },
+                    props.className
+                )
+        },
+        styles: `
+        @keyframes dash-frame {
+            100% {
+                stroke-dashoffset: 0;
+            }
+        }
+        .p-knob-range {
+            fill: none;
+            transition: stroke .1s ease-in;
+        }
+        .p-knob-value {
+            animation-name: dash-frame;
+            animation-fill-mode: forwards;
+            fill: none;
+        }
+        .p-knob-text {
+            font-size: 1.3rem;
+            text-align: center;
+        }
+        `
     }
 });
diff --git a/components/lib/knob/knob.d.ts b/components/lib/knob/knob.d.ts
index d2fd7c6076..732b55b76e 100644
--- a/components/lib/knob/knob.d.ts
+++ b/components/lib/knob/knob.d.ts
@@ -158,6 +158,11 @@ export interface KnobProps extends Omit<React.DetailedHTMLProps<React.InputHTMLA
      * @type {KnobPassThroughOptions}
      */
     pt?: KnobPassThroughOptions;
+    /**
+     * 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 1bfb1c4a76..2e355c57e2 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -60,7 +60,6 @@
 @import "../components/lib/avatargroup/AvatarGroup.css";
 @import "../components/lib/tag/Tag.css";
 @import "../components/lib/divider/Divider.css";
-@import "../components/lib/knob/Knob.css";
 @import "../components/lib/splitter/Splitter.css";
 @import "../components/lib/confirmpopup/ConfirmPopup.css";
 @import "../components/lib/cascadeselect/CascadeSelect.css";