Refactor #4602 - For Misc section

primefaces · Aug 7, 2023 · 368d96a · Kimblis · Oct 2, 2023 · 368d96a
1 parent b05c1ed
commit 368d96a
Show file tree

Hide file tree

Showing 18 changed files with 287 additions and 286 deletions.
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
-import { mergeProps } from '../utils/Utils';
-import { BadgeBase } from './BadgeBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { classNames, mergeProps } from '../utils/Utils';
+import { BadgeBase } from './BadgeBase';
 
 export const Badge = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -26,7 +26,7 @@ export const Badge = React.memo(
             {
                 ref: elementRef,
                 style: props.style,
-                className: cx('root')
+                className: classNames(props.className, cx('root'))
             },
             BadgeBase.getOtherProps(props),
             ptm('root')

diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js
@@ -1,6 +1,52 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { ObjectUtils, classNames } from '../utils/Utils';
 
+const classes = {
+    root: ({ props }) =>
+        classNames('p-badge p-component', {
+            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value),
+            'p-badge-lg': props.size === 'large',
+            'p-badge-xl': props.size === 'xlarge',
+            [`p-badge-${props.severity}`]: props.severity !== null
+        })
+};
+
+const styles = `
+.p-badge {
+    display: inline-block;
+    border-radius: 10px;
+    text-align: center;
+    padding: 0 .5rem;
+}
+
+.p-overlay-badge {
+    position: relative;
+}
+
+.p-overlay-badge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%,-50%);
+    transform-origin: 100% 0;
+    margin: 0;
+}
+
+.p-badge-dot {
+    width: .5rem;
+    min-width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    padding: 0;
+}
+
+.p-badge-no-gutter {
+    padding: 0;
+    border-radius: 50%;
+}
+`;
+
 export const BadgeBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Badge',
