@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
275 lines (274 loc) • 12.3 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 RaisedButton_1 = require("./RaisedButton");
var Input_1 = require("./Input");
exports.defaultDualListSelectStyle = {
container: {
display: 'flex',
justifyContent: 'center',
alignContent: 'center'
},
listSection: {
display: 'flex',
flexDirection: 'column',
flex: '1 1 auto',
alignItems: 'stretch',
alignContent: 'stretch'
},
listBox: {
flex: '1 1 auto',
border: 'solid 1px rgba(255, 255, 255, 0.2)',
borderTop: '0',
overflowY: 'auto',
overflowX: 'hidden'
},
listItem: {
cursor: 'pointer',
userSelect: 'none',
padding: '1px 15px'
},
selectedListItem: {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
},
buttons: {
display: 'flex',
flexDirection: 'column',
padding: '10px',
justifyContent: 'center',
alignItems: 'center'
},
button: {
margin: '10px'
},
filter: {
flex: '0 0 auto'
}
};
var DualListSelect = function (_super) {
__extends(DualListSelect, _super);
function DualListSelect(props) {
var _this = _super.call(this, props) || this;
_this.leftInputRef = null;
_this.rightInputRef = null;
_this.getRightItems = function () {
return lodash_1.clone(_this.state.rightItems);
};
_this.getLeftItems = function () {
return lodash_1.clone(_this.state.leftItems);
};
_this.getRightKeys = function () {
var keys = [];
for (var key in _this.state.rightItems) {
keys.push(key);
}
return keys;
};
_this.getLeftKeys = function () {
var keys = [];
for (var key in _this.state.leftItems) {
keys.push(key);
}
return keys;
};
_this.onLeftFilterTextChanged = function (e) {
_this.filterLeftItems(e.target.value);
};
_this.onRightFilterTextChanged = function (e) {
_this.filterRightItems(e.target.value);
};
// remove from left add to right
_this.selectItem = function (selectKey) {
var key = selectKey || _this.state.leftSelectedItemKey;
var leftItems = lodash_1.clone(_this.state.leftItems);
var rightItems = lodash_1.clone(_this.state.rightItems);
var item = lodash_1.clone(leftItems[key]);
rightItems[key] = item;
delete leftItems[key];
_this.setState({
rightItems: rightItems,
leftItems: leftItems,
filteredRightItems: rightItems,
filteredLeftItems: leftItems,
leftFilter: '',
rightFilter: '',
leftSelectedItemKey: ''
});
_this.leftInputRef.value = '';
};
// remove from right
_this.removeItem = function (selectKey) {
var key = selectKey || _this.state.rightSelectedItemKey;
var leftItems = lodash_1.clone(_this.state.leftItems);
var rightItems = lodash_1.clone(_this.state.rightItems);
var item = lodash_1.clone(rightItems[key]);
leftItems[key] = item;
delete rightItems[key];
_this.setState({
rightItems: rightItems,
leftItems: leftItems,
filteredRightItems: rightItems,
filteredLeftItems: leftItems,
leftFilter: '',
rightFilter: '',
rightSelectedItemKey: ''
});
_this.rightInputRef.value = '';
};
_this.selectAll = function () {
var rightItems = lodash_1.clone(_this.state.rightItems);
for (var key in _this.state.leftItems) {
rightItems[key] = lodash_1.clone(_this.state.leftItems[key]);
}
_this.setState({
rightItems: rightItems,
leftItems: {},
filteredRightItems: rightItems,
filteredLeftItems: {},
leftFilter: '',
rightFilter: '',
rightSelectedItemKey: ''
});
_this.rightInputRef.value = '';
};
_this.removeAll = function () {
var leftItems = lodash_1.clone(_this.state.leftItems);
for (var key in _this.state.rightItems) {
leftItems[key] = lodash_1.clone(_this.state.rightItems[key]);
}
_this.setState({
leftItems: leftItems,
rightItems: {},
filteredRightItems: {},
filteredLeftItems: leftItems,
leftFilter: '',
rightFilter: '',
rightSelectedItemKey: ''
});
_this.rightInputRef.value = '';
};
_this.filterRightItems = function (rightFilter) {
if (rightFilter === '') {
_this.setState({
rightFilter: rightFilter,
filteredRightItems: _this.state.rightItems
});
return;
}
var filteredRightItems = {};
for (var key in _this.state.rightItems) {
if (key.indexOf(rightFilter) === -1) continue;
filteredRightItems[key] = _this.state.rightItems[key];
}
_this.setState({
rightFilter: rightFilter,
filteredRightItems: filteredRightItems
});
};
_this.filterLeftItems = function (leftFilter) {
if (leftFilter === '') {
_this.setState({
leftFilter: leftFilter,
filteredLeftItems: _this.state.leftItems
});
return;
}
var filteredLeftItems = {};
for (var key in _this.state.leftItems) {
if (key.indexOf(leftFilter) === -1) continue;
filteredLeftItems[key] = _this.state.leftItems[key];
}
_this.setState({
leftFilter: leftFilter,
filteredLeftItems: filteredLeftItems
});
};
_this.renderLeftItems = function (ss, custom) {
var items = [];
var _loop_1 = function _loop_1(key) {
items.push(React.createElement("div", { key: key, className: key === _this.state.leftSelectedItemKey ? aphrodite_1.css(ss.listItem, ss.selectedListItem, custom.listItem, custom.selectedListItem) : aphrodite_1.css(ss.listItem, custom.listItem), onClick: function onClick() {
return _this.setState({ leftSelectedItemKey: key });
}, onDoubleClick: function onDoubleClick() {
return _this.selectItem(key);
} }, _this.state.filteredLeftItems[key]));
};
for (var key in _this.state.filteredLeftItems) {
_loop_1(key);
}
return items;
};
_this.renderRightItems = function (ss, custom) {
var items = [];
var _loop_2 = function _loop_2(key) {
items.push(React.createElement("div", { key: key, className: key === _this.state.rightSelectedItemKey ? aphrodite_1.css(ss.listItem, ss.selectedListItem, custom.listItem, custom.selectedListItem) : aphrodite_1.css(ss.listItem, custom.listItem), onClick: function onClick() {
return _this.setState({ rightSelectedItemKey: key });
}, onDoubleClick: function onDoubleClick() {
return _this.removeItem(key);
} }, _this.state.filteredRightItems[key]));
};
for (var key in _this.state.filteredRightItems) {
_loop_2(key);
}
return items;
};
_this.state = {
leftItems: lodash_1.clone(props.items),
rightItems: {},
leftFilter: '',
rightFilter: '',
filteredLeftItems: lodash_1.clone(props.items),
filteredRightItems: {},
leftSelectedItemKey: '',
rightSelectedItemKey: ''
};
return _this;
}
DualListSelect.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultDualListSelectStyle);
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.listSection, custom.listSection) }, React.createElement("div", { className: aphrodite_1.css(ss.filter, custom.filter) }, React.createElement(Input_1.default, { type: 'text', label: this.props.labelLeft || '', inputRef: function inputRef(r) {
return _this.leftInputRef = r;
}, placeholder: 'Filter', onChange: this.onLeftFilterTextChanged })), React.createElement("div", { className: aphrodite_1.css(ss.listBox, custom.listBox) }, this.renderLeftItems(ss, custom))), React.createElement("div", { className: aphrodite_1.css(ss.buttons, custom.buttons) }, React.createElement(RaisedButton_1.default, { styles: {
button: lodash_1.merge(exports.defaultDualListSelectStyle.button, this.props.styles ? this.props.styles.button : null || {})
}, onClick: this.selectAll }, React.createElement("i", { className: 'fa fa-angle-double-right' })), React.createElement(RaisedButton_1.default, { styles: {
button: lodash_1.merge(exports.defaultDualListSelectStyle.button, this.props.styles ? this.props.styles.button : null || {})
}, onClick: function onClick() {
return _this.selectItem();
} }, React.createElement("i", { className: 'fa fa-angle-right' })), React.createElement(RaisedButton_1.default, { styles: {
button: lodash_1.merge(exports.defaultDualListSelectStyle.button, this.props.styles ? this.props.styles.button : null || {})
}, onClick: function onClick() {
return _this.removeItem();
} }, React.createElement("i", { className: 'fa fa-angle-left' })), React.createElement(RaisedButton_1.default, { styles: {
button: lodash_1.merge(exports.defaultDualListSelectStyle.button, this.props.styles ? this.props.styles.button : null || {})
}, onClick: this.removeAll }, React.createElement("i", { className: 'fa fa-angle-double-left' }))), React.createElement("div", { className: aphrodite_1.css(ss.listSection, custom.listSection) }, React.createElement("div", { className: aphrodite_1.css(ss.filter, custom.filter) }, React.createElement(Input_1.default, { type: 'text', label: this.props.labelRight || '', inputRef: function inputRef(r) {
return _this.rightInputRef = r;
}, placeholder: 'Filter', onChange: this.onRightFilterTextChanged })), React.createElement("div", { className: aphrodite_1.css(ss.listBox, custom.listBox) }, this.renderRightItems(ss, custom))));
};
return DualListSelect;
}(React.Component);
exports.DualListSelect = DualListSelect;
exports.default = DualListSelect;