[Resolved] Circle menu layer.

src/components/circle/CircleComponent.tsx

@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { push } from 'react-router-redux'
-import {Map, List as ImuList} from 'immutable'
+import { Map, List as ImuList } from 'immutable'
 
 // - Material UI
 import ListItemText from '@material-ui/core/ListItemText'
@@ -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'
@@ -109,7 +110,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
    * Component constructor
    * @param  {object} props is an object properties of component
    */
-  constructor (props: ICircleComponentProps) {
+  constructor(props: ICircleComponentProps) {
     super(props)
 
     // Defaul state
@@ -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
     })
   }
 
@@ -225,7 +225,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
           >
             <UserAvatar fullName={fullName!} fileName={avatar} />
             <ListItemText inset primary={fullName} />
-            </ListItem>)
+          </ListItem>)
 
       })
       return usersParsed
@@ -236,43 +236,47 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
    * Reneder component DOM
    * @return {react element} return the DOM which rendered by component
    */
-  render () {
+  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
+        <IconButton
-            aria-owns={isMenuOpen! ? 'circle-menu' : ''}
+          aria-owns={anchorElMenu! ? 'circle-menu' : ''}
-            aria-haspopup='true'
+          aria-haspopup='true'
-            onClick={this.handleOpenMenu}
+          onClick={this.handleOpenMenu}
-          >
-            <MoreVertIcon />
-          </IconButton>
-        </Target>
-        <Popper
-          placement='bottom-start'
-          eventsEnabled={isMenuOpen}
-          className={classNames({ [classes.popperClose]: !isMenuOpen }, { [classes.popperOpen]: isMenuOpen })}
         >
-          <ClickAwayListener onClickAway={this.handleCloseMenu}>
+          <MoreVertIcon />
-            <Grow in={isMenuOpen} >
+        </IconButton>
-              <Paper>
+
-                <MenuList role='menu'>
+        <Popover
-                  <MenuItem onClick={this.handleDeleteCircle} > Delete circle </MenuItem>
+          id='current-user-menu-root'
-                  <MenuItem onClick={this.props.openCircleSettings}> Circle settings </MenuItem>
+          anchorEl={anchorElMenu}
-                </MenuList>
+          open={Boolean(anchorElMenu)}
-              </Paper>
+          onClose={this.handleCloseMenu}
-            </Grow>
+          PaperProps={{
-          </ClickAwayListener>
+            style: {
-        </Popper>
+              maxHeight: 200 * 4.5,
-      </Manager>
+              boxShadow: '0 1px 4px 0 rgba(0,0,0,0.14)',
+
+            },
+          }}
+        >
+          <Paper>
+            <MenuList role='menu'>
+              <MenuItem onClick={this.handleDeleteCircle} > Delete Circle </MenuItem>
+              <MenuItem onClick={this.props.openCircleSettings}> Setting </MenuItem>
+            </MenuList>
+          </Paper>
+        </Popover>
+      </div>
     )
 
     const circleTitle = (
@@ -296,7 +300,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
       </div>
     )
     return (
-    <div>
+      <div>
         <ListItem
           className={classes.root}
           key={this.props.id + '-CircleComponent'}
@@ -312,11 +316,11 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
         </ListItem>
         <Collapse component='li' in={this.state.open} timeout='auto' unmountOnExit>
           <List disablePadding>
-          {this.userList()}
+            {this.userList()}
           </List>
         </Collapse>
         <Dialog
-        PaperProps={{className: classes.fullPageXs}}
+          PaperProps={{ className: classes.fullPageXs }}
           key={this.props.id}
           open={this.props.openSetting!}
           onClose={this.props.closeCircleSettings}
@@ -327,7 +331,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
           <DialogTitle >{circleTitle}</DialogTitle>
           <DialogContent>
             <TextField
-            fullWidth
+              fullWidth
               autoFocus
               placeholder='Circle name'
               label='Circle name'
@@ -336,7 +340,7 @@ export class CircleComponent extends Component<ICircleComponentProps, ICircleCom
             />
           </DialogContent>
         </Dialog>
-        </div>
+      </div>
     )
   }
 }
@@ -372,11 +376,11 @@ const mapStateToProps = (state: Map<string, any>, ownProps: ICircleComponentProp
   const currentCircle: Map<string, any> = circles.get(ownProps.id, Map({}))
   const circleId = ownProps.circle.get('id')
   let usersOfCircle: Map<string, any> = Map({})
-  userTies.forEach((userTie , userTieId) => {
+  userTies.forEach((userTie, userTieId) => {
     const theUserTie: Map<string, any> = userTie
     const circleList: ImuList<string> = theUserTie.getIn(['circleIdList'])
-    if ( circleList.indexOf(ownProps.id) > -1) {
+    if (circleList.indexOf(ownProps.id) > -1) {
-      usersOfCircle =  usersOfCircle.set(userTieId!, theUserTie)
+      usersOfCircle = usersOfCircle.set(userTieId!, theUserTie)
     }
   })
   return {

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: