You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.4 KiB
51 lines
1.4 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import classnames from 'classnames'
|
|
|
|
export default function ActionableMessage ({
|
|
message = '',
|
|
primaryAction = null,
|
|
secondaryAction = null,
|
|
className = '',
|
|
}) {
|
|
return (
|
|
<div className={classnames('actionable-message', className)}>
|
|
<div className="actionable-message__message">
|
|
{message}
|
|
</div>
|
|
{(primaryAction || secondaryAction) && (
|
|
<div className="actionable-message__actions">
|
|
{primaryAction && (
|
|
<div
|
|
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
|
|
onClick={primaryAction.onClick}
|
|
>
|
|
{primaryAction.label}
|
|
</div>
|
|
)}
|
|
{secondaryAction && (
|
|
<div
|
|
className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
|
|
onClick={secondaryAction.onClick}
|
|
>
|
|
{secondaryAction.label}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
ActionableMessage.propTypes = {
|
|
message: PropTypes.string.isRequired,
|
|
primaryAction: PropTypes.shape({
|
|
label: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}),
|
|
secondaryAction: PropTypes.shape({
|
|
label: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}),
|
|
className: PropTypes.string,
|
|
}
|
|
|