1. import React, { Component } from 'react'
  2. import PropTypes from 'prop-types'
  3. import Draggable from 'react-draggable'
  5. import { DragHandle } from 'DragHandle'
  6. import { ArrowBox, Container } from './styled'
  8. /**
  9.  * @component
  10.  * @category Popup
  11.  * @since 0.2.0
  12.  */
  13. class PopupBase extends Component {
  14.   state = {
  15.     dragged: false,
  16.     pinnedPixel: this.props.pixel,
  17.     transparent: false
  18.   }
  20.   onStart = () => {
  21.     const { arrow, onPopupDragStart, pixel, transparentDuringDrag } = this.props
  22.     // this hard sets the arrow direction at the time of initial drag
  23.     const lastArrow = !this.state.dragged ? arrow : this.state.lastArrow
  24.     const pinnedPixel = !this.state.dragged ? pixel : this.state.pinnedPixel
  26.     this.setState({
  27.       dragged: true,
  28.       lastArrow,
  29.       pinnedPixel,
  30.       transparent: transparentDuringDrag
  31.     })
  32.     onPopupDragStart()
  33.   }
  35.   onStop = e => {
  36.     const { pinnedPixel } = this.state
  38.     this.setState({
  39.       transparent: false
  40.     })
  41.     this.props.onPopupDragEnd({ ...e, pinnedPixel })
  42.   }
  44.   handleDrag = e => {
  45.     this.props.onPopupDrag(e)
  46.   }
  48.   render () {
  49.     const { arrow: arrowProp, children, draggable, height, inline, pixel: pixelProp, show, width } = this.props
  50.     const { dragged, lastArrow, pinnedPixel, transparent } = this.state
  51.     const arrowTranslator = {
  52.       top: 'bottom',
  53.       bottom: 'top',
  54.       left: 'right',
  55.       right: 'left',
  56.       none: 'none'
  57.     }
  58.     const pixel = dragged ? pinnedPixel : pixelProp
  59.     const arrow = dragged ? lastArrow : arrowProp
  61.     return (
  62.       <Draggable
  63.         axis='both'
  64.         bounds='parent'
  65.         handle={'.popupHandleTag'}
  66.         onDrag={this.handleDrag}
  67.         onStart={this.onStart}
  68.         onStop={this.onStop}>
  69.         <Container
  70.           arrow={arrow}
  71.           height={height}
  72.           inline={inline}
  73.           pixel={pixel}
  74.           show={show}
  75.           transparent={transparent}
  76.           width={width}>
  77.           {draggable ? <DragHandle className='popupHandleTag' /> : null}
  78.           {!dragged && <ArrowBox position={arrowTranslator[arrow]} />}
  79.           {children}
  80.         </Container>
  81.       </Draggable>
  82.     )
  83.   }
  84. }
  86. PopupBase.defaultProps = {
  87.   arrow: 'none',
  88.   draggable: true,
  89.   height: 'auto',
  90.   inline: false,
  91.   onPopupDrag: () => {},
  92.   onPopupDragEnd: () => {},
  93.   onPopupDragStart: () => {},
  94.   pixel: [0, 0],
  95.   show: false,
  96.   transparentDuringDrag: true,
  97.   width: 280
  98. }
  100. PopupBase.propTypes = {
  101.   /** The position of the popup's arrow (`top`, `right`, `bottom`, `left` or `none`) */
  102.   arrow: PropTypes.string,
  103.   /** The content of the popup */
  104.   children: PropTypes.oneOfType([
  105.     PropTypes.arrayOf(PropTypes.node),
  106.     PropTypes.node
  107.   ]),
  108.   draggable: PropTypes.bool,
  109.   /** The height of the popup */
  110.   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  111.   /** Render the component inline (without absolute positioning) */
  112.   inline: PropTypes.bool,
  113.   /** Callback fired during drags when draggable is true */
  114.   onPopupDrag: PropTypes.func,
  115.   /** Callback fired after a drag when draggable is true */
  116.   onPopupDragEnd: PropTypes.func,
  117.   /** Callback fired at the beginning of a drag when draggable is true */
  118.   onPopupDragStart: PropTypes.func,
  119.   /** The pixel coordinate where the popup should render */
  120.   pixel: PropTypes.array,
  121.   /** Show/hide the popup */
  122.   show: PropTypes.bool,
  123.   /** Set PopupBase to see-through during a drag when draggable is true */
  124.   transparentDuringDrag: PropTypes.bool,
  125.   /** The width of the popup */
  126.   width: PropTypes.number
  127. }
  129. export default PopupBase