@flexis/ui
Version:
Styleless React Components
256 lines (217 loc) • 13.6 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import { __decorate } from "tslib";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent;
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import { Bind } from '../../helpers';
import { AlignVariant, PlacementValues, AlignValues } from '../common/types';
import setOverflowOffset from '../common/setOverflowOffset';
import { style, classes } from './Tooltip.st.css';
var HALF = 2;
var Tooltip =
/** @class */
function () {
var Tooltip = /*#__PURE__*/function (_PureComponent) {
_inherits(Tooltip, _PureComponent);
function Tooltip() {
var _this;
_classCallCheck(this, Tooltip);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Tooltip).apply(this, arguments));
_this.state = {
active: false,
tooltipWithOffset: false
};
_this.elementRef = null;
_this.tooltipRef = null;
return _this;
}
_createClass(Tooltip, [{
key: "render",
value: function render() {
var _style;
var _this$props = this.props,
className = _this$props.className,
id = _this$props.id,
tabIndex = _this$props.tabIndex,
content = _this$props.content,
placement = _this$props.placement,
align = _this$props.align,
children = _this$props.children,
props = _objectWithoutProperties(_this$props, ["className", "id", "tabIndex", "content", "placement", "align", "children"]);
var _this$state = this.state,
active = _this$state.active,
tooltipWithOffset = _this$state.tooltipWithOffset;
return _createElement("span", {
ref: this.onElementRef,
className: style(classes.root, className),
onMouseEnter: this.onShow,
onFocus: this.onShow,
onMouseLeave: this.onHide,
onBlur: this.onHide,
tabIndex: tabIndex,
"aria-describedby": id
}, children, createPortal(_createElement("div", _extends({
ref: this.onTooltipRef,
id: id,
role: "tooltip"
}, props, {
className: style(classes.tooltip, (_style = {}, _defineProperty(_style, "".concat(placement, "Placement"), Boolean(placement)), _defineProperty(_style, "".concat(align, "Align"), Boolean(align)), _defineProperty(_style, "offset", tooltipWithOffset), _defineProperty(_style, "active", active), _style)),
"aria-hidden": !active
}), content), document.body));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(_, _ref) {
var prevActive = _ref.active;
var active = this.state.active;
if (!prevActive && active) {
this.setTooltipPosition();
}
}
}, {
key: "onElementRef",
value: function onElementRef(ref) {
this.elementRef = ref;
}
}, {
key: "onTooltipRef",
value: function onTooltipRef(ref) {
this.tooltipRef = ref;
}
}, {
key: "onShow",
value: function onShow() {
this.setState(function () {
return {
active: true
};
});
}
}, {
key: "onHide",
value: function onHide() {
this.setState(function () {
return {
active: false
};
});
}
}, {
key: "setTooltipPosition",
value: function setTooltipPosition() {
var elementRef = this.elementRef,
tooltipRef = this.tooltipRef;
if (!elementRef || !tooltipRef) {
return;
}
var _this$props2 = this.props,
placement = _this$props2.placement,
align = _this$props2.align;
var _elementRef$getBoundi = elementRef.getBoundingClientRect(),
elementTop = _elementRef$getBoundi.top,
elementLeft = _elementRef$getBoundi.left,
elementWidth = _elementRef$getBoundi.width,
elementHeight = _elementRef$getBoundi.height;
var tooltipWidth = tooltipRef.offsetWidth,
tooltipHeight = tooltipRef.offsetHeight,
style = tooltipRef.style;
var top = 0;
var left = 0;
switch (placement) {
case 'top':
top = elementTop;
break;
case 'right':
left = elementLeft + elementWidth - tooltipWidth;
break;
case 'bottom':
top = elementTop + elementHeight - tooltipHeight;
break;
case 'left':
left = elementLeft;
break;
default:
}
switch (align) {
case 'start':
switch (placement) {
case 'top':
case 'bottom':
left = elementLeft;
break;
case 'right':
case 'left':
top = elementTop;
break;
default:
}
break;
case 'center':
switch (placement) {
case 'top':
case 'bottom':
left = elementLeft + elementWidth / HALF;
break;
case 'right':
case 'left':
top = elementTop + elementHeight / HALF;
break;
default:
}
break;
case 'end':
switch (placement) {
case 'top':
case 'bottom':
left = elementLeft + elementWidth - tooltipWidth;
break;
case 'right':
case 'left':
top = elementTop + elementHeight - tooltipHeight;
break;
default:
}
break;
default:
}
style.top = "".concat(top, "px");
style.left = "".concat(left, "px");
var withOffset = setOverflowOffset(tooltipRef, top, left);
this.setState(function () {
return {
tooltipWithOffset: withOffset
};
});
}
}]);
return Tooltip;
}(PureComponent);
process.env.NODE_ENV !== "production" ? Tooltip.propTypes = {
id: PropTypes.string,
tabIndex: PropTypes.number,
placement: PropTypes.oneOf(PlacementValues).isRequired,
align: PropTypes.oneOf(AlignValues),
content: PropTypes.node.isRequired,
children: PropTypes.node.isRequired
} : void 0;
Tooltip.defaultProps = {
tabIndex: 0,
align: AlignVariant.Center
};
__decorate([Bind()], Tooltip.prototype, "onElementRef", null);
__decorate([Bind()], Tooltip.prototype, "onTooltipRef", null);
__decorate([Bind()], Tooltip.prototype, "onShow", null);
__decorate([Bind()], Tooltip.prototype, "onHide", null);
return Tooltip;
}();
export default Tooltip;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Rvb2x0aXAvVG9vbHRpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFQLE1BSU8sT0FKUDs7O0FBS0EsU0FDQyxZQURELFFBRU8sV0FGUDtBQUdBLE9BQU8sU0FBUCxNQUFzQixZQUF0QjtBQUNBLFNBRUMsSUFGRCxRQUdPLGVBSFA7QUFJQSxTQUdDLFlBSEQsRUFJQyxlQUpELEVBS0MsV0FMRCxRQU1PLGlCQU5QO0FBT0EsT0FBTyxpQkFBUCxNQUE4Qiw2QkFBOUI7QUFDQSxTQUNDLEtBREQsRUFFQyxPQUZELFFBR08sa0JBSFA7QUF3QkEsSUFBTSxJQUFJLEdBQUcsQ0FBYjs7QUFFQSxJQUFBLE9BQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixPQUFyQjtBQUFBOztBQUFBLHVCQUFBO0FBQUE7O0FBQUE7OztBQWdCQyxZQUFBLEtBQUEsR0FBUTtBQUNQLFFBQUEsTUFBTSxFQUFhLEtBRFo7QUFFUCxRQUFBLGlCQUFpQixFQUFFO0FBRlosT0FBUjtBQUtRLFlBQUEsVUFBQSxHQUE4QixJQUE5QjtBQUNBLFlBQUEsVUFBQSxHQUE2QixJQUE3QjtBQXRCVDtBQXNPQzs7QUF0T0Q7QUFBQTtBQUFBLCtCQXdCTztBQUFBOztBQUFBLDBCQVdELEtBQUssS0FYSjtBQUFBLFlBR0osU0FISSxlQUdKLFNBSEk7QUFBQSxZQUlKLEVBSkksZUFJSixFQUpJO0FBQUEsWUFLSixRQUxJLGVBS0osUUFMSTtBQUFBLFlBTUosT0FOSSxlQU1KLE9BTkk7QUFBQSxZQU9KLFNBUEksZUFPSixTQVBJO0FBQUEsWUFRSixLQVJJLGVBUUosS0FSSTtBQUFBLFlBU0osUUFUSSxlQVNKLFFBVEk7QUFBQSxZQVVELEtBVkM7O0FBQUEsMEJBZUQsS0FBSyxLQWZKO0FBQUEsWUFhSixNQWJJLGVBYUosTUFiSTtBQUFBLFlBY0osaUJBZEksZUFjSixpQkFkSTtBQWlCTCxlQUNDO0FBQ0MsVUFB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