2016-06-03 23:29:21 +03:00
'use strict' ;
Object . defineProperty ( exports , "__esModule" , {
value : true
} ) ;
exports . Menu = exports . menuFactory = undefined ;
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 _reactDom = require ( 'react-dom' ) ;
var _reactDom2 = _interopRequireDefault ( _reactDom ) ;
var _classnames2 = require ( 'classnames' ) ;
var _classnames3 = _interopRequireDefault ( _classnames2 ) ;
var _reactCssThemr = require ( 'react-css-themr' ) ;
var _identifiers = require ( '../identifiers.js' ) ;
var _utils = require ( '../utils' ) ;
var _MenuItem = require ( './MenuItem.js' ) ;
var _MenuItem2 = _interopRequireDefault ( _MenuItem ) ;
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 _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 = {
AUTO : 'auto' ,
STATIC : 'static' ,
TOP _LEFT : 'topLeft' ,
TOP _RIGHT : 'topRight' ,
BOTTOM _LEFT : 'bottomLeft' ,
BOTTOM _RIGHT : 'bottomRight'
} ;
var factory = function factory ( MenuItem ) {
2016-06-04 00:45:19 +03:00
var Menu = function ( _Component ) {
_inherits ( Menu , _Component ) ;
2016-06-03 23:29:21 +03:00
function Menu ( ) {
2016-10-08 13:51:21 +03:00
var _ref ;
2016-06-03 23:29:21 +03:00
var _temp , _this , _ret ;
_classCallCheck ( this , Menu ) ;
for ( var _len = arguments . length , args = Array ( _len ) , _key = 0 ; _key < _len ; _key ++ ) {
args [ _key ] = arguments [ _key ] ;
}
2016-10-08 13:51:21 +03:00
return _ret = ( _temp = ( _this = _possibleConstructorReturn ( this , ( _ref = Menu . _ _proto _ _ || Object . getPrototypeOf ( Menu ) ) . call . apply ( _ref , [ this ] . concat ( args ) ) ) , _this ) , _this . state = {
2016-06-03 23:29:21 +03:00
active : _this . props . active ,
rippled : false
} , _this . handleDocumentClick = function ( event ) {
if ( _this . state . active && ! _utils . events . targetIsDescendant ( event , _reactDom2 . default . findDOMNode ( _this ) ) ) {
_this . setState ( { active : false , rippled : false } ) ;
}
2016-06-19 22:39:29 +03:00
} , _this . handleSelect = function ( item , event ) {
2016-06-03 23:29:21 +03:00
var _item$props = item . props ;
var value = _item$props . value ;
var onClick = _item$props . onClick ;
2016-06-19 22:39:29 +03:00
if ( onClick ) event . persist ( ) ;
2016-06-03 23:29:21 +03:00
_this . setState ( { active : false , rippled : _this . props . ripple } , function ( ) {
2016-06-19 22:39:29 +03:00
if ( onClick ) onClick ( event ) ;
2016-06-03 23:29:21 +03:00
if ( _this . props . onSelect ) _this . props . onSelect ( value ) ;
} ) ;
} , _temp ) , _possibleConstructorReturn ( _this , _ret ) ;
}
_createClass ( Menu , [ {
key : 'componentDidMount' ,
value : function componentDidMount ( ) {
var _this2 = this ;
this . positionTimeoutHandle = setTimeout ( function ( ) {
var _refs$menu$getBoundin = _this2 . refs . menu . getBoundingClientRect ( ) ;
var width = _refs$menu$getBoundin . width ;
var height = _refs$menu$getBoundin . height ;
var position = _this2 . props . position === POSITION . AUTO ? _this2 . calculatePosition ( ) : _this2 . props . position ;
_this2 . setState ( { position : position , width : width , height : height } ) ;
} ) ;
}
} , {
key : 'componentWillReceiveProps' ,
value : function componentWillReceiveProps ( nextProps ) {
2016-07-24 14:17:59 +03:00
var _this3 = this ;
2016-06-03 23:29:21 +03:00
if ( this . props . position !== nextProps . position ) {
var position = nextProps . position === POSITION . AUTO ? this . calculatePosition ( ) : nextProps . position ;
this . setState ( { position : position } ) ;
}
2016-07-24 14:17:59 +03:00
/ * *
* If the menu is going to be activated via props and its not active , verify
* the position is appropriated and then show it recalculating position if its
* wrong . It should be shown in two consecutive setState .
* /
2016-06-03 23:29:21 +03:00
if ( ! this . props . active && nextProps . active && ! this . state . active ) {
2016-07-24 14:17:59 +03:00
if ( nextProps . position === POSITION . AUTO ) {
var _position = this . calculatePosition ( ) ;
if ( this . state . position !== _position ) {
this . setState ( { position : _position , active : false } , function ( ) {
_this3 . activateTimeoutHandle = setTimeout ( function ( ) {
_this3 . show ( ) ;
} , 20 ) ;
} ) ;
} else {
this . show ( ) ;
}
} else {
this . show ( ) ;
}
2016-06-03 23:29:21 +03:00
}
2016-07-24 14:17:59 +03:00
/ * *
* If the menu is being deactivated via props and the current state is
* active , it should be hid .
* /
2016-06-03 23:29:21 +03:00
if ( this . props . active && ! nextProps . active && this . state . active ) {
this . hide ( ) ;
}
}
} , {
key : 'componentWillUpdate' ,
value : function componentWillUpdate ( nextProps , nextState ) {
if ( ! this . state . active && nextState . active ) {
2016-10-06 21:29:58 +03:00
_utils . events . addEventsToDocument ( {
click : this . handleDocumentClick ,
touchstart : this . handleDocumentClick
} ) ;
2016-06-03 23:29:21 +03:00
}
}
} , {
key : 'componentDidUpdate' ,
value : function componentDidUpdate ( prevProps , prevState ) {
if ( prevState . active && ! this . state . active ) {
if ( this . props . onHide ) this . props . onHide ( ) ;
2016-10-06 21:29:58 +03:00
_utils . events . removeEventsFromDocument ( {
click : this . handleDocumentClick ,
touchstart : this . handleDocumentClick
} ) ;
2016-06-03 23:29:21 +03:00
} else if ( ! prevState . active && this . state . active && this . props . onShow ) {
this . props . onShow ( ) ;
}
}
} , {
key : 'componentWillUnmount' ,
value : function componentWillUnmount ( ) {
2016-10-06 21:29:58 +03:00
if ( this . state . active ) {
_utils . events . removeEventsFromDocument ( {
click : this . handleDocumentClick ,
touchstart : this . handleDocumentClick
} ) ;
}
2016-06-03 23:29:21 +03:00
clearTimeout ( this . positionTimeoutHandle ) ;
clearTimeout ( this . activateTimeoutHandle ) ;
}
} , {
key : 'calculatePosition' ,
value : function calculatePosition ( ) {
var parentNode = _reactDom2 . default . findDOMNode ( this ) . parentNode ;
if ( ! parentNode ) return ;
var _parentNode$getBoundi = parentNode . getBoundingClientRect ( ) ;
var top = _parentNode$getBoundi . top ;
var left = _parentNode$getBoundi . left ;
var height = _parentNode$getBoundi . height ;
var width = _parentNode$getBoundi . width ;
var _utils$getViewport = _utils . utils . getViewport ( ) ;
var wh = _utils$getViewport . height ;
var ww = _utils$getViewport . width ;
var toTop = top < wh / 2 - height / 2 ;
var toLeft = left < ww / 2 - width / 2 ;
return '' + ( toTop ? 'top' : 'bottom' ) + ( toLeft ? 'Left' : 'Right' ) ;
}
} , {
key : 'getMenuStyle' ,
value : function getMenuStyle ( ) {
var _state = this . state ;
var width = _state . width ;
var height = _state . height ;
var position = _state . position ;
if ( position !== POSITION . STATIC ) {
if ( this . state . active ) {
return { clip : 'rect(0 ' + width + 'px ' + height + 'px 0)' } ;
} else if ( position === POSITION . TOP _RIGHT ) {
return { clip : 'rect(0 ' + width + 'px 0 ' + width + 'px)' } ;
} else if ( position === POSITION . BOTTOM _RIGHT ) {
return { clip : 'rect(' + height + 'px ' + width + 'px ' + height + 'px ' + width + 'px)' } ;
} else if ( position === POSITION . BOTTOM _LEFT ) {
return { clip : 'rect(' + height + 'px 0 ' + height + 'px 0)' } ;
} else if ( position === POSITION . TOP _LEFT ) {
return { clip : 'rect(0 0 0 0)' } ;
}
}
}
} , {
key : 'getRootStyle' ,
value : function getRootStyle ( ) {
if ( this . state . position !== POSITION . STATIC ) {
return { width : this . state . width , height : this . state . height } ;
}
}
} , {
key : 'renderItems' ,
value : function renderItems ( ) {
var _this4 = this ;
return _react2 . default . Children . map ( this . props . children , function ( item ) {
if ( ! item ) return item ;
if ( item . type === MenuItem ) {
return _react2 . default . cloneElement ( item , {
ripple : item . props . ripple || _this4 . props . ripple ,
selected : typeof item . props . value !== 'undefined' && _this4 . props . selectable && item . props . value === _this4 . props . selected ,
onClick : _this4 . handleSelect . bind ( _this4 , item )
} ) ;
} else {
return _react2 . default . cloneElement ( item ) ;
}
} ) ;
}
} , {
key : 'show' ,
value : function show ( ) {
var _refs$menu$getBoundin2 = this . refs . menu . getBoundingClientRect ( ) ;
var width = _refs$menu$getBoundin2 . width ;
var height = _refs$menu$getBoundin2 . height ;
this . setState ( { active : true , width : width , height : height } ) ;
}
} , {
key : 'hide' ,
value : function hide ( ) {
this . setState ( { active : false } ) ;
}
} , {
key : 'render' ,
value : function render ( ) {
var _classnames ;
var theme = this . props . theme ;
var outlineStyle = { width : this . state . width , height : this . state . height } ;
var className = ( 0 , _classnames3 . default ) ( [ theme . menu , theme [ this . state . position ] ] , ( _classnames = { } , _defineProperty ( _classnames , theme . active , this . state . active ) , _defineProperty ( _classnames , theme . rippled , this . state . rippled ) , _classnames ) , this . props . className ) ;
return _react2 . default . createElement (
'div' ,
{ 'data-react-toolbox' : 'menu' , className : className , style : this . getRootStyle ( ) } ,
this . props . outline ? _react2 . default . createElement ( 'div' , { className : theme . outline , style : outlineStyle } ) : null ,
_react2 . default . createElement (
'ul' ,
{ ref : 'menu' , className : theme . menuInner , style : this . getMenuStyle ( ) } ,
this . renderItems ( )
)
) ;
}
} ] ) ;
return Menu ;
2016-06-04 00:45:19 +03:00
} ( _react . Component ) ;
2016-06-03 23:29:21 +03:00
Menu . propTypes = {
2016-06-04 00:45:19 +03:00
active : _react . PropTypes . bool ,
children : _react . PropTypes . node ,
className : _react . PropTypes . string ,
onHide : _react . PropTypes . func ,
onSelect : _react . PropTypes . func ,
onShow : _react . PropTypes . func ,
outline : _react . PropTypes . bool ,
2016-06-19 22:39:29 +03:00
position : _react . PropTypes . oneOf ( Object . keys ( POSITION ) . map ( function ( key ) {
return POSITION [ key ] ;
} ) ) ,
2016-06-04 00:45:19 +03:00
ripple : _react . PropTypes . bool ,
selectable : _react . PropTypes . bool ,
selected : _react . PropTypes . any ,
theme : _react . PropTypes . shape ( {
active : _react . PropTypes . string ,
bottomLeft : _react . PropTypes . string ,
bottomRight : _react . PropTypes . string ,
menu : _react . PropTypes . string ,
menuInner : _react . PropTypes . string ,
outline : _react . PropTypes . string ,
rippled : _react . PropTypes . string ,
static : _react . PropTypes . string ,
topLeft : _react . PropTypes . string ,
topRight : _react . PropTypes . string
2016-06-03 23:29:21 +03:00
} )
} ;
Menu . defaultProps = {
active : false ,
outline : true ,
position : POSITION . STATIC ,
ripple : true ,
selectable : true
} ;
return Menu ;
} ;
var Menu = factory ( _MenuItem2 . default ) ;
exports . default = ( 0 , _reactCssThemr . themr ) ( _identifiers . MENU ) ( Menu ) ;
exports . menuFactory = factory ;
exports . Menu = Menu ;