[Resolved] Circle menu layer.

src/components/circle/CircleComponent.tsx

@@ -34,6 +34,7 @@ import SvgClose from '@material-ui/icons/Close'
 import AppBar from '@material-ui/core/AppBar'
 import Paper from '@material-ui/core/Paper'
 import Collapse from '@material-ui/core/Collapse'
+import Popover from '@material-ui/core/Popover'
 
 // - Import app components
 import UserAvatar from 'components/userAvatar'
@@ -128,9 +129,9 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
       disabledSave: false,
 
       /**
-       * Whether meu is open
+       * Keep menu anchor
        */
-      isMenuOpen: false
+      anchorElMenu: null
     }
 
     // Binding functions to `this`
@@ -153,22 +154,21 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
       disabledSave: (!value || value.trim() === '')
     })
   }
-
   /**
    * Handle close menu
    */
   handleCloseMenu = () => {
     this.setState({
-      isMenuOpen: false
+      anchorElMenu: null
     })
   }
 
   /**
    * Handle open menu
    */
-  handleOpenMenu = () => {
+  handleOpenMenu = (event: any) => {
     this.setState({
-      isMenuOpen: true
+      anchorElMenu: event.currentTarget
     })
   }
 
@@ -239,40 +239,44 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
   render() {
 
     const { circle, classes } = this.props
-    const { isMenuOpen } = this.state
+    const { anchorElMenu } = this.state
     /**
      * Right icon menue of circle
      *
      */
     // tslint:disable-next-line:member-ordering
     const rightIconMenu = (
-      <Manager>
+      <div>
-        <Target>
+
         <IconButton
-            aria-owns={isMenuOpen! ? 'circle-menu' : ''}
+          aria-owns={anchorElMenu! ? 'circle-menu' : ''}
           aria-haspopup='true'
           onClick={this.handleOpenMenu}
         >
           <MoreVertIcon />
         </IconButton>
-        </Target>
+
-        <Popper
+        <Popover
-          placement='bottom-start'
+          id='current-user-menu-root'
-          eventsEnabled={isMenuOpen}
+          anchorEl={anchorElMenu}
-          className={classNames({ [classes.popperClose]: !isMenuOpen }, { [classes.popperOpen]: isMenuOpen })}
+          open={Boolean(anchorElMenu)}
+          onClose={this.handleCloseMenu}
+          PaperProps={{
+            style: {
+              maxHeight: 200 * 4.5,
+              boxShadow: '0 1px 4px 0 rgba(0,0,0,0.14)',
+
+            },
+          }}
         >
-          <ClickAwayListener onClickAway={this.handleCloseMenu}>
-            <Grow in={isMenuOpen} >
           <Paper>
             <MenuList role='menu'>
-                  <MenuItem onClick={this.handleDeleteCircle} > Delete circle </MenuItem>
+              <MenuItem onClick={this.handleDeleteCircle} > Delete Circle </MenuItem>
-                  <MenuItem onClick={this.props.openCircleSettings}> Circle settings </MenuItem>
+              <MenuItem onClick={this.props.openCircleSettings}> Setting </MenuItem>
             </MenuList>
           </Paper>
-            </Grow>
+        </Popover>
-          </ClickAwayListener>
+      </div>
-        </Popper>
-      </Manager>
     )
 
     const circleTitle = (

src/components/circle/ICircleComponentState.ts

@@ -26,7 +26,7 @@ export interface ICircleComponentState {
   disabledSave: boolean
 
   /**
-   * Whether circle menu is open
+   * Keep menu anchor
    */
-  isMenuOpen: boolean
+  anchorElMenu: any
 }

yarn.lock

@@ -414,11 +414,12 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
-amazon-cognito-identity-js@^1.21.0:
+amazon-cognito-identity-js@^2.0.0:
-  version "1.31.0"
+  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/amazon-cognito-identity-js/-/amazon-cognito-identity-js-1.31.0.tgz#1dcd0f26ce9404c198a35468e8bb00410503021d"
+  resolved "https://registry.yarnpkg.com/amazon-cognito-identity-js/-/amazon-cognito-identity-js-2.0.9.tgz#5a8fd6e97c513d753c14cc9e17091b105fb65d22"
   dependencies:
-    aws-sdk "2.177.0"
+    buffer "4.9.1"
+    crypto-browserify "1.0.9"
     js-cookie "^2.1.4"
 
 amdefine@>=0.0.4:
@@ -678,21 +679,6 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-aws-sdk@2.177.0:
-  version "2.177.0"
-  resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.177.0.tgz#d5fbf1f82bab250e55153699b030b44f687f600b"
-  dependencies:
-    buffer "4.9.1"
-    crypto-browserify "1.0.9"
-    events "^1.1.1"
-    jmespath "0.15.0"
-    querystring "0.2.0"
-    sax "1.2.1"
-    url "0.10.3"
-    uuid "3.1.0"
-    xml2js "0.4.17"
-    xmlbuilder "4.2.1"
-
 aws-sdk@^2.132.0:
   version "2.240.1"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.240.1.tgz#ed9f137573277f4543740c04ac628b46df244717"
@@ -2994,7 +2980,7 @@ eventemitter3@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
 
-events@1.1.1, events@^1.0.0, events@^1.1.1:
+events@1.1.1, events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
@@ -9825,7 +9811,7 @@ xml2js@0.4.17:
     sax ">=0.6.0"
     xmlbuilder "^4.1.0"
 
-xmlbuilder@4.2.1, xmlbuilder@^4.1.0:
+xmlbuilder@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
   dependencies: