sws-frontend/dist/scaffold/worksheet.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 });
var React = require("react");
var react_bootstrap_1 = require("react-bootstrap");
var Waypoint = require('react-waypoint');
var ReactCSSTransitionGroup = require("react-addons-css-transition-group");
require("./worksheet.scss");
var Sheet = (function (_super) {
    __extends(Sheet, _super);
    function Sheet(props) {
        var _this = _super.call(this, props) || this;
        _this.onEnter = function () {
            this.setState({ fixed: false });
        };
        _this.onLeave = function () {
            this.setState({ fixed: true });
        };
        _this.state = { fixed: false };
        return _this;
    }
    Sheet.prototype.render = function () {
        var _this = this;
        var _a = this.props, log = _a.log, subtitle = _a.subtitle, backButton = _a.backButton, title = _a.title, children = _a.children, loading = _a.loading, className = _a.className, onWaitCancel = _a.onWaitCancel, icon = _a.icon, subpage = _a.subpage;
        var buttons = []; //partition(React.Children.toArray(children), function(p:any) { return (p.type == BarButton) || (p.props.role == "button") } );
        var itemProps = [];
        var rest = [];
        var headerContent; //a wrapper with header-content as role
        React.Children.toArray(children).map(function (p) {
            if (p.props.role == "button" || p.type == exports.BarButton) {
                buttons.push(p);
            }
            else if (p.props.role == "item-prop") {
                itemProps.push(p);
            }
            else if (p.props.role == 'header-content') {
                headerContent = p;
            }
            else {
                rest.push(p);
            }
        });
        var BackButton = (backButton &&
            React.createElement("div", { className: "back-button" }, backButton.map(function (b, index) {
                return React.createElement("a", { key: index, onClick: b.callback },
                    React.createElement("i", { className: "material-icons" }, "chevron_right"),
                    React.createElement("span", { className: "text" }, b.text));
            })));
        var header = React.createElement("div", { className: "worksheet-header" },
            BackButton,
            React.createElement("div", { className: "worksheet-headertitle" },
                icon && React.createElement("i", { className: "material-icons" }, icon),
                " ",
                title,
                subpage && React.createElement("small", null, subpage)),
            subtitle &&
                React.createElement("div", { className: "worksheet-subtitle" },
                    React.createElement("p", { className: "lead" }, subtitle)),
            itemProps &&
                React.createElement("div", { className: "item-props" }, itemProps),
            React.createElement("div", { className: "worksheet-headerbar" }, buttons),
            headerContent);
        // {
        //   false &&
        //   <Sticky onStickyStateChange={() => {this.setState({fixed: !this.state.fixed})}} stickyClassName={"sticky"} className="sticky-item" topOffset={0} stickyStyle={ { marginTop: 0 }}>
        //   <div className="nav-scroll-fixed"></div>
        //   </Sticky>
        // }
        return (React.createElement(react_bootstrap_1.Panel, { className: className ? 'worksheet ' + className : 'worksheet', header: header },
            React.createElement(ReactCSSTransitionGroup, { transitionName: "slide", transitionEnterTimeout: 300, transitionLeaveTimeout: 200 }, loading ?
                React.createElement("div", { className: "worksheet-spinner-wrapper" },
                    React.createElement("div", { className: "worksheet-spinner-group" },
                        React.createElement("div", { className: "worksheet-spinner-spinner-wrapper" },
                            React.createElement("div", { className: "worksheet-spinner" })),
                        React.createElement(react_bootstrap_1.Button, { bsStyle: "info", className: "worksheet-spinner-button", onClick: onWaitCancel },
                            "Enough waiting, quit this now ",
                            React.createElement("i", { className: "material-icons" }, "close")),
                        log &&
                            React.createElement("div", { className: "log" }, log)))
                : null),
            React.createElement(Waypoint, { scrollableAncestor: window, onEnter: function () { return _this.onEnter(); }, onLeave: function () { return _this.onLeave(); } }),
            React.createElement("div", { className: "content " + (this.state.fixed ? "fixed" : "not-fixed") },
                React.createElement("div", { className: "nav-scroll-fixed" }),
                rest)));
    };
    return Sheet;
}(React.Component));
exports.default = Sheet;
exports.BarButton = function (p) {
    var iconLeft = p.iconLeft, _a = p.text, text = _a === void 0 ? "" : _a, role = p.role, name = p.name, _b = p.disabled, disabled = _b === void 0 ? false : _b, onClick = p.onClick, error = p.error, errorMessage = p.errorMessage, errorNumber = p.errorNumber, children = p.children;
    var classes = 'material-icons md-24 md-light circle-icon worksheet-button';
    if (role)
        classes = classes + (" theme-" + role);
    var content;
    if (children) {
        content = children;
    }
    else {
        content =
            React.createElement("div", null,
                iconLeft && React.createElement("i", { className: classes }, name),
                text && React.createElement("span", { className: "text" }, text),
                !iconLeft && React.createElement("i", { className: classes }, name),
                error &&
                    React.createElement("span", { className: "badge badge-error" },
                        React.createElement("i", { className: "material-icons" }, "warning"),
                        errorNumber),
                error &&
                    React.createElement("span", { className: "error-message-wrapper" },
                        React.createElement("span", { className: "error-message" }, errorMessage || "You have some errors to solve")));
    }
    return (React.createElement("a", { className: "btn-topbar btn btn-lg btn-" + role + " " + (disabled ? "disabled" : "") + " " + (text ? " with-text" : "no-text") + " " + (error ? 'with-error' : '') + " " + (p.className ? p.className : ''), role: "button", onClick: disabled ? undefined : onClick }, content));
};
exports.BarButtonsGroup = function (p) {
    var children = p.children;
    //const [buttons] = partition(React.Children.toArray(children),['type', BarButton]);
    return (React.createElement(react_bootstrap_1.ButtonGroup, { className: "btn-topbar " + p.className, role: "group" }, children));
};
exports.ItemLightProp = function (p) {
    var children = p.children, label = p.label, icon = p.icon, onClick = p.onClick, btnStyle = p.btnStyle, tooltip = p.tooltip, className = p.className;
    var tooltipComponent = function (body) { return React.createElement(react_bootstrap_1.Tooltip, { id: "tooltip" }, body); };
    var ItemProp = (React.createElement(react_bootstrap_1.Button, { bsSize: "xsmall", className: (className ? className : '') + " " + "item-prop right-btn " + (onClick ? "with-link" : "no-link"), onClick: onClick, bsStyle: btnStyle || "default" },
        icon && React.createElement("span", { className: "icon" },
            React.createElement("i", { className: "material-icons" }, icon)),
        label &&
            React.createElement("small", null, label),
        React.createElement("strong", null, children),
        onClick && React.createElement("span", { className: "icon-link" },
            React.createElement("i", { className: "material-icons" }, "navigate_next"))));
    return (tooltip ?
        React.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltipComponent(tooltip) }, ItemProp)
        : React.createElement("span", null, ItemProp));
};
//<span onClick={onClick} className="badge bg-default">{label && <small>{label} </small>}{ children }</span>
// <ButtonGroup bsSize="small">
//       {
//         (icon) &&
//         <Button className="icon-btn" bsStyle="info">
//         {icon && <i className="material-icons">{icon}</i>}
//         </Button>
//       }
//       <Button onClick={onClick} bsStyle={btnStyle || "default"}>
//         {
//           label &&
//           <small>{label}</small>
//         }
//         <strong>{children}</strong>
//         {onClick && <i className="material-icons">navigate_next</i>}
//       </Button>
//     </ButtonGroup>
// <div role="item-prop" className="item-prop flex align-center">
//       {
//         icon &&
//         <div>
//           <i className="material-icons">{icon}</i>
//         </div>
//       }
//       <div>
//         {
//           label &&
//           <div><small>{label}</small></div>
//         }
//         <div><strong>{children}</strong></div>
//       </div>
//     </div>
//# sourceMappingURL=worksheet.js.map