Refactor #4602 - for Knob

primefaces · Jul 7, 2023 · 772fb50 · 772fb50
1 parent 27b502b
commit 772fb50
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 36 deletions.
diff --git a/components/lib/knob/Knob.css b/components/lib/knob/Knob.css
diff --git 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
@@ -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
@@ -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
@@ -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";