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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 17x 2x 2x 2x 2x 2x | import { FC, ReactNode } from 'react';
import cn from 'classnames';
import WindowHeader from './window-header';
import WindowFooter from './window-footer';
import '../../styles/components/window.scss';
type WindowProps = {
width?: string;
height?: string;
title?: string;
withHeaderCloseButton?: boolean;
withFooterCloseButton?: boolean;
onWindowOpen?: () => void;
onWindowClose?: () => void;
withShadow?: boolean;
className?: string;
actionButtons?: ReactNode;
children?: ReactNode;
};
const Window: FC<WindowProps> = ({
width = '50vw',
height = '50vh',
title,
withHeaderCloseButton = false,
withFooterCloseButton = false,
onWindowOpen,
onWindowClose,
actionButtons,
withShadow = false,
className,
children,
}) => {
const styles = {
width,
minHeight: height,
top: `calc((80vh - ${height}) / 2)`,
left: `calc((100vw - ${width}) / 2)`,
};
const baseClassName = 'window';
const cssClasses = cn(baseClassName, className, {
[`${baseClassName}--with-shadow`]: !!withShadow,
});
onWindowOpen?.();
return (
<div className={cssClasses} style={styles}>
{title && (
<WindowHeader
title={title}
withCloseButton={withHeaderCloseButton}
onWindowClose={onWindowClose}
/>
)}
<div className="window__content">{children}</div>
{(withFooterCloseButton || actionButtons) && (
<WindowFooter
withCloseButton={withFooterCloseButton}
onWindowClose={onWindowClose}
>
{actionButtons && actionButtons}
</WindowFooter>
)}
</div>
);
};
export default Window;
|