Untitled

import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { Messages } from 'primereact/messages';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import { v4 as uuidv4 } from 'uuid';

/** PrimeMessages Component */
const PrimeMessages = (props) => {
    const messagesRef = useRef(null);

    const { id, severity, summary, detail, sticky, closable, life, ...rest } = props;

    // Show the message in the Messages component
    const showMessage = () => {
        if (messagesRef.current) {
            messagesRef.current.show({
                id: id ? id : uuidv4() + '_messages',
                severity: severity,
                summary: summary,
                detail: detail,
                closable: closable,
                sticky: sticky,
                life: sticky ? 0 : life, // `life` is used to control how long the message is shown (in milliseconds), if not sticky
            });
        }
    };

    // Effectively, this function can be triggered via events or other components
    React.useEffect(() => {
        showMessage();
    }, [severity, summary, detail, sticky, closable, life]);

    return (
        <Messages ref={messagesRef} {...rest} />
    );
};

PrimeMessages.propTypes = {
    id: PropTypes.string,
    severity: PropTypes.string,   // info, success, warn, error, etc.
    summary: PropTypes.string,    // Summary of the message
    detail: PropTypes.string,     // Detail of the message
    sticky: PropTypes.bool,       // If true, the message remains until manually dismissed
    closable: PropTypes.bool,     // If true, the message has a close button
    life: PropTypes.number,       // The duration in milliseconds for which the message is shown (if not sticky)
};

PrimeMessages.defaultProps = {
    severity: 'info',
    summary: '',
    detail: '',
    sticky: false,
    closable: true,
    life: 3000, // Default duration is 3 seconds if not sticky
};

// Wrap in PrimeWrapper if needed
export default PrimeWrapper(PrimeMessages);






import React, { useState } from 'react';
import PrimeMessages from './PrimeMessages';

const TestPrimeMessages = () => {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <h5>Severity props usage</h5>
            <PrimeMessages severity="info" summary="Info" detail="Info Message" />
            <PrimeMessages severity="success" summary="Success" detail="Success Message" />
            <PrimeMessages severity="warn" summary="Warning" detail="Warning Message" />
            <PrimeMessages severity="error" summary="Error" detail="Error Message" />
            <PrimeMessages severity="secondary" summary="Secondary" detail="Secondary Message" />
            <PrimeMessages severity="contrast" summary="Contrast" detail="Contrast Message" />

            <h5>Sticky messages</h5>
            <PrimeMessages severity="info" summary="Sticky Info" detail="This message will stay" sticky={true} />

            <h5>Closable messages</h5>
            <PrimeMessages severity="success" summary="Success" detail="This message can be closed" closable={true} />
            <PrimeMessages severity="warn" summary="Warning" detail="This message can't be closed" closable={false} />

            <h5>Life of messages</h5>
            <PrimeMessages severity="error" summary="Error" detail="This message will disappear after 2 seconds" life={2000} />
        </div>
    );
};

export default TestPrimeMessages;