@flexis/ui
Version:
Styleless React Components
160 lines • 11.9 kB
JavaScript
import { __decorate } from "tslib";
import React, { PureComponent } from 'react';
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';
const HALF = 2;
let Tooltip = /** @class */ (() => {
class Tooltip extends PureComponent {
constructor() {
super(...arguments);
this.state = {
active: false,
tooltipWithOffset: false
};
this.elementRef = null;
this.tooltipRef = null;
}
render() {
const { className, id, tabIndex, content, placement, align, children, ...props } = this.props;
const { active, tooltipWithOffset } = this.state;
return (<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((<div ref={this.onTooltipRef} id={id} role='tooltip' {...props} className={style(classes.tooltip, {
[`${placement}Placement`]: Boolean(placement),
[`${align}Align`]: Boolean(align),
offset: tooltipWithOffset,
active
})} aria-hidden={!active}>
{content}
</div>), document.body)}
</span>);
}
componentDidUpdate(_, { active: prevActive }) {
const { active } = this.state;
if (!prevActive && active) {
this.setTooltipPosition();
}
}
onElementRef(ref) {
this.elementRef = ref;
}
onTooltipRef(ref) {
this.tooltipRef = ref;
}
onShow() {
this.setState(() => ({
active: true
}));
}
onHide() {
this.setState(() => ({
active: false
}));
}
setTooltipPosition() {
const { elementRef, tooltipRef } = this;
if (!elementRef || !tooltipRef) {
return;
}
const { placement, align } = this.props;
const { top: elementTop, left: elementLeft, width: elementWidth, height: elementHeight } = elementRef.getBoundingClientRect();
const { offsetWidth: tooltipWidth, offsetHeight: tooltipHeight, style } = tooltipRef;
let top = 0;
let 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 = `${top}px`;
style.left = `${left}px`;
const withOffset = setOverflowOffset(tooltipRef, top, left);
this.setState(() => ({
tooltipWithOffset: withOffset
}));
}
}
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
};
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;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcC5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ub29sdGlwL1Rvb2x0aXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUdiLGFBQWEsRUFDYixNQUFNLE9BQU8sQ0FBQztBQUNmLE9BQU8sRUFDTixZQUFZLEVBQ1osTUFBTSxXQUFXLENBQUM7QUFDbkIsT0FBTyxTQUFTLE1BQU0sWUFBWSxDQUFDO0FBQ25DLE9BQU8sRUFFTixJQUFJLEVBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUdOLFlBQVksRUFDWixlQUFlLEVBQ2YsV0FBVyxFQUNYLE1BQU0saUJBQWlCLENBQUM7QUFDekIsT0FBTyxpQkFBaUIsTUFBTSw2QkFBNkIsQ0FBQztBQUM1RCxPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLGtCQUFrQixDQUFDO0FBcUIxQixNQUFNLElBQUksR0FBRyxDQUFDLENBQUM7QUFFZjtJQUFBLE1BQXFCLE9BQVEsU0FBUSxhQUE2QjtRQUFsRTs7WUFnQkMsVUFBSyxHQUFHO2dCQUNQLE1BQU0sRUFBYSxLQUFLO2dCQUN4QixpQkFBaUIsRUFBRSxLQUFLO2FBQ3hCLENBQUM7WUFFTSxlQUFVLEdBQW9CLElBQUksQ0FBQztZQUNuQyxlQUFVLEdBQW1CLElBQUksQ0FBQztRQWdOM0MsQ0FBQztRQTlNQSxNQUFNO1lBRUwsTUFBTSxFQUNMLFNBQVMsRUFDVCxFQUFFLEVBQ0YsUUFBUSxFQUNSLE9BQU8sRUFDUCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFFBQVEsRUFDUixHQUFHLEtBQUssRUFDUixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDZixNQUFNLEVBQ0wsTUFBTSxFQUNOLGlCQUFpQixFQUNqQixHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7WUFFZixPQUFPLENBQ04sQ0FBQyxJQUFJLENBQ0osR0FBRyxDQUFDLENBQUMsSUFB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