@fluentui/react-northstar
Version:
A themable React component library.
172 lines (170 loc) • 7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.DebugRect = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
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 cropMarkStyle = {
position: 'absolute',
background: '#6495ed88'
};
var DebugRect = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2.default)(DebugRect, _React$Component);
function DebugRect() {
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.selectorRef = /*#__PURE__*/React.createRef();
_this.setDebugSelectorPosition = function () {
var fiberNav = _this.props.fiberNav;
if (fiberNav && fiberNav.domNode && fiberNav.domNode.getBoundingClientRect && typeof fiberNav.domNode.getBoundingClientRect === 'function' && _this.selectorRef.current) {
var rect = fiberNav.domNode.getBoundingClientRect();
_this.selectorRef.current.style.top = rect.top + "px";
_this.selectorRef.current.style.left = rect.left + "px";
_this.selectorRef.current.style.width = rect.width + "px";
_this.selectorRef.current.style.height = rect.height + "px";
requestAnimationFrame(_this.setDebugSelectorPosition);
}
};
return _this;
}
var _proto = DebugRect.prototype;
_proto.componentDidMount = function componentDidMount() {
this.setDebugSelectorPosition();
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
this.setDebugSelectorPosition();
};
_proto.render = function render() {
var _this$props = this.props,
fiberNav = _this$props.fiberNav,
showBackground = _this$props.showBackground,
showClassName = _this$props.showClassName,
showCropMarks = _this$props.showCropMarks,
showElement = _this$props.showElement,
renderLabel = _this$props.renderLabel;
if (!fiberNav) {
return null;
}
var label = renderLabel(fiberNav);
return /*#__PURE__*/React.createElement("pre", {
ref: this.selectorRef,
style: {
position: 'fixed',
padding: 0,
margin: 0,
background: showBackground ? '#6495ed11' : 'none',
outline: '2px solid #6495edcc',
outlineOffset: '-1px',
zIndex: 99999999,
pointerEvents: 'none',
userSelect: 'none'
}
}, label && /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
padding: '2px 4px',
margin: '-1px 0 0 -1px',
bottom: '100%',
left: 0,
color: '#fff',
background: '#6495ed',
zIndex: 1 // above crop marks
}
}, /*#__PURE__*/React.createElement("span", {
style: {
fontWeight: 'bold'
}
}, renderLabel(fiberNav))), showCropMarks && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '12px',
height: '1px',
top: '0',
left: '-20px'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '1px',
height: '12px',
top: '-20px',
left: '0'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '12px',
height: '1px',
top: '0',
right: '-20px'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '1px',
height: '12px',
top: '-20px',
right: '0'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '12px',
height: '1px',
bottom: '0',
left: '-20px'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '1px',
height: '12px',
bottom: '-20px',
left: '0'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '12px',
height: '1px',
bottom: '0',
right: '-20px'
})
}), /*#__PURE__*/React.createElement("div", {
style: Object.assign({}, cropMarkStyle, {
width: '1px',
height: '12px',
bottom: '-20px',
right: '0'
})
})), fiberNav.domNode && (showElement || showClassName) && /*#__PURE__*/React.createElement("div", {
style: {
fontSize: '0.9em',
position: 'absolute',
padding: '2px 4px',
margin: '0 0 1px -1px',
top: '100%',
left: 0,
background: '#6495ed'
}
}, showElement && /*#__PURE__*/React.createElement("strong", {
style: {
fontWeight: 'bold',
color: 'hsl(160, 100%, 80%)'
}
}, fiberNav.domNode.tagName && fiberNav.domNode.tagName.toLowerCase()), showClassName && fiberNav.domNode.hasAttribute && typeof fiberNav.domNode.hasAttribute === 'function' && fiberNav.domNode.hasAttribute('class') && /*#__PURE__*/React.createElement("span", {
style: {
color: 'rgba(255, 255, 255, 0.75)'
}
}, ".", (fiberNav.domNode.getAttribute('class') || '').replace(/ +/g, '.'))));
};
return DebugRect;
}(React.Component);
exports.DebugRect = DebugRect;
DebugRect.defaultProps = {
showBackground: true,
showClassName: true,
showElement: true,
renderLabel: function renderLabel(fiberNav) {
return "<" + fiberNav.name + " />";
}
};
//# sourceMappingURL=DebugRect.js.map