bee-tooltip
Version:
bee-tooltip ui component for react
358 lines (299 loc) • 14 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || 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; };
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _OverlayTrigger = require('bee-overlay/build/OverlayTrigger');
var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
/**
* @required
*/
id: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
inverse: _propTypes2["default"].bool,
visible: _propTypes2["default"].bool,
onVisibleChange: _propTypes2["default"].func,
/**
* 相对目标元素显示上下左右的位置
*/
placement: _propTypes2["default"].oneOf(['top', 'right', 'bottom', 'left', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']),
/**
* 绝对定位上边距.
*/
positionTop: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* 绝对定位左边距
*/
positionLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* 与目标Top的距离
*/
arrowOffsetTop: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* 与目标Left的距离
*/
arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
/**
* 是否开启内容区域按可视区最大可用高度设置
*/
overlayMaxHeight: _propTypes2["default"].bool
};
var defaultProps = {
placement: 'right',
clsPrefix: 'u-tooltip',
overlayMaxHeight: false
};
function OverlayNode(props) {
var id = props.id,
className = props.className,
classNames = props.classNames,
style = props.style,
overlay = props.overlay,
overlayStyle = props.overlayStyle,
otherProps = props.otherProps;
// style 包含用户传入的自定义样式，以及 bee-overlay 计算返回的样式。
// overlayStyle 是用户传入的自定义样式。
if (overlayStyle && overlayStyle.width) {
style.width = overlayStyle.width;
} else {
delete style.width;
}
var top = style.top,
left = style.left,
width = style.width,
height = style.height,
maxWidth = style.maxWidth,
maxHeight = style.maxHeight;
var reg = /\d+/g;
// top、left 设置最小值0
// 如果是负数被校正为0，则相应调整宽高，避免弹层遮挡触发元素
if (top !== undefined && top < 0) {
reg.test(height) && (style.height = Math.max(height + top, 0));
reg.test(maxHeight) && (style.maxHeight = Math.max(maxHeight + top, 0));
style.top = 0;
}
if (left !== undefined && left < 0) {
reg.test(width) && (style.width = Math.max(width + left, 0));
reg.test(maxWidth) && (style.maxWidth = Math.max(maxWidth + left, 0));
style.left = 0;
}
return _react2["default"].createElement(
'div',
_extends({
id: id,
role: 'tooltip',
className: (0, _classnames2["default"])(className, classNames),
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
style: style
}, otherProps),
overlay ? _react2["default"].createElement('div', { className: 'tooltip-arrow' }) : '',
overlay ? _react2["default"].createElement(
'div',
{ className: 'tooltip-inner' },
overlay
) : ''
);
}
function cloneElement(element, props) {
return _react2["default"].cloneElement(element, typeof props === 'function' ? props(element.props || {}) : props);
}
var Tooltip = function (_React$Component) {
_inherits(Tooltip, _React$Component);
function Tooltip(props) {
_classCallCheck(this, Tooltip);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.handleVisibleChange = function (visible) {
var _this$props = _this.props,
onVisibleChange = _this$props.onVisibleChange,
overlayMaxHeight = _this$props.overlayMaxHeight;
onVisibleChange && onVisibleChange(visible);
if (visible && overlayMaxHeight) {
_this.autoAdjustPlacement();
}
};
_this.autoAdjustPlacement = function () {
var findDOMNode = _reactDom2["default"].findDOMNode;
var autoHeight = {};
var placement = _this.props.placement || defaultProps.placement;
var ARROW_SPACE = 10,
EXTRA_SPACE = 15;
var bodyStyle = document.body.getBoundingClientRect();
var childStyle = findDOMNode(_this.childRef.current) && findDOMNode(_this.childRef.current).getBoundingClientRect();
if (childStyle) {
var availableSpace = {
top: childStyle.top - ARROW_SPACE,
bottom: bodyStyle.height - childStyle.bottom - ARROW_SPACE
};
if (placement.indexOf('top') >= 0 || placement.indexOf('bottom') >= 0) {
_extends(autoHeight, {
maxHeight: Math.max(availableSpace.top, availableSpace.bottom) - EXTRA_SPACE + 'px',
overflowY: 'scroll'
});
} else if (placement === 'left' || placement === 'right') {
_extends(autoHeight, {
maxHeight: bodyStyle.height - EXTRA_SPACE + 'px',
overflowY: 'scroll'
});
} else if (placement.indexOf('Top') >= 0) {
_extends(autoHeight, {
maxHeight: bodyStyle.height - childStyle.top - EXTRA_SPACE + 'px',
overflowY: 'scroll'
});
} else if (placement.indexOf('Bottom') >= 0) {
_extends(autoHeight, {
maxHeight: childStyle.bottom - EXTRA_SPACE + 'px',
overflowY: 'scroll'
});
}
_this.setState({ autoHeightStyle: autoHeight });
}
// console.log(placement, bodyStyle, autoHeight);
};
_this.onMouseEnter = function () {
var trigger = _this.props.trigger;
if (trigger === 'click') return;
_this.setState({
isHoverShow: true
});
};
_this.onMouseLeave = function () {
var trigger = _this.props.trigger;
if (trigger === 'click') return;
_this.setState({
isHoverShow: false
});
};
_this.handleOnHide = function () {
var onHide = _this.props.onHide;
onHide && onHide(false);
};
var initState = {
isHoverShow: false,
autoHeightStyle: {}
};
if ('visible' in props) {
_extends(initState, {
visible: props.visible
});
}
_this.state = initState;
_this.childRef = _react2["default"].createRef(null);
return _this;
}
Tooltip.prototype.componentDidMount = function componentDidMount() {
var _props = this.props,
visible = _props.visible,
overlayMaxHeight = _props.overlayMaxHeight;
if ((visible || this.state.isHoverShow) && overlayMaxHeight) {
this.autoAdjustPlacement();
}
};
Tooltip.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
var _props2 = this.props,
visible = _props2.visible,
overlayMaxHeight = _props2.overlayMaxHeight;
if ('visible' in this.props && prevProps.visible !== visible) {
if (visible && overlayMaxHeight) {
this.autoAdjustPlacement();
}
this.setState({
visible: visible
});
}
};
/**
* 自动校正max-height和placement
*
*/
/**
* @desc 鼠标划入时候的事件
*/
/**
* @desc 鼠标划出时候的事件
*/
Tooltip.prototype.render = function render() {
var _classes,
_this2 = this;
var _props3 = this.props,
placement = _props3.placement,
id = _props3.id,
arrowOffsetTop = _props3.arrowOffsetTop,
arrowOffsetLeft = _props3.arrowOffsetLeft,
className = _props3.className,
style = _props3.style,
children = _props3.children,
clsPrefix = _props3.clsPrefix,
overlay = _props3.overlay,
inverse = _props3.inverse,
trigger = _props3.trigger,
onVisibleChange = _props3.onVisibleChange,
onHide = _props3.onHide,
rootClose = _props3.rootClose,
visible = _props3.visible,
defaultOverlayShown = _props3.defaultOverlayShown,
positionTop = _props3.positionTop,
positionLeft = _props3.positionLeft,
overlayMaxHeight = _props3.overlayMaxHeight,
others = _objectWithoutProperties(_props3, ['placement', 'id', 'arrowOffsetTop', 'arrowOffsetLeft', 'className', 'style', 'children', 'clsPrefix', 'overlay', 'inverse', 'trigger', 'onVisibleChange', 'onHide', 'rootClose', 'visible', 'defaultOverlayShown', 'positionTop', 'positionLeft', 'overlayMaxHeight']);
var _state = this.state,
autoHeightStyle = _state.autoHeightStyle,
isHoverShow = _state.isHoverShow;
var overlayStyle = _extends({}, autoHeightStyle, style);
var classes = (_classes = {}, _defineProperty(_classes, placement, true), _defineProperty(_classes, 'inverse', inverse), _classes);
var classNames = (0, _classnames2["default"])(clsPrefix, classes);
var overlayNode = _react2["default"].createElement(OverlayNode, {
id: id,
className: className,
classNames: classNames,
overlay: overlay,
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
style: overlayStyle,
overlayStyle: overlayStyle // 用户自定义样式
, arrowOffsetTop: arrowOffsetTop,
arrowOffsetLeft: arrowOffsetLeft,
otherProps: others
});
var visibleProp = 'visible' in this.props ? { visible: this.state.visible } : { isHoverShow: isHoverShow };
return _react2["default"].createElement(
_OverlayTrigger2["default"],
_extends({}, others, visibleProp, {
onVisibleChange: this.handleVisibleChange,
ref: function ref(_ref) {
return _this2.trigger = _ref;
},
shouldUpdatePosition: true,
placement: placement,
overlay: overlayNode,
onHide: this.handleOnHide,
rootClose: rootClose,
defaultOverlayShown: defaultOverlayShown,
positionTop: positionTop,
positionLeft: positionLeft,
trigger: trigger
}),
cloneElement(children, { ref: this.childRef })
);
};
return Tooltip;
}(_react2["default"].Component);
Tooltip.propTypes = propTypes;
Tooltip.defaultProps = defaultProps;
exports["default"] = Tooltip;
module.exports = exports['default'];