@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
156 lines (155 loc) • 5.54 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 });
/*
* Usage:
*
* Wrap any element with this component and you'll get a confirmation
* dialog popup when the element inside is clicked.
*
* <ConfirmDialog onConfirm={() => Do something }
* onCancel={() => Do something}
* content={(props: any) => <div>Are you sure?</div>}
* cancelOnClickOutside={true} >
* <button>Click Me!</button>
* </ConfirmDialog>
*
*/
var React = require("react");
var aphrodite_1 = require("aphrodite");
var lodash_1 = require("lodash");
var defaultStyles = {
container: {
position: 'fixed',
top: '0',
bottom: '0',
left: '0',
right: '0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'default',
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
dialog: {
backgroundColor: '#444',
minWidth: '250px',
minHeight: '100px',
display: 'flex',
flexDirection: 'column'
},
content: {
padding: '10px',
flex: '1 1 auto'
},
buttons: {
display: 'flex',
flex: '0 0 auto',
justifyContent: 'space-around',
alignItems: 'center',
width: '100%',
padding: '10px 20px'
},
confirmButton: {
padding: '5px 10px',
cursor: 'pointer',
':hover': {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
}
},
cancelButton: {
padding: '5px 10px',
cursor: 'pointer',
':hover': {
backgroundColor: 'rgba(0, 0, 0, 0.2)'
}
}
};
var ConfirmDialog = function (_super) {
__extends(ConfirmDialog, _super);
function ConfirmDialog(props) {
var _this = _super.call(this, props) || this;
_this.mouseOver = false;
_this.show = function () {
_this.setState({
hidden: false
});
_this.mouseOver = false;
};
_this.hide = function () {
_this.setState({
hidden: true
});
window.removeEventListener('mousedown', _this.windowMouseDown);
_this.mouseOver = false;
};
_this.confirm = function () {
_this.hide();
_this.props.onConfirm();
};
_this.cancel = function () {
_this.hide();
_this.props.onCancel();
};
_this.onMouseEnter = function () {
_this.mouseOver = true;
};
_this.onMouseleave = function () {
_this.mouseOver = false;
};
_this.windowMouseDown = function () {
if (_this.state.cancelOnClickOutside && !_this.state.hidden && !_this.mouseOver) {
_this.cancel();
}
};
_this.clicked = function () {
if (!_this.state.hidden) return;
_this.show();
window.addEventListener('mousedown', _this.windowMouseDown);
};
_this.state = {
hidden: true,
cancelOnClickOutside: _this.props.cancelOnClickOutside || false
};
return _this;
}
ConfirmDialog.prototype.render = function () {
var ss = aphrodite_1.StyleSheet.create(lodash_1.merge(defaultStyles, this.props.style || {}));
return React.createElement("div", { onClick: this.clicked, style: { display: 'inline-block' } }, this.props.children, this.state.hidden ? null : React.createElement("div", { className: aphrodite_1.css(ss.container) }, React.createElement("div", { className: aphrodite_1.css(ss.dialog), onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseleave }, React.createElement("div", { className: aphrodite_1.css(ss.content) }, React.createElement(this.props.content, __assign({}, this.props.contentProps))), React.createElement("div", { className: aphrodite_1.css(ss.buttons) }, React.createElement("div", { className: aphrodite_1.css(ss.confirmButton), onClick: this.confirm }, this.props.confirmButtonContent || 'Confirm'), React.createElement("div", { className: aphrodite_1.css(ss.cancelButton), onClick: this.cancel }, this.props.cancelButtonContent || 'Cancel')))));
};
ConfirmDialog.prototype.componentWillUnmount = function () {
window.removeEventListener('mousedown', this.windowMouseDown);
};
return ConfirmDialog;
}(React.Component);
exports.ConfirmDialog = ConfirmDialog;
exports.default = ConfirmDialog;