@@ -12,53 +58,7 @@ export const BadgeBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            root: ({ props }) =>
-                classNames(
-                    'p-badge p-component',
-                    {
-                        'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
-                        'p-badge-dot': ObjectUtils.isEmpty(props.value),
-                        'p-badge-lg': props.size === 'large',
-                        'p-badge-xl': props.size === 'xlarge',
-                        [`p-badge-${props.severity}`]: props.severity !== null
-                    },
-                    props.className
-                )
-        },
-        styles: `
-        .p-badge {
-            display: inline-block;
-            border-radius: 10px;
-            text-align: center;
-            padding: 0 .5rem;
-        }
-        
-        .p-overlay-badge {
-            position: relative;
-        }
-        
-        .p-overlay-badge .p-badge {
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%,-50%);
-            transform-origin: 100% 0;
-            margin: 0;
-        }
-        
-        .p-badge-dot {
-            width: .5rem;
-            min-width: .5rem;
-            height: .5rem;
-            border-radius: 50%;
-            padding: 0;
-        }
-        
-        .p-badge-no-gutter {
-            padding: 0;
-            border-radius: 50%;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { ChipBase } from './ChipBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Chip = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -97,7 +97,7 @@ export const Chip = React.memo(
                 {
                     ref: elementRef,
                     style: props.style,
-                    className: cx('root')
+                    className: classNames(props.className, cx('root'))
                 },
                 ChipBase.getOtherProps(props),
                 ptm('root')

diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js
@@ -1,6 +1,40 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    root: ({ props }) =>
+        classNames('p-chip p-component', {
+            'p-chip-image': props.image != null
+        }),
+    removeIcon: 'p-chip-remove-icon',
+    icon: 'p-chip-icon',
+    label: 'p-chip-text'
+};
+
+const styles = `
+.p-chip {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-chip-text {
+    line-height: 1.5;
+}
+
+.p-chip-icon.pi {
+    line-height: 1.5;
+}
+
+.p-chip .p-chip-remove-icon {
+    line-height: 1.5;
+    cursor: pointer;
+}
+
+.p-chip img {
+    border-radius: 50%;
+}
+`;
+
 export const ChipBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Chip',
@@ -18,41 +52,7 @@ export const ChipBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            root: ({ props }) =>
-                classNames(
-                    'p-chip p-component',
-                    {
-                        'p-chip-image': props.image != null
-                    },
-                    props.className
-                ),
-            removeIcon: 'p-chip-remove-icon',
-            icon: 'p-chip-icon',
-            label: 'p-chip-text'
-        },
-        styles: `
-        .p-chip {
-            display: inline-flex;
-            align-items: center;
-        }
-        
-        .p-chip-text {
-            line-height: 1.5;
-        }
-        
-        .p-chip-icon.pi {
-            line-height: 1.5;
-        }
-        
-        .p-chip .p-chip-remove-icon {
-            line-height: 1.5;
-            cursor: pointer;
-        }
-        
-        .p-chip img {
-            border-radius: 50%;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { localeOption, PrimeReactContext } from '../api/Api';
 import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { TimesIcon } from '../icons/times';
-import { IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 import { InplaceBase } from './InplaceBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const InplaceDisplay = (props) => props.children;
 export const InplaceContent = (props) => props.children;
@@ -138,7 +138,7 @@ export const Inplace = React.forwardRef((inProps, ref) => {
     const rootProps = mergeProps(
         {
             ref: elementRef,
-            className: cx('root')
+            className: classNames(props.className, cx('root'))
         },
         InplaceBase.getOtherProps(props),
         ptm('root')

diff --git a/components/lib/inplace/InplaceBase.js b/components/lib/inplace/InplaceBase.js
@@ -1,6 +1,43 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
 import { classNames } from '../utils/Utils';
 
+const classes = {
+    display: ({ props }) =>
+        classNames('p-inplace-display', {
+            'p-disabled': props.disabled
+        }),
+    root: ({ props }) =>
+        classNames('p-inplace p-component', {
+            'p-inplace-closable': props.closable
+        }),
+    closeButton: 'p-inplace-content-close',
+    content: 'p-inplace-content'
+};
+
+const styles = `
+.p-inplace .p-inplace-display {
+    display: inline;
+    cursor: pointer;
+}
+
+.p-inplace .p-inplace-content {
+    display: inline;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+    display: flex;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-inplace-content-close {
+    margin-left: .25rem;
+}
+`;
+
 export const InplaceDisplayBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InplaceDisplay',
@@ -32,44 +69,7 @@ export const InplaceBase = ComponentBase.extend({
         children: undefined
     },
     css: {
-        classes: {
-            display: ({ props }) =>
-                classNames('p-inplace-display', {
-                    'p-disabled': props.disabled
-                }),
-            root: ({ props }) =>
-                classNames(
-                    'p-inplace p-component',
-                    {
-                        'p-inplace-closable': props.closable
-                    },
-                    props.className
-                ),
-            closeButton: 'p-inplace-content-close',
-            content: 'p-inplace-content'
-        },
-        styles: `
-        .p-inplace .p-inplace-display {
-            display: inline;
-            cursor: pointer;
-        }
-        
-        .p-inplace .p-inplace-content {
-            display: inline;
-        }
-        
-        .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
-            display: flex;
-        }
-        
-        .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
-            flex: 1 1 auto;
-            width: 1%;
-        }
-        
-        .p-inplace-content-close {
-            margin-left: .25rem;
-        }
-        `
+        classes,
+        styles
     }
 });
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { mergeProps } from '../utils/Utils';
-import { ProgressBarBase } from './ProgressBarBase';
 import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
+import { classNames, mergeProps } from '../utils/Utils';
+import { ProgressBarBase } from './ProgressBarBase';
 
 export const ProgressBar = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -68,7 +68,7 @@ export const ProgressBar = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     role: 'progressbar'
                 },

diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js
@@ -2,11 +2,12 @@ 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)),
+    root: ({ props }) => (props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate') : classNames('p-progressbar p-component p-progressbar-determinate')),
     value: 'p-progressbar-value p-progressbar-value-animate',
     label: 'p-progressbar-label',
     indeterminateContainer: 'p-progressbar-indeterminate-container'
 };
+
 const styles = `
 .p-progressbar {
     position: relative;