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

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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = AppContainer;

var _react = _interopRequireWildcard(require("react"));

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _Layout = require("../Layout");

var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));

require("@zohodesk/variables/assets/transitionVariables.module.css");

require("@zohodesk/variables/assets/no_transitionVariables.module.css");

require("../../common/a11y.module.css");

require("../../common/boxShadow.module.css");

var _AppContainerModule = _interopRequireDefault(require("../../AppContainer/AppContainer.module.css"));

var _Config = require("../../Provider/Config");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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); }

function AppContainer(props) {
  var className = props.className,
      children = props.children,
      tagName = props.tagName,
      dataId = props.dataId,
      dataSelectorId = props.dataSelectorId,
      tooltipClass = props.tooltipClass,
      tooltipParentClass = props.tooltipParentClass,
      needTooltip = props.needTooltip,
      customProps = props.customProps,
      eleRef = props.eleRef;
  var _customProps$Containe = customProps.ContainerProps,
      ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
      _customProps$TooltipP = customProps.TooltipProps,
      TooltipProps = _customProps$TooltipP === void 0 ? {} : _customProps$TooltipP,
      _customProps$ExtraPro = customProps.ExtraProps,
      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
  var tooltipRef = (0, _react.useRef)(null);
  var containerElement = (0, _react.useRef)(null);
  var timer = (0, _react.useRef)(null);
  var tooltipDebounce = (0, _react.useRef)((0, _Config.getLibraryConfig)('tooltipDebounce'));
  (0, _react.useLayoutEffect)(function () {
    (0, _Config.setLibraryConfig)({
      getTooltipContainer: function getTooltipContainer() {
        return 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(function () {
      return mouseOverDispatch(e);
    }, tooltipDebounce.current);
  }

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

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

  (0, _react.useEffect)(function () {
    if (containerElement.current && needTooltip) {
      containerElement.current.addEventListener('mouseover', handleOver, false);
      containerElement.current.addEventListener('mouseout', removeTimeout, false);
      tooltipRef.current.observeElement();
    }
  }, []);
  (0, _react.useEffect)(function () {
    return function () {
      if (containerElement.current && needTooltip) {
        containerElement.current.removeEventListener('mouseover', handleOver, false);
        containerElement.current.addEventListener('mouseout', removeTimeout, false);
        tooltipRef.current.unObserveElement();
        (0, _Config.setLibraryConfig)({
          getTooltipContainer: function getTooltipContainer() {
            return null;
          }
        });
      }
    };
  }, []);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
    className: "".concat(_AppContainerModule["default"].container, " ").concat(className),
    dataId: dataId,
    dataSelectorId: dataSelectorId,
    tagName: tagName,
    eleRef: getContainerRef
  }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    flexible: true
  }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
    className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
    "data-id": "".concat(dataId, "_tooltip"),
    "data-test-id": "".concat(dataId, "_tooltip"),
    "data-selector-id": "".concat(dataSelectorId, "_tooltip")
  }), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], _extends({
    ref: setTooltipRef,
    customClass: tooltipClass
  }, TooltipProps))) : null);
}

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