Refactor #4602 - for Message

primefaces · Jul 6, 2023 · 7712c0b · 7712c0b
1 parent dd95b2e
commit 7712c0b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 36 deletions.
diff --git a/components/lib/message/Message.css b/components/lib/message/Message.css
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { classNames, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
-import { MessageBase } from './MessageBase';
+import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
 import { ExclamationTriangleIcon } from '../icons/exclamationtriangle';
 import { InfoCircleIcon } from '../icons/infocircle';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { CheckIcon } from '../icons/check';
-import { PrimeReactContext } from '../api/Api';
+import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
+import { MessageBase } from './MessageBase';
 
 export const Message = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -14,7 +15,9 @@ export const Message = React.memo(
 
         const elementRef = React.useRef(null);
 
-        const { ptm } = MessageBase.setMetaData({
+        useStyle(MessageBase.css.styles, { name: 'primereact_message_style' });
+
+        const { ptm, cx } = MessageBase.setMetaData({
             props
         });
 
@@ -24,11 +27,10 @@ export const Message = React.memo(
             }
 
             const text = ObjectUtils.getJSXElement(props.text, props);
-            let iconClassName = 'p-inline-message-icon';
 
             const iconProps = mergeProps(
                 {
-                    className: iconClassName
+                    className: cx('icon')
                 },
                 ptm('icon')
             );
@@ -58,7 +60,7 @@ export const Message = React.memo(
 
             const textProps = mergeProps(
                 {
-                    className: 'p-inline-message-text'
+                    className: cx('text')
                 },
                 ptm('text')
             );
@@ -76,24 +78,13 @@ export const Message = React.memo(
             getElement: () => elementRef.current
         }));
 
-        const className = classNames(
-            'p-inline-message p-component',
-            {
-                'p-inline-message-info': props.severity === 'info',
-                'p-inline-message-warn': props.severity === 'warn',
-                'p-inline-message-error': props.severity === 'error',
-                'p-inline-message-success': props.severity === 'success',
-                'p-inline-message-icon-only': !props.text
-            },
-            props.className
-        );
         const content = createContent();
 
         const rootProps = mergeProps(
             {
                 id: props.id,
                 ref: elementRef,
-                className,
+                className: cx('root'),
                 style: props.style,
                 role: 'alert',
                 'aria-live': 'polite'

diff --git a/components/lib/message/MessageBase.js b/components/lib/message/MessageBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const MessageBase = ComponentBase.extend({
     defaultProps: {
@@ -11,5 +12,40 @@ export const MessageBase = ComponentBase.extend({
         severity: 'info',
         content: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames(
+                    'p-inline-message p-component',
+                    {
+                        'p-inline-message-info': props.severity === 'info',
+                        'p-inline-message-warn': props.severity === 'warn',
+                        'p-inline-message-error': props.severity === 'error',
+                        'p-inline-message-success': props.severity === 'success',
+                        'p-inline-message-icon-only': !props.text
+                    },
+                    props.className
+                ),
+            icon: 'p-inline-message-icon',
+            text: 'p-inline-message-text'
+        },
+        styles: `
+        .p-inline-message {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            vertical-align: top;
+        }
+        
+        .p-inline-message-icon-only .p-inline-message-text {
+            visibility: hidden;
+            width: 0;
+        }
+        
+        .p-fluid .p-inline-message {
+            display: flex;
+        }        
+        `
     }
 });
diff --git a/components/lib/message/message.d.ts b/components/lib/message/message.d.ts
@@ -70,6 +70,11 @@ export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @type {MessagePassThroughOptions}
      */
     pt?: MessagePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -29,7 +29,6 @@
 @import "../components/lib/menu/Menu.css";
 @import "../components/lib/megamenu/MegaMenu.css";
 @import "../components/lib/menubar/Menubar.css";
-@import "../components/lib/message/Message.css";
 @import "../components/lib/messages/Messages.css";
 @import "../components/lib/multiselect/MultiSelect.css";
 @import "../components/lib/orderlist/OrderList.css";