import * as React from 'react' ; import classnames from 'classnames' ; import * as styles from './Popup.sass' ; import IReactComponentProps from '../../../common/structures/IReactComponentProps' ; import cloneNodes from '../../../utils/cloneNodes' ; /**
 * Try catch for Local vs. Styleguidist
 */ declare let __non_webpack_require__ ; let ReactDOM ; try { ReactDOM = __non_webpack_require__ ( 'react-dom' ) ; } catch ( e ) { ReactDOM = require ( 'react-dom' ) ; } interface IProps extends IReactComponentProps { items ? : any [ ] ; offsetX ? : string ; offsetY ? : string ; padding ? : boolean ; position ? : 'bottom' | 'right' | 'top' ; triggerContent ? : React . ReactNode ; triggerAble ? : boolean ; closeOnPopupClick ? : boolean ; centerTail ? : boolean ; closeOnTrigger ? : boolean ; } interface IState { open : boolean ; tipItemHover : boolean ; } export default class Popup extends React . Component < IProps , IState > { static defaultProps = { items : [ ] , padding : true , position : 'bottom' , triggerAble : true , closeOnPopupClick : true , centerTail : false , closeOnTrigger : true , } ; constructor ( props ) { super ( props ) ; this . state = { open : false , tipItemHover : false , } ; this . onClick = this . onClick . bind ( this ) ; this . onClickOutside = this . onClickOutside . bind ( this ) ; this . maybeClose = this . maybeClose . bind ( this ) ; } componentDidMount ( ) { document . addEventListener ( 'click' , this . onClickOutside , true ) ; } componentWillUnmount ( ) { document . removeEventListener ( 'click' , this . onClickOutside , true ) ; } onClick ( ) { const { open } = this . state ; const { triggerAble , closeOnPopupClick } = this . props ; if ( ( ! open && ! triggerAble ) || ( open && ! closeOnPopupClick ) ) { return ; } this . setState ( { open : ! this . state . open , } ) ; } onClickOutside ( event ) { try { const domNode = ReactDOM . findDOMNode ( this ) ; if ( ! domNode || ! domNode . contains ( event . target ) ) { this . setState ( { open : false , } ) ; } } catch ( error ) { } } maybeClose ( event ) { if ( this . props . closeOnTrigger ) this . handleClose ( ) ; } handleClose = ( ) => this . setState ( { open : false } ) ; render ( ) { const transformStyles = [ ... ( this . props . offsetX ? [ `translateX(${ this . props . offsetX })` ] : [ ] ) , ... ( this . props . offsetY ? [ `translateY(${ this . props . offsetY })` ] : [ ] ) , ] ; return ( < div className = { classnames ( styles . Popup , { [ styles . Popup__Open ] : this . state . open , [ styles . Popup__Padding ] : this . props . padding , [ styles . Popup__PositionBottom ] : this . props . position === 'bottom' , [ styles . Popup__PositionRight ] : this . props . position === 'right' , [ styles . Popup__PositionTop ] : this . props . position === 'top' , [ styles . Popup__CenteredTail ] : this . props . centerTail , [ styles . Popup__Cursor_Pointer ] : this . props . closeOnPopupClick , } , this . props . className ) } id = { this . props . id } onClick = { this . onClick } style = { this . props . style } tabIndex = { 0 } > < div className = { styles . Popup_BubbleWrapper } > < div className = { styles . Popup_BubbleOffsetContainer } style = { { ... ( ( this . props . offsetX || this . props . offsetY ) && { transform : transformStyles . join ( ' ' ) } ) , } } > < div className = { classnames ( styles . Popup_Bubble , { [ styles . Popup_Bubble__TipItemHover ] : this . state . tipItemHover , } , typeof this . state . tipItemHover === 'string' && this . state . tipItemHover === 'red' ? styles . Popup_Bubble__TipItemHover : null ) } > < div className = { styles . Popup_BubbleContent } > { } { cloneNodes ( this . props . children , { handleClosePopup : this . handleClose } ) } < /div> < /div> < /div> < /div> { } < div className = { classnames ( styles . triggerContent , { [ styles . triggerContent__Pointer ] : this . props . closeOnTrigger , } ) } onClick = { this . maybeClose } > { cloneNodes ( this . props . triggerContent , { popupState : { ... this . state } } ) } < /div> < /div>); } }