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

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

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

/**
 * Copyright 2015 - Present, Yahoo Inc.
 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
 */
import React, { Suspense, lazy } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { subscribe } from 'subscribe-ui-event'; // Dashboard only used in client side, could safely defered load

var Dashboard = /*#__PURE__*/lazy(() => Promise.resolve().then(() => _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 = (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 = "".concat(window.innerWidth - (left + 300) - 5, "px");
    }
  }

  container.style.top = "".concat(offset.top, "px");
  container.style.left = "".concat(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,
    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 DOMNode = i13nNode.getDOMNode();

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


  var container = document.createElement('div');
  container.id = "i13n-debug-".concat(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
    };
  }

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

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

  var handleOnMount = () => {
    setupContainerPosition(DOMNode, container);
    this.resizeHandler = subscribe('resize', () => {
      setupContainerPosition(DOMNode, container);
    });
  };

  render( /*#__PURE__*/React.createElement(Suspense, {
    fallback: null
  }, /*#__PURE__*/React.createElement(Dashboard, {
    onMount: handleOnMount,
    title: i13nNode.getText(),
    model,
    DOMNode,
    onShow: handleContainerShow,
    onHide: handleContainerHide
  })), container, () => {
    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) {
    unmountComponentAtNode(this.container);
    document.body.removeChild(this.container);
  }
};

export default DebugDashboard;