sws-frontend/dist/scaffold/scaffold.js

sws frontend project

"use strict";
var __extends = (this && this.__extends) || (function () {
    var 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 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 });
require("../assets/fonts/roboto/roboto.scss");
var React = require("react");
var helpers_1 = require("../commons/helpers");
var notifier_1 = require("./notifier");
var page_1 = require("./page");
require("./scaffold.scss");
var Scaffold = (function (_super) {
    __extends(Scaffold, _super);
    function Scaffold(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { current: props.page, show: true, toggle: true };
        return _this;
    }
    /**
        calculates flag for rendering, and updates page for next iteration.
     */
    Scaffold.prototype.componentWillReceiveProps = function (_a) {
        var page = _a.page;
        var _b = this.state, current = _b.current, show = _b.show, toggle = _b.toggle;
        /* toggle current or show new */
        this.setState({
            current: page,
            show: toggle,
            toggle: this.state.toggle
        });
    };
    Scaffold.prototype.render = function () {
        var _this = this;
        var _a = this.props, projectName = _a.projectName, onClickHome = _a.onClickHome, page = _a.page, _b = _a.theme, theme = _b === void 0 ? '' : _b, children = _a.children, notifications = _a.notifications;
        var _c = React.Children.toArray(children), sidebar = _c[0], drawer = _c[1], pages = _c.slice(2);
        /** if passed on to icons to activate toggling behaviour on click */
        var onSelect = function () { return _this.setState(helpers_1.merge(_this.state, { toggle: true })); };
        sidebar = React.cloneElement(sidebar, { page: page, onSelect: onSelect });
        drawer = React.cloneElement(drawer, { page: page });
        var classes = "scaffold";
        if (!this.state.show)
            classes = classes + ' collapsed';
        if (theme)
            classes = classes + (" theme " + theme);
        return (React.createElement("div", { className: "sticky-container" },
            React.createElement("div", { className: classes },
                React.createElement("div", { className: "collapse-icon", onClick: function () { return _this.setState(helpers_1.merge(_this.state, { show: !_this.state.show })); } },
                    React.createElement("i", { className: "material-icons" }, !this.state.show ? "menu" : "close")),
                React.createElement("div", { className: "sidebar-wrapper" },
                    React.createElement("section", { className: "top" },
                        React.createElement("a", { className: "sidebar-top", onClick: onClickHome },
                            React.createElement("div", { className: "home" },
                                React.createElement("i", { className: "material-icons" }, "dashboard")),
                            React.createElement("div", { className: "project-title" },
                                React.createElement("span", { className: "h5 text" }, projectName)))),
                    React.createElement("section", { className: "content" },
                        sidebar,
                        drawer)),
                React.createElement(page_1.default, null, pages[page]),
                React.createElement(notifier_1.Notifier, { notifications: notifications }))));
    };
    return Scaffold;
}(React.Component));
exports.default = Scaffold;
//# sourceMappingURL=scaffold.js.map