@helpscout/artboard
Version:
A tool kit for React UI development and design
73 lines • 4.51 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var fancy_1 = require("@helpscout/fancy");
var react_redux_1 = require("react-redux");
var Artboard_actions_1 = require("../Artboard.actions");
var Base_1 = require("../../UI/Base");
var Button_1 = require("../../UI/Button");
var LabelText_1 = require("../../UI/LabelText");
var utils_1 = require("../../utils");
var Zoom = /** @class */ (function (_super) {
__extends(Zoom, _super);
function Zoom() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleOnKeyDown = function (event) {
event.preventDefault();
};
return _this;
}
Zoom.prototype.render = function () {
var _a = this.props, onZoomIn = _a.onZoomIn, onZoomOut = _a.onZoomOut, zoomLevel = _a.zoomLevel;
var zoomPercentage = zoomLevel * 100 + "%";
return (React.createElement(ZoomUI, null,
React.createElement(ZoomActionsUI, null,
React.createElement(Button_1.default, { onClick: onZoomOut, title: "Zoom in", tabIndex: -1, onKeyDown: this.handleOnKeyDown }, "-"),
React.createElement(ZoomLevelUI, null,
React.createElement(LabelText_1.default, null, zoomPercentage)),
React.createElement(Button_1.default, { onClick: onZoomIn, title: "Zoom out", tabIndex: -1, onKeyDown: this.handleOnKeyDown }, "+")),
React.createElement(ZoomTextUI, null,
React.createElement(LabelText_1.default, null, "Zoom"))));
};
Zoom.defaultProps = {
onZoomIn: utils_1.noop,
onZoomOut: utils_1.noop,
zoomLevel: 1,
};
return Zoom;
}(React.PureComponent));
exports.Zoom = Zoom;
var ZoomUI = fancy_1.default(Base_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n pointer-events: none;\n transform: translateZ(0);\n z-index: 2147483647;\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n pointer-events: none;\n transform: translateZ(0);\n z-index: 2147483647;\n"])));
var ZoomActionsUI = fancy_1.default(Base_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: center;\n margin-bottom: 5px;\n pointer-events: all;\n\n > * {\n margin: 0 3px;\n }\n"], ["\n align-items: center;\n display: flex;\n justify-content: center;\n margin-bottom: 5px;\n pointer-events: all;\n\n > * {\n margin: 0 3px;\n }\n"])));
var ZoomTextUI = fancy_1.default(Base_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n font-size: 11px;\n line-height: 1;\n"], ["\n box-sizing: border-box;\n font-size: 11px;\n line-height: 1;\n"])));
var ZoomLevelUI = fancy_1.default(ZoomTextUI)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n text-align: center;\n padding-left: 1px;\n width: 48px;\n"], ["\n position: relative;\n text-align: center;\n padding-left: 1px;\n width: 48px;\n"])));
var mapStateToProps = function (state) {
var zoomLevel = state.zoomLevel;
return {
zoomLevel: zoomLevel,
};
};
var mapDispatchToProps = {
onZoomIn: Artboard_actions_1.zoomIn,
onZoomOut: Artboard_actions_1.zoomOut,
};
exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(Zoom);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=Artboard.Zoom.js.map