@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
160 lines (159 loc) • 6.23 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");
var lodash_1 = require("lodash");
exports.defaultDropDownSelectStyle = {
container: {
display: 'flex',
flexDirection: 'column',
alignContent: 'stretch',
position: 'relative',
userSelect: 'none'
},
listWrapper: {
position: 'relative',
flex: '1 1 auto',
display: 'flex',
width: '100%'
},
list: {
width: '100%',
display: 'flex',
flexDirection: 'column',
flexWrap: 'wrap',
flex: '1 1 auto',
position: 'absolute',
minHeight: '0px',
maxHeight: '300px',
overflowX: 'hidden',
overflowY: 'auto',
userSelect: 'none',
backgroundColor: '#444',
zIndex: 8888,
transition: 'all 0.5s'
},
listMinimized: {
maxHeight: '0px'
},
listItem: {
flex: '1 1 auto',
cursor: 'pointer',
':hover': {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
}
},
highlightItem: {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
},
selected: {
display: 'flex',
cursor: 'pointer',
userSelect: 'none',
border: '1px solid rgba(255, 255, 255, 0.1)'
},
caret: {
display: 'flex',
alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
flex: '0 0 auto',
padding: '10px',
backgroundColor: 'rgba(0, 0, 0, 0.1)',
':hover': {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
}
},
selectedItem: {
flex: '1 1 auto'
}
};
var DropDownSelect = function (_super) {
__extends(DropDownSelect, _super);
function DropDownSelect(props) {
var _this = _super.call(this, props) || this;
_this.selectedItem = function () {
return _this.state.selectedItem;
};
_this.onKeyDown = function (e) {
// down or right
if (e.keyCode === 40 || e.keyCode === 39) {
if (_this.state.keyboardIndex + 1 < _this.state.items.length) {
_this.setState({
keyboardIndex: _this.state.keyboardIndex + 1
});
e.stopPropagation();
}
}
// up or left
if (e.keyCode === 38 || e.keyCode === 37) {
if (_this.state.keyboardIndex - 1 > -1) {
_this.setState({
keyboardIndex: _this.state.keyboardIndex - 1
});
e.stopPropagation();
}
}
// enter
if (e.keyCode === 13) {
if (_this.state.keyboardIndex > -1) {
_this.selectItem(_this.state.items[_this.state.keyboardIndex]);
e.stopPropagation();
}
}
};
_this.selectItem = function (item) {
_this.setState({
keyboardIndex: -1,
selectedItem: item,
dropDownOpen: false
});
_this.props.onSelectedItemChaned(item);
};
var items = lodash_1.cloneDeep(_this.props.items);
_this.state = {
items: items,
selectedItem: _this.props.selectedItem || items[0],
keyboardIndex: -1,
dropDownOpen: false
};
return _this;
}
DropDownSelect.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultDropDownSelectStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
return React.createElement("div", { className: aphrodite_1.css(ss.container, custom.container), onKeyDown: this.onKeyDown }, React.createElement("div", { className: aphrodite_1.css(ss.selected, custom.selected), onClick: function onClick() {
return _this.setState({ dropDownOpen: !_this.state.dropDownOpen });
} }, React.createElement("div", { className: aphrodite_1.css(ss.selectedItem, custom.selectedItem) }, this.props.renderSelectedItem(this.state.selectedItem, this.props.renderData)), React.createElement("div", { className: aphrodite_1.css(ss.caret, custom.caret) }, React.createElement("i", { className: "fa fa-caret-" + (this.state.dropDownOpen ? 'up' : 'down') }))), React.createElement("div", { className: aphrodite_1.css(ss.listWrapper, custom.listWrapper) }, React.createElement("div", { className: this.state.dropDownOpen ? aphrodite_1.css(ss.list, custom.list) : aphrodite_1.css(ss.list, custom.list, ss.listMinimized, custom.listMinimized) }, this.state.items.map(function (item, index) {
if (item === _this.state.selectedItem) return null;
return React.createElement("div", { key: index, className: _this.state.keyboardIndex === index ? aphrodite_1.css(ss.listItem, ss.highlightItem, custom.listItem, custom.highlightItem) : aphrodite_1.css(ss.listItem, custom.listItem), onClick: function onClick() {
return _this.selectItem(item);
} }, _this.props.renderListItem(item, _this.props.renderData));
}))));
};
return DropDownSelect;
}(React.Component);
exports.DropDownSelect = DropDownSelect;
exports.default = DropDownSelect;