sws-frontend
Version:
sws frontend project
97 lines • 5.15 kB
JavaScript
;
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 worksheet_1 = require("../scaffold/worksheet");
var react_bootstrap_1 = require("react-bootstrap");
var helpers_1 = require("../commons/helpers");
var lodash_1 = require("lodash");
var ReactCSSTransitionGroup = require("react-addons-css-transition-group");
require("./slideout.scss");
var Slideout = (function (_super) {
__extends(Slideout, _super);
function Slideout(props) {
var _this = _super.call(this, props) || this;
_this.state = { preclose: false, toggle: false };
_this.close = _this.close.bind(_this);
_this.depreclose = _this.depreclose.bind(_this);
_this.preclose = _this.preclose.bind(_this);
return _this;
}
Slideout.prototype.lockScrollBehind = function () {
document.body.classList.add('scroll-lock');
};
Slideout.prototype.releaseScrollBehind = function () {
document.body.classList.remove('scroll-lock');
};
Slideout.prototype.componentWillReceiveProps = function (nextProps) {
if (!this.props.close && nextProps.close) {
this.close();
}
};
Slideout.prototype.componentWillUnmount = function () {
this.releaseScrollBehind();
};
Slideout.prototype.componentWillMount = function () {
var _this = this;
this.lockScrollBehind();
this.setState(helpers_1.merge(this.state, { toggle: false }), function () {
setTimeout(function () { return _this.setState(helpers_1.merge(_this.state, { toggle: true })); }, 10);
});
};
Slideout.prototype.close = function (e) {
var _this = this;
this.releaseScrollBehind();
this.props.onClose && this.props.onClose();
e && e.stopPropagation();
this.setState(helpers_1.merge(this.state, { toggle: false }), function () {
setTimeout(function () { return _this.props.toggleCallback(); }, 1000);
});
};
Slideout.prototype.depreclose = function (e) {
this.lockScrollBehind();
this.props.onDepreclose && this.props.onDepreclose();
e && e.stopPropagation();
this.setState(helpers_1.merge(this.state, { preclose: false }));
};
Slideout.prototype.preclose = function () {
this.releaseScrollBehind();
this.props.onPreclose && this.props.onPreclose();
this.setState(helpers_1.merge(this.state, { preclose: true }));
};
Slideout.prototype.render = function () {
var _a = this.props, title = _a.title, children = _a.children, toggleCallback = _a.toggleCallback, loading = _a.loading;
var _b = this.state, preclose = _b.preclose, toggle = _b.toggle;
var _c = lodash_1.partition(React.Children.toArray(children), function (o) { return o.type == worksheet_1.BarButton || o.type == worksheet_1.BarButtonsGroup; }), buttons = _c[0], rest = _c[1];
var header = React.createElement("div", { className: "slideout-header" },
React.createElement("div", { className: "slideout-title" },
toggle &&
(preclose ?
React.createElement(react_bootstrap_1.Button, { bsStyle: "danger", onClick: this.close },
React.createElement("i", { className: "material-icons" }, "close"))
:
React.createElement(react_bootstrap_1.Button, { bsStyle: "info", onClick: this.close },
React.createElement("i", { className: "material-icons" }, "close"))),
React.createElement("h3", { className: "title" }, title)),
React.createElement("div", { className: "buttons" }, buttons));
return (React.createElement("div", { className: 'slideout ' + (toggle ? "in " : "") + (preclose ? "side " : ""), onClick: this.preclose },
React.createElement(react_bootstrap_1.Panel, { className: "slideout-panel", header: header, onClick: this.depreclose },
React.createElement(ReactCSSTransitionGroup, { transitionName: "slide", transitionEnterTimeout: 300, transitionLeaveTimeout: 200 }, loading &&
React.createElement("div", { className: "slideout-loading" },
React.createElement("div", { className: "loading-spinner" },
React.createElement("div", { className: "worksheet-spinner" })))),
React.createElement("div", { id: "slideout-body" }, rest))));
};
return Slideout;
}(React.Component));
exports.default = Slideout;
//# sourceMappingURL=slideout.js.map