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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from "../Layout";
import Tooltip from "../Tooltip/Tooltip";
import "../common/basic.module.css";
import '@zohodesk/variables/assets/colorVariables.module.css';
import '@zohodesk/variables/assets/dotVariables.module.css';
import '@zohodesk/variables/assets/sizeVariables.module.css';
import '@zohodesk/variables/assets/fontsizeVariables.module.css';
import '@zohodesk/variables/es/fontFamilyVariables.module.css';
import '@zohodesk/variables/es/fontWeightVariables.module.css';
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.module.css";
import { getLibraryConfig, setLibraryConfig } from "../Provider/Config";
export default class AppContainer extends React.Component {
  constructor(props) {
    super(props);
    this.setTooltipRef = this.setTooltipRef.bind(this);
    this.handleOver = this.handleOver.bind(this);
    this.mouseOverDispatch = this.mouseOverDispatch.bind(this);
    this.removeTimeout = this.removeTimeout.bind(this);
    this.getContainerRef = this.getContainerRef.bind(this);
    this.timer = null;
    this.tooltipDebounce = getLibraryConfig('tooltipDebounce');
    setLibraryConfig({
      getTooltipContainer: () => this.containerElement
    });
  }

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

  removeTimeout() {
    if (this.timer) {
      this.timer = clearTimeout(this.timer);
    }
  }

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

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

  getContainerRef(ref) {
    let {
      eleRef
    } = this.props;
    this.containerElement = ref;
    eleRef && eleRef(ref);
  }

  setTooltipRef(ref) {
    this.tooltipRef = ref;
  }

  componentDidMount() {
    let {
      needTooltip
    } = this.props;

    if (this.containerElement && needTooltip) {
      this.containerElement.addEventListener('mouseover', this.handleOver, false);
      this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
      this.tooltipRef.observeElement();
    }
  }

  componentWillUnmount() {
    let {
      needTooltip
    } = this.props;

    if (this.containerElement && needTooltip) {
      this.containerElement.removeEventListener('mouseover', this.handleOver, false);
      this.containerElement.removeEventListener('mouseout', this.removeTimeout, false);
      this.tooltipRef.unObserveElement();
    }

    setLibraryConfig({
      getTooltipContainer: () => null
    });
  }

  render() {
    let {
      className,
      children,
      tagName,
      dataId,
      dataSelectorId,
      tooltipClass,
      tooltipParentClass,
      needTooltip,
      customProps
    } = this.props;
    let {
      ContainerProps = {},
      TooltipProps = {},
      ExtraProps = {}
    } = customProps;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
      className: `${style.container} ${className}`,
      dataId: dataId,
      dataSelectorId: dataSelectorId,
      tagName: tagName,
      eleRef: this.getContainerRef
    }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, 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, _extends({
      ref: this.setTooltipRef,
      customClass: tooltipClass
    }, TooltipProps))) : null);
  }

}
AppContainer.propTypes = propTypes;
AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
//   AppContainer.docs = {
//     componentGroup: 'Template',
//     folderName: 'Style Guide'
//   };
// }