@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
313 lines (312 loc) • 13.9 kB
JavaScript
"use strict";
/*
* 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");
var lodash_1 = require("lodash");
var Flyout_1 = require("./Flyout");
var RaisedButton_1 = require("./RaisedButton");
exports.defaultGridViewStyle = {
container: {
flex: '1 1 auto',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch'
},
header: {
display: 'flex',
color: '#777',
fontWeight: 'bold',
minHeight: '2em',
padding: '5px'
},
headerItem: {
userSelect: 'none',
cursor: 'default',
flex: '1 1 auto',
margin: '0 5px'
},
sortableHeaderItem: {
cursor: 'pointer'
},
grid: {
display: 'flex',
flex: '1 1 auto',
flexDirection: 'column',
flexWrap: 'nowrap',
overflowY: 'auto',
paddingTop: '10px'
},
gridItem: {
flex: '1 1 auto',
margin: '0 5px',
minWidth: '0',
display: 'flex'
},
row: {
display: 'flex',
flex: '0 0 auto',
padding: '5px',
':nth-child(even)': {
backgroundColor: 'rgba(0, 0, 0, 0.1)'
}
},
rowMenu: {
minWidth: '10px',
maxWidth: '10px',
width: '10px',
cursor: 'pointer',
flex: '0 0 auto'
},
pagination: {
display: 'flex',
alignSelf: 'center',
flex: '0 0 auto',
alignContent: 'center',
justifyContent: 'center'
},
pageButton: {
flex: '0 0 auto',
fontSize: '.8em'
}
};
var GridViewSort;
(function (GridViewSort) {
GridViewSort[GridViewSort["None"] = 0] = "None";
GridViewSort[GridViewSort["Up"] = 1] = "Up";
GridViewSort[GridViewSort["Down"] = 2] = "Down";
})(GridViewSort = exports.GridViewSort || (exports.GridViewSort = {}));
var GridViewImpl = function (_super) {
__extends(GridViewImpl, _super);
function GridViewImpl(props) {
var _this = _super.call(this, props) || this;
_this.sortItems = function (input, column, sorted) {
if (sorted === GridViewSort.None) return input;
if (!column.sortFunction) {
column.sortFunction = function (a, b) {
return column.key(a) < column.key(b) ? 1 : -1;
};
}
return input.sort(function (a, b) {
return sorted === GridViewSort.Down ? column.sortFunction(a, b) : column.sortFunction(a, b) * -1;
});
};
_this.setSort = function (index, sortBy) {
var currentSort = { index: index, sorted: sortBy };
_this.setState({
currentSort: currentSort,
sortedItems: _this.sortItems(_this.state.sortedItems, _this.props.columnDefinitions[index], currentSort.sorted)
});
};
/*
* PAGING interface
*/
_this.getItemCount = function () {
return _this.state.items.length;
};
_this.getItemsPerPage = function () {
return _this.state.itemsPerPage;
};
_this.getCurrentPage = function () {
return _this.state.page;
};
_this.goToPage = function (page) {
_this.setState({
page: page
});
};
/*
* RENDERING
*/
_this.renderHeaderItems = function (ss, custom) {
var headerItems = [];
_this.props.columnDefinitions.forEach(function (pdef, index) {
var def = _this.props.columnDefinitions[index];
var sorted = index === _this.state.currentSort.index ? _this.state.currentSort.sorted : GridViewSort.None;
// if (def.viewPermission && ql.hasPermission(this.props.userPermissions, def.viewPermission) === false) return;
headerItems.push(React.createElement("div", { key: index, className: def.sortable ? aphrodite_1.css(ss.headerItem, custom.headerItem, ss.sortableHeaderItem, custom.sortableHeaderItem) : aphrodite_1.css(ss.headerItem, custom.headerItem), style: def.style, onClick: def.sortable ? function () {
switch (sorted) {
case GridViewSort.None:
case GridViewSort.Down:
_this.setSort(index, GridViewSort.Up);
return;
case GridViewSort.Up:
_this.setSort(index, GridViewSort.Down);
return;
}
} : null }, def.title, "\xA0", sorted === GridViewSort.None ? null : React.createElement("i", { className: "fa fa-caret-" + (sorted === GridViewSort.Up ? 'up' : 'down') })));
});
return headerItems;
};
_this.renderRow = function (item, rowKey, ss, custom) {
var items = [];
_this.props.columnDefinitions.forEach(function (pdef, index) {
var def = _this.props.columnDefinitions[index];
// if (def.viewPermission && ql.hasPermission(this.props.userPermissions, def.viewPermission) === false) return;
if (def.renderItem) {
items.push(React.createElement("span", { key: index, className: aphrodite_1.css(ss.gridItem, custom.gridItem), style: def.style }, def.renderItem(item, _this.props.renderData)));
return;
}
items.push(React.createElement("span", { key: index, className: aphrodite_1.css(ss.gridItem, custom.gridItem), style: def.style }, def.key(item)));
});
if (_this.props.rowMenu) {
items.push(React.createElement("span", { key: 'menu', className: aphrodite_1.css(ss.rowMenu, custom.rowMenu) }, React.createElement(Flyout_1.default, { content: function content(props) {
return _this.props.rowMenu(item, props.close);
}, style: _this.props.rowMenuStyle }, React.createElement("i", { className: 'fa fa-ellipsis-v click-effect' }))));
}
return React.createElement("div", { key: rowKey, className: aphrodite_1.css(ss.row, custom.row) }, items);
};
_this.renderGrid = function (ss, custom) {
var state = _this.state;
var startIndex = state.page * state.itemsPerPage;
var rows = [];
for (var index = startIndex; index - startIndex < state.itemsPerPage && index < state.sortedItems.length; ++index) {
rows.push(_this.renderRow(state.sortedItems[index], index, ss, custom));
}
return React.createElement("div", { className: aphrodite_1.css(ss.grid, custom.grid) }, rows);
};
_this.renderPagination = function (ss, custom) {
var state = _this.state;
var itemCount = _this.getItemCount();
var itemsPerPage = _this.getItemsPerPage();
var page = _this.getCurrentPage();
var pageCount = Math.ceil(itemCount / itemsPerPage);
if (pageCount <= 1) {
return null;
}
var pages = [];
// back to 0 button
pages.push(React.createElement(RaisedButton_1.default, { key: 'back-full', disabled: page < 1, onClick: function onClick() {
return _this.goToPage(0);
}, styles: {
button: {
margin: '5px'
},
buttonDisabled: {
margin: '5px'
}
} }, React.createElement("div", { className: aphrodite_1.css(ss.pageButton, custom.pageButton) }, React.createElement("i", { className: 'fa fa-backward' }))));
// back a single page button
pages.push(React.createElement(RaisedButton_1.default, { key: 'back-one', disabled: page < 1, onClick: function onClick() {
return _this.goToPage(page - 1);
}, styles: {
button: {
margin: '5px'
},
buttonDisabled: {
margin: '5px'
}
} }, React.createElement("div", { className: aphrodite_1.css(ss.pageButton, custom.pageButton) }, React.createElement("i", { className: 'fa fa-step-backward' }))));
// insert page numbers
var start = page - 2;
if (start < 0) start = 0;
var end = page + 3;
if (end > pageCount) end = pageCount;
var _loop_1 = function _loop_1(i) {
// render current page as disabled
if (i === page) {
pages.push(React.createElement(RaisedButton_1.default, { key: i, disabled: true, styles: {
button: {
margin: '5px'
},
buttonDisabled: {
margin: '5px'
}
} }, React.createElement("div", { className: aphrodite_1.css(ss.pageButton, custom.pageButton) }, i + 1)));
return "continue";
}
pages.push(React.createElement(RaisedButton_1.default, { key: i, onClick: function onClick() {
return _this.goToPage(i);
}, styles: {
button: {
margin: '5px'
},
buttonDisabled: {
margin: '5px'
}
} }, React.createElement("div", { className: aphrodite_1.css(ss.pageButton, custom.pageButton) }, i + 1)));
};
for (var i = start; i < end; ++i) {
_loop_1(i);
}
// forward one page button
pages.push(React.createElement(RaisedButton_1.default, { key: 'forward-one', disabled: page > pageCount - 2, onClick: function onClick() {
return _this.goToPage(page + 1);
}, styles: {
button: {
margin: '5px'
},
buttonDisabled: {
margin: '5px'
}
} }, React.createElement("div", { className: aphrodite_1.css(ss.pageButton, custom.pageButton) }, React.createElement("i", { className: 'fa fa-step-forward' }))));
// go to last page button
pages.push(React.createElement(RaisedButton_1.default, { key: 'forward-full', disabled: page > pageCount - 2, onClick: function onClick() {
return _this.goToPage(pageCount - 1);
}, styles: {
button: {
margin: '5px'
},
buttonDisabled: {
margin: '5px'
}
} }, React.createElement("div", { className: aphrodite_1.css(ss.pageButton, custom.pageButton) }, React.createElement("i", { className: 'fa fa-forward' }))));
return React.createElement("div", { className: aphrodite_1.css(ss.pagination, custom.pagination) }, pages);
};
var items = lodash_1.cloneDeep(props.items);
_this.state = {
items: items,
currentSort: { index: -1, sorted: GridViewSort.None },
itemsPerPage: props.itemsPerPage || 25,
sortedItems: items,
page: 0
};
return _this;
}
GridViewImpl.prototype.render = function () {
var ss = aphrodite_1.StyleSheet.create(exports.defaultGridViewStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
return React.createElement("div", { className: aphrodite_1.css(ss.container, custom.container) }, React.createElement("div", { className: aphrodite_1.css(ss.header, custom.header) }, this.renderHeaderItems(ss, custom)), this.renderGrid(ss, custom), this.renderPagination(ss, custom));
};
GridViewImpl.prototype.componentWillReceiveProps = function (nextProps) {
var items = lodash_1.cloneDeep(nextProps.items);
var sortedItems = this.sortItems(items, this.props.columnDefinitions[this.state.currentSort.index], this.state.currentSort.sorted);
this.setState({
items: items,
sortedItems: sortedItems,
itemsPerPage: this.props.itemsPerPage || 25
});
};
return GridViewImpl;
}(React.Component);
exports.GridViewImpl = GridViewImpl;
var GridView = function (_super) {
__extends(GridView, _super);
function GridView() {
return _super !== null && _super.apply(this, arguments) || this;
}
return GridView;
}(GridViewImpl);
exports.GridView = GridView;
exports.default = GridView;