Merge pull request #163 from MonsantoCo/issue-162

Draggable Cleanup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bayer/ol-kit",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "license": "BSD",
   "description": "Mapping components & utils built with openlayers + react",
   "keywords": [

src/Popup/Popup.js

@@ -136,6 +136,16 @@ class Popup extends Component {
     this.setState({ ...this.defaultState }, () => onMapClick(this.state))
   }
 
+  onDragEnd = e => {
+    // if drag occurs in PopupBase, update pixel in state here
+    this.setState({
+      popupPosition: {
+        ...this.state.popupPosition,
+        pixel: e.pinnedPixel
+      }
+    })
+  }
+
   render () {
     const { actions, children, map, show: propShow } = this.props
     const { features, loading, popupPosition: { arrow, pixel }, show: stateShow } = this.state
@@ -146,7 +156,7 @@ class Popup extends Component {
         ? null
         : (
           ReactDOM.createPortal(
-            <PopupBase arrow={arrow} pixel={pixel} {...this.props} show={show}>
+            <PopupBase arrow={arrow} onPopupDragEnd={this.onDragEnd} pixel={pixel} {...this.props} show={show}>
               {children || ( // default ui if no children are passed
                 <PopupDefaultInsert
                   actions={actions}

src/Popup/PopupBase.js

@@ -33,10 +33,12 @@ class PopupBase extends Component {
   }
 
   onStop = e => {
+    const { pinnedPixel } = this.state
+
     this.setState({
       transparent: false
     })
-    this.props.onPopupDragEnd(e)
+    this.props.onPopupDragEnd({ ...e, pinnedPixel })
   }
 
   handleDrag = e => {
@@ -73,7 +75,7 @@ class PopupBase extends Component {
           transparent={transparent}
           width={width}>
           {draggable ? <DragHandle /> : null}
-          <ArrowBox hide={dragged} position={arrowTranslator[arrow]} />
+          {!dragged && <ArrowBox position={arrowTranslator[arrow]} />}
           {children}
         </Container>
       </Draggable>

src/Popup/PopupInsert/PopupActionGroup/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 
 import { Container, ActionIcon, Flyout, Title } from './styled'
@@ -35,11 +36,18 @@ class PopupActionGroup extends Component {
             <i className='zmdi zmdi-caret-right'></i>
           </ActionIcon>
         </Container>
-        <Flyout left={right} top={top} showFlyout={this.state.showFlyout}
-          onMouseEnter={() => this.onHover(true)}
-          onMouseLeave={() => this.onHover(false)} >
-          {children}
-        </Flyout>
+        {this.state.showFlyout &&
+          ReactDOM.createPortal(
+            <Flyout
+              left={right}
+              top={top}
+              showFlyout={this.state.showFlyout}
+              onMouseEnter={() => this.onHover(true)}
+              onMouseLeave={() => this.onHover(false)}>
+              {children}
+            </Flyout>,
+            document.body)
+        }
       </div>
     )
   }

src/Popup/PopupInsert/PopupActionGroup/styled.js

@@ -31,18 +31,16 @@ export const ActionIcon = styled.div`
     margin: 0 5px;
 `
 
-export const Flyout = styled.div.attrs({
-  style: ({ left, top, showFlyout }) => ({
-    left: `${left}px`,
-    top: `${top}px`,
-    display: showFlyout ? 'block' : 'none'
-  })
-})`
-  position: fixed;
+export const Flyout = styled.div`
+  position: absolute;
   background-color: white;
   width: 192px;
+  font-family: 'ArialMT','Arial';
   z-index: 2;
   box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  left: ${p => p.left}px;
+  top: ${p => p.top}px;
+  display: ${p => p.showFlyout ? 'block' : 'none'};
 `
 
 export const Title = styled.span``

src/Popup/PopupInsert/PopupDefaultPage/index.js

@@ -86,7 +86,7 @@ class PopupDefaultPage extends Component {
                   ? <Frame title={translations['_ol_kit.PopupDefaultPage.actions']} height={169}>
                     {children}
                   </Frame>
-                  : <div title={translations['_ol_kit.PopupDefaultPage.actions']} style={{ height: '169px' }}>
+                  : <div title={translations['_ol_kit.PopupDefaultPage.actions']} style={{ height: '169px', overflowY: 'scroll' }}>
                     {children}
                   </div>
                 }

src/Popup/PopupInsert/styled.js

@@ -13,5 +13,5 @@ export const AttributeSettings = styled.div`
 `
 
 export const HeightContainer = styled.div.attrs(p => ({ 'data-testid': p['data-testid'] }))`
-  height: 100%;
+  height: auto;
 `

src/Popup/styled.js

@@ -32,7 +32,6 @@ export const Container = styled.div`
 `
 
 export const ArrowBox = styled.div`
-  display: ${p => p.hide ? 'none' : 'block'};
   &::after, &::before {
     ${props => props.position === 'click' ? 'right' : props.position}: 100%;
     ${props => props.position === 'top' || props.position === 'bottom' ? 'left' : 'top'}: 50%;
@@ -61,7 +60,7 @@ export const ArrowBox = styled.div`
 export const DragHandleIcon = styled.div`
   height: 25px;
   width: 70px;
-  cursor: pointer;
+  cursor: move;
   color: ${props => props.color || `#fff`};
   padding: 3px;
   z-index: 100;