Refactor #4602 - for Badge

primefaces · Jul 5, 2023 · d18cbe1 · d18cbe1
1 parent 7d50b05
commit d18cbe1
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 48 deletions.
diff --git a/components/lib/badge/Badge.css b/components/lib/badge/Badge.css
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
@@ -1,29 +1,21 @@
 import * as React from 'react';
-import { classNames, ObjectUtils, mergeProps } from '../utils/Utils';
-import { BadgeBase } from './BadgeBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { mergeProps } from '../utils/Utils';
+import { BadgeBase } from './BadgeBase';
 
 export const Badge = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = BadgeBase.getProps(inProps, context);
 
-        const { ptm } = BadgeBase.setMetaData({
+        useStyle(BadgeBase.css.styles, { name: 'primereact_badge_style' });
+
+        const { ptm, cx } = BadgeBase.setMetaData({
             props
         });
 
         const elementRef = React.useRef(null);
-        const className = 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
-        );
 
         React.useImperativeHandle(ref, () => ({
             props,
@@ -34,7 +26,7 @@ export const Badge = React.memo(
             {
                 ref: elementRef,
                 style: props.style,
-                className: className
+                className: cx('root')
             },
             BadgeBase.getOtherProps(props),
             ptm('root')

diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/utils';
 
 export const BadgeBase = ComponentBase.extend({
     defaultProps: {
@@ -9,5 +10,55 @@ export const BadgeBase = ComponentBase.extend({
         style: null,
         className: null,
         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%;
+        }
+        `
     }
 });
diff --git a/components/lib/badge/badge.d.ts b/components/lib/badge/badge.d.ts
@@ -60,6 +60,11 @@ export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttri
      * @type {BadgePassThroughOptions}
      */
     pt?: BadgePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -57,7 +57,6 @@
 @import "../components/lib/tooltip/Tooltip.css";
 @import "../components/lib/tree/Tree.css";
 @import "../components/lib/treetable/TreeTable.css";
-@import "../components/lib/badge/Badge.css";
 @import "../components/lib/image/Image.css";
 @import "../components/lib/ripple/Ripple.css";
 @import "../components/lib/timeline/Timeline.css";