@fluentui/react-northstar
Version:
A themable React component library.
107 lines (105 loc) • 4.03 kB
JavaScript
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { EventListener } from '@fluentui/react-component-event-listener';
import { isBrowser } from '../../utils';
import { FiberNavigator } from './FiberNavigator';
import { DebugRect } from './DebugRect';
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
//
export var DebugSelector = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(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.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(EventListener, {
listener: this.handleMouseMove,
target: mountDocument.body,
type: "mousemove"
}), active && /*#__PURE__*/React.createElement(EventListener, {
listener: this.handleMouseLeave,
target: mountDocument.body,
type: "mouseleave"
}), active && fiberNav && fiberNav.domNode && /*#__PURE__*/React.createElement(EventListener, {
listener: this.handleDOMNodeClick,
target: fiberNav.domNode,
type: "click"
}), active && fiberNav && /*#__PURE__*/React.createElement(DebugRect, {
showBackground: showBackground,
showClassName: showClassName,
showElement: showElement,
showCropMarks: showCropMarks,
fiberNav: fiberNav,
renderLabel: renderLabel
}));
};
return DebugSelector;
}(React.Component);
DebugSelector.defaultProps = {
active: false,
filter: function filter(fiberNav) {
return fiberNav;
},
// eslint-disable-next-line no-undef
mountDocument: isBrowser() ? window.document : null
};
DebugSelector.propTypes = {
mountDocument: PropTypes.object.isRequired
};
//# sourceMappingURL=DebugSelector.js.map