Sha256: 54d53115eea9d054d9f194e682e3432de1d2bb5695a13f021070e7d463133d10
Contents?: true
Size: 1.83 KB
Versions: 100
Compression:
Stored size: 1.83 KB
Contents
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 ( <> {showToast && ( <div className={css} onClick={handleClick}> {icon && <Icon className="pb_icon" fixedWidth icon={icon} />} <Title className="pb_fixed_confirmation_toast_text" size={4} text={text} /> {closeable && ( <Icon className="pb_icon" fixedWidth={false} icon="times" /> )} </div> )} </> ); }; export default FixedConfirmationToast;
Version data entries
100 entries across 100 versions & 1 rubygems