@csegames/camelot-unchained
Version:
Camelot Unchained Client Library
200 lines (199 loc) • 8.82 kB
JavaScript
;
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 });
/*
* 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/.
*/
/*
* Usage:
*
* A text tooltip is easy, just wrap the element you would like to have a tooltip
* displayed for and set the content to a string message!
* <Tooltip content='Hello World!'>
* <h1>Stuff and things</h1>
* </Tooltip>
*
* Tooltips can also be jsx elements!
* <Tooltip content={<img src='https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg' />}>
* <h1>Hover for a cat picture!</h1>
* </Tooltip>
*
*/
var React = require("react");
var utils_1 = require("../utils");
var aphrodite_1 = require("aphrodite");
exports.defaultToolTipStyle = {
Tooltip: {
display: 'inline-block',
position: 'relative'
},
tooltip: {
position: 'fixed',
backgroundColor: '#444',
border: '1px solid #4A4A4A',
color: '#ececec',
padding: '2px 5px',
maxWidth: '200px',
zIndex: 10,
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
},
tooltipFixed: {
position: 'fixed',
backgroundColor: '#444',
border: '1px solid #4A4A4A',
color: '#ececec',
padding: '2px 5px',
maxWidth: '200px',
zIndex: 10,
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
}
};
var Tooltip = function (_super) {
__extends(Tooltip, _super);
function Tooltip(props) {
var _this = _super.call(this, props) || this;
_this.onMouseMove = function (e) {
if (_this.props.fixedMode && !_this.state.tooltipDimensions) {
_this.setState({ tooltipDimensions: _this.tooltipRef.getBoundingClientRect() });
}
var computedStyle;
if (_this.props.fixedMode && _this.state.tooltipDimensions) {
var _a = _this.childRef.getBoundingClientRect(),
top_1 = _a.top,
left = _a.left;
computedStyle = _this.computeStyle(left, top_1, _this.state.offsetLeft, _this.state.offsetTop, _this.state.offsetRight, _this.state.offsetBottom);
}
if (!_this.props.fixedMode) {
computedStyle = _this.computeStyle(e.clientX, e.clientY, _this.state.offsetLeft, _this.state.offsetTop, _this.state.offsetRight, _this.state.offsetBottom);
}
if (_this.tooltipRef && computedStyle) {
_this.tooltipRef.style.left = computedStyle.left ? computedStyle.left : 'auto';
_this.tooltipRef.style.right = computedStyle.right ? computedStyle.right : 'auto';
_this.tooltipRef.style.bottom = computedStyle.bottom ? computedStyle.bottom : 'auto';
_this.tooltipRef.style.top = computedStyle.top ? computedStyle.top : 'auto';
}
};
_this.onMouseEnter = function (e) {
if (_this.props.onTooltipShow) {
_this.props.onTooltipShow();
}
_this.setState({
show: true,
wndRegion: utils_1.windowQuadrant(e.clientX, e.clientY)
});
};
_this.onMouseleave = function () {
if (_this.props.onTooltipHide) {
_this.props.onTooltipHide();
}
_this.setState({ show: false });
};
_this.computeStyle = function (x, y, offsetLeft, offsetTop, offsetRight, offsetBottom) {
var _a = _this.childRef.getBoundingClientRect(),
top = _a.top,
left = _a.left,
width = _a.width,
height = _a.height;
var wndRegion = typeof _this.props.wndRegion === 'number' ? _this.props.wndRegion : _this.state.wndRegion;
if (_this.props.fixedMode && _this.state.tooltipDimensions) {
switch (wndRegion) {
case utils_1.Quadrant.TopLeft:
return {
left: x + offsetLeft,
top: y + height + offsetTop
};
case utils_1.Quadrant.TopRight:
return {
left: x - _this.state.tooltipDimensions.width + width + offsetRight,
top: y + height + offsetTop
};
case utils_1.Quadrant.BottomLeft:
return {
left: x + offsetLeft,
top: y - _this.state.tooltipDimensions.height + offsetBottom
};
case utils_1.Quadrant.BottomRight:
return {
left: x - _this.state.tooltipDimensions.width + width + offsetRight,
top: y - _this.state.tooltipDimensions.height + offsetBottom
};
}
} else {
switch (wndRegion) {
case utils_1.Quadrant.TopLeft:
return {
left: x + offsetLeft + "px",
top: y + offsetTop + "px"
};
case utils_1.Quadrant.TopRight:
return {
right: window.window.innerWidth - x + offsetRight + "px",
top: y + offsetTop + "px"
};
case utils_1.Quadrant.BottomLeft:
return {
left: x + offsetLeft + "px",
bottom: window.window.innerHeight - y + offsetBottom + "px"
};
case utils_1.Quadrant.BottomRight:
return {
right: window.window.innerWidth - x + offsetRight + "px",
bottom: window.window.innerHeight - y + offsetBottom + "px"
};
}
}
};
_this.state = {
wndRegion: utils_1.Quadrant.TopLeft || _this.props.wndRegion,
show: _this.props.show || false,
ttClassName: _this.props.tooltipClassName || 'Tooltip',
offsetLeft: _this.props.offsetLeft || 10,
offsetTop: _this.props.offsetTop || 10,
offsetRight: _this.props.offsetRight || 5,
offsetBottom: _this.props.offsetBottom || 5,
tooltipDimensions: null
};
return _this;
}
Tooltip.prototype.render = function () {
var _this = this;
var ss = aphrodite_1.StyleSheet.create(exports.defaultToolTipStyle);
var custom = aphrodite_1.StyleSheet.create(this.props.styles || {});
var showTooltip = typeof this.props.show !== 'undefined' ? this.props.show : this.state.show;
var fixed = this.props.fixedMode || false;
return React.createElement("div", { className: aphrodite_1.css(ss.Tooltip, custom.Tooltip) }, React.createElement("div", { ref: function ref(_ref) {
return _this.childRef = _ref;
}, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseleave, onMouseMove: this.onMouseMove }, this.props.children), showTooltip ? React.createElement("div", { ref: function ref(_ref2) {
return _this.tooltipRef = _ref2;
}, className: aphrodite_1.css(!fixed && ss.tooltip, !fixed && custom.tooltip, fixed && ss.tooltipFixed, fixed && custom.tooltipFixed) }, typeof this.props.content === 'string' ? this.props.content : React.createElement(this.props.content, __assign({}, this.props.contentProps))) : null);
};
return Tooltip;
}(React.Component);
exports.Tooltip = Tooltip;
exports.default = Tooltip;