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

Version Path
playbook_ui_docs-13.24.0.pre.alpha.play1305drycontenttag2689 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.24.0.pre.alpha.play1305drycontenttag2689 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.24.0.pre.alpha.PLAY1181circleiconkitfixsizingerrorglobalspacingprops2675 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.24.0.pre.alpha.PLAY1181circleiconkitfixsizingerrorglobalspacingprops2675 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.23.0.pre.alpha.PLAY1284investigation2657 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.23.0.pre.alpha.PLAY1284investigation2657 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.24.0 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.24.0 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.22.0.pre.alpha.pbntr254barchartnegativenumber2640 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.22.0.pre.alpha.pbntr254barchartnegativenumber2640 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.22.0.pre.alpha.PLAY1297updatetextstyles2636 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.22.0.pre.alpha.PLAY1297updatetextstyles2636 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.22.0.pre.alpha.playbookgemspecrailsversion2608 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.22.0.pre.alpha.playbookgemspecrailsversion2608 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui_docs-13.23.0 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
playbook_ui-13.23.0 app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx