@fluentui/react-northstar
Version:
A themable React component library.
89 lines (88 loc) • 2.65 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { DebugLine } from './DebugLine';
import { ScrollToBottom } from './ScrollToBottom';
var style = {
padding: '8px',
whiteSpace: 'pre',
lineHeight: 1.4,
background: '#222',
overflowY: 'auto',
color: '#CCC',
fontFamily: 'monospace',
fontWeight: 'bold'
};
export var DebugComponentViewer = function DebugComponentViewer(props) {
var fiberNav = props.fiberNav,
onFiberChanged = props.onFiberChanged,
onFiberSelected = props.onFiberSelected;
var ownerNav = fiberNav.owner || {
jsxString: 'unknown'
};
var parentNavs = [];
if (fiberNav.owner) {
var parentNav = fiberNav.parent;
while (parentNav && !parentNav.isEqual(ownerNav)) {
if (parentNav.fluentUIDebug) parentNavs.unshift(parentNav);
parentNav = parentNav.parent;
}
}
var component = fiberNav.name && /*#__PURE__*/React.createElement(DebugLine, null, fiberNav.jsxString);
return /*#__PURE__*/React.createElement(ScrollToBottom, {
style: style
}, /*#__PURE__*/React.createElement(DebugLine, _extends({
indent: 0
}, ownerNav.fluentUIDebug && {
actionable: true,
tabIndex: 0,
onClick: function onClick(e) {
e.preventDefault();
onFiberChanged(ownerNav);
},
onMouseEnter: function onMouseEnter(e) {
return onFiberSelected(ownerNav);
},
onMouseLeave: function onMouseLeave(e) {
return onFiberSelected(null);
}
}), ownerNav.jsxString), /*#__PURE__*/React.createElement(DebugLine, {
indent: 1,
style: {
color: '#ba645e'
}
}, "render()"), parentNavs.map(function (parent, i) {
return /*#__PURE__*/React.createElement(DebugLine, {
key: i,
indent: 2 + i,
actionable: true,
tabIndex: "0",
onClick: function onClick(e) {
e.preventDefault();
onFiberChanged(parent);
},
onMouseEnter: function onMouseEnter(e) {
return onFiberSelected(parent);
},
onMouseLeave: function onMouseLeave(e) {
return onFiberSelected(null);
}
}, parent.jsxString);
}), /*#__PURE__*/React.createElement(DebugLine, {
indent: 3 + (parentNavs.length - 1),
active: true,
badge: "selected",
actionable: true,
tabIndex: "0",
onClick: function onClick(e) {
e.preventDefault();
onFiberChanged(fiberNav);
},
onMouseEnter: function onMouseEnter(e) {
return onFiberSelected(fiberNav);
},
onMouseLeave: function onMouseLeave(e) {
return onFiberSelected(null);
}
}, component));
};
//# sourceMappingURL=DebugComponentViewer.js.map