@zohodesk/components/es/v1/AppContainer/AppContainer.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { useEffect, useRef, useLayoutEffect } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from "../Layout";
import Tooltip from "../Tooltip/Tooltip";
import '@zohodesk/variables/assets/transitionVariables.module.css';
import '@zohodesk/variables/assets/no_transitionVariables.module.css';
import "../../common/a11y.module.css";
import "../../common/boxShadow.module.css";
import style from "../../AppContainer/AppContainer.module.css";
import { getLibraryConfig, setLibraryConfig } from "../../Provider/Config";
export default function AppContainer(props) {
  let {
    className,
    children,
    tagName,
    dataId,
    dataSelectorId,
    tooltipClass,
    tooltipParentClass,
    needTooltip,
    customProps,
    eleRef
  } = props;
  let {
    ContainerProps = {},
    TooltipProps = {},
    ExtraProps = {}
  } = customProps;
  const tooltipRef = useRef(null);
  const containerElement = useRef(null);
  const timer = useRef(null);
  const tooltipDebounce = useRef(getLibraryConfig('tooltipDebounce'));
  useLayoutEffect(() => {
    setLibraryConfig({
      getTooltipContainer: () => containerElement.current
    });
  }, []);

  function mouseOverDispatch(e) {
    if (tooltipRef.current) {
      tooltipRef.current.handleOver(e, containerElement.current);
    }
  }

  function removeTimeout() {
    if (timer.current) {
      timer.current = clearTimeout(timer.current);
    }
  }

  function handleOver(e) {
    if (timer.current) {
      timer.current = clearTimeout(timer.current);
    }

    timer.current = setTimeout(() => mouseOverDispatch(e), tooltipDebounce.current);
  }

  function getContainerRef(ref) {
    containerElement.current = ref;
    eleRef && eleRef(ref);
  }

  function setTooltipRef(ref) {
    tooltipRef.current = ref;
  }

  useEffect(() => {
    if (containerElement.current && needTooltip) {
      containerElement.current.addEventListener('mouseover', handleOver, false);
      containerElement.current.addEventListener('mouseout', removeTimeout, false);
      tooltipRef.current.observeElement();
    }
  }, []);
  useEffect(() => {
    return () => {
      if (containerElement.current && needTooltip) {
        containerElement.current.removeEventListener('mouseover', handleOver, false);
        containerElement.current.addEventListener('mouseout', removeTimeout, false);
        tooltipRef.current.unObserveElement();
        setLibraryConfig({
          getTooltipContainer: () => null
        });
      }
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
    className: `${style.container} ${className}`,
    dataId: dataId,
    dataSelectorId: dataSelectorId,
    tagName: tagName,
    eleRef: getContainerRef,
    ...ContainerProps,
    ...ExtraProps
  }, /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
    className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
    "data-id": `${dataId}_tooltip`,
    "data-test-id": `${dataId}_tooltip`,
    "data-selector-id": `${dataSelectorId}_tooltip`
  }, /*#__PURE__*/React.createElement(Tooltip, {
    ref: setTooltipRef,
    customClass: tooltipClass,
    ...TooltipProps
  })) : null);
}
AppContainer.propTypes = propTypes;
AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
//   AppContainer.docs = {
//     componentGroup: 'Template',
//     folderName: 'Style Guide'
//   };
// }