Sha256: be8859628669b5581199cbc810142ee2d570a8631fb4c60cb67b4f94cfc2c5e8
Contents?: true
Size: 1.98 KB
Versions: 70
Compression:
Stored size: 1.98 KB
Contents
/* @flow */
import React, { useEffect, useState } from 'react'
import classnames from 'classnames'
import { globalProps } from '../utilities/globalProps'
import Icon from '../pb_icon/_icon'
import Title from '../pb_title/_title'
const iconMap = {
success: 'check',
error: 'exclamation-triangle',
neutral: 'info-circle',
tip: 'info-circle',
}
type FixedConfirmationToastProps = {
className?: string,
closeable?: boolean,
data?: string,
horizontal?: 'right' | 'left' | 'center',
id?: string,
multiLine?: boolean,
onClose?: () => void,
open?: boolean,
status?: 'success' | 'error' | 'neutral' | 'tip',
text: string,
vertical?: 'top' | 'bottom',
}
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
const [showToast, toggleToast] = useState(true)
const {
className,
closeable = false,
horizontal,
multiLine = false,
onClose = () => {},
open = true,
status = 'neutral',
text,
vertical,
} = props
const css = classnames(
`pb_fixed_confirmation_toast_kit_${status}`,
{ '_multi_line': multiLine },
{ [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
globalProps(props),
className
)
const icon = iconMap[status]
useEffect(() => {
toggleToast(open)
}, [open])
const handleClick = () => {
toggleToast(!closeable)
onClose()
}
return (
<If condition={showToast}>
<div
className={css}
onClick={handleClick}
>
<If condition={icon}>
<Icon
className="pb_icon"
fixedWidth
icon={icon}
/>
</If>
<Title
className="pb_fixed_confirmation_toast_text"
size={4}
text={text}
/>
<If condition={closeable}>
<Icon
className="pb_icon"
fixedWidth={false}
icon="times"
/>
</If>
</div>
</If>
)
}
export default FixedConfirmationToast
Version data entries
70 entries across 70 versions & 1 rubygems