accounts-frontend/packages/app/components/userbar/LoggedInPanel.tsx

import React, { MouseEventHandler } from 'react';
import clsx from 'clsx';
import { AccountSwitcher } from 'app/components/accounts';

import styles from './loggedInPanel.scss';

export default class LoggedInPanel extends React.Component<
    {
        username: string;
    },
    {
        isAccountSwitcherActive: boolean;
    }
> {
    state = {
        isAccountSwitcherActive: false,
    };

    _isMounted: boolean = false;
    el: HTMLElement | null;

    componentDidMount() {
        if (window.document) {
            // @ts-ignore
            window.document.addEventListener('click', this.onBodyClick);
        }

        this._isMounted = true;
    }

    componentWillUnmount() {
        if (window.document) {
            // @ts-ignore
            window.document.removeEventListener('click', this.onBodyClick);
        }

        this._isMounted = false;
    }

    render() {
        const { username } = this.props;
        const { isAccountSwitcherActive } = this.state;

        return (
            <div ref={(el) => (this.el = el)} className={clsx(styles.loggedInPanel)}>
                <div
                    className={clsx(styles.activeAccount, {
                        [styles.activeAccountExpanded]: isAccountSwitcherActive,
                    })}
                >
                    <button className={styles.activeAccountButton} onClick={this.onExpandAccountSwitcher}>
                        <span className={styles.userIcon} />
                        <span className={styles.userName}>{username}</span>
                        <span className={styles.expandIcon} />
                    </button>

                    <div className={clsx(styles.accountSwitcherContainer)}>
                        <AccountSwitcher skin="light" onAfterAction={this.onToggleAccountSwitcher} />
                    </div>
                </div>
            </div>
        );
    }

    toggleAccountSwitcher = () =>
        this._isMounted &&
        this.setState({
            isAccountSwitcherActive: !this.state.isAccountSwitcherActive,
        });

    onToggleAccountSwitcher = () => {
        this.toggleAccountSwitcher();
    };

    onExpandAccountSwitcher = (event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();

        this.toggleAccountSwitcher();
    };

    onBodyClick = createOnOutsideComponentClickHandler(
        () => this.el,
        () => this.state.isAccountSwitcherActive && this._isMounted,
        () => this.toggleAccountSwitcher(),
    );
}

/**
 * Creates an event handling function to handle clicks outside the component
 *
 * The handler will check if current click was outside container el and if so
 * and component isActive, it will call the callback
 *
 * @param  {Function} getEl - the function, that returns reference to container el
 * @param  {Function} isActive - whether the component is active and callback may be called
 * @param  {Function} callback - the callback to call, when there was a click outside el
 *
 * @returns {Function}
 */
function createOnOutsideComponentClickHandler(
    getEl: () => HTMLElement | null,
    isActive: () => boolean,
    callback: () => void,
): MouseEventHandler {
    // TODO: we have the same logic in LangMenu
    // Probably we should decouple this into some helper function
    // TODO: the name of function may be better...
    return (event) => {
        const el = getEl();

        if (isActive() && el) {
            if (!el.contains(event.target as HTMLElement) && el !== event.target) {
                event.preventDefault();

                // add a small delay for the case someone have alredy called toggle
                setTimeout(() => isActive() && callback(), 0);
            }
        }
    };
}