Spaces:
Running
Running
File size: 4,435 Bytes
6bcb42f |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import Box from '../box/box.jsx';
import CloseButton from '../close-button/close-button.jsx';
import Spinner from '../spinner/spinner.jsx';
import {AlertLevels} from '../../lib/alerts/index.jsx';
import styles from './alert.css';
const closeButtonColors = {
[AlertLevels.SUCCESS]: CloseButton.COLOR_GREEN,
[AlertLevels.WARN]: CloseButton.COLOR_ORANGE
};
const AlertComponent = ({
content,
closeButton,
extensionName,
iconSpinner,
iconURL,
level,
showDownload,
showSaveNow,
onCloseAlert,
onDownload,
onSaveNow,
onReconnect,
showReconnect
}) => (
<Box
className={classNames(styles.alert, styles[level])}
>
{/* TODO: implement Rtl handling */}
{(iconSpinner || iconURL) && (
<div className={styles.iconSection}>
{iconSpinner && (
<Spinner
className={styles.alertSpinner}
level={level}
/>
)}
{iconURL && (
<img
className={styles.alertIcon}
src={iconURL}
/>
)}
</div>
)}
<div className={styles.alertMessage}>
{extensionName ? (
<FormattedMessage
defaultMessage="Lost connection to {extensionName}."
description="Message indicating that an extension peripheral has been disconnected"
id="tw.alerts.lostPeripheralConnection"
values={{
extensionName: (
`${extensionName}`
)
}}
/>
) : content}
</div>
<div className={styles.alertButtons}>
{showSaveNow && (
<button
className={styles.alertConnectionButton}
onClick={onSaveNow}
>
<FormattedMessage
defaultMessage="Try Again"
description="Button to try saving again"
id="gui.alerts.tryAgain"
/>
</button>
)}
{showDownload && (
<button
className={styles.alertConnectionButton}
onClick={onDownload}
>
<FormattedMessage
defaultMessage="Download"
description="Button to download project locally"
id="gui.alerts.download"
/>
</button>
)}
{showReconnect && (
<button
className={styles.alertConnectionButton}
onClick={onReconnect}
>
<FormattedMessage
defaultMessage="Reconnect"
description="Button to reconnect the device"
id="gui.connection.reconnect"
/>
</button>
)}
{closeButton && (
<Box
className={styles.alertCloseButtonContainer}
>
<CloseButton
className={classNames(styles.alertCloseButton)}
color={closeButtonColors[level]}
size={CloseButton.SIZE_LARGE}
onClick={onCloseAlert}
/>
</Box>
)}
</div>
</Box>
);
AlertComponent.propTypes = {
closeButton: PropTypes.bool,
content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
extensionName: PropTypes.string,
iconSpinner: PropTypes.bool,
iconURL: PropTypes.string,
level: PropTypes.string,
onCloseAlert: PropTypes.func.isRequired,
onDownload: PropTypes.func,
onReconnect: PropTypes.func,
onSaveNow: PropTypes.func,
showDownload: PropTypes.bool,
showReconnect: PropTypes.bool,
showSaveNow: PropTypes.bool
};
AlertComponent.defaultProps = {
level: AlertLevels.WARN
};
export default AlertComponent;
|