@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
178 lines (177 loc) • 7.67 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 __1 = require("..");
var redux_typed_modules_1 = require("redux-typed-modules");
var MultiSelect_1 = require("./MultiSelect");
var KeyCodes = __1.utils.KeyCodes;
exports.defaultInlineMultiSelectEditStyle = {
defaultView: {
position: 'relative',
flex: '1 1 auto',
cursor: 'pointer',
padding: '4px'
},
editModeContainer: {
position: 'relative',
flex: '1 1 auto',
display: 'flex',
flexDirection: 'column',
minWidth: '0'
},
editModeButtons: {
display: 'flex',
flexDirection: 'row-reverse',
position: 'absolute',
top: '-1em',
right: '0'
},
editButton: {
position: 'absolute',
right: '0px',
bottom: '0px',
fontSize: '0.7em'
},
saveButton: {},
error: {
color: 'darkred',
fontSize: '0.9em'
}
};
var InlineMultiSelectEdit = function (_super) {
__extends(InlineMultiSelectEdit, _super);
function InlineMultiSelectEdit(props) {
var _this = _super.call(this, props) || this;
_this.editModeListenerID = null;
_this.id = '';
_this.selectRef = null;
_this.onEditModeActiveEvent = function (id) {
if (_this.id === id) return;
if (_this.state.editMode) {
_this.deactivateEditMode();
}
};
_this.onMouseleave = function () {
if (_this.state.showEditButton === false) return;
_this.setState({ showEditButton: false });
};
_this.onKeyDown = function (e) {
if (e.keyCode === KeyCodes.KEY_Escape) {
if (_this.state.editMode) {
_this.deactivateEditMode();
e.stopPropagation();
}
}
if (e.keyCode === KeyCodes.KEY_Enter) {
_this.doSave();
}
};
_this.showEditButton = function () {
if (_this.state.showEditButton) return;
_this.setState({ showEditButton: true });
};
_this.doSave = function () {
if (_this.props.value === _this.selectRef.selectedItems()) {
_this.deactivateEditMode();
return;
}
_this.props.onSave(_this.props.value, _this.selectRef.selectedItems()).then(function (result) {
if (result.ok) {
_this.selectRef = null;
_this.setState({
saving: false,
editMode: false,
errors: null
});
}
_this.setState({
saving: false,
errors: result.error
});
});
_this.setState({ saving: true });
};
_this.activateEditMode = function () {
_this.setState({
editMode: true,
showEditButton: false
});
__1.events.fire(InlineMultiSelectEdit.editModeActiveEvent, _this.id);
};
_this.deactivateEditMode = function () {
_this.selectRef = null;
_this.setState({ editMode: false });
};
_this.id = redux_typed_modules_1.generateID(7);
_this.state = {
editMode: false,
showEditButton: false,
saving: false,
errors: null
};
return _this;
}
InlineMultiSelectEdit.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultInlineMultiSelectEditStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
if (this.state.editMode) {
return React.createElement("div", { className: aphrodite_1.css(ss.editModeContainer, custom.editModeContainer), onKeyDown: this.onKeyDown }, this.state.errors ? React.createElement("div", { className: aphrodite_1.css(ss.error, custom.error) }, React.createElement(__1.Tooltip, { content: function content() {
return React.createElement("span", null, _this.state.errors);
} }, React.createElement("i", { className: 'fa fa-exclamation-circle' }), " Save failed.")) : null, React.createElement(MultiSelect_1.default, { items: this.props.items, ref: function ref(r) {
return _this.selectRef = r;
}, filter: this.props.filter, itemComparison: this.props.itemComparison, selectedItems: this.props.value, renderSelectedItem: this.props.renderSelectedItem, renderListItem: this.props.renderListItem, renderData: this.props.renderData, styles: this.props.selectStyles, inputProps: {
styles: {
inputWrapper: {
flex: '1 1 auto'
},
input: {
padding: '1px 10px'
}
}
} }), this.state.saving ? React.createElement(__1.FloatSpinner, { styles: { spinner: { position: 'absolute' } } }) : null, React.createElement("div", { className: aphrodite_1.css(ss.editModeButtons, custom.editModeButtons) }, React.createElement("a", { style: {
marginLeft: '4px',
fontSize: '0.8em'
}, onClick: this.deactivateEditMode }, "cancel"), React.createElement("a", { style: {
marginLeft: '4px',
fontSize: '0.8em'
}, onClick: this.doSave }, "save")));
}
return React.createElement("div", { className: aphrodite_1.css(ss.defaultView, custom.defaultView), onMouseEnter: this.showEditButton, onMouseOver: this.showEditButton, onMouseLeave: this.onMouseleave, onClick: this.activateEditMode }, this.props.value.map(function (i) {
return _this.props.renderSelectedItem(i, _this.props.renderData);
}), this.state.showEditButton ? React.createElement("div", { className: aphrodite_1.css(ss.editButton, custom.editButton) }, React.createElement("i", { className: 'fa fa-pencil' })) : null);
};
InlineMultiSelectEdit.prototype.componentDidMount = function () {
this.editModeListenerID = __1.events.on(InlineMultiSelectEdit.editModeActiveEvent, this.onEditModeActiveEvent);
};
InlineMultiSelectEdit.prototype.componentWillUnmount = function () {
__1.events.off(this.editModeListenerID);
this.editModeListenerID = null;
};
InlineMultiSelectEdit.editModeActiveEvent = 'input-edit-mode-active';
return InlineMultiSelectEdit;
}(React.Component);
exports.InlineMultiSelectEdit = InlineMultiSelectEdit;
exports.default = InlineMultiSelectEdit;