@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
147 lines (146 loc) • 5.66 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 Input_1 = require("./Input");
var lodash_1 = require("lodash");
exports.defaultFilterSelectStyle = {
container: {
display: 'flex',
flexDirection: 'column',
alignContent: 'stretch',
position: 'relative'
},
input: {
flex: '0 0 auto'
},
list: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
flex: '1 1 auto',
position: 'absolute',
minHeight: '0px',
maxHeight: '300px',
overflowX: 'hidden',
overflowY: 'auto',
userSelect: 'none',
backgroundColor: '#444',
zIndex: 8888
},
listItem: {
flex: '1 1 auto',
cursor: 'pointer',
':hover': {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
}
},
highlightItem: {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
},
selectedItem: {
backgroundColor: 'rgba(220, 255, 230, 0.1)',
border: '1px solid rgba(255, 255, 255, 0.2)'
}
};
var FilterSelect = function (_super) {
__extends(FilterSelect, _super);
function FilterSelect(props) {
var _this = _super.call(this, props) || this;
_this.inputRef = null;
_this.onInputChanged = function (e) {
var value = e.target.value;
if (_this.state.filterText === value) return;
_this.applyFilter(value);
};
_this.onKeyDown = function (e) {
// down or right
if (e.keyCode === 40 || e.keyCode === 39) {
if (_this.state.keyboardIndex + 1 < _this.state.filteredItems.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.filteredItems[_this.state.keyboardIndex]);
e.stopPropagation();
}
}
};
_this.applyFilter = function (s) {
var filteredItems = [];
_this.state.items.forEach(function (item) {
if (_this.props.filter(s, item)) filteredItems.push(item);
});
_this.setState({
filteredItems: filteredItems,
filterText: s
});
};
_this.selectItem = function (item) {
_this.setState({
keyboardIndex: -1,
selectedItem: item
});
};
var items = lodash_1.cloneDeep(_this.props.items);
_this.state = {
items: items,
filteredItems: items,
selectedItem: null,
filterText: '',
keyboardIndex: -1
};
return _this;
}
FilterSelect.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultFilterSelectStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
return React.createElement("div", { className: aphrodite_1.css(ss.container, custom.container) }, React.createElement(Input_1.Input, { inputRef: function inputRef(r) {
return _this.inputRef = r;
}, onChange: this.onInputChanged, onKeyDown: this.onKeyDown }), React.createElement("div", null, this.state.selectedItem == null ? null : React.createElement("div", { className: aphrodite_1.css(ss.selectedItem, custom.selectedItem) }, this.props.renderItem(this.state.selectedItem, this.props.renderData)), React.createElement("div", { className: aphrodite_1.css(ss.list, custom.list) }, this.state.filteredItems.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.renderItem(item, _this.props.renderData));
}))));
};
return FilterSelect;
}(React.Component);
exports.FilterSelect = FilterSelect;
exports.default = FilterSelect;