@roderickhsiao/react-i13n/dist/libs/DebugDashboard.js

[Experiment] React I13n provides a performant and scalable solution to application instrumentation.

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

var _reactDom = require("react-dom");

var _subscribeUiEvent = require("subscribe-ui-event");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

// Dashboard only used in client side, could safely defered load
var Dashboard = /*#__PURE__*/(0, _react.lazy)(function () {
  return Promise.resolve().then(function () {
    return _interopRequireWildcard(require('../components/debug/Dashboard'));
  });
});
var supportClassList = false;
var uniqueId = 0;

function checkHidden(DOMNode) {
  if (DOMNode !== document) {
    var styles = window.getComputedStyle(DOMNode) || {};

    if (styles.display === 'none' || styles.visibility === 'hidden' || styles.opacity === '0') {
      return true;
    }

    return checkHidden(DOMNode.parentNode);
  }

  return false;
}

var changeClassName = function changeClassName(target, action, className) {
  if (target && supportClassList) {
    target.classList[action](className);
  }
};

function setupContainerPosition(DOMNode, container) {
  if (!DOMNode || !container) {
    return;
  }

  var offset = cumulativeOffset(DOMNode);
  var left = offset.left + DOMNode.offsetWidth - 15;

  if (left + 305 > window.innerWidth) {
    var dashboad = container.querySelectorAll('.dashboard')[0];

    if (dashboad) {
      dashboad.style.left = window.innerWidth - (left + 300) - 5 + "px";
    }
  }

  container.style.top = offset.top + "px";
  container.style.left = offset.left + DOMNode.offsetWidth - 15 + "px";
}

function cumulativeOffset(DOMNode) {
  var top = 0;
  var rect = DOMNode.getBoundingClientRect();

  do {
    top += DOMNode.offsetTop || 0;
    DOMNode = DOMNode.offsetParent;
  } while (DOMNode);

  return {
    top: top,
    left: rect.left
  };
}
/**
 * create debug message board for the i13n node
 * @class DebugDashboard
 * @param {Object} i13nNode the i13n node
 * @constructor
 */


var DebugDashboard = function DebugDashboard(i13nNode) {
  var _this = this;

  var DOMNode = i13nNode.getDOMNode();

  if (!DOMNode || checkHidden(DOMNode)) {
    return;
  } // Basic container style


  var container = document.createElement('div');
  container.id = "i13n-debug-" + uniqueId;
  container.style.position = 'absolute';
  container.style['max-width'] = '300px';
  container.style['z-index'] = '10'; // const dashboard = document.createElement('div');

  var model = i13nNode.getMergedModel(true); // check if browser support classList API

  supportClassList = 'classList' in container; // compose model data

  if (!model.position) {
    model.position = {
      value: i13nNode.getPosition(),
      DOMNode: DOMNode
    };
  }

  var handleContainerShow = function handleContainerShow() {
    container.style['z-index'] = '11';
    changeClassName(container, 'add', 'active');
  };

  var handleContainerHide = function handleContainerHide() {
    container.style['z-index'] = '10';
    changeClassName(container, 'remove', 'active');
  };

  var handleOnMount = function handleOnMount() {
    setupContainerPosition(DOMNode, container);
    _this.resizeHandler = (0, _subscribeUiEvent.subscribe)('resize', function () {
      setupContainerPosition(DOMNode, container);
    });
  };

  (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
    fallback: null
  }, /*#__PURE__*/_react["default"].createElement(Dashboard, {
    onMount: handleOnMount,
    title: i13nNode.getText(),
    model: model,
    DOMNode: DOMNode,
    onShow: handleContainerShow,
    onHide: handleContainerHide
  })), container, function () {
    uniqueId++;
    DOMNode.style.transition = 'border 0.05s';
    document.body.appendChild(container);
    _this.container = container;
  });
  changeClassName(document.documentElement, 'add', 'i13n-debug-enabled');
};

DebugDashboard.prototype.destroy = function () {
  if (this.resizeHandler) {
    this.resizeHandler.unsubscribe();
  }

  if (this.container) {
    (0, _reactDom.unmountComponentAtNode)(this.container);
    document.body.removeChild(this.container);
  }
};

var _default = DebugDashboard;
exports["default"] = _default;