Fix #3196: Message(s) add icon attribute (#3224)

primefaces · Sep 1, 2022 · 3d336ec · 3d336ec
1 parent b0067ea
commit 3d336ec
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 20 deletions.
diff --git a/api-generator/components/message.js b/api-generator/components/message.js
@@ -34,6 +34,12 @@ const MessageProps = [
         type: 'element',
         default: 'null',
         description: 'Template of the message.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'Based on severity',
+        description: 'Icon for the message. If not set it will default to severity icon.'
     }
 ];
 

diff --git a/components/doc/messages/index.js b/components/doc/messages/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const MessagesDoc = memo(() => {
     const sources = {
@@ -692,6 +692,12 @@ messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message',
                                     <td>null</td>
                                     <td>Template of the message.</td>
                                 </tr>
+                                <tr>
+                                    <td>icon</td>
+                                    <td>string</td>
+                                    <td>based on severity</td>
+                                    <td>Icon for the message. If not set it will default to severity icon.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Message = React.memo(
     React.forwardRef((props, ref) => {
@@ -11,16 +11,20 @@ export const Message = React.memo(
             }
 
             const text = ObjectUtils.getJSXElement(props.text, props);
-            const icon = classNames('p-inline-message-icon pi', {
-                'pi-info-circle': props.severity === 'info',
-                'pi-exclamation-triangle': props.severity === 'warn',
-                'pi-times-circle': props.severity === 'error',
-                'pi-check': props.severity === 'success'
-            });
+            let iconValue = props.icon;
+            if (!iconValue) {
+                iconValue = classNames('pi', {
+                    'pi-info-circle': props.severity === 'info',
+                    'pi-exclamation-triangle': props.severity === 'warn',
+                    'pi-times-circle': props.severity === 'error',
+                    'pi-check': props.severity === 'success'
+                });
+            }
+            const icon = IconUtils.getJSXIcon(iconValue, { className: 'p-inline-message-icon' }, { props });
 
             return (
                 <>
-                    <span className={icon}></span>
+                    {icon}
                     <span className="p-inline-message-text">{text}</span>
                 </>
             );
@@ -60,6 +64,7 @@ Message.defaultProps = {
     className: null,
     style: null,
     text: null,
+    icon: null,
     severity: 'info',
     content: null
 };
diff --git a/components/lib/message/message.d.ts b/components/lib/message/message.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IconType } from '../utils/utils';
 
 type MessageSeverityType = 'success' | 'info' | 'warn' | 'error';
 
@@ -10,6 +11,7 @@ export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
     text?: MessageTextType;
     severity?: MessageSeverityType;
     content?: MessageContentType;
+    icon?: IconType<MessageProps>;
     children?: React.ReactNode;
 }
 

diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useTimeout } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames } from '../utils/Utils';
+import { classNames, IconUtils } from '../utils/Utils';
 
 export const UIMessage = React.memo(
     React.forwardRef((props, ref) => {
-        const { severity, content, summary, detail, closable, life, sticky } = props.message;
+        const { severity, content, summary, detail, closable, life, sticky, icon } = props.message;
 
         const [clearTimer] = useTimeout(
             () => {
@@ -44,17 +44,21 @@ export const UIMessage = React.memo(
 
         const createMessage = () => {
             if (props.message) {
-                const icon = classNames('p-message-icon pi ', {
-                    'pi-info-circle': severity === 'info',
-                    'pi-check': severity === 'success',
-                    'pi-exclamation-triangle': severity === 'warn',
-                    'pi-times-circle': severity === 'error'
-                });
+                let iconValue = icon;
+                if (!iconValue) {
+                    iconValue = classNames('pi', {
+                        'pi-info-circle': severity === 'info',
+                        'pi-exclamation-triangle': severity === 'warn',
+                        'pi-times-circle': severity === 'error',
+                        'pi-check': severity === 'success'
+                    });
+                }
+                const iconContent = IconUtils.getJSXIcon(iconValue, { className: 'p-message-icon' }, { props });
 
                 return (
                     content || (
                         <>
-                            <span className={icon}></span>
+                            {iconContent}
                             <span className="p-message-summary">{summary}</span>
                             <span className="p-message-detail">{detail}</span>
                         </>

diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
+import { IconType } from '../utils/utils';
 
 type MessagesSeverityType = 'success' | 'info' | 'warn' | 'error';
 
@@ -13,6 +14,7 @@ export interface MessagesMessage {
     closable?: boolean;
     sticky?: boolean;
     life?: number;
+    icon?: IconType<MessagesProps>;
 }
 
 export interface MessagesProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {