@fluentui/react-northstar/dist/es/components/Debug/Debug.js

A themable React component library.

import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import { getCode, keyboardKey } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { EventListener } from '@fluentui/react-component-event-listener';
import { isBrowser } from '../../utils';
import { isDebugEnabled } from '@fluentui/styles';
import { DebugPanel } from './DebugPanel';
import { FiberNavigator } from './FiberNavigator';
import { DebugRect } from './DebugRect';

/* eslint-disable no-console */

var INITIAL_STATE = {
  fiberNav: null,
  selectedFiberNav: null,
  isSelecting: false
};
export var Debug = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Debug, _React$Component);
  function Debug(p, s) {
    var _this;
    _this = _React$Component.call(this, p, s) || this;
    _this.state = INITIAL_STATE;
    _this.debugReactComponent = function (r) {
      if (!r) {
        console.error("No React component selected. Please select a Fluent UI component from the React's Component panel.");
        return;
      }
      if (!r._reactInternalFiber) {
        console.error('React does not provide data for debugging for this component. Try selecting some Fluent UI component.');
        return;
      }
      if (!r.fluentUIDebug) {
        console.error('Not a debuggable component. Try selecting some Fluent UI component.');
        return;
      }
      var fiberNav = FiberNavigator.fromFiber(r._reactInternalFiber);
      _this.setState({
        fiberNav: fiberNav,
        isSelecting: false,
        selectedFiberNav: null
      });
    };
    _this.debugDOMNode = function (domNode) {
      var fiberNav = FiberNavigator.fromDOMNode(domNode);
      if (!fiberNav) {
        console.error('No fiber for dom node', domNode);
        return;
      }
      fiberNav = fiberNav.findOwner(function (fiber) {
        return fiber.fluentUIDebug;
      });
      if (fiberNav !== _this.state.fiberNav) {
        _this.setState({
          fiberNav: fiberNav
        });
      }
    };
    _this.handleKeyDown = function (e) {
      var code = getCode(e);
      switch (code) {
        case keyboardKey.Escape:
          _this.stopSelecting();
          break;
        case keyboardKey.d:
          if (e.altKey && e.shiftKey) {
            _this.startSelecting();
          }
          break;
      }
    };
    _this.handleMouseMove = function (e) {
      _this.debugDOMNode(e.target);
    };
    _this.handleDOMNodeClick = function (e) {
      e.preventDefault();
      e.stopPropagation();
      _this.setState({
        isSelecting: false
      });
    };
    _this.startSelecting = function () {
      var isSelecting = !_this.state.isSelecting;
      _this.setState(Object.assign({}, !isSelecting && INITIAL_STATE, {
        isSelecting: isSelecting
      }));
    };
    _this.stopSelecting = function () {
      _this.setState(INITIAL_STATE);
    };
    _this.selectFiber = function (selectedFiberNav) {
      return _this.setState({
        selectedFiberNav: selectedFiberNav
      });
    };
    _this.changeFiber = function (fiberNav) {
      return _this.setState({
        fiberNav: fiberNav
      });
    };
    _this.positionRight = function () {
      return _this.setState({
        debugPanelPosition: 'right'
      });
    };
    _this.positionLeft = function () {
      return _this.setState({
        debugPanelPosition: 'left'
      });
    };
    _this.close = function () {
      return _this.setState(INITIAL_STATE);
    };
    if (process.env.NODE_ENV !== 'production' && isDebugEnabled && isBrowser()) {
      // eslint-disable-next-line no-undef
      window.openDebugPanel = function () {
        // eslint-disable-next-line no-undef
        _this.debugReactComponent(window.$r);
      };
    }
    return _this;
  }
  var _proto = Debug.prototype;
  _proto.render = function render() {
    var mountDocument = this.props.mountDocument;
    var _this$state = this.state,
      fiberNav = _this$state.fiberNav,
      selectedFiberNav = _this$state.selectedFiberNav,
      isSelecting = _this$state.isSelecting,
      debugPanelPosition = _this$state.debugPanelPosition;
    if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EventListener, {
        listener: this.handleKeyDown,
        target: mountDocument.body,
        type: "keydown"
      }), isSelecting && /*#__PURE__*/React.createElement(EventListener, {
        listener: this.handleMouseMove,
        target: mountDocument.body,
        type: "mousemove"
      }), isSelecting && fiberNav && fiberNav.domNode && /*#__PURE__*/React.createElement(EventListener, {
        listener: this.handleDOMNodeClick,
        target: fiberNav.domNode,
        type: "click"
      }), isSelecting && fiberNav && /*#__PURE__*/React.createElement(DebugRect, {
        fiberNav: fiberNav
      }), selectedFiberNav && /*#__PURE__*/React.createElement(DebugRect, {
        fiberNav: selectedFiberNav
      }), !isSelecting && fiberNav && fiberNav.instance && /*#__PURE__*/React.createElement(DebugPanel, {
        fiberNav: fiberNav,
        onActivateDebugSelectorClick: this.startSelecting,
        onClose: this.close
        // TODO: Integrate CSS in JS Styles for Host Components (DOM nodes)
        // cssStyles={stylesForNode(domNode)}
        ,
        debugData: fiberNav.fluentUIDebug,
        position: debugPanelPosition || 'right',
        onPositionLeft: this.positionLeft,
        onPositionRight: this.positionRight,
        onFiberChanged: this.changeFiber,
        onFiberSelected: this.selectFiber
      }));
    }
    return null;
  };
  return Debug;
}(React.Component);
Debug.defaultProps = {
  // eslint-disable-next-line no-undef
  mountDocument: isBrowser() ? window.document : null
};
Debug.propTypes = {
  mountDocument: PropTypes.object.isRequired
};
//# sourceMappingURL=Debug.js.map