@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
60 lines • 3.12 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
// REACT
import * as React from 'react';
// VENDOR
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { PositionContainer } from '../utils/PositionContainer';
const ToolTipContainer = styled('div') `
position: relative;
${({ display = 'inline-block' }) => css({ display })};
`;
export class Tooltip extends React.Component {
constructor() {
super(...arguments);
this.state = {
width: 0,
height: 0,
toolTipHeight: 0,
toolTipWidth: 0,
hidden: true,
};
this.tooltipContainerRef = React.createRef();
this.tooltipRef = React.createRef();
}
componentDidMount() {
const { current: toolTipContainer } = this.tooltipContainerRef;
const { current: toolTip } = this.tooltipRef;
// TODO: instead of setting state, what about using the render fxn?
if (toolTipContainer) {
this.setState({
height: toolTipContainer.clientHeight,
width: toolTipContainer.clientWidth,
});
}
if (toolTip) {
this.setState({
toolTipHeight: toolTip.clientHeight,
toolTipWidth: toolTip.clientWidth,
});
}
}
render() {
const _a = this.props, { arrowIndent, arrowSize, background, children, className, color = 'white', content, delay, debug, maxWidth, position = 'topEnd', showArrow, spacing = 8, wrapContent } = _a, props = __rest(_a, ["arrowIndent", "arrowSize", "background", "children", "className", "color", "content", "delay", "debug", "maxWidth", "position", "showArrow", "spacing", "wrapContent"]);
const { height, width, hidden, toolTipHeight, toolTipWidth, } = this.state;
return (React.createElement(ToolTipContainer, Object.assign({ content: content, onMouseEnter: () => this.setState({ hidden: false }), onMouseLeave: () => this.setState({ hidden: true }), ref: this.tooltipContainerRef, className: classNames('anchor-tooltip', className) }, props),
children,
React.createElement(PositionContainer, { active: !hidden, arrowIndent: arrowIndent, arrowSize: arrowSize, background: background, children: content, className: "anchor-tooltip-element", color: color, containerHeight: toolTipHeight, containerWidth: toolTipWidth, delay: delay, debug: debug, height: height, spacing: spacing, maxWidth: maxWidth, position: position, ref: this.tooltipRef, showArrow: showArrow, width: width, wrapContent: wrapContent })));
}
}
//# sourceMappingURL=Tooltip.component.js.map