Skip to content

Commit

Permalink
Fix #4350: Update messages examples and useMountEffect (#4364)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored May 9, 2023
1 parent d168af8 commit 8f75eec
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 52 deletions.
21 changes: 12 additions & 9 deletions components/doc/messages/basicdoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
import { useEffect, useRef } from 'react';
import { useRef } from 'react';
import { useMountEffect } from '../../lib/hooks/Hooks';
import { Messages } from '../../lib/messages/Messages';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function BasicDoc(props) {
const msgs = useRef(null);

useEffect(() => {
msgs.current.show({ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false });
}, []); // eslint-disable-line react-hooks/exhaustive-deps
useMountEffect(() => {
msgs.current && msgs.current.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false });
});

const code = {
basic: `
<Messages ref={msgs} />
`,
javascript: `
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function BasicDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current.show(
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }
);
}, []);
});
return (
<div className="card flex justify-content-center">
Expand All @@ -36,16 +38,17 @@ export default function BasicDemo() {
`,
typescript: `
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function BasicDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current.show(
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }
);
}, []);
});
return (
<div className="card flex justify-content-center">
Expand Down
21 changes: 12 additions & 9 deletions components/doc/messages/closeabledoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { useEffect, useRef } from 'react';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';
import { useRef } from 'react';
import { useMountEffect } from '../../lib/hooks/Hooks';
import { Messages } from '../../lib/messages/Messages';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function ClosableDoc(props) {
const msgs = useRef(null);

useEffect(() => {
useMountEffect(() => {
msgs.current.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Closable Message' },
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Not Closable Message', closable: false }
]);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
});

const code = {
basic: `
Expand All @@ -22,17 +23,18 @@ msgs.current.show([
`,
javascript: `
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function ClosableDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Closable Message'},
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Not Closable Message', closable: false}
]);
}, []);
});
return (
<div className="card">
Expand All @@ -43,18 +45,19 @@ export default function ClosableDemo() {
`,
typescript: `
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function ClosableDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current?.show([
msgs.current.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Closable Message'},
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Not Closable Message', closable: false}
]);
}, []);
};
return (
<div className="card">
Expand Down
21 changes: 12 additions & 9 deletions components/doc/messages/severitydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import { useEffect, useRef } from 'react';
import { useRef } from 'react';
import { useMountEffect } from '../../lib/hooks/Hooks';
import { Messages } from '../../lib/messages/Messages';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function SeverityDoc(props) {
const msgs = useRef(null);

useEffect(() => {
useMountEffect(() => {
msgs.current.show([
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
]);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
});

const code = {
basic: `
Expand All @@ -25,41 +26,43 @@ msgs.current.show([
]);
`,
javascript: `
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function SeverityDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current.show([
{sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false},
{sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false},
{sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false},
{sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false}
]);
}, []);
});
return (
<Messages ref={msgs} />
)
}
`,
typescript: `
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function SeverityDemo() {
const msgs = useRef<Messages>(null);
useEffect(() => {
useMountEffect(() => {
msgs.current?.show([
{sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content'},
{sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'},
{sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'},
{sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'}
]);
}, []);
});
return (
<Messages ref={msgs} />
Expand Down
27 changes: 14 additions & 13 deletions components/doc/messages/stickydoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
import { useEffect, useRef } from 'react';
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';
import { useRef } from 'react';
import { useMountEffect } from '../../lib/hooks/Hooks';
import { Messages } from '../../lib/messages/Messages';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function StickyDoc(props) {
const msgs = useRef(null);

useEffect(() => {
useMountEffect(() => {
msgs.current.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
]);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
});

const code = {
basic: `
useEffect(() => {
msgs.current.show([
msgs.current.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
]);
}, []);
]);
`,
javascript: `
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function StickyDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
]);
}, []);
});
return (
<div className="card">
Expand All @@ -51,19 +51,20 @@ export default function StickyDemo() {
`,
typescript: `
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function StickyDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current?.show([
{ sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
{ sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
]);
}, []);
});
return (
<div className="card">
Expand Down
23 changes: 12 additions & 11 deletions components/doc/messages/templatedoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { useEffect, useRef } from 'react';
import React, { useRef } from 'react';
import { useMountEffect } from '../../lib/hooks/Hooks';
import { Messages } from '../../lib/messages/Messages';
import { DocSectionCode } from '../common/docsectioncode';
import { DocSectionText } from '../common/docsectiontext';

export function TemplateDoc(props) {
const msgs = useRef(null);

useEffect(() => {
useMountEffect(() => {
msgs.current.show({
severity: 'info',
sticky: true,
Expand All @@ -17,11 +18,10 @@ export function TemplateDoc(props) {
</React.Fragment>
)
});
}, []);
});

const code = {
basic: `
useEffect(() => {
msgs.current.show({
severity: 'info',
sticky: true,
Expand All @@ -32,16 +32,16 @@ useEffect(() => {
</React.Fragment>
)
});
}, []);
`,
javascript: `
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function TemplateDemo() {
const msgs = useRef(null);
useEffect(() => {
useMountEffect(() => {
msgs.current.show({
severity: 'info', sticky: true, content: (
<React.Fragment>
Expand All @@ -50,7 +50,7 @@ export default function TemplateDemo() {
</React.Fragment>
)
});
}, []);
});
return (
<div className="card">
Expand All @@ -60,13 +60,14 @@ export default function TemplateDemo() {
}
`,
typescript: `
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { useMountEffect } from 'primereact/hooks';
import { Messages } from 'primereact/messages';
export default function TemplateDemo() {
const msgs = useRef<Messages>(null);
useEffect(() => {
useMountEffect(() => {
msgs.current?.show({
severity: 'info', sticky: true, content: (
<React.Fragment>
Expand All @@ -75,7 +76,7 @@ export default function TemplateDemo() {
</React.Fragment>
)
});
}, []);
});
return (
<div className="card">
Expand Down
17 changes: 16 additions & 1 deletion components/lib/hooks/useMountEffect.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
/* eslint-disable */
import * as React from 'react';

export const useMountEffect = (fn) => React.useEffect(fn, []);
/**
* Custom hook to run a mount effect only once. Accounts for React 18 Strict Mode by making sure it only runs exactly once.
* @param {*} fn the callback function
* @returns the hook
*/
export const useMountEffect = (fn) => {
const mounted = React.useRef(false);
return React.useEffect(() => {
if (!mounted.current) {
mounted.current = true;
return fn && fn();
}

return;
}, []);
};
/* eslint-enable */
4 changes: 4 additions & 0 deletions components/lib/toast/toast.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ import { IconType } from '../utils/utils';
* Message options for toast component
*/
export interface ToastMessage {
/**
* Unique id of the message.
*/
id?: string | undefined;
/**
* Severity of the message.
*/
Expand Down

0 comments on commit 8f75eec

Please sign in to comment.