diginet-core-ui 1.3.24

package/components/tooltip/index.js

@@ -0,0 +1,602 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useRef, useState } from 'react';
+import Portal from './portal';
+import { randomString } from '../../utils';
+import theme from '../../theme/settings';
+import { jsx, css } from '@emotion/core';
+const defaultColor = 'rgba(255, 255, 255, 0.9)';
+const defaultBg = 'rgba(21, 26, 48, 0.9)';
+const defaultViewPadding = 4;
+
+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 getScrollParent = (element) => {
+// 	const style = getComputedStyle(element);
+// 	let scrollParent = window;
+// 	if (style.position !== 'fixed') {
+// 		let parent = element.parentElement;
+// 		while (parent) {
+// 			const parentStyle = getComputedStyle(parent);
+// 			if (/(auto|scroll)/.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
+// 				scrollParent = parent;
+// 				parent = undefined;
+// 			} else {
+// 				parent = parent.parentElement;
+// 			}
+// 		}
+// 	}
+// 	return scrollParent;
+// };
+
+
+const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    alignMode,
+    arrow,
+    arrowSize,
+    backgroundColor,
+    children,
+    color,
+    direction,
+    distance,
+    size,
+    forceDirection,
+    hoverDelay,
+    onToggle,
+    padding,
+    style,
+    tagCreatedName: TagCreatedName,
+    textAlign,
+    title,
+    tooltipMaxWidth,
+    viewportPadding,
+    ...other
+  } = props;
+  const Id = randomString(length = 6, {
+    allowSymbol: false
+  }),
+        IDs = {
+    arrow: 'DCUI-tooltip-arrow-' + Id,
+    container: 'DCUI-tooltip-container-' + Id,
+    main: 'DCUI-tooltip-main-' + Id
+  },
+        arrowRef = useRef(null),
+        containerRef = useRef(null),
+        tooltipRef = useRef(null),
+        containerProps = { ...other,
+    ref: ref || containerRef,
+    className: IDs.container,
+    style: {
+      boxSizing: 'border-box',
+      height: 'max-content',
+      position: 'relative',
+      width: 'max-content',
+      ...style
+    }
+  },
+        hiddenPositions = {
+    tooltip: {
+      left: '-10000000px',
+      opacity: 0
+    },
+    arrow: {
+      border: 'none',
+      left: '-10000000px',
+      opacity: 0,
+      top: '-10000000px'
+    }
+  },
+        [existed, setExisted] = useState(false);
+  let calculateTimeout, hoverTimeout, tooltip;
+  const styles = {
+    arrow: css`
+            height     : 0;
+            opacity    : 0;
+            position   : absolute;
+            transition : opacity 0.1s ease-in-out;
+            user-select: none;
+            width      : 0;
+            z-index    : 9005;
+        `,
+    main: css`
+            background-color: ${backgroundColor};
+            border-radius   : 3px;
+            box-sizing      : border-box;
+            color           : ${color};
+            display         : inline-block;
+            font-family     : ${theme.typography.fontFamily};
+            font-size       : ${size === 'small' ? 12 : 14}px;
+            opacity         : 0;
+            padding         : ${padding};
+            position        : absolute;
+            text-align      : ${textAlign};
+            transition      : opacity 0.1s ease-in-out;
+            user-select     : none;
+            word-wrap       : break-word;
+            z-index         : 9004;
+        `
+  };
+
+  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 wrapperHight = el.offsetHeight + arrowSpacing + viewportPadding;
+    const spaceBelow = window.innerHeight - parentRect.bottom;
+    const spaceAbove = parentRect.top;
+    const enoughBelow = spaceBelow >= wrapperHight;
+    const enoughAbove = spaceAbove >= wrapperHight;
+
+    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, 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 onSettingTooltip = (arrow, parent) => {
+    if (!existed) {
+      setExisted(true);
+      onShowTooltip(arrow, parent);
+    } else {
+      onShowTooltip(arrow, parent);
+    }
+
+    ;
+  };
+
+  const onShowTooltip = (arrow, parent) => {
+    if (!tooltipRef.current || !arrowRef.current) return;
+    const arrowEl = arrowRef.current,
+          el = tooltipRef.current;
+    let positions;
+    clearTimeout(calculateTimeout);
+    calculateTimeout = setTimeout(() => {
+      positions = getPosition(el, parent);
+    }, 10);
+    clearTimeout(hoverTimeout);
+    hoverTimeout = 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(hoverTimeout);
+    hoverTimeout = setTimeout(() => {
+      Object.assign(el.style, hiddenPositions.tooltip);
+      Object.assign(arrowEl.style, hiddenPositions.arrow);
+    }, hoverDelay);
+  }; // const handleEvent = (arrow, parent) => {
+  //     onHideTooltip();
+  //     onShowTooltip(arrow, parent);
+  // };
+
+
+  tooltip = existed && title ? jsx(Portal, {
+    id: 'DGN-UI-Portal'
+  }, jsx("span", {
+    className: IDs.arrow,
+    css: styles.arrow,
+    ref: arrowRef,
+    style: { ...hiddenPositions.arrow
+    }
+  }), jsx("span", {
+    className: IDs.main,
+    css: styles.main,
+    ref: tooltipRef,
+    style: { ...hiddenPositions.tooltip
+    }
+  }, title)) : null;
+  useEffect(() => {
+    const parent = containerProps.ref.current; // const scrollableParent = getScrollParent(parent);
+
+    parent.addEventListener('mouseenter', () => onSettingTooltip(arrow, parent)); // parent.addEventListener('touchstart', () => onSettingTooltip(arrow, parent), { passive: true });
+
+    parent.addEventListener('mouseleave', () => onHideTooltip()); // parent.addEventListener('touchend', () => onHideTooltip(), { passive: true });
+    // window.addEventListener('resize', handleEvent(arrow, parent));
+    // scrollableParent.addEventListener('scroll', handleEvent(arrow, parent));
+
+    return () => {
+      parent.removeEventListener('mouseenter', () => onSettingTooltip(arrow, parent)); // parent.removeEventListener('touchstart', () => onSettingTooltip(arrow, parent), { passive: true });
+
+      parent.removeEventListener('mouseleave', () => onHideTooltip()); // parent.removeEventListener('touchend', () => onHideTooltip(), { passive: true });
+      // window.removeEventListener('resize', handleEvent(arrow, parent));
+      // scrollableParent.removeEventListener('scroll', handleEvent(arrow, parent));
+
+      clearTimeout(calculateTimeout);
+      clearTimeout(hoverTimeout);
+    };
+  }, []);
+  return jsx(TagCreatedName, containerProps, children, tooltip);
+}));
+Tooltip.defaultProps = {
+  alignMode: 'middle',
+  arrow: false,
+  arrowSize: 6,
+  backgroundColor: defaultBg,
+  color: defaultColor,
+  direction: 'down',
+  size: 'medium',
+  forceDirection: false,
+  hoverDelay: 50,
+  padding: '4px 6px',
+  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']),
+
+  /** arrow use to turn on or off the arrow */
+  arrow: PropTypes.bool,
+
+  /** arrowSize use to set size for the arrow*/
+  arrowSize: PropTypes.number,
+
+  /** backgroundColor is a string, it's background color of the tooltip */
+  backgroundColor: PropTypes.string,
+
+  /** children is a node, you want to contain */
+  children: PropTypes.node.isRequired,
+
+  /** color is a string, it's color of the title */
+  color: PropTypes.string,
+
+  /** initialize direction of the tooltip */
+  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
+
+  /** distance between the tooltip and the children */
+  distance: PropTypes.number,
+
+  /** size of the title */
+  size: PropTypes.oneOf(['small', 'medium']),
+
+  /** forceDirection use to set the static direction of the tooltip */
+  forceDirection: PropTypes.bool,
+
+  /** hoverDelay (ms) use to set the delay of the tooltip is should be more than 50ms, because the tooltip need a small time to calculate the position */
+  hoverDelay: PropTypes.number,
+
+  /** padding is string like CSS, use to set the padding of the title */
+  padding: PropTypes.string,
+
+  /** style is a object like style-inline, use to set the style for the element will be created to contain the children */
+  style: PropTypes.object,
+
+  /** tagName of the element will be created to contain the children */
+  tagCreatedName: PropTypes.oneOf(['div', 'span']),
+
+  /** textAlign use to set 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,
+
+  /** tooltipMaxWidth is a number to set the max-width of the tooltip */
+  tooltipMaxWidth: PropTypes.number,
+
+  /** viewportPadding is a number to set the padding of the viewport with the tooltip */
+  viewportPadding: PropTypes.number
+};
+export default Tooltip;