@fluentui/react-northstar
Version:
A themable React component library.
164 lines (163 loc) • 5.62 kB
JavaScript
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import * as React from 'react';
var cropMarkStyle = {
position: 'absolute',
background: '#6495ed88'
};
export var DebugRect = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(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);
DebugRect.defaultProps = {
showBackground: true,
showClassName: true,
showElement: true,
renderLabel: function renderLabel(fiberNav) {
return "<" + fiberNav.name + " />";
}
};
//# sourceMappingURL=DebugRect.js.map