@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
103 lines (102 loc) • 5.11 kB
JavaScript
;
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*
*/
var __extends = undefined && undefined.__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 aphrodite_1 = require("aphrodite");
exports.defaultCollapsingListStyle = {
CollapsingList: {
height: '100%',
webkitUserSelect: 'none',
userSelect: 'none',
pointerEvents: 'all',
color: 'white'
},
title: {
cursor: 'pointer'
},
collapseButton: {
display: 'inline-block',
color: 'white',
width: '15px'
},
body: {},
listContainer: {},
listFooter: {},
listItem: {
display: 'flex',
alignItems: 'center',
marginLeft: '10px'
}
};
var CollapsingList = function (_super) {
__extends(CollapsingList, _super);
function CollapsingList(props) {
var _this = _super.call(this, props) || this;
_this.onToggleCollapse = function () {
if (typeof _this.props.collapsed !== "boolean") {
_this.setState(function (state, props) {
if (state.collapsed) {
// Show
if (_this.props.onToggleCollapse) _this.props.onToggleCollapse(false);
return {
collapsed: false
};
}
// Hide
if (_this.props.onToggleCollapse) _this.props.onToggleCollapse(true);
return {
collapsed: true
};
});
} else if (_this.props.onToggleCollapse) {
_this.props.onToggleCollapse(!_this.props.collapsed);
}
};
_this.state = {
collapsed: props.defaultCollapsed || false
};
return _this;
}
CollapsingList.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultCollapsingListStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
var animationClass = this.props.animationClass && aphrodite_1.StyleSheet.create(this.props.animationClass(this.props.collapsed));
var collapsed = typeof this.props.collapsed === 'boolean' ? this.props.collapsed : this.state.collapsed;
return React.createElement("div", { className: aphrodite_1.css(ss.CollapsingList, custom.CollapsingList) }, React.createElement("div", { className: aphrodite_1.css(ss.titleContainer, custom.titleContainer) }, typeof this.props.title === 'string' ? React.createElement("span", { className: aphrodite_1.css(ss.title, custom.title), onClick: this.onToggleCollapse }, React.createElement("div", { className: aphrodite_1.css(ss.collapseButton, custom.collapseButton) }, this.props.collapsed ? '+' : '-'), this.props.title) : React.createElement("span", { className: aphrodite_1.css(ss.title, custom.title), onClick: this.onToggleCollapse }, this.props.title(this.props.collapsed))), React.createElement("div", { className: aphrodite_1.css(ss.body, custom.body, animationClass && animationClass.anim), style: !animationClass ? this.props.collapsed ? { display: 'none' } : {} : {} }, this.props.renderListHeader && React.createElement("div", { className: aphrodite_1.css(ss.listHeader, custom.listHeader) }, this.props.renderListHeader()), React.createElement("div", { className: aphrodite_1.css(ss.listContainer, custom.listContainer) }, this.props.items.map(function (item, i) {
if (!_this.props.renderListItem) {
if (typeof item === 'string') {
return React.createElement("div", { key: i, className: aphrodite_1.css(ss.listItem, custom.listItem) }, item);
}
return React.createElement("div", { key: i, className: aphrodite_1.css(ss.listItem, custom.listItem) }, Object.keys(item).map(function (key) {
return React.createElement("div", { key: key }, item[key]);
}));
}
return _this.props.renderListItem(item, i);
})), this.props.renderListFooter && React.createElement("div", { className: aphrodite_1.css(ss.listFooter, custom.listFooter) }, this.props.renderListFooter())));
};
return CollapsingList;
}(React.Component);
exports.CollapsingList = CollapsingList;
exports.default = CollapsingList;