diginet-core-ui 1.4.39 → 1.4.40

package/src/components/tooltip/index.js

@@ -0,0 +1,580 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+    bgColor,
+    borderRadius4px,
+    boxBorder,
+    breakWord,
+    displayInlineBlock,
+    parseWidthHeight,
+    positionAbsolute,
+    textColor,
+    userSelectNone,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp, randomString } from 'utils';
+
+const defaultViewPadding = 4;
+
+const hiddenPositions = {
+    tooltip: {
+        left: '-10000000px',
+        opacity: 0,
+    },
+    arrow: {
+        border: 'none',
+        left: '-10000000px',
+        opacity: 0,
+        top: '-10000000px',
+    },
+};
+
+const getScrollTop = () => {
+    return window.pageYOffset ?? document.documentElement.scrollTop ?? document.body.scrollTop ?? 0;
+};
+const getScrollLeft = () => {
+    return window.pageXOffset ?? document.documentElement.scrollLeft ?? document.body.scrollLeft ?? 0;
+};
+const getArrowSpacing = (arrow, arrowSize, distance) => {
+    const defaultArrowSpacing = arrow ? arrowSize : 0;
+    return typeof distance === 'number' ? distance : defaultArrowSpacing;
+};
+const parseAlignMode = alignMode => {
+    if (alignMode.split('-').length > 1) {
+        return alignMode.split('-')[1];
+    }
+    return 'middle';
+};
+
+const Tooltip = memo(
+    forwardRef(
+        (
+            {
+                action = {},
+                alignMode,
+                arrow,
+                arrowSize,
+                backgroundColor: backgroundColorProp,
+                children,
+                className,
+                color: colorProp,
+                direction,
+                disabled,
+                disableInteractive,
+                distance,
+                forceDirection,
+                hoverDelay,
+                padding,
+                size,
+                style,
+                tagCreatedName: TagCreatedName,
+                textAlign,
+                title,
+                tooltipMaxWidth,
+                viewportPadding,
+                ...props
+            },
+            reference
+        ) => {
+            const Id = randomString(6, { allowSymbol: false });
+            const IDs = {
+                arrow: 'DGN-UI-tooltip-arrow-' + Id,
+                container: 'DGN-UI-tooltip-container-' + Id,
+                main: 'DGN-UI-tooltip-main-' + Id,
+            };
+
+            const ref = useRef(null);
+            const arrowRef = useRef(null);
+            const tooltipRef = useRef(null);
+            const calculateTimeoutRef = useRef(null);
+            const hoverTimeoutRef = useRef(null);
+
+            const [open, setOpen] = useState(false);
+
+            const theme = useTheme();
+
+            const backgroundColor = getProp(theme.colors, backgroundColorProp, backgroundColorProp);
+            const color = getProp(theme.colors, colorProp, colorProp);
+
+            const _MainCSS = MainCSS(backgroundColor, color, size, padding, textAlign, theme);
+
+            const checkHorizontal = (distance, el, parent) => {
+                const { left, right } = parent.getBoundingClientRect();
+                const clientW = document.documentElement.clientWidth;
+                const deadSpace = Math.min(left, clientW - right);
+                return el.offsetWidth + parent.offsetWidth + distance + viewportPadding + deadSpace < clientW;
+            };
+            const checkParent = (el, parent) => {
+                const { bottom, top } = parent.getBoundingClientRect();
+                const bottomOverhang = bottom > window.innerHeight;
+                const topOverhang = top < 0;
+
+                if (topOverhang && bottomOverhang) {
+                    return true;
+                }
+                if (parent.offsetHeight > el.offsetHeight) {
+                    const halfTargetHeight = parent.offsetHeight / 2;
+                    const arrowFree = arrowSize + 6;
+                    const bOAmount = bottom - window.innerHeight;
+                    const tOAmount = -top;
+                    const centerToBottom = halfTargetHeight - bOAmount;
+                    const centerToTop = halfTargetHeight - tOAmount;
+
+                    return centerToBottom >= arrowFree && centerToTop >= arrowFree;
+                }
+
+                return !bottomOverhang && !topOverhang;
+            };
+            const checkArrowOverhang = arrowStyles => {
+                const scrollLeft = getScrollLeft();
+                const enoughLeft = arrowStyles.position.left - scrollLeft > viewportPadding;
+                const enoughRight =
+                    arrowStyles.position.left + arrowSize * 2 <
+                    scrollLeft + document.documentElement.clientWidth - viewportPadding;
+                return !enoughLeft || !enoughRight;
+            };
+            const getTooltipMaxWidth = () => {
+                return tooltipMaxWidth
+                    ? tooltipMaxWidth
+                    : typeof document !== 'undefined'
+                    ? document.documentElement.clientWidth - viewportPadding * 2
+                    : 300;
+            };
+            const getArrowStyles = (direction, el, parent) => {
+                if (!parent || !arrow) {
+                    return {
+                        position: {
+                            top: 0,
+                            left: -10000000,
+                        },
+                    };
+                }
+
+                const parentRect = parent.getBoundingClientRect();
+                const halfParentH = parent.offsetHeight / 2;
+                const halfParentW = parent.offsetWidth / 2;
+                const scrollTop = getScrollTop();
+                const scrollLeft = getScrollLeft();
+                const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
+                const border = {};
+                const position = {};
+
+                switch (direction) {
+                    case 'right':
+                        border.borderLeft = `${arrowSize}px solid transparent`;
+                        border.borderTop = `${arrowSize}px solid transparent`;
+                        border.borderBottom = `${arrowSize}px solid transparent`;
+                        border.borderRight = `${arrowSize}px solid ${backgroundColor}`;
+                        position.top = el ? parentRect.top + scrollTop + halfParentH - arrowSize - 1 : '-10000000px';
+                        position.left = parentRect.right + scrollLeft - arrowSize + 1;
+                        break;
+                    case 'left':
+                        border.borderRight = `${arrowSize}px solid transparent`;
+                        border.borderTop = `${arrowSize}px solid transparent`;
+                        border.borderBottom = `${arrowSize}px solid transparent`;
+                        border.borderLeft = `${arrowSize}px solid ${backgroundColor}`;
+                        position.top = el ? parentRect.top + scrollTop + halfParentH - arrowSize - 1 : '-10000000px';
+                        position.left = parentRect.left + scrollLeft - arrowSpacing - 1;
+                        break;
+                    case 'up':
+                        border.borderBottom = `${arrowSize}px solid transparent`;
+                        border.borderLeft = `${arrowSize}px solid transparent`;
+                        border.borderRight = `${arrowSize}px solid transparent`;
+                        border.borderTop = `${arrowSize}px solid ${backgroundColor}`;
+                        position.left = el ? parentRect.left + scrollLeft + halfParentW - arrowSize : '-10000000px';
+                        position.top = parentRect.top + scrollTop - arrowSpacing;
+                        break;
+                    case 'down':
+                    default:
+                        border.borderUp = `${arrowSize}px solid transparent`;
+                        border.borderLeft = `${arrowSize}px solid transparent`;
+                        border.borderRight = `${arrowSize}px solid transparent`;
+                        border.borderBottom = `${arrowSize}px solid ${backgroundColor}`;
+                        position.left = el ? parentRect.left + scrollLeft + halfParentW - arrowSize : '-10000000px';
+                        position.top = parentRect.bottom + scrollTop + arrowSpacing + 1 - arrowSize;
+                        break;
+                }
+                return { border, position };
+            };
+            const getDirection = (arrowStyles, currentDirection, el, parent, recursive) => {
+                if (!parent) {
+                    return currentDirection;
+                }
+                const clientW = document.documentElement.clientWidth;
+                const parentRect = parent.getBoundingClientRect();
+                const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
+                const wrapperHeight = el.offsetHeight + arrowSpacing + viewportPadding;
+                const spaceBelow = window.innerHeight - parentRect.bottom;
+                const spaceAbove = parentRect.top;
+                const enoughBelow = spaceBelow >= wrapperHeight;
+                const enoughAbove = spaceAbove >= wrapperHeight;
+                switch (currentDirection) {
+                    case 'right':
+                        if (!checkHorizontal(arrowSpacing, el, parent) || !checkParent(el, parent)) {
+                            return getDirection(arrowStyles, 'down', el, parent, true);
+                        }
+                        if (clientW - parentRect.right < el.offsetWidth + arrowSpacing + viewportPadding) {
+                            return 'left';
+                        }
+                        return 'right';
+                    case 'left':
+                        if (!checkHorizontal(arrowSpacing, el, parent) || !checkParent(el, parent)) {
+                            return getDirection(arrowStyles, 'down', el, parent, true);
+                        }
+                        if (parentRect.left < el.offsetWidth + arrowSpacing + viewportPadding) {
+                            return 'right';
+                        }
+                        return 'left';
+                    case 'up':
+                        if (!recursive && arrowStyles && checkArrowOverhang(arrowStyles)) {
+                            return getDirection(arrowStyles, 'left', el, parent, true);
+                        }
+                        if (!enoughAbove) {
+                            if (enoughBelow) {
+                                return 'down';
+                            }
+                            if (!recursive && arrowStyles && checkHorizontal(arrowSpacing, el, parent)) {
+                                return getDirection(arrowStyles, 'right', el, parent, true);
+                            }
+                        }
+                        return 'up';
+                    case 'down':
+                    default:
+                        if (!recursive && arrowStyles && checkArrowOverhang(arrowStyles)) {
+                            return getDirection(arrowStyles, 'right', el, parent, true);
+                        }
+                        if (!enoughBelow) {
+                            if (enoughAbove) {
+                                return 'up';
+                            }
+                            if (!recursive && arrowStyles && checkHorizontal(arrowSpacing, el, parent)) {
+                                return getDirection(arrowStyles, 'right', el, parent, true);
+                            }
+                        }
+                        return 'down';
+                }
+            };
+            const getVertical = (alignMode, direction, el, parent) => {
+                let left = -10000000,
+                    top;
+                const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
+                if (el) {
+                    const scrollLeft = getScrollLeft();
+                    const parentRect = parent.getBoundingClientRect();
+                    const parentLeft = parentRect.left + scrollLeft;
+                    const halfParentW = parent.offsetWidth / 2;
+                    const tooltipW = Math.min(getTooltipMaxWidth(), el && el.offsetWidth);
+                    const arrowCenter = parentLeft + halfParentW;
+                    const arrowLeft = arrowCenter - arrowSize;
+                    const arrowRight = arrowCenter + arrowSize;
+                    if (alignMode === 'start') {
+                        left = arrow ? Math.min(arrowLeft, parentLeft) : parentLeft;
+                    } else if (alignMode === 'end') {
+                        const rightWithArrow = Math.max(arrowRight, parentLeft + parent.offsetWidth);
+                        const rightEdge = arrow ? rightWithArrow : parentLeft + parent.offsetWidth;
+                        left = Math.max(rightEdge - tooltipW, scrollLeft + viewportPadding);
+                    } else {
+                        const centeredLeft = parentLeft + halfParentW - tooltipW / 2;
+                        const availableLeft = scrollLeft + viewportPadding;
+                        left = Math.max(centeredLeft, availableLeft);
+                    }
+
+                    const rightTooltip = left + tooltipW;
+                    const rightScreen = document.documentElement.clientWidth + scrollLeft - viewportPadding;
+                    const rightOverhang = rightTooltip - rightScreen;
+                    if (rightOverhang > 0) {
+                        left -= rightOverhang;
+                    }
+                    if (direction === 'up') {
+                        top = parentRect.top + getScrollTop() - (el.offsetHeight + arrowSpacing);
+                    } else {
+                        top = parentRect.bottom + getScrollTop() + arrowSpacing;
+                    }
+                }
+                return { left: left + 'px', top: top + 'px' };
+            };
+            const getHorizontal = (alignMode, direction, el, parent) => {
+                let left = -10000000,
+                    top = 0;
+                const arrowSpacing = getArrowSpacing(arrow, arrowSize, distance);
+                const arrowPadding = arrow ? 6 : 0;
+                if (el) {
+                    const scrollLeft = getScrollLeft();
+                    const scrollTop = getScrollTop();
+                    const parentRect = parent.getBoundingClientRect();
+                    const parentTop = parentRect.top + scrollTop;
+                    const halfParentH = parent.offsetHeight / 2;
+                    const arrowTop = parentTop + halfParentH - arrowSize;
+                    const arrowBottom = parentRect.top + scrollTop + halfParentH + arrowSize;
+
+                    if (alignMode === 'start') {
+                        top = arrow ? Math.min(parentTop, arrowTop) : parentTop;
+                    } else if (alignMode === 'end') {
+                        const topForBottomAlign = parentRect.bottom + scrollTop - el.offsetHeight;
+                        top = arrow ? Math.max(topForBottomAlign, arrowBottom - el.offsetHeight) : topForBottomAlign;
+                    } else {
+                        const centeredTop = Math.max(
+                            parentTop + halfParentH - el.offsetHeight / 2,
+                            scrollTop + viewportPadding
+                        );
+                        top = Math.min(centeredTop, arrowTop - arrowPadding);
+                    }
+
+                    const bottomOverhang = top - scrollTop + el.offsetHeight + viewportPadding - window.innerHeight;
+                    if (bottomOverhang > 0) {
+                        top = Math.max(top - bottomOverhang, arrowBottom + arrowPadding - el.offsetHeight);
+                    }
+
+                    if (direction === 'right') {
+                        left = parentRect.right + arrowSpacing + scrollLeft;
+                    } else {
+                        left = parentRect.left - arrowSpacing - el.offsetWidth + scrollLeft;
+                    }
+                }
+
+                return { left: left + 'px', top: top + 'px' };
+            };
+            const getPosition = (el, parent) => {
+                const align = parseAlignMode(alignMode);
+                let trueDirection = direction;
+                const maxWidth = getTooltipMaxWidth() + 'px';
+                let tooltipPosition, width;
+                if (!forceDirection && el) {
+                    const arrowStylesForGetDirection = arrow && getArrowStyles(direction, el, parent);
+                    trueDirection = getDirection(arrowStylesForGetDirection, trueDirection, el, parent, false);
+                }
+                if (el) {
+                    const space = el.style.width ? 0 : 5;
+                    width = Math.min(el.offsetWidth, parseInt(maxWidth)) + space + 'px';
+                    tooltipPosition =
+                        trueDirection === 'up' || trueDirection === 'down'
+                            ? getVertical(align, trueDirection, el, parent)
+                            : getHorizontal(align, trueDirection, el, parent);
+                }
+
+                return {
+                    tooltip: {
+                        ...tooltipPosition,
+                        maxWidth,
+                        width,
+                    },
+                    arrow: getArrowStyles(trueDirection, el, parent),
+                };
+            };
+
+            const onShowTooltip = (arrow, parent) => {
+                if (!tooltipRef.current || !arrowRef.current) return;
+                const arrowEl = arrowRef.current,
+                    el = tooltipRef.current;
+                let positions;
+                clearTimeout(calculateTimeoutRef.current);
+                calculateTimeoutRef.current = setTimeout(() => {
+                    positions = getPosition(el, parent);
+                }, 10);
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = setTimeout(() => {
+                    Object.assign(el.style, positions.tooltip, { opacity: 1 });
+                    if (arrow) {
+                        Object.assign(arrowEl.style, positions.arrow.border, { opacity: 1 });
+                        arrowEl.style.left = positions.arrow.position.left + 'px';
+                        arrowEl.style.top = positions.arrow.position.top + 'px';
+                    } else {
+                        Object.assign(arrowEl.style, hiddenPositions.arrow);
+                    }
+                }, hoverDelay);
+            };
+            const onHideTooltip = () => {
+                if (!tooltipRef.current || !arrowRef.current) return;
+                const arrowEl = arrowRef.current,
+                    el = tooltipRef.current;
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = setTimeout(() => {
+                    Object.assign(el.style, hiddenPositions.tooltip);
+                    Object.assign(arrowEl.style, hiddenPositions.arrow);
+                }, hoverDelay);
+            };
+
+            const setOpenTrue = () => {
+                if (disabled) return;
+                setOpen(true);
+            };
+
+            const setOpenFalse = () => {
+                setOpen(false);
+            };
+
+            useEffect(() => {
+                if (open) {
+                    onShowTooltip(arrow, ref.current);
+                } else {
+                    onHideTooltip();
+                }
+            }, [open]);
+
+            useImperativeHandle(reference, () => {
+                const currentRef = ref.current || {};
+                currentRef.element = ref.current;
+                const _instance = {
+                    ...action,
+                }; // methods
+                _instance.__proto__ = {}; // hidden methods
+                currentRef.instance = _instance;
+                return currentRef;
+            });
+
+            const renderTooltip = useMemo(() => {
+                if (open && title) {
+                    const node = (
+                        <div
+                            className={'DGN-UI-Portal DGN-Tooltip'}
+                            onMouseEnter={() => (disableInteractive ? onHideTooltip() : null)}
+                        >
+                            <span
+                                className={IDs.arrow}
+                                css={ArrowCSS}
+                                ref={arrowRef}
+                                style={{ ...hiddenPositions.arrow }}
+                            />
+                            <span
+                                className={classNames(IDs.main, className)}
+                                css={_MainCSS}
+                                ref={tooltipRef}
+                                style={{ ...hiddenPositions.tooltip }}
+                            >
+                                {title}
+                            </span>
+                        </div>
+                    );
+                    return createPortal(node, document.body);
+                }
+                return null;
+            }, [
+                backgroundColor,
+                className,
+                color,
+                disableInteractive,
+                hoverDelay,
+                padding,
+                size,
+                textAlign,
+                title,
+                open,
+                theme,
+            ]);
+
+            return (
+                <TagCreatedName
+                    ref={ref}
+                    className={IDs.container}
+                    style={style}
+                    onMouseEnter={setOpenTrue}
+                    onMouseLeave={setOpenFalse}
+                    onFocus={setOpenTrue}
+                    onBlur={setOpenFalse}
+                    {...props}
+                >
+                    {children}
+                    {renderTooltip}
+                </TagCreatedName>
+            );
+        }
+    )
+);
+
+const ArrowCSS = css`
+    ${positionAbsolute};
+    ${userSelectNone};
+    ${parseWidthHeight(0)};
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    ${z(5)};
+`;
+
+const MainCSS = (backgroundColor, color, size, padding, textAlign, { typography }) => css`
+    ${displayInlineBlock};
+    ${boxBorder};
+    ${positionAbsolute};
+    ${userSelectNone};
+    ${borderRadius4px};
+    ${size === 'small' ? typography.paragraph3 : typography.paragraph2};
+    ${bgColor(backgroundColor)};
+    ${textColor(color)};
+    padding: ${padding};
+    text-align: ${textAlign};
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    ${breakWord};
+    ${z(4)};
+`;
+
+Tooltip.defaultProps = {
+    alignMode: 'middle',
+    arrow: false,
+    arrowSize: 6,
+    backgroundColor: 'fill/tooltip',
+    className: '',
+    color: 'system/standard',
+    direction: 'down',
+    disabled: false,
+    disableInteractive: false,
+    forceDirection: false,
+    hoverDelay: 50,
+    padding: [1, 1.5],
+    size: 'medium',
+    style: {},
+    tagCreatedName: 'div',
+    textAlign: 'center',
+    viewportPadding: defaultViewPadding,
+};
+
+Tooltip.propTypes = {
+    /** alignMode use to set align-items of the tooltip*/
+    alignMode: PropTypes.oneOf(['flex-end', 'flex-start', 'middle']),
+    /** If true, adds an arrow to the tooltip. */
+    arrow: PropTypes.bool,
+    /** Size of the arrow. */
+    arrowSize: PropTypes.number,
+    /** Background color of the tooltip. */
+    backgroundColor: PropTypes.string,
+    /** Tooltip reference element. */
+    children: PropTypes.node.isRequired,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Color of the title.                                                                                                                                                                                                                                        */
+    color: PropTypes.string,
+    /** Direction of the tooltip. */
+    direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** If `true`, makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip. */
+    disableInteractive: PropTypes.bool,
+    /** Distance between the tooltip and the children. */
+    distance: PropTypes.number,
+    /**  If `true`, set the static direction of the tooltip. */
+    forceDirection: PropTypes.bool,
+    /** The number of milliseconds to wait before showing the tooltip.  */
+    hoverDelay: PropTypes.number,
+    /** Padding of the title. */
+    padding: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    /** The size of the title. */
+    size: PropTypes.oneOf(['small', 'medium']),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Tag name of the element will be created to contain the children. */
+    tagCreatedName: PropTypes.oneOf(['div', 'span']),
+    /** Text align of the title. */
+    textAlign: PropTypes.oneOf(['center', 'justify', 'left', 'right']),
+    /** The title to show in tooltip when hover. */
+    title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
+    /** Max width of the tooltip */
+    tooltipMaxWidth: PropTypes.number,
+    /** Padding of the viewport with the tooltip */
+    viewportPadding: PropTypes.number,
+};
+
+export default Tooltip;