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

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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;
/* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

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

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

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

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

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

        _this.setTipContent = _this.setTipContent.bind(_this);
        return _this;
    }

    (0, _createClass3.default)(ToolTipEl, [{
        key: 'filterString',
        value: function filterString(title) {
            var showHtmlTag = false;
            var htmlTag = ["<span>", "<p>", "</br>", "<br />", "<br/>"].concat(this.props.htmlTag);
            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 && 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: 'setTipContent',
        value: function setTipContent(ref) {
            var tips = this.props.title;
            if (this.props.tipsReason) {
                tips = this.props.title + "<br/>" + this.props.tipsDes + this.props.tipsReason;
                tips = this.props.single ? this.props.tipsReason : tips;
            }
            var showHtmlTag = this.filterString(tips);
            if (ref) {
                ref.innerHTML = showHtmlTag ? tips : (0, _commonFunc.encode)(tips);
            }
        }
    }, {
        key: 'render',
        value: function render() {
            if (!this.props.hidden) {
                var realWidth = { 'width': 'auto' };
                var hiddenDom = document.getElementsByClassName("tooltip__hidden")[0];
                if (hiddenDom && hiddenDom.querySelector(".tooltip")) {
                    realWidth = {
                        'width': Math.ceil(hiddenDom.querySelector(".tooltip").getBoundingClientRect().width) + 'px'
                    };
                }
                var assignStyle = (0, _extends3.default)({}, realWidth, this.props.style);
            }
            return _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement(
                    'div',
                    { ref: 'tooltiptip', className: "tooltip " + this.props.position, style: this.props.hidden ? this.props.style : assignStyle },
                    _react2.default.createElement('div', { className: 'tooltip-inner', ref: this.setTipContent })
                ),
                _react2.default.createElement('div', { className: "tooltip-arrow " + this.props.position, id: 'tooltip-arrow', style: this.props.arrowStyle })
            );
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _dom = _reactDom2.default.findDOMNode(this.refs.tooltiptip);
            this.props.getToolELSize(_dom.offsetWidth, _dom.offsetHeight);
        }
    }, {
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            this.componentDidMount();
        }
    }]);
    return ToolTipEl;
}(_react.Component), _class.defaultProps = {
    getToolELSize: function getToolELSize() {},
    position: 'top',
    htmlTag: []
}, _temp);


module.exports = ToolTipEl;