@helpscout/artboard
Version:
A tool kit for React UI development and design
106 lines • 4.46 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var utils_1 = require("../utils");
var fancy_1 = require("@helpscout/fancy");
var BoxInspector = /** @class */ (function (_super) {
__extends(BoxInspector, _super);
function BoxInspector() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.bindEvents = function () {
if (!_this.node)
return;
if (!_this.props.showOutlines)
return;
Array.from(_this.node.querySelectorAll(_this.props.targetSelector)).forEach(function (node) {
node.addEventListener('mouseenter', _this.handleOnMouseEnter);
node.addEventListener('mouseleave', _this.handleOnMouseLeave);
});
};
_this.unbindEvents = function () {
if (!_this.node)
return;
Array.from(_this.node.querySelectorAll(_this.props.targetSelector)).forEach(function (node) {
node.removeEventListener('mouseenter', _this.handleOnMouseEnter);
node.removeEventListener('mouseleave', _this.handleOnMouseLeave);
});
};
_this.cleanUp = function () {
if (!_this.node)
return;
Array.from(_this.node.querySelectorAll(_this.props.targetSelector)).forEach(function (node) {
if (node['style']) {
node['style'].outline = null;
}
});
};
_this.handleOnMouseEnter = function (event) {
event.target.style.outline = _this.props.outline;
};
_this.handleOnMouseLeave = function (event) {
event.target.style.outline = 'none';
};
_this.setNodeRef = function (node) { return (_this.node = node); };
return _this;
}
BoxInspector.prototype.componentDidMount = function () {
this.bindEvents();
};
BoxInspector.prototype.componentWillUnmount = function () {
this.unbindEvents();
};
BoxInspector.prototype.componentDidUpdate = function () {
this.unbindEvents();
this.bindEvents();
if (!this.props.showOutlines) {
this.cleanUp();
}
};
BoxInspector.prototype.render = function () {
return (React.createElement(BoxInspectorUI, __assign({ innerRef: this.setNodeRef, className: utils_1.cx('BoxInspector') }, this.props), this.props.children));
};
BoxInspector.defaultProps = {
targetSelector: '*',
outline: '1px solid red',
showOutlines: true,
};
return BoxInspector;
}(React.Component));
exports.BoxInspector = BoxInspector;
var BoxInspectorUI = fancy_1.default('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n"], ["\n ",
";\n"])), function (_a) {
var showOutlines = _a.showOutlines;
return showOutlines &&
"\n * {\n pointer-events: auto !important;\n }\n\n [class*=\"" + utils_1.cx() + "\"],\n ." + utils_1.cx('Guide') + " * {\n pointer-events: none !important;\n }\n ";
});
exports.default = BoxInspector;
var templateObject_1;
//# sourceMappingURL=BoxInspector.js.map