components.snippets.Alerts.Alert.jsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
There is a newer version: 7.28.3
import React, { useState, useCallback } from 'react'
import { withTranslation } from 'react-i18next'

import { LoaderAlert } from './LoaderAlert'
import { DefaultAlert } from './DefaultAlert'
import { AlertTypes } from './AlertsTypes'

/**
 * Компонент сообщения-алерта
 * @reactProps {string} title - лейбл алерта
 * @reactProps {string} text - текст алерта
 * @reactProps {string} severity - тип алерта: 'info', 'danger', 'warning' или 'success'.
 * @reactProps {string} stacktrace - подробности, находятся под текстом, показываются (скрываются) по клику на выделенный текст
 * @reactProps {boolean} closeButton - отображать кнопку скрытия алерта или нет
 * @reactProps {boolean} onDismiss - выполняется при скрытии алерта
 * @reactProps {boolean} className - css-класс
 * @reactProps {number} style -  объект css стилей
 * @reactProps {boolean} visible - флаг видимости
 * @reactProps {boolean} animate - флаг включения анимации при появлении
 * @example 
 */

function Alert(props) {
    const {
        loader,
        title: propsTitle,
        text: propsText,
        severity,
        href,
        timestamp,
        closeButton,
        className,
        style,
        animate,
        t,
        stacktrace,
        onDismiss,
        stopRemoving,
        placement,
    } = props

    const [stacktraceVisible, setStacktraceVisible] = useState(false)

    const togglingStacktrace = useCallback(() => {
        setStacktraceVisible(!stacktraceVisible)
        stopRemoving()
    }, [stacktraceVisible, stopRemoving])

    const formattingDetails = useCallback((stacktrace) => {
        if (!stacktrace) {
            return null
        }

        if (Array.isArray(stacktrace)) {
            return stacktrace.join('\r\n')
        }

        return stacktrace
    }, [])

    const { visible } = props

    if (!visible) {
        return null
    }

    const text = propsText === 0 ? String(propsText) : propsText

    if (loader) {
        return (
            
        )
    }

    const title = propsTitle === 0 ? String(propsTitle) : propsTitle

    return (
        
    )
}
Alert.defaultProps = {
    text: '',
    title: '',
    severity: 'danger',
    details: '',
    closeButton: false,
    visible: true,
    onDismiss: () => {},
    stopRemoving: () => {},
    position: 'relative',
    animate: false,
    t: () => {
    },
    placement: 'top',
}

Alert.propTypes = AlertTypes

export default withTranslation()(Alert)