@fluentui/react-northstar
Version:
A themable React component library.
97 lines (95 loc) • 4.14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.DebugComponentViewer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _DebugLine = require("./DebugLine");
var _ScrollToBottom = require("./ScrollToBottom");
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 style = {
padding: '8px',
whiteSpace: 'pre',
lineHeight: 1.4,
background: '#222',
overflowY: 'auto',
color: '#CCC',
fontFamily: 'monospace',
fontWeight: 'bold'
};
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.DebugLine, null, fiberNav.jsxString);
return /*#__PURE__*/React.createElement(_ScrollToBottom.ScrollToBottom, {
style: style
}, /*#__PURE__*/React.createElement(_DebugLine.DebugLine, (0, _extends2.default)({
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.DebugLine, {
indent: 1,
style: {
color: '#ba645e'
}
}, "render()"), parentNavs.map(function (parent, i) {
return /*#__PURE__*/React.createElement(_DebugLine.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.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));
};
exports.DebugComponentViewer = DebugComponentViewer;
//# sourceMappingURL=DebugComponentViewer.js.map