All files / Components/Flyout Flyout.js

100% Statements 19/19
100% Branches 10/10
100% Functions 4/4
100% Lines 19/19

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54          1x       8x   8x 8x   8x 3x 3x   3x 3x 3x       8x 3x 2x 2x   1x 1x   3x     8x                     8x              
import React, { useContext, useEffect } from 'react';
import classNames from 'classnames';
 
import { WebAppsUXContext } from '../../Context';
 
const Flyout = props => {
    const {
        children,
        ...rest
    } = props;
 
    const { breakpoint, isBreakpoint, useFlyouts } = useContext(WebAppsUXContext);
    const { flyout, setFlyout } = useFlyouts;
 
    useEffect(() => {
        flyout.active = true;
        setFlyout({ ...flyout });
 
        return () => {
            flyout.active = false;
            setFlyout({ ...flyout });
        }
    }, []);
 
    useEffect(() => {
        if (isBreakpoint('lg')) {
            flyout.display_mode = 'side';
            flyout.opened = false;
        } else {
            flyout.display_mode = 'overlay';
            flyout.opened = false;
        }
        setFlyout({ ...flyout });
    }, [breakpoint]);
 
    const classes = classNames(
        'webapps-flyout',
        'h-full', 'flex', 'flex-col',
        (flyout.display_mode === 'side') ? '' : 'webapps-flyout-overlay',
        (flyout.display_mode === 'side')
            ? (flyout.opened)
                ? 'w-1/2' : 'w-0'
            : (flyout.opened)
                ? 'w-full' : 'w-0'
    )
 
    return (
        <div className={classes} {...rest}>
            {children}
        </div>
    );
}
 
export default Flyout;