@fortawesome/free-solid-svg-icons#faCaretDown TypeScript Examples

List = (props: ListProps) => {
  return (
    <div className="list">
      <button className={'list-button ' + props.show} onClick={props.onClick} type="button">
        <p>{props.title}</p>
        <FontAwesomeIcon icon={faCaretDown} />
      </button>
      {props.show ? (
        <div className="dropdown-wrapper">
          <AvalonScrollbars>
            <div className="dropdown-content">
              {props.objects.map((p, i) => (
                <button className="dropdown-item" key={'option' + i} onClick={p.onClick} type="button">
                  <p>{p.text}</p>
                </button>
              ))}
            </div>
          </AvalonScrollbars>
        </div>
      ) : null}
    </div>
  );
}

constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }

export function UIComponentsFold(props: IUIComponentsFoldProps) {
  const [unfold, setUnfold] = useState(true);
  const handleUnfold = () => {
    setUnfold(unfold => !unfold);
  };

  const length = !props.children ? 0 : Array.isArray(props.children) ? props.children.length + 1 : 1;

  const foldStyle = {
    height: (unfold ? length * 28 + 10 : 28) + 'px'
  };
  return (
    <div className={style.ui_components_fold} style={foldStyle}>
      <button className={cls(style.fold_btn, !unfold && style.fold)} onClick={handleUnfold}>
        <span>
          <FontAwesomeIcon icon={faCaretDown}/>
        </span>
        {props.title}
      </button>
      <div className={style.fold_content}>
        {props.children}
      </div>
    </div>
  );
}

function MenuItemMobile({
  expanded,
  selectAccordion,
  classes,
  title,
  icon,
  layersCategories,
}: MenuItemMobileProps) {
  const { t } = useSafeTranslation();
  const handleChange = (panel: string) => (
    event: React.ChangeEvent<{}>,
    newExpanded: boolean,
  ) => {
    selectAccordion(newExpanded ? panel : '');
  };

  return (
    <Accordion
      key={title}
      square
      elevation={0}
      expanded={expanded === title}
      onChange={handleChange(title)}
    >
      <AccordionSummary
        expandIcon={<FontAwesomeIcon icon={faCaretDown} />}
        IconButtonProps={{ color: 'inherit', size: 'small' }}
        aria-controls={title}
        id={title}
      >
        <img className={classes.icon} src={`/images/${icon}`} alt={title} />
        <Typography variant="body2">{t(title)}</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Grid container direction="column">
          {layersCategories.map(({ title: categoryTitle, layers, tables }) => (
            <MenuSwitch
              key={categoryTitle}
              title={categoryTitle}
              layers={layers}
              tables={tables}
            />
          ))}
        </Grid>
      </AccordionDetails>
    </Accordion>
  );
}

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

function NavExample(props: Props) {
  const { Root, styles } = useStyles(props);
  const theme = useTheme();
  const [collapsed, setCollapsed] = useState({} as { [key: string]: boolean });
  const [drawerOpen, setDrawerOpen] = useState(false);
  const location = useLocation();
  const isMobile = useMediaQuery(theme.media.down('tablet'));

  /**
   * recursively creates
   */
  const makeList = (
    links: Links,
    parentTitle: string = '',
    depth: number = 0,
  ): React.ReactElement => (
    <List className={classNames({ [styles.list]: depth === 0 })}>
      {links.map(({ title, value }) => {
        const path = `${parentTitle}/${titleToSlug(title)}`;
        const isFolder = Array.isArray(value);
        const isCollapsed = collapsed[path];

        const handleClick = () => {
          if (!isFolder) return;
          setCollapsed((collapsed) => toggle(collapsed, path));
        };

        return (
          <>
            <ListItem>
              <ListItemButton
                className={classNames(styles.listItemButton, {
                  [styles.itemActive]: location.pathname === path,
                })}
                style={{ paddingLeft: theme.space(depth + 1) }}
                onClick={handleClick}
                component={isFolder ? 'button' : Link}
                {...(isFolder ? undefined : { to: path })}
              >
                <span className={styles.listItemText}>{title}</span>{' '}
                {isFolder && (
                  <FontAwesomeIcon
                    className={styles.listItemIcon}
                    icon={faCaretDown}
                    rotation={isCollapsed ? 90 : undefined}
                  />
                )}
              </ListItemButton>
            </ListItem>
            {Array.isArray(value) &&
              !isCollapsed &&
              makeList(value, path, depth + 1)}
          </>
        );
      })}
    </List>
  );

  const navContent = (
    <>
      <div className={styles.title}>Nav Example</div>
      {makeList(links)}
    </>
  );

  return (
    <>
      <Root>
        {!isMobile && <nav className={styles.nav}>{navContent}</nav>}
        <div className={styles.content}>
          <header className={styles.header}>
            {isMobile && (
              <Button
                className={styles.openNavButton}
                shape="icon"
                aria-label="Open Nav"
                onClick={() => setDrawerOpen(true)}
              >
                <FontAwesomeIcon icon={faBars} size="lg" />
              </Button>
            )}
            {location.pathname}
          </header>
          <main className={styles.main}>
            <Switch>
              {pages.map(({ path, component }) => (
                <Route path={path} exact component={component} />
              ))}
              <Redirect to={firstPage.path} />
            </Switch>
          </main>
        </div>
      </Root>

      {isMobile && (
        <Drawer
          style={styles.cssVariableObject}
          className={styles.nav}
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
        >
          {navContent}
        </Drawer>
      )}
    </>
  );
}

