rendition/dist_esm5/tooltips.js

import { __extends, __makeTemplateObject } from "tslib";
import merge from 'lodash/merge';
import noop from 'lodash/noop';
import pick from 'lodash/pick';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styled from 'styled-components';
var TARGET_OFFSET = 3;
var CLICK_TIMEOUT = 1000;
var createOnRemoveObserver = function (element, onDetachCallback) {
    var observer = new MutationObserver(function () {
        if (!document.contains(element)) {
            observer.disconnect();
            onDetachCallback();
        }
    });
    observer.observe(document, {
        childList: true,
        subtree: true,
    });
    return observer;
};
var arrowStyle = "\n\tposition: absolute;\n\twidth: 0;\n\theight: 0;\n\tborder-color: transparent;\n\tborder-style: solid;\n";
var TooltipTopArrow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", " bottom: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 5px 5px 0;\n\tborder-top-color: #000;\n"], ["\n\t", " bottom: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 5px 5px 0;\n\tborder-top-color: #000;\n"])), arrowStyle);
var TooltipRightArrow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t", " top: 50%;\n\tleft: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 5px 5px 0;\n\tborder-right-color: #000;\n"], ["\n\t", " top: 50%;\n\tleft: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 5px 5px 0;\n\tborder-right-color: #000;\n"])), arrowStyle);
var TooltipLeftArrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t", " top: 50%;\n\tright: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 0 5px 5px;\n\tborder-left-color: #000;\n"], ["\n\t", " top: 50%;\n\tright: 0;\n\tmargin-top: -5px;\n\tborder-width: 5px 0 5px 5px;\n\tborder-left-color: #000;\n"])), arrowStyle);
var TooltipBottomArrow = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t", " top: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 0 5px 5px;\n\tborder-bottom-color: #000;\n"], ["\n\t", " top: 0;\n\tleft: 50%;\n\tmargin-left: -5px;\n\tborder-width: 0 5px 5px;\n\tborder-bottom-color: #000;\n"])), arrowStyle);
var getArrowElement = function (placement) {
    switch (placement) {
        case 'right':
            return TooltipRightArrow;
        case 'bottom':
            return TooltipBottomArrow;
        case 'left':
            return TooltipLeftArrow;
        default:
            return TooltipTopArrow;
    }
};
var TooltipElement = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-style: normal;\n\tfont-weight: 400;\n\tletter-spacing: normal;\n\tline-break: auto;\n\tline-height: 1.42857143;\n\tpadding: 5px;\n\tposition: absolute;\n\tmax-width: 300px;\n\ttext-align: left;\n\ttext-align: start;\n\ttext-decoration: none;\n\ttext-shadow: none;\n\ttext-transform: none;\n\tvisibility: hidden;\n\twhite-space: normal;\n\tword-break: normal;\n\tword-spacing: normal;\n\tword-wrap: normal;\n\tz-index: 10000;\n\tcolor: white;\n"], ["\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-style: normal;\n\tfont-weight: 400;\n\tletter-spacing: normal;\n\tline-break: auto;\n\tline-height: 1.42857143;\n\tpadding: 5px;\n\tposition: absolute;\n\tmax-width: 300px;\n\ttext-align: left;\n\ttext-align: start;\n\ttext-decoration: none;\n\ttext-shadow: none;\n\ttext-transform: none;\n\tvisibility: hidden;\n\twhite-space: normal;\n\tword-break: normal;\n\tword-spacing: normal;\n\tword-wrap: normal;\n\tz-index: 10000;\n\tcolor: white;\n"])));
var TooltipElementInner = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tbackground: black;\n\tborder-radius: 4px;\n\tpadding: 3px 8px;\n\ttext-align: center;\n"], ["\n\tbackground: black;\n\tborder-radius: 4px;\n\tpadding: 3px 8px;\n\ttext-align: center;\n"])));
var TooltipComponent = (function (_super) {
    __extends(TooltipComponent, _super);
    function TooltipComponent(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            show: false,
            placement: 'top',
            coordinates: {
                top: 0,
                left: 0,
            },
        };
        return _this;
    }
    TooltipComponent.prototype.observe = function (target) {
        var _this = this;
        if (this.observer) {
            this.observer.disconnect();
        }
        this.observer = createOnRemoveObserver(target, function () {
            _this.hide();
        });
    };
    TooltipComponent.prototype.show = function (e, tooltipText, options) {
        if (options === void 0) { options = {}; }
        var top = 0;
        var left = 0;
        var target = e.target;
        this.observe(target);
        var boundingClientRect = target.getBoundingClientRect();
        var boundingRect = pick(boundingClientRect, ['top', 'left', 'width', 'height']);
        boundingRect.top += window.scrollY;
        boundingRect.left += window.scrollX;
        var placement = options.placement, containerStyle = options.containerStyle, innerStyle = options.innerStyle, arrowStyle = options.arrowStyle;
        if (this.tooltipElementInner) {
            this.tooltipElementInner.innerText = tooltipText;
        }
        if (!placement || placement === 'top') {
            top = boundingRect.top - this.tooltipElement.clientHeight - TARGET_OFFSET;
            left =
                boundingRect.left +
                    boundingRect.width / 2 -
                    this.tooltipElement.clientWidth / 2;
        }
        if (placement === 'right') {
            top =
                boundingRect.top +
                    boundingRect.height / 2 -
                    this.tooltipElement.clientHeight / 2;
            left = boundingRect.left + boundingRect.width + TARGET_OFFSET;
        }
        if (placement === 'bottom') {
            top = boundingRect.top + boundingRect.height + TARGET_OFFSET;
            left =
                boundingRect.left +
                    boundingRect.width / 2 -
                    this.tooltipElement.clientWidth / 2;
        }
        if (placement === 'left') {
            top =
                boundingRect.top +
                    boundingRect.height / 2 -
                    this.tooltipElement.clientHeight / 2;
            left =
                boundingRect.left - this.tooltipElement.clientWidth - TARGET_OFFSET;
        }
        this.setState({
            coordinates: { top: top, left: left },
            show: true,
            placement: placement,
            containerStyle: containerStyle,
            innerStyle: innerStyle,
            arrowStyle: arrowStyle,
        });
    };
    TooltipComponent.prototype.hide = function () {
        if (this.observer) {
            this.observer.disconnect();
            this.observer = undefined;
        }
        this.setState({
            show: false,
            coordinates: {
                top: 0,
                left: 0,
            },
        });
    };
    TooltipComponent.prototype.render = function () {
        var _this = this;
        var _a = this.state, placement = _a.placement, containerStyle = _a.containerStyle, innerStyle = _a.innerStyle, arrowStyle = _a.arrowStyle;
        var Arrow = getArrowElement(placement);
        var tooltipStyle = merge({
            top: this.state.coordinates.top,
            left: this.state.coordinates.left,
            visibility: this.state.show ? 'visible' : 'hidden',
        }, containerStyle);
        return (React.createElement(TooltipElement, { style: tooltipStyle, ref: function (el) { return (_this.tooltipElement = el); } },
            React.createElement(TooltipElementInner, { ref: function (el) { return (_this.tooltipElementInner = el); }, style: innerStyle }),
            React.createElement(Arrow, { style: arrowStyle })));
    };
    return TooltipComponent;
}(React.Component));
var Tooltips = (function () {
    function Tooltips() {
        this.initialised = false;
        this.hideOnMouseOut = null;
    }
    Tooltips.prototype.initialiseElements = function () {
        var _this = this;
        if (this.initialised || !document || !document.body) {
            return;
        }
        var tooltipRoot = document.createElement('div');
        tooltipRoot.id = 'rendition-tooltip-root';
        document.body.appendChild(tooltipRoot);
        document.addEventListener('mouseover', function (e) {
            var target = e.target;
            if (!_this.hideOnMouseOut ||
                _this.hideOnMouseOut === target) {
                return;
            }
            if (_this.hideOnMouseOut.firstElementChild &&
                _this.hideOnMouseOut.contains &&
                _this.hideOnMouseOut.contains(target)) {
                return;
            }
            _this.hide();
            _this.hideOnMouseOut = null;
        });
        this.component = ReactDOM.render(React.createElement(TooltipComponent, null), tooltipRoot);
        this.initialised = true;
    };
    Tooltips.prototype.bindProps = function (props) {
        var _this = this;
        if (props.tooltip) {
            var options_1 = {};
            var trigger = 'hover';
            var tooltipText_1;
            if (typeof props.tooltip === 'string') {
                tooltipText_1 = props.tooltip;
            }
            else {
                tooltipText_1 = props.tooltip.text;
                options_1.placement = props.tooltip.placement;
                options_1.containerStyle = props.tooltip.containerStyle;
                options_1.innerStyle = props.tooltip.innerStyle;
                options_1.arrowStyle = props.tooltip.arrowStyle;
                if (props.tooltip.trigger) {
                    trigger = props.tooltip.trigger;
                }
            }
            if (tooltipText_1) {
                var showFn_1 = function (e) { return _this.show(e, tooltipText_1, options_1); };
                if (trigger === 'click') {
                    var oldFn_1 = props.onClick || noop;
                    var hideFn_1 = function () {
                        clearTimeout(_this.hideTimeout);
                        _this.hideTimeout = window.setTimeout(function () { return _this.hide(); }, CLICK_TIMEOUT);
                    };
                    props.onClick = function (e) {
                        showFn_1(e);
                        hideFn_1();
                        oldFn_1(e);
                    };
                }
                else {
                    var oldMEFn_1 = props.onMouseEnter || noop;
                    props.onMouseEnter = function (e) {
                        showFn_1(e);
                        oldMEFn_1(e);
                        if (e.target.disabled) {
                            _this.hideOnMouseOut = e.target;
                        }
                    };
                    var oldMLFn_1 = props.onMouseLeave || noop;
                    props.onMouseLeave = function (e) {
                        _this.hide();
                        oldMLFn_1(e);
                    };
                }
            }
        }
        return props;
    };
    Tooltips.prototype.show = function (e, tooltipText, options) {
        this.initialiseElements();
        this.component.show(e, tooltipText, options);
    };
    Tooltips.prototype.hide = function () {
        this.initialiseElements();
        this.component.hide();
    };
    return Tooltips;
}());
export { Tooltips };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;