All files / Toasts ToastContainer.js

100% Statements 5/5
50% Branches 1/2
100% Functions 2/2
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33      21x                 141x                       21x 141x              
import React from 'react';
import classNames from 'classnames';
 
const placements = {
    'top-left': ['top-0', 'left-0'],
    'top-center': ['top-0', 'left-1/2', 'transform', '-translate-x-1/2'],
    'top-right': ['top-0', 'right-0'],
    'bottom-left': ['bottom-0', 'left-0'],
    'bottom-center': ['bottom-0', 'left-1/2', 'transform', '-translate-x-1/2'],
    'bottom-right': ['bottom-0', 'right-0'],
};
 
const classes = (placement, hasToasts, className) => classNames(
    'box-border',
    'max-w-full',
    'max-h-screen',
    'overflow-hidden',
    'fixed',
    'p-2',
    placements[placement],
    (hasToasts) ? null : 'pointer-events-none',
    className,
)
 
export const ToastContainer = ({ hasToasts, placement, className, ...props }) => (
    <div
        className={classes(placement, hasToasts, className)}
        style={{
            zIndex: 1000,
        }}
        {...props}
    />
);