2016-06-03 23:29:21 +03:00
'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 ) ;
2016-08-07 20:01:45 +03:00
var _Portal = require ( '../hoc/Portal' ) ;
var _Portal2 = _interopRequireDefault ( _Portal ) ;
2016-06-03 23:29:21 +03:00
var _classnames2 = require ( 'classnames' ) ;
var _classnames3 = _interopRequireDefault ( _classnames2 ) ;
var _reactCssThemr = require ( 'react-css-themr' ) ;
var _identifiers = require ( '../identifiers.js' ) ;
2016-08-07 20:01:45 +03:00
var _events = require ( '../utils/events' ) ;
var _events2 = _interopRequireDefault ( _events ) ;
2016-08-07 21:52:51 +03:00
var _utils = require ( '../utils/utils' ) ;
var _utils2 = _interopRequireDefault ( _utils ) ;
2016-06-03 23:29:21 +03:00
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 ; }
2016-08-07 21:52:51 +03:00
var POSITION = {
BOTTOM : 'bottom' ,
HORIZONTAL : 'horizontal' ,
LEFT : 'left' ,
RIGHT : 'right' ,
TOP : 'top' ,
VERTICAL : 'vertical'
} ;
2016-08-07 20:01:45 +03:00
var defaults = {
className : '' ,
delay : 0 ,
hideOnClick : true ,
2016-08-07 21:52:51 +03:00
position : POSITION . VERTICAL ,
2016-08-07 20:01:45 +03:00
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 ;
2016-08-07 21:52:51 +03:00
var defaultPosition = _defaults$options . position ;
2016-08-07 20:01:45 +03:00
var defaultTheme = _defaults$options . theme ;
2016-06-03 23:29:21 +03:00
2016-08-07 20:01:45 +03:00
return function ( ComposedComponent ) {
2016-06-03 23:29:21 +03:00
var TooltippedComponent = function ( _Component ) {
_inherits ( TooltippedComponent , _Component ) ;
function TooltippedComponent ( ) {
2016-09-03 17:03:04 +03:00
var _Object$getPrototypeO ;
2016-06-03 23:29:21 +03:00
var _temp , _this , _ret ;
_classCallCheck ( this , TooltippedComponent ) ;
for ( var _len = arguments . length , args = Array ( _len ) , _key = 0 ; _key < _len ; _key ++ ) {
args [ _key ] = arguments [ _key ] ;
}
2016-09-03 17:03:04 +03:00
return _ret = ( _temp = ( _this = _possibleConstructorReturn ( this , ( _Object$getPrototypeO = Object . getPrototypeOf ( TooltippedComponent ) ) . call . apply ( _Object$getPrototypeO , [ this ] . concat ( args ) ) ) , _this ) , _this . state = {
2016-08-07 20:01:45 +03:00
active : false ,
2016-08-07 21:52:51 +03:00
position : _this . props . tooltipPosition ,
2016-08-07 20:01:45 +03:00
visible : false
} , _this . onTransformEnd = function ( e ) {
if ( e . propertyName === 'transform' ) {
_events2 . default . removeEventListenerOnTransitionEnded ( _this . refs . tooltip , _this . onTransformEnd ) ;
_this . setState ( { visible : false } ) ;
}
2016-06-03 23:29:21 +03:00
} , _this . handleMouseEnter = function ( event ) {
2016-08-07 21:52:51 +03:00
_this . activate ( _this . calculatePosition ( event . target ) ) ;
2016-06-03 23:29:21 +03:00
if ( _this . props . onMouseEnter ) _this . props . onMouseEnter ( event ) ;
} , _this . handleMouseLeave = function ( event ) {
2016-08-07 20:01:45 +03:00
_this . deactivate ( ) ;
2016-06-03 23:29:21 +03:00
if ( _this . props . onMouseLeave ) _this . props . onMouseLeave ( event ) ;
} , _this . handleClick = function ( event ) {
2016-08-07 20:01:45 +03:00
if ( _this . props . tooltipHideOnClick ) _this . deactivate ( ) ;
2016-06-03 23:29:21 +03:00
if ( _this . props . onClick ) _this . props . onClick ( event ) ;
} , _temp ) , _possibleConstructorReturn ( _this , _ret ) ;
}
_createClass ( TooltippedComponent , [ {
2016-08-07 20:01:45 +03:00
key : 'componentWillUnmount' ,
value : function componentWillUnmount ( ) {
if ( this . refs . tooltip ) {
_events2 . default . removeEventListenerOnTransitionEnded ( this . refs . tooltip , this . onTransformEnd ) ;
}
}
} , {
key : 'activate' ,
2016-09-03 17:03:04 +03:00
value : function activate ( _ref ) {
2016-08-07 20:01:45 +03:00
var _this2 = this ;
2016-09-03 17:03:04 +03:00
var top = _ref . top ;
var left = _ref . left ;
var position = _ref . position ;
2016-08-07 21:52:51 +03:00
2016-08-07 20:01:45 +03:00
if ( this . timeout ) clearTimeout ( this . timeout ) ;
2016-08-07 21:52:51 +03:00
this . setState ( { visible : true , position : position } ) ;
2016-08-07 20:01:45 +03:00
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 } ) ;
}
}
2016-08-07 21:52:51 +03:00
} , {
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
} ;
}
}
2016-08-07 20:01:45 +03:00
} , {
2016-06-03 23:29:21 +03:00
key : 'render' ,
value : function render ( ) {
2016-08-07 21:52:51 +03:00
var _classnames ;
2016-08-07 20:01:45 +03:00
var _state = this . state ;
var active = _state . active ;
var left = _state . left ;
var top = _state . top ;
2016-08-07 21:52:51 +03:00
var position = _state . position ;
2016-08-07 20:01:45 +03:00
var visible = _state . visible ;
2016-08-07 21:52:51 +03:00
var positionClass = 'tooltip' + ( position . charAt ( 0 ) . toUpperCase ( ) + position . slice ( 1 ) ) ;
2016-06-03 23:29:21 +03:00
var _props = this . props ;
var children = _props . children ;
var className = _props . className ;
2016-08-07 20:01:45 +03:00
var theme = _props . theme ;
2016-06-03 23:29:21 +03:00
var tooltip = _props . tooltip ;
var tooltipDelay = _props . tooltipDelay ;
var tooltipHideOnClick = _props . tooltipHideOnClick ;
2016-08-07 21:52:51 +03:00
var tooltipPosition = _props . tooltipPosition ;
var other = _objectWithoutProperties ( _props , [ 'children' , 'className' , 'theme' , 'tooltip' , 'tooltipDelay' , 'tooltipHideOnClick' , 'tooltipPosition' ] ) ;
2016-06-03 23:29:21 +03:00
2016-08-07 21:52:51 +03:00
var _className = ( 0 , _classnames3 . default ) ( theme . tooltip , ( _classnames = { } , _defineProperty ( _classnames , theme . tooltipActive , active ) , _defineProperty ( _classnames , theme [ positionClass ] , theme [ positionClass ] ) , _classnames ) ) ;
2016-06-03 23:29:21 +03:00
return _react2 . default . createElement (
ComposedComponent ,
_extends ( { } , other , {
2016-08-07 20:01:45 +03:00
className : className ,
2016-06-03 23:29:21 +03:00
onClick : this . handleClick ,
onMouseEnter : this . handleMouseEnter ,
2016-08-07 20:01:45 +03:00
onMouseLeave : this . handleMouseLeave ,
theme : theme
2016-06-03 23:29:21 +03:00
} ) ,
children ? children : null ,
2016-08-07 20:01:45 +03:00
visible && _react2 . default . createElement (
_Portal2 . default ,
null ,
2016-08-07 21:52:51 +03:00
_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
)
)
2016-06-03 23:29:21 +03:00
)
) ;
}
} ] ) ;
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
} ) ,
2016-09-27 01:00:47 +03:00
tooltip : _react . PropTypes . oneOfType ( [ _react . PropTypes . string , _react . PropTypes . node ] ) ,
2016-06-03 23:29:21 +03:00
tooltipDelay : _react . PropTypes . number ,
2016-08-07 21:52:51 +03:00
tooltipHideOnClick : _react . PropTypes . bool ,
tooltipPosition : _react . PropTypes . oneOf ( Object . keys ( POSITION ) . map ( function ( key ) {
return POSITION [ key ] ;
} ) )
2016-06-03 23:29:21 +03:00
} ;
TooltippedComponent . defaultProps = {
2016-08-07 20:01:45 +03:00
className : defaultClassName ,
tooltipDelay : defaultDelay ,
2016-08-07 21:52:51 +03:00
tooltipHideOnClick : defaultHideOnClick ,
tooltipPosition : defaultPosition
2016-06-03 23:29:21 +03:00
} ;
return ( 0 , _reactCssThemr . themr ) ( _identifiers . TOOLTIP , defaultTheme ) ( TooltippedComponent ) ;
} ;
} ;
2016-08-07 20:01:45 +03:00
exports . default = tooltipFactory ;