@material-ui/icons#ArrowDropDown JavaScript Examples

The following examples show how to use @material-ui/icons#ArrowDropDown. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ProfileMenu.js    From ehr with GNU Affero General Public License v3.0 5 votes vote down vote up
render() {
        const menuItems = this.getMenuItems();
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);

        return (
            <div className="profile-menu">
                <DropdownIcon
                    aria-label="more"
                    aria-controls="long-menu"
                    aria-haspopup="true"
                    onClick={this.handleClick}
                    disableRipple={true}
                    size="small"
                >
                    <ArrowDropDown />
                </DropdownIcon>
                <Menu
                    id="menu-items"
                    anchorEl={anchorEl}
                    keepMounted
                    open={open}
                    onClose={this.handleClose}
                    getContentAnchorEl={null}
                    anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                    transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                    style={{ marginTop: '9px' }}
                >
                    {menuItems}
                    <Box m={1}>
                        <Divider />
                    </Box>
                    <MenuItem className="menuItem" onClick={this.onImportDataMenuItemClick}>
                        <span className="menuItemIcon">{getIcon('CloudUploadOutlined')}</span>
                        <span className="menuItemLabel">{t('ehr', 'Import Data')}</span>
                    </MenuItem>
                    <MenuItem className="menuItem" onClick={this.onPatientProfileMenuItemClick}>
                        <span className="menuItemIcon">{getIcon('PersonOutline')}</span>
                        <span className="menuItemLabel">{t('ehr', 'Patient Profile')}</span>
                    </MenuItem>
                </Menu>
            </div>
        );
    }
Example #2
Source File: ProfileMenu.js    From ehr with GNU Affero General Public License v3.0 5 votes vote down vote up
render() {
        const menuItems = this.getMenuItems();
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);

        return (
            <div className="profile-menu">
                <DropdownIcon
                    aria-label="more"
                    aria-controls="long-menu"
                    aria-haspopup="true"
                    onClick={this.handleClick}
                    disableRipple={true}
                    size="small"
                >
                    <ArrowDropDown />
                </DropdownIcon>
                <Menu
                    id="menu-items"
                    anchorEl={anchorEl}
                    keepMounted
                    open={open}
                    onClose={this.handleClose}
                    getContentAnchorEl={null}
                    anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                    transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                    style={{ marginTop: '9px' }}
                >
                    {menuItems}
                    <Box m={1}>
                        <Divider />
                    </Box>
                    <MenuItem className="menuItem" onClick={this.onImportDataMenuItemClick}>
                        <span className="menuItemIcon">{getIcon('CloudUploadOutlined')}</span>
                        <span className="menuItemLabel">Import Data</span>
                    </MenuItem>
                </Menu>
            </div>
        );
    }
