@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
124 lines (123 loc) • 4.37 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.
*
* <Dialog content={(props: any) => <div>Are you sure?</div>}
* cancelOnClickOutside={true} >
* <button>Click Me!</button>
* </Dialog>
*
*/
var React = require("react");
var aphrodite_1 = require("aphrodite");
exports.defaultDialogStyle = {
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)',
zIndex: 99999
},
dialog: {
backgroundColor: '#444',
minWidth: '250px',
minHeight: '100px',
display: 'flex',
flexDirection: 'column'
},
contentWrapper: {
flex: '1 1 auto'
}
};
var Dialog = function (_super) {
__extends(Dialog, _super);
function Dialog(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.onMouseEnter = function () {
_this.mouseOver = true;
};
_this.onMouseleave = function () {
_this.mouseOver = false;
};
_this.windowMouseDown = function () {
if (_this.state.closeOnClickOutside && !_this.state.hidden && !_this.mouseOver) {
_this.hide();
}
};
_this.clicked = function () {
if (!_this.state.hidden) return;
_this.show();
window.addEventListener('mousedown', _this.windowMouseDown);
};
_this.state = {
hidden: true,
closeOnClickOutside: _this.props.closeOnClickOutside || false
};
return _this;
}
Dialog.prototype.render = function () {
var ss = aphrodite_1.StyleSheet.create(exports.defaultDialogStyle);
var custom = aphrodite_1.StyleSheet.create(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, custom.container) }, React.createElement("div", { className: aphrodite_1.css(ss.dialog, custom.dialog), onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseleave }, React.createElement("div", { className: aphrodite_1.css(ss.contentWrapper, custom.contentWrapper) }, React.createElement(this.props.content, __assign({}, this.props.contentProps))))));
};
Dialog.prototype.componentWillUnmount = function () {
window.removeEventListener('mousedown', this.windowMouseDown);
};
return Dialog;
}(React.Component);
exports.Dialog = Dialog;
exports.default = Dialog;