@fluentui/react-northstar/dist/commonjs/components/Debug/DebugSelector.js

A themable React component library.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.DebugSelector = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _reactComponentEventListener = require("@fluentui/react-component-event-listener");
var _utils = require("../../utils");
var _FiberNavigator = require("./FiberNavigator");
var _DebugRect = require("./DebugRect");
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; }
var INITIAL_STATE = {
  fiberNav: null
};

// TODO: This is a copy and trim-down of Debug.tsx
//       Cleanup and use in Debug.tsx before merge:
//         - Make hotkey invocation generic, or take prop for active state
//           since Debug uses ctrl + 'd' and DebugSelector uses ctrl + 'c' in react-builder
//
var DebugSelector = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(DebugSelector, _React$Component);
  function DebugSelector() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = INITIAL_STATE;
    _this.debugDOMNode = function (domNode) {
      var fiberNav = _FiberNavigator.FiberNavigator.fromDOMNode(domNode);
      if (!fiberNav) {
        // eslint-disable-next-line no-console
        console.error('No fiber for dom node', domNode);
        return;
      }
      fiberNav = _this.props.filter(fiberNav);
      _this.setCurrentFiberNav(fiberNav);
    };
    _this.setCurrentFiberNav = function (fiberNav) {
      _this.setState(function (prevState) {
        var _prevState$fiberNav;
        if ((fiberNav == null ? void 0 : fiberNav.__fiber) !== ((_prevState$fiberNav = prevState.fiberNav) == null ? void 0 : _prevState$fiberNav.__fiber)) {
          _this.props.onHover == null ? void 0 : _this.props.onHover(fiberNav);
          return {
            fiberNav: fiberNav
          };
        }
        return null;
      });
    };
    _this.handleMouseMove = function (e) {
      _this.debugDOMNode(e.target);
    };
    _this.handleMouseLeave = function (e) {
      _this.setCurrentFiberNav(null);
    };
    _this.handleDOMNodeClick = function (e) {
      e.preventDefault();
      e.stopPropagation();
      _this.props.onSelect == null ? void 0 : _this.props.onSelect(_this.state.fiberNav);
    };
    return _this;
  }
  var _proto = DebugSelector.prototype;
  _proto.render = function render() {
    var _this$props = this.props,
      active = _this$props.active,
      mountDocument = _this$props.mountDocument,
      renderLabel = _this$props.renderLabel,
      showBackground = _this$props.showBackground,
      showClassName = _this$props.showClassName,
      showCropMarks = _this$props.showCropMarks,
      showElement = _this$props.showElement;
    var fiberNav = this.state.fiberNav;
    return /*#__PURE__*/React.createElement(React.Fragment, null, active && /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
      listener: this.handleMouseMove,
      target: mountDocument.body,
      type: "mousemove"
    }), active && /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
      listener: this.handleMouseLeave,
      target: mountDocument.body,
      type: "mouseleave"
    }), active && fiberNav && fiberNav.domNode && /*#__PURE__*/React.createElement(_reactComponentEventListener.EventListener, {
      listener: this.handleDOMNodeClick,
      target: fiberNav.domNode,
      type: "click"
    }), active && fiberNav && /*#__PURE__*/React.createElement(_DebugRect.DebugRect, {
      showBackground: showBackground,
      showClassName: showClassName,
      showElement: showElement,
      showCropMarks: showCropMarks,
      fiberNav: fiberNav,
      renderLabel: renderLabel
    }));
  };
  return DebugSelector;
}(React.Component);
exports.DebugSelector = DebugSelector;
DebugSelector.defaultProps = {
  active: false,
  filter: function filter(fiberNav) {
    return fiberNav;
  },
  // eslint-disable-next-line no-undef
  mountDocument: (0, _utils.isBrowser)() ? window.document : null
};
DebugSelector.propTypes = {
  mountDocument: PropTypes.object.isRequired
};
//# sourceMappingURL=DebugSelector.js.map