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; |