Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import React from 'react';
import './styles.scss';
import Icon from '../Icon/Icon';
import { useDeviceInfo } from '../../utils';
export interface Props {
type: 'page' | 'toast';
priority: 'info' | 'critical' | 'warning' | 'success';
title?: string | string[];
body: string | JSX.Element | (string | JSX.Element)[];
actionText?: string;
actionHandler?: () => void;
pageButtons?: JSX.Element[];
showCloseButton?: boolean;
onClose?: () => void;
}
export default function Message(props: Props): JSX.Element | null {
const { type, priority, title, body, actionText, actionHandler, pageButtons, showCloseButton, onClose } = props;
const { isMobile } = useDeviceInfo();
return (
<div className={`tw-message tw-message--${type} tw-message--${priority} ${isMobile ? 'tw-message--mobile' : ''}`}>
{type === 'toast' && (
<div className='tw-message--left-side'>
<Icon name={priority} className='left-side--icon' />
</div>
)}
<div className='tw-message--container'>
<div className='tw-message--main-content'>
{type === 'page' && <Icon name={priority} className='main-content--icon' />}
<div className='tw-message--main-body'>
{title && (
<div className='tw-message--title-container'>
<h4>{title}</h4>
</div>
)}
{typeof body === 'string' ? <p>{body}</p> : body}
{type === 'page' && pageButtons && pageButtons.length > 0 ? (
<div className='tw-message--actions-container'>
{pageButtons?.map((pageButton, index) => {
const pageButtonWithKey = {
...pageButton,
key: `page-button-${index}`,
props: { ...pageButton.props, size: pageButton.props.size || 'medium' },
};
return pageButtonWithKey;
})}
</div>
) : null}
</div>
</div>
{type === 'toast' && actionText ? (
<button onClick={actionHandler} className='tw-message--action-text'>
{actionText}
</button>
) : showCloseButton ? (
<button onClick={onClose} className='icon-container'>
<Icon name='close' className='page-message--close-icon' />
</button>
) : null}
</div>
</div>
);
}
|