@roderickhsiao/react-i13n/dist/components/debug/Dashboard.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 _propTypes = _interopRequireDefault(require("prop-types"));

var _TriggerNode = _interopRequireDefault(require("./TriggerNode"));

var _DashboardContainer = _interopRequireDefault(require("./DashboardContainer"));

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

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.
 */
var DISPLAY_NONE = 'none';
var DISPLAY_BLOCK = 'block';

var Dashboard = function Dashboard(props) {
  var onShow = props.onShow,
      onHide = props.onHide,
      title = props.title,
      model = props.model,
      DOMNode = props.DOMNode,
      onMount = props.onMount;

  var _useState = (0, _react.useState)(DISPLAY_NONE),
      display = _useState[0],
      setDisplay = _useState[1];

  var style = {
    fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif",
    position: 'relative',
    display: display,
    color: 'rgba(255,255,255,.87)',
    fontSize: '14px',
    width: '100%',
    marginTop: '2px',
    zIndex: 1
  };
  var handleOnClick = (0, _react.useCallback)(function () {
    if (display === DISPLAY_NONE) {
      setDisplay(DISPLAY_BLOCK);
      onShow();
    } else {
      setDisplay(DISPLAY_NONE);
      onHide();
    }
  }, [display]);
  var handleMouseOver = (0, _react.useCallback)(function () {
    if (DOMNode) {
      DOMNode.style.outline = '2px solid #b39ddb';
    }
  }, []);
  var handleMouseOut = (0, _react.useCallback)(function () {
    if (DOMNode) {
      DOMNode.style.outline = null;
    }
  }, []);
  (0, _react.useEffect)(function () {
    onMount();
  }, []);
  return /*#__PURE__*/_react["default"].createElement("div", {
    onFocus: handleMouseOver,
    onMouseOver: handleMouseOver,
    onBlur: handleMouseOut,
    onMouseOut: handleMouseOut
  }, /*#__PURE__*/_react["default"].createElement(_TriggerNode["default"], {
    onClick: handleOnClick
  }), /*#__PURE__*/_react["default"].createElement("div", {
    style: style,
    className: "dashboard"
  }, /*#__PURE__*/_react["default"].createElement(_DashboardContainer["default"], {
    title: title,
    model: model,
    DOMNode: DOMNode
  })));
};

Dashboard.propTypes = {
  model: _propTypes["default"].shape().isRequired,
  onHide: _propTypes["default"].func.isRequired,
  onMount: _propTypes["default"].func.isRequired,
  onShow: _propTypes["default"].func.isRequired,
  title: _propTypes["default"].string.isRequired
};
var _default = Dashboard;
exports["default"] = _default;