Example #3
Source File: MenuItem.js    From generator-webapp-rocket with MIT License 5 votes vote down vote up
MenuItem = ({ menu, drawerOpen, activeRoute, isSubMenuItem, subMenuOpen, onToggleSubMenu, withGradient }) => {
  const { children, path, icon, text } = menu;
  const isSubMenu = Boolean(children);

  const classes = useStyles({ isSubMenu, withGradient });
  const { t } = useTranslation();

  const navLinkClasses = classes.menuItemLink +
    " " +
    cx({
      [classes.menuActiveColor]: !isSubMenu && activeRoute(path)
    });
  const itemTextClasses = classes.menuItemText +
    " " +
    cx({
      [classes.menuItemTextMini]: !drawerOpen
    }) +
    " " +
    cx({ 
      [classes.paddingLeft]: isSubMenuItem 
    });
  const menuItemIconClasses = classes.menuItemIcon + ' ' + cx({ [classes.paddingLeft]: isSubMenuItem });

  const translatedText = t(text)
  const Item = isSubMenu ? ListItem : NavLink;
  const itemProps = isSubMenu ? { onClick: onToggleSubMenu, button: true } : { to: path };

  return (
    <Tooltip disableHoverListener={!drawerOpen} title={translatedText}>
      <ListItem className={classes.menuItem}>
        <Item {...itemProps} className={navLinkClasses}>
          <ListItemIcon className={menuItemIconClasses}>
            {icon}
          </ListItemIcon>
          <ListItemText
            primary={translatedText}
            secondary={isSubMenu && (subMenuOpen ? <ArrowDropUp className={classes.caret} /> : <ArrowDropDown className={classes.caret} />)}
            disableTypography={true}
            className={itemTextClasses}
          />
        </Item>
      </ListItem>
    </Tooltip>
  );
}
Example #4
Source File: CommentReplies.js    From youtube-clone with MIT License 5 votes vote down vote up
CommentReplies = ({ parentCommentId }) => {
  const [numberOfReplies, setReplies] = useState(0);
  const [isOpen, setOpen] = useState(false);
  const comments = useSelector(({ comments }) => comments);
  const classes = useStyles();

  const toggleOpen = () => setOpen((isOpen) => !isOpen);
  useEffect(() => {
    let count = 0;
    comments.forEach((comment) => {
      if (comment.commentTo === parentCommentId) {
        count++;
      }
    });
    setReplies(count);
  }, [parentCommentId, comments]);

  let renderReplies = (parentCommentId) =>
    comments.map((comment) => (
      <>
        {comment.commentTo === parentCommentId && (
          <Comment key={comment.id} comment={comment} />
        )}
      </>
    ));

  return (
    <div>
      {numberOfReplies > 0 && (
        <div className={classes.view_more} onClick={toggleOpen}>
          {isOpen ? (
            <>
              <ArrowDropUp />
              <Typography variant="button">
                Hide {numberOfReplies} replies
              </Typography>
            </>
          ) : (
            <>
              <ArrowDropDown />
              <Typography variant="button">
                View {numberOfReplies} replies
              </Typography>
            </>
          )}
        </div>
      )}

      {isOpen && renderReplies(parentCommentId)}
    </div>
  );
}
Example #5
Source File: AgentsTable.js    From voicemail-for-amazon-connect with Apache License 2.0 4 votes vote down vote up
render() {
        let classes = this.props.classes;
        return (
            <div className={this.props.className}>
                <Paper className={classes.root}>
                    <div className={classes.topBar}>
                        <Grid container justify={"space-between"} alignItems={"flex-end"} direction={"row"}>
                            <Grid item className={classes.searchBox}>
                                <SearchTextField
                                    ref={(c) => this.searchTextField = c }
                                    showClearButton={this.props.searchFilter !== ""}
                                    searchChangeFunc={this.handleSearchChange}/>
                            </Grid>
                            <Grid item>
                                <Button color="secondary" className={classes.syncButton} onClick={() => this.setState({syncOpen: true})}>
                                    Sync Agents
                                </Button>
                                <AsyncButton loading={this.props.loading} color={"primary"} onClick={() => {
                                    this.props.getAgents();
                                    if (this.searchTextField) {
                                        this.searchTextField.updateSearch("")
                                    }
                                }} >Refresh</AsyncButton>
                            </Grid>
                        </Grid>
                    </div>
                    <Dialog
                        open={this.state.syncOpen}
                        onClose={() => this.setState({syncOpen: false})}
                        aria-labelledby="alert-dialog-title"
                        aria-describedby="alert-dialog-description"
                    >
                        <DialogTitle id="alert-dialog-title">Sync Amazon Connect Agents?</DialogTitle>
                        <DialogContent>
                            <DialogContentText id="alert-dialog-description">
                                This process will sync all users in Amazon Connect to the VM portal.
                            </DialogContentText>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => this.setState({syncOpen: false})} color="primary">
                                Cancel
                            </Button>
                            <Button onClick={this.handleSync} color="primary" autoFocus>
                                Sync
                            </Button>
                        </DialogActions>
                    </Dialog>

                    <Table className={classes.table} stickyHeader aria-label="sticky table" size="small">
                        <TableHead>
                            <TableRow>
                                {headerCells.map(headerCell => (
                                    <TableCell className={classes.tableCell}
                                        key={headerCell.id}
                                        align={headerCell.numeric ? 'right' : 'left'}
                                        padding={headerCell.disablePadding ? 'none' : 'default'}>
                                        <TableSortLabel
                                            onClick={() => this.sortBy(headerCell.id)}
                                            key={headerCell.id}
                                            hideSortIcon={!headerCell.sortable}
                                            active={this.props.sortKey === headerCell.id}
                                            direction={this.props.sortOrder}
                                            IconComponent={ArrowDropDown}>
                                            {headerCell.label}
                                        </TableSortLabel>
                                    </TableCell>
                                ))}
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {this.props.agents.map(agent => (
                                <TableRow key={agent.userId} hover onClick={() => {this.showAgent(agent)}}>
                                    <TableCell align="left">{agent.username}</TableCell>
                                    <TableCell align="left">{agent.extension}</TableCell>
                                    <TableCell align="left">{
                                        this.props.encryptVoicemail ?
                                            <Check fontSize="inherit"/> : 
                                                ( agent.encryptVoicemail ? 
                                                    <Check fontSize="inherit"/> : null ) }
                                    </TableCell>
                                    <TableCell align="left">{
                                        agent.transcribeVoicemail ?
                                            <Check className={this.props.transcribeVoicemail ? null : classes.checkDisable} fontSize="inherit"/> :
                                            null}
                                    </TableCell>
                                    <TableCell align="left">
                                        <span
                                            className={classes.delivery}>{agent.deliverEmail ? "Email" : ""}</span>
                                        <span
                                            className={classes.delivery}>{agent.deliverSMS ? `SMS: ${agent.deliverSMSPhoneNumber}` : ""}</span>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>

                    <div className={classes.navigationBar}>
                        <Button disabled={this.props.page.prev.length === 0} onClick={() => {
                            this.props.getAgents(this.props.page.prev[this.props.page.prev.length - 1]);
                        }}><KeyboardArrowLeft className={classes.navButton}/></Button>
                        <Button disabled={this.props.page.next.length === 0} onClick={() => {
                            this.props.getAgents(this.props.page.next[0]);
                        }}><KeyboardArrowRight className={classes.navButton}/></Button>
                    </div>
                </Paper>
            </div>
        )
    }
Example #6
Source File: UserMenu.js    From generator-webapp-rocket with MIT License 4 votes vote down vote up
function UserMenu({ drawerOpen, avatar, language, changeLanguage, withGradient }) {
    const [openAvatar, setOpenAvatar] = useState(false);
    const classes = useStyles();
    const { t } = useTranslation();
    const location = useLocation();
    const { oidcUser, logout } = useReactOidc();

    <%_ if (withRights){ _%>
    const userRoles = oidcUser?.profile?.role || emptyArray;<%_ } _%>
  
    const activeRoute = useCallback(routeName => location.pathname.indexOf(routeName) > -1, [location.pathname]) 
    <%_ if (withRights){ _%>
    const { userData } = useUserData();
    const userRights = userData?.rights || emptyArray
    <%_ } _%>
    <% if (withRights){ _%>
    const userMenuItems = userMenuConfig.filter(item => isEmpty(item.rights)
      ? intersect(userRoles, item.roles) || isEmpty(item.roles)
      : (intersect(userRoles, item.roles) && intersect(userRights, item.rights)) || isEmpty(item.roles)
    )<%_ } else { _%>
    const userMenuItems = userMenuConfig
    <%_ } _%>
    
    const openCollapseAvatar = useCallback(e => {
        setOpenAvatar(!openAvatar);
        e.preventDefault();
    }, [openAvatar])

    <%_ if (withMultiTenancy) { _%>
    const setContextTenant = useContext(TenantContext)

    // // TODO: might have the issue https://github.com/apollographql/apollo-client/issues/5179
    const [callMyTenantsQuery, { called, loading: tenantsLoading, data }] = useLazyQuery(MY_TENANTS_QUERY)

    useEffect(() => {
        if (!oidcUser || called || tenantsLoading) { return }

        callMyTenantsQuery();
    }, [callMyTenantsQuery, called, tenantsLoading, oidcUser])
    const myTenants = data?.myTenants 
    <%_}_%>
    <%_ if (withMultiTenancy) { _%>
    const logoutAction = useCallback(e => {
        e.preventDefault();
        logout();
        setContextTenant();
    }, [logout, setContextTenant])
    <%_} else { _%>
    const logoutAction = useCallback(e => {
        e.preventDefault();
        logout();
    }, [logout]) 
    <%_}_%>

    const userName = oidcUser?.profile?.firstName
        ? `${oidcUser.profile.name} ${oidcUser.profile.lastName}`
        : oidcUser?.profile
            ? oidcUser.profile.name.split('@')[0]
            : "User";
    <%_ if (withMultiTenancy) { _%>
    const [tenant, setTenant] = useState(myTenants && oidcUser?.profile?.tid && myTenants.find(t => t.externalId.toUpperCase() === oidcUser?.profile?.tid.toUpperCase()))
    useEffect(() => {
        const localTenant = myTenants && oidcUser?.profile?.tid && myTenants.find(t => t.externalId.toUpperCase() === oidcUser?.profile?.tid.toUpperCase())
        if (!localTenant || tenant) { return }
        setTenant(localTenant)
    }, [myTenants, oidcUser, tenant])

    const handleTenantChange = useCallback(e => {
        setTenant(e)
        setContextTenant(e.code)
    }, [setContextTenant])

    const tenantName = tenant?.name ? ` - ${tenant.name}` : "" 
    <%_}_%>
    const itemText = classes.itemText +
        " " +
        cx({
            [classes.itemTextMini]: !drawerOpen
        });
    <% if (withMultiTenancy) { %> const displayName = `${userName}${tenantName}` <% } %>
    <% if (!withMultiTenancy) { %> const displayName = userName <% } %>
    return (
        <List className={classes.userMenuContainer}>
            <ListItem className={classes.item + " " + classes.userItem}>
                <NavLink to={'/'} className={classes.itemLink} onClick={openCollapseAvatar}>
                    <ListItemIcon className={classes.itemIcon}>
                        <img src={avatar ? avatar : avatar_default} className={classes.photo} alt='...' />
                    </ListItemIcon>
                    <ListItemText
                        primary={displayName}
                        secondary={openAvatar ? <ArrowDropUp className={classes.caret} /> : <ArrowDropDown className={classes.caret} />}
                        disableTypography={true}
                        className={itemText}
                    />
                </NavLink>
                <Collapse in={openAvatar} unmountOnExit classes={{ wrapper: classes.collapseWrapper }}>
                    <List className={classes.list + classes.collapseList}>
                        {userMenuItems.map((userMenu, key) => {
                            return <UserMenuItem key={key} userMenu={userMenu} drawerOpen={drawerOpen} activeRoute={activeRoute} withGradient={withGradient} />
                        })}
                        {oidcUser &&
                            <Tooltip disableHoverListener={drawerOpen} title={t('Tooltips.Logout')}>
                                <ListItem className={classes.collapseItem}>
                                    <NavLink to={"/"} className={classes.itemLink} onClick={logoutAction}>
                                    <ListItemIcon className={classes.itemIcon}>
                                        <PowerSettingsNew />
                                    </ListItemIcon>
                                    <ListItemText
                                        primary={t('Tooltips.Logout')}
                                        disableTypography={true}
                                        className={itemText}
                                    />
                                    </NavLink>
                                </ListItem>
                            </Tooltip>
                        }
                        <ListItem className={classes.selectorItem}>
                            <LanguageSelector
                                language={language}
                                changeLanguage={changeLanguage}
                                drawerOpen={drawerOpen}
                            />
                        </ListItem>
                        <% if (withMultiTenancy) { %> {!tenantsLoading && myTenants?.length > 1 &&
                        <Tooltip disableHoverListener={drawerOpen} title={t('Tooltips.TenantList')}>
                            <ListItem className={classes.selectorItem}>
                                <TenantSelector
                                    tenant={tenant}
                                    tenants={myTenants}
                                    changeTenant={handleTenantChange}
                                    drawerOpen={drawerOpen}
                                />
                            </ListItem>
                        </Tooltip>
                        }<% } -%>
                    </List>
                </Collapse>
            </ListItem>
        </List>
    );
}