Sha256: 5d9bdae256c9a7766afb8749e908060580afdcc03a7f8c3a10472027bb8869a4
Contents?: true
Size: 1.94 KB
Versions: 1102
Compression:
Stored size: 1.94 KB
Contents
import React, { useState } from 'react'
import Button from '../../pb_button/_button'
import FixedConfirmationToast from '../_fixed_confirmation_toast'
const FixedConfirmationToastMultiLine = (props) => {
const [openShort, setOpenShort] = useState(false)
const [openLong, setOpenLong] = useState(false)
const handleClickShort = () => {
setOpenShort(true)
}
const handleClickLong= () => {
setOpenLong(true)
}
const handleCloseShort = () => {
setOpenShort(false)
}
const handleCloseLong= () => {
setOpenLong(false)
}
return (
<>
<Button
onClick={handleClickShort}
text="Short Multiline"
variant="secondary"
{...props}
/>
{' '}
<Button
onClick={handleClickLong}
text="Long Multiline"
variant="secondary"
{...props}
/>
<FixedConfirmationToast
closeable
horizontal='center'
multiLine
onClose={handleCloseShort}
open={openShort}
status='tip'
text='Multi-line is used when the given text will not fit on one line.'
vertical='top'
{...props}
/>
<FixedConfirmationToast
closeable
horizontal='center'
multiLine
onClose={handleCloseLong}
open={openLong}
status='tip'
text='Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.'
vertical='top'
{...props}
/>
</>
)
}
export default FixedConfirmationToastMultiLine
Version data entries
1,102 entries across 1,102 versions & 2 rubygems