notificationBox.tsx

TLDR

This file contains the implementation of a NotificationBox component, which is a reusable component for displaying notifications with a title, an icon, and content. It also includes some utility functions for rendering the close button.

Methods

There are no additional methods in this file.

Classes

There are no additional classes in this file.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'

import {Utils} from '../../utils'

import IconButton from '../buttons/iconButton'
import CloseIcon from '../icons/close'
import Tooltip from '../tooltip'

import './notificationBox.scss'

type Props = {
    title: string
    icon?: React.ReactNode
    children?: React.ReactNode
    onClose?: () => void
    closeTooltip?: string
    className?: string
}

function renderClose(onClose?: () => void, closeTooltip?: string) {
    if (!onClose) {
        return null
    }

    if (closeTooltip) {
        return (
            <Tooltip title={closeTooltip}>
                <IconButton
                    icon={<CloseIcon/>}
                    onClick={onClose}
                />
            </Tooltip>
        )
    }

    return (
        <IconButton
            icon={<CloseIcon/>}
            onClick={onClose}
        />
    )
}

function NotificationBox(props: Props): JSX.Element {
    const className = Utils.generateClassName({
        NotificationBox: true,
        [props.className || '']: Boolean(props.className),
    })

    return (
        <div className={className}>
            {props.icon &&
                <div className='NotificationBox__icon'>
                    {props.icon}
                </div>}
            <div className='content'>
                <p className='title'>{props.title}</p>
                {props.children}
            </div>
            {renderClose(props.onClose, props.closeTooltip)}
        </div>
    )
}

export default React.memo(NotificationBox)