@selfcommunity/react-ui/lib/esm/shared/CustomSnackMessage/index.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback } from 'react';
import { useSnackbar, SnackbarContent } from 'notistack';
import { styled } from '@mui/material/styles';
import { CardContent, IconButton } from '@mui/material';
import Icon from '@mui/material/Icon';
import Widget from '../../components/Widget';
const PREFIX = 'SCCustomSnackMessage';
const classes = {
    root: `${PREFIX}-root`,
    card: `${PREFIX}-card`,
    content: `${PREFIX}-content`,
    close: `${PREFIX}-close`
};
const Root = styled(SnackbarContent, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
/**
 * Custom Snackbar for notistack messages
 * Use this component:
 *  - pass this component as property 'content' in the 'options' of enqueueSnackbar
 *
 * This component add a CloseIcon button on the top-right corner
 * and attach a close handler that close the snackMessage identified as props.id
 */
const CustomSnackMessage = forwardRef((props, ref) => {
    const { closeSnackbar } = useSnackbar();
    const handleDismiss = useCallback(() => {
        closeSnackbar(props.id);
    }, [props.id, closeSnackbar]);
    return (_jsx(Root, Object.assign({ ref: ref, className: classes.root }, { children: _jsx(Widget, Object.assign({ className: classes.card }, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(IconButton, Object.assign({ className: classes.close, onClick: handleDismiss }, { children: _jsx(Icon, { children: "close" }) })), props.message] })) })) }), props.id));
});
export default CustomSnackMessage;