@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
200 lines (199 loc) • 7.99 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 aphrodite_1 = require("aphrodite");
var __1 = require("..");
var lodash_1 = require("lodash");
var KeyCodes = __1.utils.KeyCodes;
exports.defaultMultiSelectStyle = {
container: {
display: 'flex',
flexDirection: 'column',
alignContent: 'stretch',
position: 'relative'
},
input: {
flex: '0 0 auto'
},
list: {
display: 'flex',
flexWrap: 'wrap',
flex: '1 1 auto',
position: 'relative',
minHeight: '0px',
maxHeight: '300px',
overflowX: 'hidden',
overflowY: 'auto',
userSelect: 'none',
backgroundColor: '#444'
},
listItem: {
flex: '1 1 auto',
cursor: 'pointer',
':hover': {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
}
},
highlightItem: {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
},
selectedItem: {},
selectedItemList: {
display: 'flex',
flexWrap: 'wrap',
userSelect: 'none',
backgroundColor: '#777',
position: 'relative'
},
selected: {
display: 'flex',
flex: '0 0 auto',
backgroundColor: '#222',
border: '1px solid rgba(255, 255, 255, 0.2)',
borderRadius: '5px',
cursor: 'pointer',
':hover': {
backgroundColor: '#555'
}
},
removeSelected: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '2px',
fontSize: '0.8em',
cursor: 'pointer',
':hover': {
color: 'darkred'
}
}
};
var MultiSelect = function (_super) {
__extends(MultiSelect, _super);
function MultiSelect(props) {
var _this = _super.call(this, props) || this;
_this.inputRef = null;
_this.selectedItems = function () {
return lodash_1.cloneDeep(_this.state.selectedItems);
};
_this.onInputChanged = function (e) {
var value = e.target.value;
if (_this.state.filterText === value) return;
_this.applyFilter(value);
};
_this.onKeyDown = function (e) {
if (e.keyCode === KeyCodes.KEY_DownArrow || e.keyCode === KeyCodes.KEY_RightArrow) {
if (_this.state.keyboardIndex + 1 < _this.state.filteredItems.length) {
_this.setState({
keyboardIndex: _this.state.keyboardIndex + 1
});
e.stopPropagation();
}
}
// up or left
if (e.keyCode === KeyCodes.KEY_UpArrow || e.keyCode === KeyCodes.KEY_LeftArrow) {
if (_this.state.keyboardIndex - 1 > -1) {
_this.setState({
keyboardIndex: _this.state.keyboardIndex - 1
});
e.stopPropagation();
}
}
// enter
if (e.keyCode === KeyCodes.KEY_Enter) {
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,
selectedItems: _this.state.selectedItems.concat([item])
});
};
_this.unselectItem = function (item) {
var index = __1.utils.findIndexWhere(_this.state.selectedItems, function (a) {
return _this.props.itemComparison(a, item);
});
var selectedItems = lodash_1.cloneDeep(_this.state.selectedItems);
selectedItems.splice(index, 1);
_this.setState({
selectedItems: selectedItems,
keyboardIndex: -1
});
};
var items = lodash_1.cloneDeep(props.items);
_this.state = {
items: items,
filteredItems: items,
selectedItems: lodash_1.cloneDeep(props.selectedItems),
filterText: '',
keyboardIndex: -1
};
return _this;
}
MultiSelect.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultMultiSelectStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
return React.createElement("div", { className: aphrodite_1.css(ss.container, custom.container) }, React.createElement(__1.Input, __assign({ inputRef: function inputRef(r) {
return _this.inputRef = r;
}, onChange: this.onInputChanged, onKeyDown: this.onKeyDown }, this.props.inputProps)), React.createElement("div", { style: { position: 'relative' } }, React.createElement("div", { style: { position: 'absolute', width: '100%', zIndex: 1 } }, React.createElement("div", { className: aphrodite_1.css(ss.selectedItemList, custom.selectedItemList) }, this.state.selectedItems.map(function (i) {
return React.createElement("div", { className: aphrodite_1.css(ss.selected, custom.selected), onClick: function onClick() {
return _this.unselectItem(i);
} }, React.createElement("div", { className: aphrodite_1.css(ss.selectedItem, custom.selectedItem) }, _this.props.renderSelectedItem(i, _this.props.renderData)), React.createElement("div", { className: aphrodite_1.css(ss.removeSelected, custom.removeSelected) }, React.createElement("i", { className: 'fa fa-times' })));
})), React.createElement("div", { className: aphrodite_1.css(ss.list, custom.list) }, this.state.filteredItems.map(function (item, index) {
if (__1.utils.findIndexWhere(_this.state.selectedItems, function (i) {
return _this.props.itemComparison(i, item);
}) > -1) 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 MultiSelect;
}(React.Component);
exports.MultiSelect = MultiSelect;
exports.default = MultiSelect;