Related #4602 - For Messages

primefaces · Aug 4, 2023 · f3b0573 · f3b0573
1 parent f8cba94
commit f3b0573
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 63 deletions.
diff --git a/components/lib/messages/Messages.css b/components/lib/messages/Messages.css
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
@@ -5,6 +5,7 @@ import { MessagesBase } from './MessagesBase';
 import { UIMessage } from './UIMessage';
 import { mergeProps } from '../utils/Utils';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 
 let messageIdx = 0;
 
@@ -23,6 +24,8 @@ export const Messages = React.memo(
 
         const ptCallbacks = MessagesBase.setMetaData(metaData);
 
+        useHandleStyle(MessagesBase.css.styles, ptCallbacks.isUnstyled, { name: 'messages' });
+
         const show = (messageInfo) => {
             if (messageInfo) {
                 setMessagesState((prev) => assignIdentifiers(prev, messageInfo, true));
@@ -87,7 +90,6 @@ export const Messages = React.memo(
         const rootProps = mergeProps(
             {
                 id: props.id,
-                ref: elementRef,
                 className: props.className,
                 style: props.style
             },
@@ -96,7 +98,7 @@ export const Messages = React.memo(
         );
 
         return (
-            <div {...rootProps}>
+            <div ref={elementRef} {...rootProps}>
                 <TransitionGroup>
                     {messagesState &&
                         messagesState.map((message, index) => {

diff --git a/components/lib/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js
@@ -1,4 +1,65 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+.p-message-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.p-message-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-message-close.p-link {
+    margin-left: auto;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-message-enter {
+    opacity: 0;
+}
+
+.p-message-enter-active {
+    opacity: 1;
+    transition: opacity .3s;
+}
+
+.p-message-exit {
+    opacity: 1;
+    max-height: 1000px;
+}
+
+.p-message-exit-active {
+    opacity: 0;
+    max-height: 0;
+    margin: 0;
+    overflow: hidden;
+    transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
+}
+
+.p-message-exit-active .p-message-close {
+    display: none;
+}
+`;
+
+const classes = {
+    uimessage: {
+        root: ({ severity }) =>
+            classNames('p-message p-component', {
+                [`p-message-${severity}`]: severity
+            }),
+        wrapper: 'p-message-wrapper',
+        detail: 'p-message-detail',
+        summary: 'p-message-summary',
+        icon: 'p-message-icon',
+        buttonicon: 'p-message-close-icon',
+        button: 'p-message-close p-link'
+    }
+};
 
 export const MessagesBase = ComponentBase.extend({
     defaultProps: {
@@ -10,5 +71,9 @@ export const MessagesBase = ComponentBase.extend({
         onRemove: null,
         onClick: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
@@ -15,7 +15,7 @@ export const UIMessage = React.memo(
         const {
             message: messageInfo,
             metaData: parentMetaData,
-            ptCallbacks: { ptm, ptmo },
+            ptCallbacks: { ptm, ptmo, cx },
             index
         } = props;
         const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle, icon: _icon, closeIcon: _closeIcon, pt } = messageInfo.message;
@@ -47,10 +47,10 @@ export const UIMessage = React.memo(
             if (closable !== false) {
                 const ariaLabel = localeOption('close');
 
-                const iconProps = { className: 'p-message-close-icon', 'aria-hidden': true };
                 const buttonIconProps = mergeProps(
                     {
-                        className: iconProps
+                        className: cx('uimessage.buttonicon'),
+                        'aria-hidden': true
                     },
                     ptm('buttonicon', parentParams),
                     ptmo(pt, 'buttonicon', params)
@@ -62,7 +62,7 @@ export const UIMessage = React.memo(
                 const buttonProps = mergeProps(
                     {
                         type: 'button',
-                        className: 'p-message-close p-link',
+                        className: cx('uimessage.button'),
                         'aria-label': ariaLabel,
                         onClick: onClose
                     },
@@ -83,10 +83,9 @@ export const UIMessage = React.memo(
 
         const createMessage = () => {
             if (props.message) {
-                const iconClassName = 'p-message-icon';
                 const iconProps = mergeProps(
                     {
-                        className: iconClassName
+                        className: cx('uimessage.icon')
                     },
                     ptm('icon', parentParams),
                     ptmo(pt, 'icon', params)
@@ -117,15 +116,15 @@ export const UIMessage = React.memo(
 
                 const summaryProps = mergeProps(
                     {
-                        className: 'p-message-summary'
+                        className: cx('uimessage.summary')
                     },
                     ptm('summary', parentParams),
                     ptmo(pt, 'summary', params)
                 );
 
                 const detailProps = mergeProps(
                     {
-                        className: 'p-message-detail'
+                        className: cx('uimessage.detail')
                     },
                     ptm('detail', parentParams),
                     ptmo(pt, 'detail', params)
@@ -145,20 +144,12 @@ export const UIMessage = React.memo(
             return null;
         };
 
-        const className = classNames(
-            'p-message p-component',
-            {
-                [`p-message-${severity}`]: severity
-            },
-            _className
-        );
-        const contentClassName = classNames('p-message-wrapper', _contentClassName);
         const closeIcon = createCloseIcon();
         const message = createMessage();
 
         const wrapperProps = mergeProps(
             {
-                className: contentClassName,
+                className: classNames(_contentClassName, cx('uimessage.wrapper')),
                 style: contentStyle
             },
             ptm('wrapper', parentParams),
@@ -168,7 +159,7 @@ export const UIMessage = React.memo(
         const rootProps = mergeProps(
             {
                 ref,
-                className,
+                className: classNames(_className, cx('uimessage.root', { severity })),
                 style,
                 onClick
             },

diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
@@ -104,6 +104,11 @@ export interface MessagesMessage {
      * @type {MessagesPassThroughOptions}
      */
     pt?: MessagesPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

diff --git a/styles/primereact.css b/styles/primereact.css
@@ -2,7 +2,6 @@
 @import "../components/lib/iconbase/IconBase.css";
 @import "../components/lib/datatable/DataTable.css";
 @import "../components/lib/toast/Toast.css";
-@import "../components/lib/messages/Messages.css";
 @import "../components/lib/tooltip/Tooltip.css";
 @import "../components/lib/treetable/TreeTable.css";
 @import "../components/lib/ripple/Ripple.css";