298 lines
12 KiB
JavaScript
298 lines
12 KiB
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 _createClass = 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; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _Portal = require('../hoc/Portal');
|
|
|
|
var _Portal2 = _interopRequireDefault(_Portal);
|
|
|
|
var _classnames2 = require('classnames');
|
|
|
|
var _classnames3 = _interopRequireDefault(_classnames2);
|
|
|
|
var _reactCssThemr = require('react-css-themr');
|
|
|
|
var _identifiers = require('../identifiers.js');
|
|
|
|
var _events = require('../utils/events');
|
|
|
|
var _events2 = _interopRequireDefault(_events);
|
|
|
|
var _utils = require('../utils/utils');
|
|
|
|
var _utils2 = _interopRequireDefault(_utils);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) : subClass.__proto__ = superClass; }
|
|
|
|
var POSITION = {
|
|
BOTTOM: 'bottom',
|
|
HORIZONTAL: 'horizontal',
|
|
LEFT: 'left',
|
|
RIGHT: 'right',
|
|
TOP: 'top',
|
|
VERTICAL: 'vertical'
|
|
};
|
|
|
|
var defaults = {
|
|
className: '',
|
|
delay: 0,
|
|
hideOnClick: true,
|
|
position: POSITION.VERTICAL,
|
|
theme: {}
|
|
};
|
|
|
|
var tooltipFactory = function tooltipFactory() {
|
|
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
|
|
|
var _defaults$options = _extends({}, defaults, options);
|
|
|
|
var defaultClassName = _defaults$options.className;
|
|
var defaultDelay = _defaults$options.delay;
|
|
var defaultHideOnClick = _defaults$options.hideOnClick;
|
|
var defaultPosition = _defaults$options.position;
|
|
var defaultTheme = _defaults$options.theme;
|
|
|
|
|
|
return function (ComposedComponent) {
|
|
var TooltippedComponent = function (_Component) {
|
|
_inherits(TooltippedComponent, _Component);
|
|
|
|
function TooltippedComponent() {
|
|
var _Object$getPrototypeO;
|
|
|
|
var _temp, _this, _ret;
|
|
|
|
_classCallCheck(this, TooltippedComponent);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
|
active: false,
|
|
position: _this.props.tooltipPosition,
|
|
visible: false
|
|
}, _this.onTransformEnd = function (e) {
|
|
if (e.propertyName === 'transform') {
|
|
_events2.default.removeEventListenerOnTransitionEnded(_this.refs.tooltip, _this.onTransformEnd);
|
|
_this.setState({ visible: false });
|
|
}
|
|
}, _this.handleMouseEnter = function (event) {
|
|
_this.activate(_this.calculatePosition(event.target));
|
|
if (_this.props.onMouseEnter) _this.props.onMouseEnter(event);
|
|
}, _this.handleMouseLeave = function (event) {
|
|
_this.deactivate();
|
|
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
|
|
}, _this.handleClick = function (event) {
|
|
if (_this.props.tooltipHideOnClick) _this.deactivate();
|
|
if (_this.props.onClick) _this.props.onClick(event);
|
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
|
}
|
|
|
|
_createClass(TooltippedComponent, [{
|
|
key: 'componentWillUnmount',
|
|
value: function componentWillUnmount() {
|
|
if (this.refs.tooltip) {
|
|
_events2.default.removeEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'activate',
|
|
value: function activate(_ref) {
|
|
var _this2 = this;
|
|
|
|
var top = _ref.top;
|
|
var left = _ref.left;
|
|
var position = _ref.position;
|
|
|
|
if (this.timeout) clearTimeout(this.timeout);
|
|
this.setState({ visible: true, position: position });
|
|
this.timeout = setTimeout(function () {
|
|
_this2.setState({ active: true, top: top, left: left });
|
|
}, this.props.tooltipDelay);
|
|
}
|
|
}, {
|
|
key: 'deactivate',
|
|
value: function deactivate() {
|
|
if (this.timeout) clearTimeout(this.timeout);
|
|
if (this.state.active) {
|
|
_events2.default.addEventListenerOnTransitionEnded(this.refs.tooltip, this.onTransformEnd);
|
|
this.setState({ active: false });
|
|
} else if (this.state.visible) {
|
|
this.setState({ visible: false });
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getPosition',
|
|
value: function getPosition(element) {
|
|
var tooltipPosition = this.props.tooltipPosition;
|
|
|
|
if (tooltipPosition === POSITION.HORIZONTAL) {
|
|
var origin = element.getBoundingClientRect();
|
|
|
|
var _utils$getViewport = _utils2.default.getViewport();
|
|
|
|
var ww = _utils$getViewport.width;
|
|
|
|
var toRight = origin.left < ww / 2 - origin.width / 2;
|
|
return toRight ? POSITION.RIGHT : POSITION.LEFT;
|
|
} else if (tooltipPosition === POSITION.VERTICAL) {
|
|
var _origin = element.getBoundingClientRect();
|
|
|
|
var _utils$getViewport2 = _utils2.default.getViewport();
|
|
|
|
var wh = _utils$getViewport2.height;
|
|
|
|
var toBottom = _origin.top < wh / 2 - _origin.height / 2;
|
|
return toBottom ? POSITION.BOTTOM : POSITION.TOP;
|
|
} else {
|
|
return tooltipPosition;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'calculatePosition',
|
|
value: function calculatePosition(element) {
|
|
var position = this.getPosition(element);
|
|
|
|
var _element$getBoundingC = element.getBoundingClientRect();
|
|
|
|
var top = _element$getBoundingC.top;
|
|
var left = _element$getBoundingC.left;
|
|
var height = _element$getBoundingC.height;
|
|
var width = _element$getBoundingC.width;
|
|
|
|
var xOffset = window.scrollX || window.pageXOffset;
|
|
var yOffset = window.scrollY || window.pageYOffset;
|
|
if (position === POSITION.BOTTOM) {
|
|
return {
|
|
top: top + height + yOffset,
|
|
left: left + width / 2 + xOffset,
|
|
position: position
|
|
};
|
|
} else if (position === POSITION.TOP) {
|
|
return {
|
|
top: top + yOffset,
|
|
left: left + width / 2 + xOffset,
|
|
position: position
|
|
};
|
|
} else if (position === POSITION.LEFT) {
|
|
return {
|
|
top: top + height / 2 + yOffset,
|
|
left: left + xOffset,
|
|
position: position
|
|
};
|
|
} else if (position === POSITION.RIGHT) {
|
|
return {
|
|
top: top + height / 2 + yOffset,
|
|
left: left + width + xOffset,
|
|
position: position
|
|
};
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var _classnames;
|
|
|
|
var _state = this.state;
|
|
var active = _state.active;
|
|
var left = _state.left;
|
|
var top = _state.top;
|
|
var position = _state.position;
|
|
var visible = _state.visible;
|
|
|
|
var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
|
|
var _props = this.props;
|
|
var children = _props.children;
|
|
var className = _props.className;
|
|
var theme = _props.theme;
|
|
var tooltip = _props.tooltip;
|
|
var tooltipDelay = _props.tooltipDelay;
|
|
var tooltipHideOnClick = _props.tooltipHideOnClick;
|
|
var tooltipPosition = _props.tooltipPosition;
|
|
|
|
var other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
|
|
|
|
var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));
|
|
|
|
return _react2.default.createElement(
|
|
ComposedComponent,
|
|
_extends({}, other, {
|
|
className: className,
|
|
onClick: this.handleClick,
|
|
onMouseEnter: this.handleMouseEnter,
|
|
onMouseLeave: this.handleMouseLeave,
|
|
theme: theme
|
|
}),
|
|
children ? children : null,
|
|
visible && _react2.default.createElement(
|
|
_Portal2.default,
|
|
null,
|
|
_react2.default.createElement(
|
|
'span',
|
|
{ ref: 'tooltip', className: _className, 'data-react-toolbox': 'tooltip', style: { top: top, left: left } },
|
|
_react2.default.createElement(
|
|
'span',
|
|
{ className: theme.tooltipInner },
|
|
tooltip
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}]);
|
|
|
|
return TooltippedComponent;
|
|
}(_react.Component);
|
|
|
|
TooltippedComponent.propTypes = {
|
|
children: _react.PropTypes.any,
|
|
className: _react.PropTypes.string,
|
|
onClick: _react.PropTypes.func,
|
|
onMouseEnter: _react.PropTypes.func,
|
|
onMouseLeave: _react.PropTypes.func,
|
|
theme: _react.PropTypes.shape({
|
|
tooltip: _react.PropTypes.string,
|
|
tooltipActive: _react.PropTypes.string,
|
|
tooltipWrapper: _react.PropTypes.string
|
|
}),
|
|
tooltip: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
|
|
tooltipDelay: _react.PropTypes.number,
|
|
tooltipHideOnClick: _react.PropTypes.bool,
|
|
tooltipPosition: _react.PropTypes.oneOf(Object.keys(POSITION).map(function (key) {
|
|
return POSITION[key];
|
|
}))
|
|
};
|
|
TooltippedComponent.defaultProps = {
|
|
className: defaultClassName,
|
|
tooltipDelay: defaultDelay,
|
|
tooltipHideOnClick: defaultHideOnClick,
|
|
tooltipPosition: defaultPosition
|
|
};
|
|
|
|
|
|
return (0, _reactCssThemr.themr)(_identifiers.TOOLTIP, defaultTheme)(TooltippedComponent);
|
|
};
|
|
};
|
|
|
|
exports.default = tooltipFactory; |