@equinor/fusion-react-ag-grid-person-cell/dist/PersonPopover.js

React component for displaying person details in AgGrid cell and PersonCard on cell hover

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState, useEffect, useCallback, } from 'react';
import { Popover } from '@equinor/eds-core-react';
import { tokens } from '@equinor/eds-tokens';
import { PersonCard } from '@equinor/fusion-react-person';
import styled from 'styled-components';
const Styled = {
    Popover: styled(Popover) `
    border-radius: ${tokens.spacings.comfortable.small};
    div:last-child > div {
      padding: 0;
    }
  `,
    Container: styled.div `
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  `,
    HoverArea: styled.div `
    display: flex;
  `,
};
export const PersonPopover = ({ azureId, upn, dataSource, children, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const anchorRef = useRef(null);
    const openTimeout = useRef(null);
    const closeTimeout = useRef(null);
    const clearTimeouts = useCallback(() => {
        if (openTimeout.current) {
            clearTimeout(openTimeout.current);
            openTimeout.current = null;
        }
        if (closeTimeout.current) {
            clearTimeout(closeTimeout.current);
            closeTimeout.current = null;
        }
    }, []);
    const handleOpen = useCallback(() => {
        clearTimeouts();
        openTimeout.current = window.setTimeout(() => setIsOpen(true), 200);
    }, [clearTimeouts]);
    const handleClose = useCallback(() => {
        clearTimeouts();
        closeTimeout.current = window.setTimeout(() => setIsOpen(false), 200);
    }, [clearTimeouts]);
    useEffect(() => {
        return clearTimeouts;
    }, [clearTimeouts]);
    return (_jsxs(Styled.Container, { onMouseEnter: handleOpen, onMouseLeave: handleClose, children: [_jsx(Styled.Popover, { anchorEl: anchorRef.current, open: isOpen, placement: "top", onClose: () => setIsOpen(false), children: _jsx(Popover.Content, { children: _jsx(PersonCard, { size: "medium", azureId: azureId, upn: upn, dataSource: dataSource }) }) }), _jsx(Styled.HoverArea, { ref: anchorRef, "aria-haspopup": "true", "aria-expanded": isOpen, children: children })] }));
};
PersonPopover.displayName = 'PersonPopover';