import React, { useCallback, useEffect, useRef } from 'react'; import { bem } from 'utils/bem'; import { Icon } from 'common/components/icon'; import { Button } from 'common/components/button'; import { Body, SmallText } from 'common/components/typography'; import { BEM_CLASS, SConfirmationModal } from './s-confirmation-modal'; import { CONFIRMATION_MODAL_CONTENT_ID } from './constants'; const classes = bem(BEM_CLASS); interface ConfirmationModalProps { className?: string; text: string; isVisible: boolean; action(allow: boolean): void; } export const ConfirmationModal = React.memo(({ className, text, isVisible, action }: ConfirmationModalProps) => { const cancelButtonRef = useRef(null); const confirmButtonRef = useRef(null); const confirmAction = useCallback(() => { action(true); }, [action]); const cancelAction = useCallback(() => { action(false); }, [action]); useEffect(() => { const cancelButtonElement = cancelButtonRef && cancelButtonRef.current; if (cancelButtonElement && isVisible) { cancelButtonElement.focus(); } }, [isVisible]); const onKeyDown = useCallback((event: React.KeyboardEvent) => { if (event.key === 'Tab') { const isCancelFocused = document.activeElement?.isEqualNode(cancelButtonRef.current); if (isCancelFocused) { confirmButtonRef.current?.focus(); } else { cancelButtonRef.current?.focus(); } event.preventDefault(); event.stopPropagation(); } }, []); return (

{text} Are you sure you want to continue?

); });