@beisen/ethos/lib/tool-tip/index.js

beisencloud pc react components

'use strict';

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp; /**
                    * Created by xiangjian on 2016/7/11.
                    */
/* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _commonFunc = require('../common-func');

require('./index.scss');

var _toolTipEl = require('./toolTipEl');

var _toolTipEl2 = _interopRequireDefault(_toolTipEl);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ToolTip = (_temp = _class = function (_Component) {
    (0, _inherits3.default)(ToolTip, _Component);

    function ToolTip(props, context) {
        (0, _classCallCheck3.default)(this, ToolTip);

        var _this = (0, _possibleConstructorReturn3.default)(this, (ToolTip.__proto__ || (0, _getPrototypeOf2.default)(ToolTip)).call(this, props, context));

        _this.getToolELSize = function (width, height) {
            _this._toolWidth = width;
            _this._toolHeight = height;
        };

        _this.renderDom = function (style, arrowStyle, single) {
            var wrapper = document.querySelector(".tooltip__wrapper");
            var ToolTipContent = wrapper && wrapper.querySelector(".tooltip-inner");
            var length = _this.isHaveHTMLTag() ? _this._toolWidth : _this.getTitleLength(_this.props.title || ''); //获取title中内容的长度
            if (ToolTipContent && ToolTipContent.style) {
                ToolTipContent.style.maxWidth = length > 210 ? '600px' : '300px';
            }
            _reactDom2.default.unstable_renderSubtreeIntoContainer(_this, _react2.default.createElement(_toolTipEl2.default, { length: length, hidden: true, title: _this.props.title, single: single, tipsDes: _this.props.tipsDes, tipsReason: _this.props.tipsReason, htmlTag: _this.props.htmlTag, getToolELSize: _this.getToolELSize, style: {}, arrowStyle: {}, position: _this.state.position }), _this.hidden);
            _reactDom2.default.unstable_renderSubtreeIntoContainer(_this, _react2.default.createElement(_toolTipEl2.default, { title: _this.props.title, single: single, tipsDes: _this.props.tipsDes, tipsReason: _this.props.tipsReason, htmlTag: _this.props.htmlTag, getToolELSize: _this.getToolELSize, style: style, arrowStyle: arrowStyle, position: _this.state.position }), _this.wrapper);
        };

        _this.isHaveHTMLTag = function () {
            var pattern = /(<br\s*\/>)/im;
            var tips = _this.props.title;
            if (_this.props.tipsReason) {
                tips = _this.props.title + "<br/>" + _this.props.tipsDes + _this.props.tipsReason;
                tips = _this.single ? _this.props.tipsReason : tips;
            }
            return pattern.test(tips);
        };

        _this.state = { position: 'top' };
        _this.handleMouseMove = _this.handleMouseMove.bind(_this);
        _this.handleMouseOut = _this.handleMouseOut.bind(_this);
        _this.handleClick = _this.handleClick.bind(_this);
        _this.getToolTipPosition = _this.getToolTipPosition.bind(_this);
        _this.getToolTipOffset = _this.getToolTipOffset.bind(_this);
        _this.getToolTipArrowOffSet = _this.getToolTipArrowOffSet.bind(_this);
        _this.getTitleLength = _this.getTitleLength.bind(_this);
        _this.resetTipPosition = _this.resetTipPosition.bind(_this);
        return _this;
    }

    (0, _createClass3.default)(ToolTip, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            this.container = document.body;
            var _dom = document.getElementsByClassName('tooltip__wrapper');
            if (!_dom.length) {
                this.wrapper = document.createElement('div');
                this.wrapper.className = 'tooltip__wrapper';
                this.container.appendChild(this.wrapper);
            } else {
                this.wrapper = _dom[0];
            }

            var hidden = document.getElementsByClassName('tooltip__hidden');
            if (!hidden.length) {
                this.hidden = document.createElement('div');
                this.hidden.className = 'tooltip__hidden';
                this.container.appendChild(this.hidden);
            } else {
                this.hidden = hidden[0];
            }

            //获取包裹的DOM元素
            this.componentEl = _reactDom2.default.findDOMNode(this);
            //在元素上绑定事件
            this.componentEl && this.componentEl.addEventListener('mouseenter', this.handleMouseMove);
            this.componentEl && this.componentEl.addEventListener('mouseleave', this.handleMouseOut);
            this.componentEl && this.componentEl.addEventListener('click', this.handleClick);
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this.componentEl && this.componentEl.removeEventListener('mouseenter', this.handleMouseMove);
            this.componentEl && this.componentEl.removeEventListener('mouseleave', this.handleMouseOut);
            this.componentEl && this.componentEl.removeEventListener('click', this.handleClick);
            // this.handleMouseOut();
            // this.container.removeChild(this.ToolTipEl);
            // this.container.removeChild(this.ToolTipArrow);
        }
    }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (nextProps.title == '' && nextProps.alwaysShowTips == 'true') {
                var tooltip = document.getElementsByClassName("tooltip");
                if (tooltip && tooltip.length > 0 && this.wrapper && this.ToolTipEl && this.ToolTipArrow) {
                    this.ToolTipEl ? this.wrapper.removeChild(this.ToolTipEl) : null;
                    this.ToolTipArrow ? this.wrapper.removeChild(this.ToolTipArrow) : null;
                }
            }
        }
    }, {
        key: 'handleMouseMove',
        value: function handleMouseMove(e) {
            // 当前内容宽度没有达到容器宽度，不渲染 tooltip
            // 仅当内容为文本时判定，防止类似图标展示提示的情况被误判
            // alwaysShowTips 为强制展示开关，供特殊情况使用
            // if (!this.props.alwaysShowTips && e.currentTarget && e.currentTarget.scrollWidth <= e.currentTarget.clientWidth && e.currentTarget.innerText.length > 0) {
            //     return;
            // }
            this.single = true;

            var isEdge = navigator.userAgent.indexOf('Edge') > 0 ? true : false;
            var isIe = "ActiveXObject" in window;

            var tempW = isEdge || isIe ? 1 : 0;

            // 增加了在 IE 下加 1px 判断的逻辑，因为在 IE 下取 scrollWidth 会始终比在其他浏览器下大 1px
            if (e.target.className.indexOf('form-item__text') >= 0 && e.target.offsetHeight < e.target.scrollHeight) {
                this.single = false;
            } else if (!this.props.tipsReason && !this.props.alwaysShowTips && e.currentTarget && e.currentTarget.scrollWidth <= e.currentTarget.clientWidth + tempW && e.currentTarget.innerText.length > 0) {
                return;
            } else if (e.currentTarget && e.currentTarget.scrollWidth > e.currentTarget.clientWidth + tempW && e.currentTarget.innerText.length > 0) {
                this.single = false;
            }

            var hidden = this.props.hidden; //如果组件设置为隐藏或者没有提示内容，默认不显示ToolTip
            //判断title是否全是空格组成，如果没有其它字符则不显示tips

            if (this.props.title === '' || this.props.title.replace(/\s+/g, "").length == 0 || hidden) {
                return;
            }
            this.renderDom({}, {}, this.single);
            _reactDom2.default.unmountComponentAtNode(this.wrapper);
            this.ToolTipEl = document.createElement('div'); //创建ToolTip显示区域
            this.ToolTipArrow = document.createElement('div'); //创建显示区域指向箭头
            this.ToolTipArrow.className = 'tooltip-arrow';
            this.ToolTipArrow.id = 'tooltip-arrow';
            var ToolTipContent = document.createElement('div'); //创建提示内容显示区域
            ToolTipContent.className = 'tooltip-inner';
            // if(true) { //若为side,则会接受后台数据
            var showHtmlTag = this.filterString(this.props.title);
            var propsTitle = showHtmlTag ? this.props.title : (0, _commonFunc.encode)(this.props.title);
            ToolTipContent.innerHTML = propsTitle;
            // } else {
            // ToolTipContent.textContent = this.props.title;
            // }
            var length = this.isHaveHTMLTag() ? this._toolWidth : this.getTitleLength(this.props.title || ''); //获取title中内容的长度
            if (length > 210) {
                ToolTipContent.style.maxWidth = '600px';
            } else {
                ToolTipContent.style.maxWidth = '300px';
            }
            this.ToolTipEl.appendChild(ToolTipContent);
            this.wrapper.appendChild(this.ToolTipEl);
            this.wrapper.appendChild(this.ToolTipArrow);
            this.wrapper.style.height = '0';
            this.wrapper.style.lineHeight = '0';
            this.wrapper.style.marginTop = "-25%";
            this.wrapper.style.maxHeight = '0';
            var ToolTipElPosition = this.getToolTipPosition(e); //获取ToolTipEl的位置
            var ToolTipElOffset = this.getToolTipOffset(); //获取ToolTipEl的偏移量
            var ToolTipArrowOffSet = this.getToolTipArrowOffSet();
            var ToolTipELeft = ToolTipElPosition.x + ToolTipElOffset.x;

            this.ToolTipEl.style.left = ToolTipELeft > 0 ? ToolTipELeft + 'px' : 0; //当提示框left值小于0时，重置为0
            this.ToolTipEl.style.top = ToolTipElPosition.y + ToolTipElOffset.y + 'px';
            this.ToolTipArrow.style.left = ToolTipElPosition.x - ToolTipArrowOffSet.x + 'px';
            this.ToolTipArrow.style.top = ToolTipElPosition.y + ToolTipArrowOffSet.y + 'px';
            this.wrapper.style.height = 'initial';
            this.wrapper.style.lineHeight = 'initial';
            this.wrapper.style.marginTop = "0";
            this.wrapper.style.maxHeight = 'initial';
            this.ToolTipEl.className = 'tooltip ' + this.state.position;
            this.ToolTipArrow.className = 'tooltip-arrow ' + this.state.position;
            var arrowRight = document.getElementById('tooltip-arrow').style.left;
            var arrowToRight = window.innerWidth - parseInt(arrowRight.split('p')[0]) - 5;
            if (arrowToRight < ToolTipContent.offsetWidth / 2) {
                var react = this.ToolTipEl.getClientRects()[0];
                this.ToolTipEl.style.top = ToolTipElPosition.y - react.height - 4 + 'px';
            }

            // repeat ----
            if (window.scrollX || window.pageXOffsetX) {
                ToolTipElPosition = this.getToolTipPosition(e); //获取ToolTipEl的位置
                ToolTipElOffset = this.getToolTipOffset(); //获取ToolTipEl的偏移量
                ToolTipArrowOffSet = this.getToolTipArrowOffSet();
                ToolTipELeft = ToolTipElPosition.x + ToolTipElOffset.x;
                this.ToolTipEl.style.left = ToolTipELeft > 0 ? ToolTipELeft + 'px' : 0; //当提示框left值小于0时，重置为0
                this.ToolTipEl.style.top = ToolTipElPosition.y + ToolTipElOffset.y + 'px';
                this.ToolTipArrow.style.left = ToolTipElPosition.x - ToolTipArrowOffSet.x + 'px';
                this.ToolTipArrow.style.top = ToolTipElPosition.y + ToolTipArrowOffSet.y + 'px';
            }
            // -----
            var ToolTipElRect = this.ToolTipEl.getBoundingClientRect();

            var tmpHeight = 5;
            if (this.props.tipsReason && !this.single) {
                tmpHeight = 35;
            }
            var scrollX = window.scrollX != undefined ? window.scrollX : window.pageXOffset;

            if (ToolTipElRect.top > tmpHeight && this.props.tipsPosition !== 'bottom') {
                //如果Tip向上显示的时候没有超过页面上边界，则正常显示
                this.ToolTipEl.style.opacity = 1;
                this.ToolTipArrow.style.opacity = 1;
                var realWidth = 'auto';
                var hiddenDom = document.getElementsByClassName("tooltip__hidden")[0];
                if (hiddenDom && hiddenDom.querySelector(".tooltip")) {
                    var tempWidth = hiddenDom.querySelector(".tooltip").clientWidth;
                    var domWidth = 300;
                    if (length > 210) {
                        realWidth = (tempWidth > 600 ? 600 : tempWidth) + 'px';
                        domWidth = tempWidth > 600 ? 600 : tempWidth;
                    } else {
                        realWidth = (tempWidth > 300 ? 300 : tempWidth + 1) + 'px';
                        domWidth = tempWidth > 300 ? 300 : tempWidth;
                    }
                }
                this.ToolTipEl.style.width = realWidth;
                var resetTipPosition = this.resetTipPosition();
                var _ToolTipElPosition = this.getToolTipPosition(e); //获取ToolTipEl的位置
                var _ToolTipElOffset = this.getToolTipOffset(); //获取ToolTipEl的偏移量
                var resetTipPositionLeft = resetTipPosition.ToolTipX + resetTipPosition.ToolTipOffsetX;
                this.ToolTipEl.style.top = _ToolTipElPosition.y + _ToolTipElOffset.y + 'px';
                if (scrollX > 0 && resetTipPositionLeft + domWidth > window.innerWidth + scrollX) {
                    this.ToolTipEl.style.left = resetTipPositionLeft - (resetTipPositionLeft + domWidth - (window.innerWidth + scrollX) + 15) + 'px';
                } else if (scrollX == 0 && resetTipPositionLeft + domWidth > window.innerWidth) {
                    this.ToolTipEl.style.left = resetTipPositionLeft - (resetTipPositionLeft + domWidth - (window.innerWidth + scrollX) + 15) + 'px';
                }
            } else {
                //根据ToolTip的位置，若无法向上显示，则重新定义ToolTip的位置
                this.setState({ position: 'bottom' });
                var _resetTipPosition = this.resetTipPosition();
                var _resetTipPositionLeft = _resetTipPosition.ToolTipX + _resetTipPosition.ToolTipOffsetX;
                this.ToolTipEl.style.left = _resetTipPositionLeft > 0 ? _resetTipPositionLeft + 'px' : 0; //当提示框left值小于0时，重置为0
                this.ToolTipEl.style.top = _resetTipPosition.ToolTipY + _resetTipPosition.ToolTipOffsetY + 'px';
                this.ToolTipArrow.style.left = _resetTipPosition.ToolTipX - _resetTipPosition.ArrowX + 'px';
                this.ToolTipArrow.style.top = _resetTipPosition.ToolTipY + _resetTipPosition.ArrowY + 'px';
                this.ToolTipEl.style.opacity = 1;
                this.ToolTipArrow.style.opacity = 1;

                var realWidth = 'auto';
                var hiddenDom = document.getElementsByClassName("tooltip__hidden")[0];
                if (hiddenDom && hiddenDom.querySelector(".tooltip")) {
                    var tempWidth = Math.ceil(hiddenDom.querySelector(".tooltip").getBoundingClientRect().width);
                    var domWidth = 300;
                    if (length > 210) {
                        realWidth = (tempWidth > 600 ? 600 : tempWidth) + 'px';
                        domWidth = tempWidth > 600 ? 600 : tempWidth;
                    } else {
                        realWidth = (tempWidth > 300 ? 300 : tempWidth) + 'px';
                        domWidth = tempWidth > 300 ? 300 : tempWidth;
                    }
                }
                this.ToolTipEl.style.width = realWidth;
                if (scrollX > 0 && _resetTipPositionLeft + domWidth > window.innerWidth + scrollX) {
                    this.ToolTipEl.style.left = _resetTipPositionLeft - (_resetTipPositionLeft + domWidth - (window.innerWidth + scrollX) + 10) + 'px';
                } else if (scrollX == 0 && _resetTipPositionLeft + domWidth > window.innerWidth) {
                    this.ToolTipEl.style.left = _resetTipPositionLeft - (_resetTipPositionLeft + domWidth - (window.innerWidth + scrollX) + 10) + 'px';
                }
            }
            if (this.isHaveHTMLTag()) {
                // this.ToolTipEl.style.opacity = 0;


                var _style = {
                    left: this.ToolTipEl.style.left,
                    top: this.ToolTipEl.style.top,
                    opacity: 1
                };
                var arrowStyle = {
                    left: this.ToolTipArrow.style.left,
                    top: this.ToolTipArrow.style.top
                };
                this.wrapper.removeChild(this.ToolTipEl);
                this.renderDom(_style, arrowStyle, this.single);
            }
            if (this.state.position == 'top' && this.props.tipsReason) {
                var tieEL = document.getElementsByClassName("tooltip")[0];
                var tieArrowEL = document.getElementsByClassName("tooltip-arrow")[0];
                if (tieEL && tieEL.style) {
                    tieEL.style.top = tieArrowEL.getBoundingClientRect().top + +window.scrollY - tieEL.getBoundingClientRect().height + 5 + 'px';
                }
            }
        }
    }, {
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            var _props = this.props,
                hidden = _props.hidden,
                side = _props.side;

            if (this.props.title === '' || hidden) {
                return;
            }
            if (this.ToolTipEl) {
                this.ToolTipEl.className = 'tooltip ' + this.state.position;
                this.ToolTipArrow.className = 'tooltip-arrow ' + this.state.position;
                var tips = this.props.title;
                if (this.props.tipsReason) {
                    tips = this.props.title + "<br/>" + this.props.tipsDes + this.props.tipsReason;
                    tips = this.single ? this.props.tipsReason : tips;
                }
                if (side) {
                    //依照后台传来的数据显示
                    this.ToolTipEl.childNodes[0].innerHTML = tips;
                } else {
                    if (this.ToolTipEl.childNodes[0]) this.ToolTipEl.childNodes[0].textContent = tips;
                }
            } else {
                return;
            }
        }
    }, {
        key: 'filterString',
        value: function filterString(title) {
            var showHtmlTag = false;
            var htmlTag = ["<span>", "<p>", "</br>", "<br />", "<br/>"];
            var _iteratorNormalCompletion = true;
            var _didIteratorError = false;
            var _iteratorError = undefined;

            try {
                for (var _iterator = (0, _getIterator3.default)(htmlTag), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                    var i = _step.value;

                    if (title.indexOf(i) !== -1) showHtmlTag = true;
                }
            } catch (err) {
                _didIteratorError = true;
                _iteratorError = err;
            } finally {
                try {
                    if (!_iteratorNormalCompletion && _iterator.return) {
                        _iterator.return();
                    }
                } finally {
                    if (_didIteratorError) {
                        throw _iteratorError;
                    }
                }
            }

            return showHtmlTag;
        }
    }, {
        key: 'resetTipPosition',
        value: function resetTipPosition() {
            var pointX = void 0;
            var pointY = void 0;
            var space = 5; //箭头的间距
            var offsetX = 5; //箭头的偏移量 （箭头宽度的一半）
            var offsetY = space;
            var componentElRect = this.componentEl.getBoundingClientRect(); //获得组件的矩形区域位置
            var componentElOffsetX = componentElRect.left;
            var componentElOffsetY = componentElRect.top;
            var componentElWidth = this.componentEl.offsetWidth; //获得componentEl对象的可见宽度
            var componentElHeight = this.componentEl.offsetHeight;
            var x1 = window.innerWidth; //浏览器可视宽度
            var v = componentElOffsetX + componentElWidth < x1 ? 0 : componentElOffsetX + componentElWidth - x1;
            var cOffsetX = (componentElWidth - v) / 2;
            var cOffsetY = componentElHeight;
            pointX = componentElOffsetX + cOffsetX + (window.scrollX || window.pageXOffset);
            pointY = componentElOffsetY + cOffsetY + (window.scrollY || window.pageYOffset);
            var _isHTML = this.isHaveHTMLTag();
            var ToolTipElWidth = _isHTML ? this._toolWidth : this.ToolTipEl.offsetWidth;
            var TipoffsetX = -(ToolTipElWidth / 2);
            var TipoffsetY = space;
            return {
                ToolTipX: pointX,
                ToolTipY: pointY,
                ToolTipOffsetX: TipoffsetX,
                ToolTipOffsetY: TipoffsetY,
                ArrowX: offsetX,
                ArrowY: offsetY
            };
        }
    }, {
        key: 'handleClick',
        value: function handleClick(e) {
            if (e.target.nodeName == "A") {
                this.handleMouseOut(e);
            }
        }
    }, {
        key: 'handleMouseOut',
        value: function handleMouseOut(e) {
            var hidden = this.props.hidden;

            if (this.props.title === '' || hidden) {
                return;
            }
            _reactDom2.default.unmountComponentAtNode(this.hidden);
            _reactDom2.default.unmountComponentAtNode(this.wrapper);
            var tooltip = document.getElementsByClassName("tooltip");
            if (tooltip && tooltip.length > 0 && this.wrapper && this.wrapper.contains(this.ToolTipEl)) {
                this.ToolTipEl ? this.wrapper.removeChild(this.ToolTipEl) : null;
                this.ToolTipArrow ? this.wrapper.removeChild(this.ToolTipArrow) : null;
            }
        }
    }, {
        key: 'getToolTipPosition',
        value: function getToolTipPosition(e) {
            var sta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
            var side = this.props.side;

            var pointX = void 0;
            var pointY = void 0;
            //获取componentEl矩形对象
            var componentElRect = this.componentEl.getBoundingClientRect();
            var componentElOffsetX = componentElRect.left;
            var componentElOffsetY = componentElRect.top;
            var componentElWidth = this.componentEl.offsetWidth; //获得componentEl对象的可见宽度
            var componentElHeight = this.componentEl.offsetHeight;
            var cOffsetX = 0;
            var cOffsetY = 0;
            var x = window.innerWidth; //浏览器可视宽度
            var y = +componentElRect.left;
            var v = componentElOffsetX + componentElWidth < x ? 0 : componentElOffsetX + componentElWidth - x;
            //浏览器拉伸变换时，当遮挡元素时，用以重新计算OffsetX
            this.setState({ position: sta });
            if (side) {
                if (x / 2 - y < 0) {
                    this.setState({ position: 'left' });
                } else {
                    this.setState({ position: 'right' });
                }
            }
            //当side为true时,判断元素在页面中的位置若在页面中间的右边，则toolTip显示在左，否则在右
            if (side) {
                //如果需要显示在两边
                switch (this.state.position) {
                    case 'right':
                        cOffsetX = componentElWidth;
                        cOffsetY = componentElHeight / 2;
                        break;
                    case 'left':
                        cOffsetX = 0;
                        cOffsetY = componentElHeight / 2;
                        break;
                    default:
                        break;
                }
            } else {
                switch (this.state.position) {
                    case 'top':
                        cOffsetX = (componentElWidth - v) / 2;
                        cOffsetY = 0;
                        break;
                    case 'bottom':
                        cOffsetX = (componentElWidth - v) / 2;
                        cOffsetY = componentElHeight;
                        break;
                    default:
                        break;
                }
            }
            pointX = componentElOffsetX + cOffsetX + (window.scrollX || window.pageXOffset);
            pointY = componentElOffsetY + cOffsetY + (window.scrollY || window.pageYOffset);
            return {
                x: pointX,
                y: pointY
            };
        }
    }, {
        key: 'getToolTipArrowOffSet',
        value: function getToolTipArrowOffSet() {
            var offsetX = void 0;
            var offsetY = void 0;
            var space = 5;
            var side = this.props.side;

            if (side) {
                switch (this.state.position) {
                    case 'right':
                        offsetX = -space;
                        offsetY = -5;
                        break;
                    case 'left':
                        offsetX = space + 5;
                        offsetY = -5;
                        break;
                    default:
                        break;
                }
            } else {
                switch (this.state.position) {
                    case 'top':
                        offsetX = 5; //箭头的宽度的一半
                        offsetY = -(space + 5); //space+箭头高度
                        break;
                    case 'bottom':
                        offsetX = 5;
                        offsetY = space;
                        break;
                    default:
                        break;
                }
            }
            return {
                x: offsetX,
                y: offsetY
            };
        }
    }, {
        key: 'getToolTipOffset',
        value: function getToolTipOffset() {
            var offsetX = void 0;
            var offsetY = void 0;
            var _isHTML = this.isHaveHTMLTag();
            var ToolTipElWidth = _isHTML ? this._toolWidth : this.ToolTipEl.offsetWidth;
            var ToolTipElHeight = _isHTML ? this._toolHeight : this.ToolTipEl.offsetHeight;
            var space = 5;
            var side = this.props.side;

            if (side) {
                //如果需要左右滑动
                switch (this.state.position) {
                    case 'right':
                        offsetX = space;
                        offsetY = -(ToolTipElHeight / 2);
                        break;
                    case 'left':
                        offsetX = -(ToolTipElWidth + 5); //控制向左的偏移量
                        offsetY = -(ToolTipElHeight / 2);
                        break;
                    default:
                        break;
                }
            } else {
                switch (this.state.position) {
                    case 'top':
                        offsetX = -(ToolTipElWidth / 2);
                        offsetY = -(ToolTipElHeight + space);
                        break;
                    case 'bottom':
                        offsetX = -(ToolTipElWidth / 2);
                        offsetY = space;
                        break;
                    default:
                        break;
                }
            }
            return {
                x: offsetX,
                y: offsetY
            };
        }
    }, {
        key: 'getTitleLength',
        value: function getTitleLength(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var charCode = str.charCodeAt(i);
                if (charCode >= 0 && charCode <= 128) len += 1;else len += 2;
            }
            return len;
        }
    }, {
        key: '_isObj',
        value: function _isObj(obj) {
            return Object.prototype.toString.call(obj) === '[object Object]';
        }
    }, {
        key: 'render',
        value: function render() {
            var content = this.props.children;
            if (this._isObj(content)) {
                return content;
            } else {
                return null;
            }
        }
    }]);
    return ToolTip;
}(_react.Component), _class.defaultProps = {
    container: document.body,
    space: 5, //提示箭头与文字内容热区的距离
    tipsDes: "说明："
}, _temp);

module.exports = ToolTip;