@helpscout/artboard
Version:
A tool kit for React UI development and design
98 lines • 6.07 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);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_resizable_1 = require("react-resizable");
var fancy_1 = require("@helpscout/fancy");
var utils_1 = require("../utils");
var Resizer = /** @class */ (function (_super) {
__extends(Resizer, _super);
function Resizer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.getResizableProps = function () {
var _a = _this.props, defaultHeight = _a.defaultHeight, defaultWidth = _a.defaultWidth, children = _a.children, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, widthProp = _a.width, heightProp = _a.height, withResponsiveHeight = _a.withResponsiveHeight, withResponsiveWidth = _a.withResponsiveWidth, rest = __rest(_a, ["defaultHeight", "defaultWidth", "children", "minWidth", "minHeight", "maxWidth", "maxHeight", "width", "height", "withResponsiveHeight", "withResponsiveWidth"]);
var minHeightConstraint = minHeight ? minHeight : 1;
var minWidthConstraint = minWidth ? minWidth : 1;
var maxHeightConstraint = maxHeight ? maxHeight : Infinity;
var maxWidthConstraint = maxWidth ? maxWidth : Infinity;
var minConstraints = [minWidthConstraint, minHeightConstraint];
var maxConstraints = [maxWidthConstraint, maxHeightConstraint];
var width = widthProp || minWidth || defaultWidth;
var height = heightProp || minHeight || defaultHeight;
return __assign({}, rest, { minConstraints: minConstraints,
maxConstraints: maxConstraints,
height: height,
width: width });
};
return _this;
}
Resizer.prototype.render = function () {
return (React.createElement(ResizerUI, { className: utils_1.cx('ResizerWrapper') },
React.createElement(react_resizable_1.ResizableBox, __assign({}, this.getResizableProps(), { className: utils_1.cx('Resizer') }),
React.createElement(ContentUI, __assign({ className: utils_1.cx('ResizerContent') }, this.props), this.props.children))));
};
Resizer.defaultProps = {
height: 400,
width: 400,
withResponsiveHeight: false,
withResponsiveWidth: false,
};
return Resizer;
}(React.PureComponent));
exports.Resizer = Resizer;
var ResizerUI = fancy_1.default('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .react-resizable {\n position: relative;\n will-change: height, width;\n }\n .react-resizable-handle {\n bottom: -25px;\n box-sizing: border-box;\n cursor: se-resize;\n height: 50px;\n position: absolute;\n right: -25px;\n width: 50px;\n\n &:before {\n content: '';\n height: 12px;\n width: 12px;\n border-right: 2px solid rgba(0, 0, 0, 0.2);\n border-bottom: 2px solid rgba(0, 0, 0, 0.2);\n position: absolute;\n bottom: 15px;\n right: 15px;\n\n ", ";\n }\n }\n"], ["\n .react-resizable {\n position: relative;\n will-change: height, width;\n }\n .react-resizable-handle {\n bottom: -25px;\n box-sizing: border-box;\n cursor: se-resize;\n height: 50px;\n position: absolute;\n right: -25px;\n width: 50px;\n\n &:before {\n content: '';\n height: 12px;\n width: 12px;\n border-right: 2px solid rgba(0, 0, 0, 0.2);\n border-bottom: 2px solid rgba(0, 0, 0, 0.2);\n position: absolute;\n bottom: 15px;\n right: 15px;\n\n ",
";\n }\n }\n"])), function (_a) {
var theme = _a.theme;
return theme.darkMode &&
"\n border-right: 2px solid rgba(255, 255, 255, 0.2);\n border-bottom: 2px solid rgba(255, 255, 255, 0.2);\n ";
});
var ContentUI = fancy_1.default('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n ", ";\n\n ", ";\n"], ["\n position: relative;\n\n ",
";\n\n ",
";\n"])), function (_a) {
var withResponsiveHeight = _a.withResponsiveHeight;
return withResponsiveHeight &&
"\n height: 100%;\n ";
}, function (_a) {
var withResponsiveWidth = _a.withResponsiveWidth;
return withResponsiveWidth &&
"\n width: 100%;\n ";
});
exports.default = Resizer;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Resizer.js.map