@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
140 lines (139 loc) • 5.76 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 __());
};
}();
var __assign = undefined && undefined.__assign || Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var _ = require("lodash");
var aphrodite_1 = require("aphrodite");
exports.defaultTabPanelStyle = {
tabPanel: {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignContent: 'stretch'
},
tabs: {
flex: '0 0 auto',
display: 'flex'
},
tab: {
flex: '0 0 auto',
'-webkit-user-select': 'none',
cursor: 'pointer'
},
activeTab: {
flex: '0 0 auto',
'-webkit-user-select': 'none'
},
contentContainer: {
flex: '1',
position: 'relative',
height: 0,
overflow: 'hidden'
},
content: {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
height: '100%',
width: '100%'
},
contentHidden: {
visibility: 'hidden',
'-webkit-user-select': 'none',
pointerEvents: 'none'
}
};
var TabPanel = function (_super) {
__extends(TabPanel, _super);
function TabPanel(props) {
var _this = _super.call(this, props) || this;
_this.renderTabs = function (style, customStyle) {
return React.createElement("div", { className: aphrodite_1.css(style.tabs, customStyle.tabs) }, _this.props.tabs.map(function (tabItem, index) {
var selected = index === _this.activeTabIndex;
return React.createElement("div", { className: aphrodite_1.css(style.tab, customStyle.tab, selected && style.activeTab, selected && customStyle.activeTab), onClick: function onClick() {
return _this.selectIndex(index, tabItem.name);
}, key: index }, React.createElement(tabItem.tab.render, __assign({ active: selected }, tabItem.tab.props)));
}));
};
// Renders active content visibly, renders inactive content hidden
_this.renderAllContent = function (style, customStyle) {
return _this.props.content.map(function (content, index) {
var active = _this.props.tabs[_this.activeTabIndex].rendersContent === content.name;
return React.createElement("div", { key: index, className: aphrodite_1.css(style.content, customStyle.content, !active && style.contentHidden, !active && customStyle.contentHidden) }, React.createElement(content.content.render, __assign({}, content.content.props)));
});
};
// Render only the active content.
_this.renderActiveContent = function (style, customStyle) {
var activeItem = _.find(_this.props.content, function (content) {
return _this.props.tabs[_this.activeTabIndex].rendersContent === content.name;
});
return React.createElement("div", { className: aphrodite_1.css(style.content, customStyle.content) }, React.createElement(activeItem.content.render, __assign({}, activeItem.content.props)));
};
_this.selectIndex = function (index, name) {
if (_this.activeTabIndex === index) return;
_this.setState({ activeIndex: index });
if (_this.props.onActiveTabChanged) _this.props.onActiveTabChanged(index, name);
};
_this.state = {
activeIndex: props.defaultTabIndex || 0
};
return _this;
}
Object.defineProperty(TabPanel.prototype, "activeTabIndex", {
get: function get() {
return this.state.activeIndex;
},
set: function set(idx) {
if (!this.didMount || this.state.activeIndex === idx) return;
this.setState({ activeIndex: idx });
},
enumerable: true,
configurable: true
});
TabPanel.prototype.render = function () {
var style = aphrodite_1.StyleSheet.create(exports.defaultTabPanelStyle);
var customStyle = aphrodite_1.StyleSheet.create(this.props.styles || {});
return React.createElement("div", { className: aphrodite_1.css(style.tabPanel, customStyle.tabPanel) }, this.renderTabs(style, customStyle), React.createElement("div", { className: aphrodite_1.css(style.contentContainer, customStyle.contentContainer) }, this.props.alwaysRenderContent ? this.renderAllContent(style, customStyle) : this.renderActiveContent(style, customStyle)));
};
TabPanel.prototype.componentDidMount = function () {
this.didMount = true;
};
TabPanel.prototype.componentWillUnmount = function () {
this.didMount = false;
};
return TabPanel;
}(React.Component);
exports.TabPanel = TabPanel;
exports.default = TabPanel;