import classNames from 'classnames'; import { ReactNode, useRef } from 'react'; import useKey from 'react-use/lib/useKey'; import styled from 'styled-components'; import { SessionIconButton } from './icon'; import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton'; import { StyledRootDialog } from './dialog/StyledRootDialog'; import { SessionFocusTrap } from './SessionFocusTrap'; import { Flex } from './basic/Flex'; import { SpacerXL } from './basic/Text'; const StyledTitle = styled.div` white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0 var(--margins-sm); `; export type SessionWrapperModalType = { title?: string; showHeader?: boolean; onConfirm?: () => void; onClose?: (event?: KeyboardEvent) => void; showClose?: boolean; confirmText?: string; cancelText?: string; showExitIcon?: boolean; headerIconButtons?: Array; children: ReactNode; headerReverse?: boolean; additionalClassName?: string; }; export const SessionWrapperModal = (props: SessionWrapperModalType) => { const { title, onConfirm, onClose, showHeader = true, showClose = false, confirmText, cancelText, showExitIcon, headerIconButtons, headerReverse, additionalClassName, } = props; useKey( 'Esc', event => { props.onClose?.(event); }, undefined, [props.onClose] ); useKey( 'Escape', event => { props.onClose?.(event); }, undefined, [props.onClose] ); const modalRef = useRef(null); const handleClick = (e: any) => { if (!modalRef.current?.contains(e.target)) { props.onClose?.(); } }; return (
{showHeader ? ( {showExitIcon ? ( { props.onClose?.(); }} padding={'5px'} margin={'0'} dataTestId="modal-close-button" /> ) : null} {headerIconButtons?.length ? headerIconButtons.map((_, index) => { const offset = showExitIcon ? headerIconButtons.length - 2 : headerIconButtons.length - 1; if (index > offset) { return null; } return ; }) : null} {title} {headerIconButtons?.length ? ( headerIconButtons.map((iconItem: any) => { return ( ); }) ) : showExitIcon ? ( ) : null} ) : null}
{props.children}
{onConfirm ? ( {confirmText || window.i18n('okay')} ) : null} {onClose && showClose ? ( {cancelText || window.i18n('close')} ) : null}
); };