Fixed Confirmation Toast

import React from 'react'

import FixedConfirmationToast from 'playbook-ui'

const FixedConfirmationToastDefault = (props) => {
  return (
    <div>
      <div>
        <FixedConfirmationToast
            closeable
            status="error"
            text="Error Message"
        />
      </div>

      <br />

      <div>
        <FixedConfirmationToast
            status="success"
            text="Items Successfully Moved"
        />
      </div>

      <br />

      <div>
        <FixedConfirmationToast
            status="neutral"
            text="Scan to Assign Selected Items"
        />
      </div>
    </div>
  )
}

export default FixedConfirmationToastDefault

import React from 'react'

import FixedConfirmationToast from 'playbook-ui'

const FixedConfirmationToastMultiLine = (props) => {
  return (
    <div>
      <FixedConfirmationToast
          multiLine
          status="tip"
          text="Scan to Assign Selected Items. Click here to generate report"
      />
    </div>
  )
}

export default FixedConfirmationToastMultiLine

import React from 'react'

import FixedConfirmationToast from 'playbook-ui'

const FixedConfirmationToastClose = (props) => {
  return (
    <div>
      <div>
        <FixedConfirmationToast
            closeable
            status="error"
            text="Error Message"
        />
      </div>

      <br />

      <div>
        <FixedConfirmationToast
            closeable
            status="success"
            text="Items Successfully Moved"
        />
      </div>

      <br />

      <div>
        <FixedConfirmationToast
            closeable
            status="neutral"
            text="Scan to Assign Selected Items"
        />
      </div>
    </div>
  )
}

export default FixedConfirmationToastClose

import React, { useState } from 'react'

import Button from 'playbook-ui'
import FixedConfirmationToast from 'playbook-ui'

const FixedConfirmationToastPositions = (props) => {
  const [state, setState] = useState({
    open: false,
    vertical: 'top',
    horizontal: 'center',
  })

  const { vertical, horizontal, open } = state

  const handleClick = (newState) => () => {
    setState({ open: true, ...newState })
  }

  const handleClose = () => {
    setState({ ...state, open: false })
  }

  return (
    <div>
      <Button
          onClick={handleClick({
            horizontal: 'center',
            open: true,
            vertical: 'top',
          })}
          text="Top Center"
          variant="secondary"
      />
      {' '}
      <Button
          onClick={handleClick({
            horizontal: 'left',
            open: true,
            vertical: 'top',
          })}
          text="Top Left"
          variant="secondary"
      />
      {' '}
      <Button
          onClick={handleClick({
            horizontal: 'right',
            open: true,
            vertical: 'top',
          })}
          text="Top Right"
          variant="secondary"
      />
      {' '}
      <Button
          onClick={handleClick({
            horizontal: 'center',
            open: true,
            vertical: 'bottom',
          })}
          text="Bottom Center"
          variant="secondary"
      />
      {' '}
      <Button
          onClick={handleClick({
            horizontal: 'left',
            open: true,
            vertical: 'bottom',
          })}
          text="Bottom Left"
          variant="secondary"
      />
      {' '}
      <Button
          onClick={handleClick({
            horizontal: 'right',
            open: true,
            vertical: 'bottom',
          })}
          text="Bottom Right"
          variant="secondary"
      />

      <FixedConfirmationToast
          closeable
          horizontal={horizontal}
          onClose={handleClose}
          open={open}
          status="neutral"
          text={`${vertical} ${horizontal}`}
          vertical={vertical}
      />
    </div>
  )
}

export default FixedConfirmationToastPositions

import React, { useState } from 'react'

import Button from 'playbook-ui'
import FixedConfirmationToast from 'playbook-ui'

const FixedConfirmationToastAutoClose = (props) => {

    const [open, setOpen] = useState(false)
    const [openCloseable, setOpenCloseable] = useState(false)

    const handleClick = () => {
        setOpen(true)
    }
    const handleClickCloseable = () => {
        setOpenCloseable(true)
    }

    const handleClose = () => {
        setOpen(false)
    }

    const handleCloseCloseable = () => {
        setOpenCloseable(false)
    }

    return (
        <>
            <Button
                onClick={handleClick}
                text="Show Auto Close Toast"
                variant="secondary"
            />
            {' '}
            <Button
                onClick={handleClickCloseable}
                text="Show Closeable Auto Close Toast"
                variant="secondary"
            />

            <FixedConfirmationToast
                autoClose={3000}
                horizontal='center'
                onClose={handleClose}
                open={open}
                status='tip'
                text='I will disappear in 3 seconds.'
                vertical='top'
            />

            <FixedConfirmationToast
                autoClose={10000}
                closeable
                horizontal='center'
                onClose={handleCloseCloseable}
                open={openCloseable}
                status='tip'
                text='I will disappear in 10 seconds.'
                vertical='top'
            />
        </>
    )
}

export default FixedConfirmationToastAutoClose