@helpscout/artboard
Version:
A tool kit for React UI development and design
98 lines • 5.15 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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_redux_1 = require("react-redux");
var actions = require("../../Artboard.actions");
var Artboard_css_1 = require("../../Artboard.css");
var Toolbar_1 = require("./Toolbar");
var ToolbarButton_1 = require("./ToolbarButton");
var ArtboardToolbar = /** @class */ (function (_super) {
__extends(ArtboardToolbar, _super);
function ArtboardToolbar() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.toggleDarkMode = function (event) {
event.stopPropagation();
_this.props.toggleDarkMode();
};
_this.toggleGuides = function (event) {
event.stopPropagation();
_this.props.toggleGuides();
};
_this.toggleBoxInspector = function (event) {
event.stopPropagation();
_this.props.toggleBoxInspector();
};
_this.toggleSizeInspector = function (event) {
event.stopPropagation();
_this.props.toggleSizeInspector();
};
_this.startEyeDropper = function (event) {
_this.props.startEyeDropper();
};
_this.toggleCrosshair = function (event) {
event.stopPropagation();
_this.props.toggleCrosshair();
};
_this.handleClearSnapshots = function (event) {
event.stopPropagation();
_this.props.clearCrosshairSnapshots();
};
_this.resetSettings = function (event) {
event.stopPropagation();
_this.props.resetSettings();
};
return _this;
}
ArtboardToolbar.prototype.render = function () {
var _a = this.props, darkMode = _a.darkMode, showBoxInspector = _a.showBoxInspector, showSizeInspector = _a.showSizeInspector, showGuides = _a.showGuides, isCrosshairActive = _a.isCrosshairActive;
return (React.createElement(Artboard_css_1.ToolbarWrapperUI, null,
React.createElement(Toolbar_1.default, null,
React.createElement(Artboard_css_1.ToolbarLeftUI, null,
React.createElement(ToolbarButton_1.default, { onClick: this.toggleDarkMode, label: "Dark Mode", icon: "Moon", isActive: darkMode })),
React.createElement(ToolbarButton_1.default, { onClick: this.toggleGuides, label: "Guides", icon: "Ruler", isActive: showGuides }),
React.createElement(ToolbarButton_1.default, { onClick: this.toggleBoxInspector, label: "Box Inspector", icon: "Box", isActive: showBoxInspector }),
React.createElement(ToolbarButton_1.default, { onClick: this.toggleSizeInspector, label: "Size Inspector", icon: "Size", isActive: showSizeInspector }),
React.createElement(ToolbarButton_1.default, { onClick: this.startEyeDropper, label: "Color", icon: "EyeDropper" }),
React.createElement(ToolbarButton_1.default, { onClick: this.toggleCrosshair, label: "Crosshair", icon: "Crosshair", isActive: isCrosshairActive }),
React.createElement(Artboard_css_1.ToolbarRightUI, null,
React.createElement(ToolbarButton_1.default, { onClick: this.handleClearSnapshots, label: "Clear Crosshairs", icon: "Eraser" }),
React.createElement(ToolbarButton_1.default, { onClick: this.resetSettings, label: "Reset", icon: "Refresh" })))));
};
return ArtboardToolbar;
}(React.PureComponent));
exports.ArtboardToolbar = ArtboardToolbar;
var mapStateToProps = function (state) {
var darkMode = state.darkMode, showBoxInspector = state.showBoxInspector, showSizeInspector = state.showSizeInspector, showGuides = state.showGuides, isCrosshairActive = state.isCrosshairActive;
return {
darkMode: darkMode,
showBoxInspector: showBoxInspector,
showSizeInspector: showSizeInspector,
showGuides: showGuides,
isCrosshairActive: isCrosshairActive,
};
};
var mapDispatchToProps = {
toggleDarkMode: actions.toggleDarkMode,
toggleGuides: actions.toggleGuides,
toggleBoxInspector: actions.toggleBoxInspector,
toggleSizeInspector: actions.toggleSizeInspector,
toggleCrosshair: actions.toggleCrosshair,
startEyeDropper: actions.startEyeDropper,
resetSettings: actions.resetSettings,
clearCrosshairSnapshots: actions.clearCrosshairSnapshots,
};
exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ArtboardToolbar);
//# sourceMappingURL=Artboard.Toolbar.js.map