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 | 5x 4x 4x 4x 1x 1x | import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ButtonIcon from '../button-icons/';
const Alert = props => {
const { type, children, isLegacy } = props;
const alertTypeClass = classNames(
type === 'warning' && 'slds-alert_warning',
type === 'error' && 'slds-alert_error',
type === 'offline' && 'slds-alert_offline'
);
const alertLegacyTypeClass = classNames(
isLegacy && 'slds-theme_alert-texture',
type === 'info' && isLegacy && 'slds-theme_info',
type === 'warning' && isLegacy && 'slds-theme_warning',
type === 'error' && isLegacy && 'slds-theme_error',
type === 'offline' && isLegacy && 'slds-theme_offline'
);
return (
<div
className={classNames(
'slds-notify slds-notify_alert',
alertTypeClass,
alertLegacyTypeClass
)}
role="alert"
>
<span className="slds-assistive-text">{type}</span>
{children}
<div className="slds-notify__close">
<ButtonIcon
className={classNames(
type !== 'warning' && 'slds-button_icon-inverse'
)}
symbol="close"
assistiveText="Close"
title="Close"
size="small"
/>
</div>
</div>
);
};
Alert.propTypes = {
type: PropTypes.oneOf(['info', 'warning', 'error', 'offline']),
children: PropTypes.node,
isLegacy: PropTypes.bool
};
Alert.defaultProps = {
type: 'info'
};
export default Alert;
|