[#201] Replace react-popover with react-popopo

Author: dapi

package.json

@@ -46,7 +46,7 @@
     "immutability-helper": "^2.8.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react-popopo": "^2.1.3",
+    "react-popopo": "^2.1.8",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-actions": "^2.6.1",

src/components/Lane/LaneHeader/LaneMenu.js

@@ -1,17 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {
-  PopoverWrapper,
-  Popover,
-  PopoverContainer,
-  PopoverContent,
-  PopoverTrigger
-} from 'react-popopo'
+import { Popover } from 'react-popopo'
 
-import {
-  CustomPopoverContent
-} from 'rt/styles/Base'
+import { CustomPopoverContent } from 'rt/styles/Base'
 
 import {
   LaneMenuTitle,
@@ -23,20 +15,18 @@ import {
   MenuButton,
 } from 'rt/styles/Elements'
 
-const LaneMenu = ({t, onDelete}) => {
-  return (
-    <Popover className="menu" position="bottom" PopoverContent={CustomPopoverContent} trigger={<MenuButton>⋮</MenuButton>}>
-      <LaneMenuHeader>
-        <LaneMenuTitle>{t('Lane actions')}</LaneMenuTitle>
-        <DeleteWrapper>
-          <GenDelButton>&#10006;</GenDelButton>
-        </DeleteWrapper>
-      </LaneMenuHeader>
-      <LaneMenuContent>
-        <LaneMenuItem onClick={onDelete}>{t('Delete lane')}</LaneMenuItem>
-      </LaneMenuContent>
-    </Popover>
-  )
-}
+const LaneMenu = ({t, onDelete}) => (
+  <Popover className="menu" position="bottom" PopoverContent={CustomPopoverContent} trigger={<MenuButton>⋮</MenuButton>}>
+    <LaneMenuHeader>
+      <LaneMenuTitle>{t('Lane actions')}</LaneMenuTitle>
+      <DeleteWrapper>
+        <GenDelButton>&#10006;</GenDelButton>
+      </DeleteWrapper>
+    </LaneMenuHeader>
+    <LaneMenuContent>
+      <LaneMenuItem onClick={onDelete}>{t('Delete lane')}</LaneMenuItem>
+    </LaneMenuContent>
+  </Popover>
+)
 
 export default LaneMenu;

src/styles/Base.js

@@ -53,15 +53,10 @@ export const GlobalStyle = createGlobalStyle`
   }
 `
 
-export const CustomPopoverContainer = styled(CustomPopoverContainer)`
+export const CustomPopoverContainer = styled(PopoverContainer)`
   position: absolute;
   right: 10px;
   flex-flow: column nowrap;
-.popover.popover--active .popover__content {
-  visibility: visible;
-  opacity: 1;
-  transition-delay: 100ms;
-}
 `
 
 export const CustomPopoverContent = styled(PopoverContent)`
@@ -80,6 +75,11 @@ export const CustomPopoverContent = styled(PopoverContent)`
   padding: 5px;
   left: 50%;
   transform: translateX(-50%);
+  ${props => props.active && `
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 100ms;
+  `}
   &::before {
     content: "";
     position: absolute;