A dismissible alert based on smooth-ui Alert.

DismissableAlert.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Alert, Box } from '@smooth-ui/core-sc';

class DismissableAlert extends Component {

    constructor (props) {

        super(props);

        const { onDismiss, ...rest } = props;

        this.onDismiss = onDismiss;
        this.rest = rest;

    }

    isDismissable () {

        if (this.onDismiss) {
            return <a onClick={this.onDismiss}><i className="far fa-times"></i></a>;
        }

        return '';

    }

    render () {

        return <Alert { ...this.rest }>
            <Box
                display="flex"
                justifyContent="space-between"
            >
                <span>{ this.props.children }</span>
                { this.isDismissable() }
            </Box>
        </Alert>;

    }

}

DismissableAlert.propTypes = {
    children: PropTypes.node.isRequired,
    onDismiss: PropTypes.func.isRequired,
};

export default DismissableAlert;