Skip to content

Commit

Permalink
Fix #3196: Message(s) add icon attribute (#3224)
Browse files Browse the repository at this point in the history
  • Loading branch information
melloware authored Sep 1, 2022
1 parent b0067ea commit 3d336ec
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 20 deletions.
6 changes: 6 additions & 0 deletions api-generator/components/message.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
}
];

Expand Down
12 changes: 9 additions & 3 deletions components/doc/messages/index.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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>
Expand Down
21 changes: 13 additions & 8 deletions components/lib/message/Message.js
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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>
</>
);
Expand Down Expand Up @@ -60,6 +64,7 @@ Message.defaultProps = {
className: null,
style: null,
text: null,
icon: null,
severity: 'info',
content: null
};
2 changes: 2 additions & 0 deletions components/lib/message/message.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { IconType } from '../utils/utils';

type MessageSeverityType = 'success' | 'info' | 'warn' | 'error';

Expand All @@ -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;
}

Expand Down
22 changes: 13 additions & 9 deletions components/lib/messages/UIMessage.js
Original file line number Diff line number Diff line change
@@ -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(
() => {
Expand Down Expand Up @@ -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>
</>
Expand Down
2 changes: 2 additions & 0 deletions components/lib/messages/messages.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { CSSTransitionProps } from '../csstransition';
import { IconType } from '../utils/utils';

type MessagesSeverityType = 'success' | 'info' | 'warn' | 'error';

Expand All @@ -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'> {
Expand Down

0 comments on commit 3d336ec

Please sign in to comment.