From 3d336ec1ead062bb5a984849bd3abef7aafa9e80 Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 1 Sep 2022 09:00:08 -0400 Subject: [PATCH] Fix #3196: Message(s) add icon attribute (#3224) --- api-generator/components/message.js | 6 ++++++ components/doc/messages/index.js | 12 +++++++++--- components/lib/message/Message.js | 21 +++++++++++++-------- components/lib/message/message.d.ts | 2 ++ components/lib/messages/UIMessage.js | 22 +++++++++++++--------- components/lib/messages/messages.d.ts | 2 ++ 6 files changed, 45 insertions(+), 20 deletions(-) diff --git a/api-generator/components/message.js b/api-generator/components/message.js index 1f8795c89c..e3c8282ccc 100644 --- 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 index f8fdaaa4ff..945c4ecba2 100644 --- 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', null Template of the message. + + icon + string + based on severity + Icon for the message. If not set it will default to severity icon. + diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js index 984b856090..75b2b357d1 100644 --- 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 ( <> - + {icon} {text} ); @@ -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 index 2a14b75d40..c53202eb51 100644 --- 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; children?: React.ReactNode; } diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js index 55d7afca43..dce0b9c066 100644 --- 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 || ( <> - + {iconContent} {summary} {detail} diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts index 15adc00139..97d48f4bd1 100644 --- 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; } export interface MessagesProps extends Omit, HTMLDivElement>, 'ref'> {