stream-chat-react/dist/components/Modal/Modal.js

React components to create chat conversations or livestream style chat

import clsx from 'clsx';
import { useCallback } from 'react';
import React, { useEffect, useRef } from 'react';
import { FocusScope } from '@react-aria/focus';
import { CloseIconRound } from './icons';
import { useTranslationContext } from '../../context';
export const Modal = ({ children, className, onClose, onCloseAttempt, open, }) => {
    const { t } = useTranslationContext('Modal');
    const innerRef = useRef(null);
    const closeButtonRef = useRef(null);
    const maybeClose = useCallback((source, event) => {
        const allow = onCloseAttempt?.(source, event);
        if (allow !== false) {
            onClose?.(event);
        }
    }, [onClose, onCloseAttempt]);
    const handleClick = (event) => {
        const target = event.target;
        if (!innerRef.current || !closeButtonRef.current)
            return;
        if (closeButtonRef.current.contains(target)) {
            maybeClose('button', event);
        }
        else if (!innerRef.current.contains(target)) {
            maybeClose('overlay', event);
        }
    };
    useEffect(() => {
        if (!open)
            return;
        const handleKeyDown = (event) => {
            if (event.key === 'Escape')
                maybeClose('escape', event);
        };
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [maybeClose, open]);
    if (!open)
        return null;
    return (React.createElement("div", { className: clsx('str-chat__modal str-chat__modal--open', className), onClick: handleClick },
        React.createElement(FocusScope, { autoFocus: true, contain: true },
            React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeButtonRef, title: t('Close') },
                React.createElement(CloseIconRound, null)),
            React.createElement("div", { className: 'str-chat__modal__inner str-chat-react__modal__inner', ref: innerRef }, children))));
};