From 08a3fcdc83b121d8156f64d1fde4b420da88291c Mon Sep 17 00:00:00 2001 From: habubey Date: Thu, 1 Sep 2022 00:15:55 +0300 Subject: [PATCH] #3196: Fixed svg icon issue and adjusted docs --- components/doc/messages/index.js | 150 +++++++++++++++----------- components/lib/message/Message.js | 27 ++--- pages/messages/custom-icon-active.png | Bin 0 -> 4157 bytes pages/messages/index.js | 4 +- 4 files changed, 107 insertions(+), 74 deletions(-) create mode 100644 pages/messages/custom-icon-active.png diff --git a/components/doc/messages/index.js b/components/doc/messages/index.js index 88acac70c5..d1471b8422 100644 --- a/components/doc/messages/index.js +++ b/components/doc/messages/index.js @@ -15,6 +15,9 @@ import { Messages } from 'primereact/messages'; import { Message } from 'primereact/message'; import { InputText } from 'primereact/inputtext'; import { Button } from 'primereact/button'; +import getConfig from 'next/config'; +import * as CustomImage from './custom-icon-active.png'; +import Image from 'next/image'; export class MessagesDemo extends Component { @@ -82,7 +85,7 @@ export class MessagesDemo extends Component {
- + } text="Message Content" />
@@ -118,49 +121,71 @@ export class MessagesDemo extends Component { tabName: 'Hooks Source', content: ` import React, { useEffect, useRef } from 'react'; -import { Messages } from 'primereact/messages'; -import { Message } from 'primereact/message'; -import { InputText } from 'primereact/inputtext'; -import { Button } from 'primereact/button'; - +import { Messages } from '../../components/lib/messages/Messages'; +import { Message } from '../../components/lib/message/Message'; +import { InputText } from '../../components/lib/inputtext/InputText'; +import { Button } from '../../components/lib/button/Button'; +import MessagesDoc from '../../components/doc/messages'; +import { DocActions } from '../../components/doc/common/docactions'; +import Head from 'next/head'; +import getConfig from 'next/config'; +import * as CustomImage from './custom-icon-active.png'; +import Image from 'next/image'; + const MessagesDemo = () => { - const msgs1 = useRef(null); - const msgs2 = useRef(null); - const msgs3 = useRef(null); - - useEffect(() => { - msgs1.current.show([ - { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true }, - { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true }, - { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true }, - { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true } - ]); - - msgs3.current.show({ - severity: 'info', sticky: true, content: ( - - logo e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" /> -
Always bet on Prime.
- - ) - }); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const addMessages = () => { - msgs2.current.show([ - { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true }, - { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true }, - { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true }, - { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true } - ]); - } - - const clearMessages = () => { - msgs2.current.clear(); - } +const msgs1 = useRef(null); +const msgs2 = useRef(null); +const msgs3 = useRef(null); +const contextPath = getConfig().publicRuntimeConfig.contextPath; + +useEffect(() => { + msgs1.current.show([ + { severity: 'success', icon: 'pi pi-apple', summary: 'Success', detail: 'Message Content', sticky: true }, + { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true }, + { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true }, + { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true } + ]); + + msgs3.current.show({ + severity: 'info', + sticky: true, + content: ( + + logo (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} width="32" /> +
Always bet on Prime.
+ + ) + }); +}, []); // eslint-disable-line react-hooks/exhaustive-deps + +const addMessages = () => { + msgs2.current.show([ + { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true }, + { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true }, + { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true }, + { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true } + ]); +}; + +const clearMessages = () => { + msgs2.current.clear(); +}; + +return ( +
+ + React Messages Component + + +
+
+

Messages

+

Messages is used to display inline messages with various severities.

+
+ +
- return ( -
+
Severities
@@ -181,24 +206,28 @@ const MessagesDemo = () => {
- + } text="Message Content" />
- +
- +
Validation Message
- +
- +
@@ -207,13 +236,17 @@ const MessagesDemo = () => {
- Username is not available. + + Username is not available. +
- ) -} - ` +
+); +}; + +` }, ts: { tabName: 'TS Source', @@ -223,6 +256,9 @@ import { Messages } from 'primereact/messages'; import { Message } from 'primereact/message'; import { InputText } from 'primereact/inputtext'; import { Button } from 'primereact/button'; +import getConfig from 'next/config'; +import * as CustomImage from './custom-icon-active.png'; +import Image from 'next/image'; const MessagesDemo = () => { const msgs1 = useRef(null); @@ -285,7 +321,7 @@ const MessagesDemo = () => {
- + } text="Message Content" />
@@ -387,10 +423,10 @@ const MessagesDemo = () => {
- + } width="20px" height="20px" />
- +
@@ -720,12 +756,6 @@ messages.current.show({ life: 5000, severity: 'error', summary: 'Error Message', null Unique identifier of the element. - - icon - string - null - Customize icon class of icon attributes - className string diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js index 54e4fe511c..3021f36aab 100644 --- a/components/lib/message/Message.js +++ b/components/lib/message/Message.js @@ -5,36 +5,39 @@ export const Message = React.memo( React.forwardRef((props, ref) => { const elementRef = React.useRef(null); + + React.useImperativeHandle(ref, () => ({ + props, + getElement: () => elementRef.current + })); + const createIcon = () => { return IconUtils.getJSXIcon(props.icon, { ...props.iconProps }); }; const createContent = () => { + const customIcon = createIcon(); if (props.content) { return ObjectUtils.getJSXElement(props.content, props); } const text = ObjectUtils.getJSXElement(props.text, props); const icon = classNames('p-inline-message-icon pi', { - '': props.severity === 'info', - '': props.severity === 'warn', - '': props.severity === 'error', - '': props.severity === 'success' + 'pi-info-circle': props.severity === 'info', + 'pi-exclamation-triangle': props.severity === 'warn', + 'pi-times-circle': props.severity === 'error', + 'pi-check': props.severity === 'success' }); + return ( <> - + {props.icon ? {customIcon} : } {text} ); }; - React.useImperativeHandle(ref, () => ({ - props, - getElement: () => elementRef.current - })); - const otherProps = ObjectUtils.findDiffKeys(props, Message.defaultProps); const className = classNames( 'p-inline-message p-component', @@ -48,11 +51,9 @@ export const Message = React.memo( props.className ); const content = createContent(); - const icon = createIcon(); return ( ); @@ -68,7 +69,7 @@ Message.defaultProps = { text: null, severity: null, content: null, - icon: 'pi pi-info-circle', + icon: null, iconProps: null, iconPos: 'left' }; diff --git a/pages/messages/custom-icon-active.png b/pages/messages/custom-icon-active.png new file mode 100644 index 0000000000000000000000000000000000000000..ca38b0d290264d6bb588d814d9b91bd57eb9c82b GIT binary patch literal 4157 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 literal 0 HcmV?d00001 diff --git a/pages/messages/index.js b/pages/messages/index.js index 62e8d41cbc..a300fd242f 100644 --- a/pages/messages/index.js +++ b/pages/messages/index.js @@ -7,6 +7,8 @@ import MessagesDoc from '../../components/doc/messages'; import { DocActions } from '../../components/doc/common/docactions'; import Head from 'next/head'; import getConfig from 'next/config'; +import * as CustomImage from './custom-icon-active.png'; +import Image from 'next/image'; const MessagesDemo = () => { const msgs1 = useRef(null); @@ -82,7 +84,7 @@ const MessagesDemo = () => {
- + } text="Message Content" />