@material-ui/icons#ArrowDropUp JavaScript Examples

The following examples show how to use @material-ui/icons#ArrowDropUp. 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: 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 #2
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 #3
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>
    );
}