function Nav(props: Props) {
  const { Root, styles, open, onClose } = useStyles(props, 'aside');
  const theme = useTheme();
  const [collapsedSet, setCollapsedSet] = useState<{ [key: string]: boolean }>(
    {},
  );

  const isMobile = useMediaQuery(theme.media.down('tablet'));

  const content = (
    <Root>
      <div className={styles.header}>
        {isMobile && (
          <Tooltip title="Close Nav" position="right">
            {(tooltipProps) => (
              <Button
                {...tooltipProps}
                className={styles.closeButton}
                shape="icon"
                color={theme.brand}
                aria-label="Close Nav"
                onClick={onClose}
                autoFocus
              >
                <TimesIcon />
              </Button>
            )}
          </Tooltip>
        )}
        <div className={styles.headerInfo}>
          <Link to="/">
            <h1 className={styles.title}>Hacker UI</h1>
          </Link>
          <span className={styles.version}>{version}</span>
        </div>
      </div>
      <nav className={styles.body}>
        <List>
          {flattenedDocArray.map(({ title, value }) => {
            const rootSlug = `/${title.toLowerCase().replace(/ /g, '-')}`;

            if (!Array.isArray(value)) {
              throw new Error('Document must be in a folder');
            }

            return (
              <Fragment key={rootSlug}>
                <ListItem>
                  <ListItemButton
                    className={classNames(styles.item, styles.headerItem)}
                    onClick={() =>
                      setCollapsedSet((set) => toggle(set, rootSlug))
                    }
                  >
                    <div
                      className={classNames(
                        styles.itemTitle,
                        styles.itemTitleBold,
                      )}
                    >
                      {title}
                    </div>
                    <FontAwesomeIcon
                      className={styles.icon}
                      icon={faCaretDown}
                      rotation={collapsedSet[rootSlug] ? 90 : undefined}
                    />
                  </ListItemButton>
                </ListItem>

                {!collapsedSet[rootSlug] && (
                  <List>
                    {value.map(({ title }) => {
                      const slug = title.toLowerCase().replace(/ /g, '-');
                      const path = `${rootSlug}/${slug}`;

                      return (
                        <ListItem key={slug}>
                          <ListItemButton
                            className={classNames(
                              styles.item,
                              styles.nestedItem,
                            )}
                            component={Link}
                            // @ts-ignore
                            to={path}
                            onClick={onClose}
                          >
                            <div className={styles.itemTitle}>{title}</div>
                          </ListItemButton>
                        </ListItem>
                      );
                    })}
                  </List>
                )}
              </Fragment>
            );
          })}
        </List>
      </nav>
    </Root>
  );

  if (!isMobile) return content;

  return (
    <Drawer className={styles.drawer} open={open} onClose={onClose}>
      {content}
    </Drawer>
  );
}