[Resolved] Circle menu layer.

2018-06-19 14:01:13 +07:00
parent 7e9a8245ab
commit 7e0c80e5f7
3 changed files with 58 additions and 68 deletions
--- a/src/components/circle/CircleComponent.tsx
+++ b/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>
-        <Target>
-          <IconButton
-            aria-owns={isMenuOpen! ? 'circle-menu' : ''}
-            aria-haspopup='true'
-            onClick={this.handleOpenMenu}
-          >
-            <MoreVertIcon />
-          </IconButton>
-        </Target>
-        <Popper
-          placement='bottom-start'
-          eventsEnabled={isMenuOpen}
-          className={classNames({ [classes.popperClose]: !isMenuOpen }, { [classes.popperOpen]: isMenuOpen })}
+      <div>
+
+        <IconButton
+          aria-owns={anchorElMenu! ? 'circle-menu' : ''}
+          aria-haspopup='true'
+          onClick={this.handleOpenMenu}
        >
-          <ClickAwayListener onClickAway={this.handleCloseMenu}>
-            <Grow in={isMenuOpen} >
-              <Paper>
-                <MenuList role='menu'>
-                  <MenuItem onClick={this.handleDeleteCircle} > Delete circle </MenuItem>
-                  <MenuItem onClick={this.props.openCircleSettings}> Circle settings </MenuItem>
-                </MenuList>
-              </Paper>
-            </Grow>
-          </ClickAwayListener>
-        </Popper>
-      </Manager>
+          <MoreVertIcon />
+        </IconButton>
+
+        <Popover
+          id='current-user-menu-root'
+          anchorEl={anchorElMenu}
+          open={Boolean(anchorElMenu)}
+          onClose={this.handleCloseMenu}
+          PaperProps={{
+            style: {
+              maxHeight: 200 * 4.5,
+              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) {
-      usersOfCircle =  usersOfCircle.set(userTieId!, theUserTie)
+    if (circleList.indexOf(ownProps.id) > -1) {
+      usersOfCircle = usersOfCircle.set(userTieId!, theUserTie)
    }
  })
  return {
--- a/src/components/circle/ICircleComponentState.ts
+++ b/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
 }
--- a/yarn.lock
+++ b/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:
-  version "1.31.0"
-  resolved "https://registry.yarnpkg.com/amazon-cognito-identity-js/-/amazon-cognito-identity-js-1.31.0.tgz#1dcd0f26ce9404c198a35468e8bb00410503021d"
+amazon-cognito-identity-js@^2.0.0:
+  version "2.0.9"
+  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: