53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classnames from 'classnames'
|
|
|
|
export const AlertPropType = PropTypes.shape({
|
|
dismissable: PropTypes.bool,
|
|
action: PropTypes.string.isRequired,
|
|
message: PropTypes.string.isRequired
|
|
})
|
|
|
|
export class Alert extends React.PureComponent {
|
|
static propTypes = {
|
|
alert: AlertPropType,
|
|
dismiss: PropTypes.func.isRequired
|
|
}
|
|
dismiss = () => {
|
|
const { alert, dismiss } = this.props
|
|
dismiss(alert)
|
|
}
|
|
render () {
|
|
const { alert } = this.props
|
|
|
|
return (
|
|
<div className={classnames('alert', alert.type)}>
|
|
<span>{alert.message}</span>
|
|
{alert.dismissable && (
|
|
<button
|
|
className="action-alert-dismiss"
|
|
onClick={this.dismiss}
|
|
>{alert.action}</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default class Alerts extends React.PureComponent {
|
|
static propTypes = {
|
|
alerts: PropTypes.arrayOf(AlertPropType).isRequired,
|
|
dismiss: PropTypes.func.isRequired
|
|
}
|
|
render () {
|
|
const { alerts, dismiss } = this.props
|
|
return (
|
|
<div className="alerts">
|
|
{alerts.map((alert, i) => (
|
|
<Alert alert={alert} dismiss={dismiss} key={i} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
}
|