@beisen/ethos
Version:
beisencloud pc react components
1,298 lines (1,134 loc) • 2.35 MB
JavaScript
var __Modules_ETHOS = (function(modules) {
// Check all modules for deduplicated modules
for(var i in modules) {
if(Object.prototype.hasOwnProperty.call(modules, i)) {
switch(typeof modules[i]) {
case "function": break;
case "object":
// Module can be created from a template
modules[i] = (function(_m) {
var args = _m.slice(1), fn = modules[_m[0]];
return function (a,b,c) {
fn.apply(this, [a,b,c].concat(args));
};
}(modules[i]));
break;
default:
// Module is a copy of another module
modules[i] = modules[modules[i]];
break;
}
}
}
return modules;
}([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(391);
__webpack_require__.p = window.BSGlobal && window.BSGlobal.staticPath;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
__WEBPACK_EXTERNAL_MODULE_1__ = window.__EXTERNALS_ETHOS['__WEBPACK_EXTERNAL_MODULE_1__'];
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
"use strict";
exports.__esModule = true;
exports.default = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = { "default": __webpack_require__(541), __esModule: true };
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _defineProperty = __webpack_require__(125);
var _defineProperty2 = _interopRequireDefault(_defineProperty);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
(0, _defineProperty2.default)(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _setPrototypeOf = __webpack_require__(220);
var _setPrototypeOf2 = _interopRequireDefault(_setPrototypeOf);
var _create = __webpack_require__(219);
var _create2 = _interopRequireDefault(_create);
var _typeof2 = __webpack_require__(14);
var _typeof3 = _interopRequireDefault(_typeof2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : (0, _typeof3.default)(superClass)));
}
subClass.prototype = (0, _create2.default)(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf2.default ? (0, _setPrototypeOf2.default)(subClass, superClass) : subClass.__proto__ = superClass;
};
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _typeof2 = __webpack_require__(14);
var _typeof3 = _interopRequireDefault(_typeof2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && ((typeof call === "undefined" ? "undefined" : (0, _typeof3.default)(call)) === "object" || typeof call === "function") ? call : self;
};
/***/ }),
/* 7 */
/***/ (function(module, exports) {
__WEBPACK_EXTERNAL_MODULE_7__ = window.__EXTERNALS_ETHOS['__WEBPACK_EXTERNAL_MODULE_7__'];
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _assign = __webpack_require__(526);
var _assign2 = _interopRequireDefault(_assign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _assign2.default || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.removeResizeListener = exports.addResizeListener = undefined;
var _typeof2 = __webpack_require__(14);
var _typeof3 = _interopRequireDefault(_typeof2);
exports.clearToolTipDom = clearToolTipDom;
exports.uid = uid;
exports.judgeBrowser = judgeBrowser;
exports.judgeSys = judgeSys;
exports.contains = contains;
exports.createDom = createDom;
exports.getHeightLight = getHeightLight;
exports.deepClone = deepClone;
exports.transferData = transferData;
exports.encode = encode;
exports.decode = decode;
exports.transFormat = transFormat;
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function clearToolTipDom() {
var dom_1 = document.getElementsByClassName('tooltip')[0];
var dom_2 = document.getElementsByClassName('tooltip-arrow')[0];
if (dom_1 && dom_2) {
var parNode = dom_1.parentNode;
if (parNode.parentNode && parNode.parentNode.className == 'tooltip__hidden') {
parNode.parentNode.removeChild(parNode);
} else {
parNode.removeChild(dom_1);
parNode.removeChild(dom_2);
}
}
} /* eslint-disable */
function uid(flag) {
var now = +new Date();
return flag + ('-' + now);
}
function judgeBrowser() {
var userAgent = navigator.userAgent;
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
var browser = {
isEdge: /Edge/.test(userAgent),
isOpera: /Opera/.test(userAgent),
isFirefox: /Firefox/.test(userAgent),
isBaidu: /bidubrowser/.test(userAgent),
isSougo: /metasr/.test(userAgent),
is360: /360se/.test(userAgent),
isUc: /ucweb/.test(userAgent),
isLB: /lbbrowser/.test(userAgent),
isWX: /micromessenger/.test(userAgent),
isQQ: /qqbrowser/.test(userAgent),
isChrome: userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1,
isSafari: userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1,
isIe: !!window.ActiveXObject || "ActiveXObject" in window,
isIe7: fIEVersion == 7,
isIe8: fIEVersion == 8,
isIe9: fIEVersion == 9,
isIe10: fIEVersion == 10,
isIe11: fIEVersion == 11
};
return browser;
}
function judgeSys() {
var userAgent = navigator.userAgent;
var browser = {
isMac: /Mac OS/.test(userAgent),
isIpad: /ipad/.test(userAgent),
isIphone: /iphone os/.test(userAgent),
isAndroid: /android/.test(userAgent),
isWindowsCe: /windows ce/.test(userAgent),
isWindowsMobile: /windows mobile/.test(userAgent),
isWin2K: /windows nt 5.0/.test(userAgent),
isXP: /windows nt 5.1/.test(userAgent),
isVista: /windows nt 6.0/.test(userAgent),
isWin7: /windows nt 6.1/.test(userAgent),
isWin8: /windows nt 6.2/.test(userAgent),
isWin81: /windows nt 6.3/.test(userAgent),
isWin10: /"Windows NT 10.0/.test(userAgent)
};
return browser;
}
// 判断n 元素是否是 root中的子元素
function contains(root, n) {
var node = n;
while (node) {
if (node === root) {
return true;
}
node = node.parentNode;
}
return false;
}
/* Modified from https://github.com/sdecima/javascript-detect-element-resize
* version: 0.5.3
*
* The MIT License (MIT)
*
* Copyright (c) 2013 Sebastián Décima
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
*/
/* eslint-disable */
var isServer = typeof window === 'undefined';
/* istanbul ignore next */
var requestFrame = function () {
if (isServer) return;
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (fn) {
return window.setTimeout(fn, 20);
};
return function (fn) {
return raf(fn);
};
}();
/* istanbul ignore next */
var cancelFrame = function () {
if (isServer) return;
var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
return function (id) {
return cancel(id);
};
}();
/* istanbul ignore next */
var resetTrigger = function resetTrigger(element) {
var trigger = element.__resizeTrigger__;
var expand = trigger.firstElementChild;
var contract = trigger.lastElementChild;
var expandChild = expand.firstElementChild;
contract.scrollLeft = contract.scrollWidth;
contract.scrollTop = contract.scrollHeight;
expandChild.style.width = expand.offsetWidth + 1 + 'px';
expandChild.style.height = expand.offsetHeight + 1 + 'px';
expand.scrollLeft = expand.scrollWidth;
expand.scrollTop = expand.scrollHeight;
};
/* istanbul ignore next */
var checkTriggers = function checkTriggers(element) {
return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
};
/* istanbul ignore next */
var scrollListener = function scrollListener(event) {
var _this = this;
resetTrigger(this);
if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
this.__resizeRAF__ = requestFrame(function () {
if (checkTriggers(_this)) {
_this.__resizeLast__.width = _this.offsetWidth;
_this.__resizeLast__.height = _this.offsetHeight;
_this.__resizeListeners__.forEach(function (fn) {
fn.call(_this, event);
});
}
});
};
/* Detect CSS Animations support to detect element display/re-attach */
var attachEvent = isServer ? {} : document.attachEvent;
var DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
var START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
var RESIZE_ANIMATION_NAME = 'resizeanim';
var animation = false;
var keyFramePrefix = '';
var animationStartEvent = 'animationstart';
/* istanbul ignore next */
if (!attachEvent && !isServer) {
var testElement = document.createElement('fakeelement');
if (testElement.style.animationName !== undefined) {
animation = true;
}
if (animation === false) {
var prefix = '';
for (var i = 0; i < DOM_PREFIXES.length; i++) {
if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
prefix = DOM_PREFIXES[i];
keyFramePrefix = '-' + prefix.toLowerCase() + '-';
animationStartEvent = START_EVENTS[i];
animation = true;
break;
}
}
}
}
var stylesCreated = false;
/* istanbul ignore next */
var createStyles = function createStyles() {
if (!stylesCreated && !isServer) {
var animationKeyframes = '@' + keyFramePrefix + 'keyframes ' + RESIZE_ANIMATION_NAME + ' { from { opacity: 0; } to { opacity: 0; } } ';
var animationStyle = keyFramePrefix + 'animation: 1ms ' + RESIZE_ANIMATION_NAME + ';';
// opacity: 0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
var css = animationKeyframes + '\n .resize-triggers { ' + animationStyle + ' visibility: hidden; opacity: 0; }\n .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }\n .resize-triggers > div { background: #eee; overflow: auto; }\n .contract-trigger:before { width: 200%; height: 200%; }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
stylesCreated = true;
}
};
/* istanbul ignore next */
var addResizeListener = exports.addResizeListener = function addResizeListener(element, fn) {
if (isServer) return;
if (attachEvent) {
element.attachEvent('onresize', fn);
} else {
if (!element.__resizeTrigger__) {
if (getComputedStyle(element).position === 'static') {
element.style.position = 'relative';
}
createStyles();
element.__resizeLast__ = {};
element.__resizeListeners__ = [];
var resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
resizeTrigger.className = 'resize-triggers';
resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
element.appendChild(resizeTrigger);
resetTrigger(element);
element.addEventListener('scroll', scrollListener, true);
/* Listen for a css animation to detect element display/re-attach */
if (animationStartEvent) {
resizeTrigger.addEventListener(animationStartEvent, function (event) {
if (event.animationName === RESIZE_ANIMATION_NAME) {
resetTrigger(element);
}
});
}
}
element.__resizeListeners__.push(fn);
}
};
/* istanbul ignore next */
var removeResizeListener = exports.removeResizeListener = function removeResizeListener(element, fn) {
if (attachEvent) {
element.detachEvent('onresize', fn);
} else {
// 当__resizeListeners__存在时，再进行操作，防止报错
if (element.__resizeListeners__) {
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
if (!element.__resizeListeners__.length) {
element.removeEventListener('scroll', scrollListener);
element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
}
}
}
};
// 创建挂载容器
function createDom(id) {
if (document.getElementById(id)) return;
var oDiv = document.createElement('div');
oDiv.id = id;
document.body.appendChild(oDiv);
}
function getHeightLight(searchval, text) {
var str = {};
if (searchval.length > 0) {
//获取搜索字符在字段中的位置,分两种 1.首位(index==0) 2.非首位
var index = text.indexOf(searchval);
var valueLength = searchval.length;
if (index == 0) {
str.beforeText = "";
var subValue = text.substring(index, valueLength);
str.searchContent = _react2.default.createElement(
'em',
null,
subValue
);
str.lastext = text.substring(valueLength, text.length);
} else if (index > 0) {
str.beforeText = text.substring(0, index);
var _subValue = text.substring(index, valueLength + index);
str.searchContent = _react2.default.createElement(
'em',
null,
_subValue
);
str.lastext = text.substring(valueLength + index, text.length);
} else {
str.beforeText = '';
str.searchContent = _react2.default.createElement('em', null);
str.lastext = '';
}
} else {
str.beforeText = "";
str.searchContent = "";
str.lastext = text;
}
return str;
}
function deepClone(item) {
if (!item) return item;
var types = [Number, String, Boolean],
result;
types.forEach(function (type) {
if (item instanceof type) {
result = type(item);
}
});
if (typeof result == "undefined") {
if (Object.prototype.toString.call(item) === "[object Array]") {
result = [];
item.forEach(function (child, index, array) {
result[index] = deepClone(child);
});
} else if ((typeof item === 'undefined' ? 'undefined' : (0, _typeof3.default)(item)) == "object") {
if (item.nodeType && typeof item.cloneNode == "function") {
result = item.cloneNode(true);
} else if (!item.prototype) {
if (item instanceof Date) {
result = new Date(item);
} else {
result = {};
for (var i in item) {
result[i] = deepClone(item[i]);
}
}
} else {
result = item;
}
} else {
result = item;
}
}
return result;
}
function transferData(data) {
var filter = [],
getData = {},
self = this;
for (var _i in data) {
if (data[_i] != undefined) getData[data[_i]["id"]] = data[_i];
}
for (var j in data) {
if (data[j]) {
var item = data[j],
temp = getData[item["pid"]];
if (temp && temp.id != temp.pid) {
!temp["li"] && (temp["li"] = []);
temp["li"].push(item);
} else {
filter.push(item);
}
}
}
return filter;
}
function encode(str) {
if (!str || typeof str != 'string') {
return str;
}
str = str.toString();
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''').replace(/</g, '<').replace(/>/g, '>');
}
function decode(str) {
if (!str || typeof str != 'string') {
return str;
}
str = str.toString();
return str.replace(/"/g, '"').replace(/'/g, "'").replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
}
/**
* 将字符串模板中的占位符替换为相应的变量
* @param {String} template 字符串模板, 变量key只能为数字
* @param {...any} variables 对应的变量
* 示例：(括号中的序号与翻译参数的顺序有关)
* console.log(transFormat("{0} is {1}", 1, 2));
* console.log(transFormat("{1} is {0}", 1, 2));
*/
function transFormat(template) {
for (var _len = arguments.length, variables = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
variables[_key - 1] = arguments[_key];
}
var bKeys = template.match(/{\s*[0-9]+\s*}/g);
if (bKeys) {
// 当匹配到对应格式时， 返回变量替换之后的字符串
return bKeys.map(function (str) {
return str.slice(1, str.length - 1).trim();
}) // 获取相对应的序号
.reduce(function (template, key) {
return template.replace(/{\s*[0-9]+\s*}/, variables[key]);
}, template); // 替换相应变量
} else {
// 当未匹配到相应的格式时,将变量直接拼接在模板字符串前端(此为兼容方案, 请保证所有的输入的都符合对应格式)
return variables.join(' ') + template;
}
}
exports.default = { clearToolTipDom: clearToolTipDom, uid: uid, judgeBrowser: judgeBrowser, judgeSys: judgeSys, contains: contains, createDom: createDom, getHeightLight: getHeightLight, deepClone: deepClone, transferData: transferData, encode: encode, decode: decode, transFormat: transFormat };
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _getIterator2 = __webpack_require__(69);
var _getIterator3 = _interopRequireDefault(_getIterator2);
var _getPrototypeOf = __webpack_require__(3);
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = __webpack_require__(2);
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = __webpack_require__(4);
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = __webpack_require__(6);
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = __webpack_require__(5);
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp; /**
* Created by xiangjian on 2016/7/11.
*/
/* eslint-disable */
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(7);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _commonFunc = __webpack_require__(9);
__webpack_require__(488);
var _toolTipEl = __webpack_require__(443);
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;
/***/ }),
/* 11 */
/***/ (function(module, exports) {
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
'use strict';
/* eslint-disable no-unused-vars */
var getOwnPropertySymbols = Object.getOwnProp