react-icons/fi#FiChevronDown TypeScript Examples

ColumnHeader: React.FC<ColumnHeaderProps> = ({ label, sortKey, vars }) => (
    <th>
        <Link
            to={varsToLink({
                order: {
                    column: sortKey,
                    direction: vars.order.column === sortKey && vars.order.direction === "ASCENDING"
                        ? "DESCENDING"
                        : "ASCENDING",
                },
            })}
            css={{
                display: "inline-flex",
                alignItems: "center",
                cursor: "pointer",
                transition: "color 70ms",
                "& > svg": {
                    marginLeft: 6,
                    fontSize: 22,
                },
                "&:hover": {
                    color: "var(--accent-color)",
                },
            }}
        >
            {label}
            {vars.order.column === sortKey && match(vars.order.direction, {
                "ASCENDING": () => <FiChevronUp />,
                "DESCENDING": () => <FiChevronDown />,
            }, () => null)}
        </Link>
    </th>
)

ActionRow: React.FC<ActionViewProps> = ({
  call,
  decodedAction,
  isEditable,
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: decodedAction?.id, disabled: !isEditable });

  const { decodedCall: decodedCallFromCall } = useDecodedCall(call);

  const decodedCall = decodedCallFromCall || decodedAction.decodedCall;

  const [expanded, setExpanded] = useState(false);
  const [activeTab, setActiveTab] = useState(0);

  // Get renderable components for the action
  const InfoLine = getInfoLineView(decodedCall?.callType);
  const ActionSummary = getSummaryView(decodedCall?.callType);

  const dndStyles = {
    transform: CSS.Translate.toString(transform),
    transition,
  };

  return (
    <CardWrapperWithMargin
      dragging={isEditable && isDragging}
      ref={setNodeRef}
      style={dndStyles}
      {...attributes}
    >
      <CardHeader>
        <CardLabel>
          {isEditable && <GripWithMargin {...listeners} />}

          {InfoLine && <InfoLine decodedCall={decodedCall} />}
        </CardLabel>
        <CardActions>
          {isEditable && <EditButtonWithMargin>Edit</EditButtonWithMargin>}
          <ChevronIcon onClick={() => setExpanded(!expanded)}>
            {expanded ? (
              <FiChevronUp height={16} />
            ) : (
              <FiChevronDown height={16} />
            )}
          </ChevronIcon>
        </CardActions>
      </CardHeader>

      {expanded && (
        <>
          {ActionSummary && (
            <DetailWrapper>
              <TabButton
                variant="secondary"
                active={activeTab === 0}
                onClick={() => setActiveTab(0)}
              >
                Default
              </TabButton>
              <TabButton
                active={activeTab === 1}
                onClick={() => setActiveTab(1)}
              >
                Function Calls
              </TabButton>
            </DetailWrapper>
          )}

          {ActionSummary && activeTab === 0 && (
            <DetailWrapper>
              <ActionSummary decodedCall={decodedCall} />
            </DetailWrapper>
          )}

          {(!ActionSummary || activeTab === 1) && (
            <DetailWrapper>
              <CallDetails decodedCall={decodedCall} />
            </DetailWrapper>
          )}
        </>
      )}
    </CardWrapperWithMargin>
  );
}

Transfer: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
  const [isTokenPickerOpen, setIsTokenPickerOpen] = useState(false);

  const { chainId } = useWeb3React();

  // parse transfer state from calls
  const parsedData = useMemo<TransferState>(() => {
    if (!decodedCall) return null;
    return {
      source: decodedCall.from,
      tokenAddress: decodedCall.to,
      amount: decodedCall.args._value,
      destination: decodedCall.args._to,
    };
  }, [decodedCall]);

  const validations = useMemo(() => {
    return {
      tokenAddress: utils.isAddress(parsedData?.tokenAddress),
      amount: BigNumber.isBigNumber(parsedData?.amount),
      destination: utils.isAddress(parsedData?.destination),
    };
  }, [parsedData]);

  // Get token details from the token address
  const { tokens } = useTokenList(chainId);
  const token = useMemo(() => {
    if (!parsedData?.tokenAddress || !tokens) return null;

    return tokens.find(({ address }) => address === parsedData.tokenAddress);
  }, [tokens, parsedData]);

  const { data: tokenInfo } = useERC20Info(parsedData?.tokenAddress);
  const roundedBalance = useBigNumberToNumber(
    parsedData?.amount,
    tokenInfo?.decimals,
    10
  );
  const { imageUrl: destinationAvatarUrl } = useENSAvatar(
    parsedData?.destination,
    MAINNET_ID
  );

  const setTransferAddress = (walletAddress: string) => {
    updateCall({
      ...decodedCall,
      args: {
        ...decodedCall.args,
        _to: walletAddress,
      },
    });
  };

  const setToken = (tokenAddress: string) => {
    updateCall({
      ...decodedCall,
      to: tokenAddress,
    });
  };

  const setAmount = (value: string) => {
    const amount = value
      ? utils.parseUnits(value, tokenInfo?.decimals || 18)
      : null;
    updateCall({
      ...decodedCall,
      args: {
        ...decodedCall.args,
        _value: amount,
      },
    });
  };

  return (
    <div>
      <Control>
        <ControlLabel>Recipient</ControlLabel>
        <ControlRow>
          <Input
            value={parsedData.destination || ''}
            icon={
              <div>
                {validations.destination && (
                  <Avatar
                    src={destinationAvatarUrl}
                    defaultSeed={parsedData.destination}
                    size={24}
                  />
                )}
              </div>
            }
            iconRight={
              parsedData?.destination ? (
                <ClickableIcon onClick={() => setTransferAddress('')}>
                  <FiX size={18} />
                </ClickableIcon>
              ) : null
            }
            placeholder="Ethereum address"
            onChange={e => setTransferAddress(e.target.value)}
          />
        </ControlRow>
      </Control>

      <ControlRow>
        <Control>
          <ControlLabel>Amount</ControlLabel>
          <ControlRow>
            <TransferAmountInput
              value={roundedBalance}
              onUserInput={setAmount}
            />
          </ControlRow>
        </Control>

        <Spacer />

        <Control>
          <ControlLabel>Asset</ControlLabel>
          <ControlRow onClick={() => setIsTokenPickerOpen(true)}>
            <Input
              value={tokenInfo?.symbol || ''}
              placeholder="Token"
              icon={
                <div>
                  {parsedData?.tokenAddress && (
                    <Avatar
                      src={resolveUri(token?.logoURI)}
                      defaultSeed={parsedData?.tokenAddress}
                      size={18}
                    />
                  )}
                </div>
              }
              iconRight={<FiChevronDown size={24} />}
              readOnly
            />
          </ControlRow>
        </Control>
      </ControlRow>

      <TokenPicker
        walletAddress={parsedData?.source || ''}
        isOpen={isTokenPickerOpen}
        onClose={() => setIsTokenPickerOpen(false)}
        onSelect={tokenAddress => {
          setToken(tokenAddress);
          setIsTokenPickerOpen(false);
        }}
      />
    </div>
  );
}

FilterMenu = () => {
  const [showState, setShowState] = useState(false);
  const [showType, setShowType] = useState(false);
  const [showCurrency, setShowCurrency] = useState(false);

  const {
    onToggleState,
    onResetState,
    isStateSelected,
    countStateSelected,
    onToggleType,
    onResetType,
    isTypeSelected,
    countTypeSelected,
    onToggleCurrency,
    onResetCurrency,
    isCurrencySelected,
    countCurrencySelected,
  } = useFilter();
  const stateRef = useRef(null);
  const typeRef = useRef(null);
  const currencyRef = useRef(null);

  // hook that handles the click outside the ref element, when clicked calls callback to close.
  useDetectBlur(stateRef, () => setShowState(false));
  useDetectBlur(typeRef, () => setShowType(false));
  useDetectBlur(currencyRef, () => setShowCurrency(false));

  return (
    <FilterButtons>
      <DropdownMenu ref={stateRef} position={DropdownPosition.BottomRight}>
        <FilterButton
          iconRight
          onClick={() => {
            setShowState(!showState);
          }}
          active={countStateSelected > 0}
        >
          State <FiChevronDown />
        </FilterButton>
        <DropdownContent fullScreenMobile={true} show={showState}>
          {isMobile && (
            <DropdownHeader onClick={() => setShowState(false)}>
              <FiArrowLeft /> <span>State</span>{' '}
              <FilterResetMobile onClick={onResetState}>
                Reset
              </FilterResetMobile>
            </DropdownHeader>
          )}
          <Menu>
            <DropdownMenuItem onClick={() => onToggleState('a')}>
              State 1 {isStateSelected('a') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleState('b')}>
              State 2 {isStateSelected('b') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleState('c')}>
              State 3 {isStateSelected('c') && <FiCheck />}
            </DropdownMenuItem>
          </Menu>
          {isDesktop && countStateSelected > 0 && (
            <FilterResetDesktop onClick={onResetState}>
              Reset
            </FilterResetDesktop>
          )}
        </DropdownContent>
      </DropdownMenu>
      <DropdownMenu ref={typeRef} position={DropdownPosition.BottomRight}>
        <FilterButton
          iconRight
          onClick={() => setShowType(!showType)}
          active={countTypeSelected > 0}
        >
          Type <FiChevronDown />
        </FilterButton>
        <DropdownContent fullScreenMobile={true} show={showType}>
          {isMobile && (
            <DropdownHeader onClick={() => setShowType(false)}>
              <FiArrowLeft /> <span>Type</span>{' '}
              <FilterResetMobile onClick={onResetType}>Reset</FilterResetMobile>
            </DropdownHeader>
          )}
          <Menu>
            <DropdownMenuItem onClick={() => onToggleType('a')}>
              Type a {isTypeSelected('a') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleType('b')}>
              Type b {isTypeSelected('b') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleType('c')}>
              Type c {isTypeSelected('c') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleType('d')}>
              Type d {isTypeSelected('d') && <FiCheck />}
            </DropdownMenuItem>
          </Menu>
          {isDesktop && countTypeSelected > 0 && (
            <FilterResetDesktop onClick={onResetType}>Reset</FilterResetDesktop>
          )}
        </DropdownContent>
      </DropdownMenu>

      <DropdownMenu ref={currencyRef} position={DropdownPosition.BottomRight}>
        <FilterButton
          iconRight
          onClick={() => setShowCurrency(!showCurrency)}
          active={countCurrencySelected > 0}
        >
          Currency <FiChevronDown />
        </FilterButton>
        <DropdownContent fullScreenMobile={true} show={showCurrency}>
          {isMobile && (
            <DropdownHeader onClick={() => setShowCurrency(false)}>
              <FiArrowLeft /> <span>Currency</span>{' '}
              <FilterResetMobile onClick={onResetCurrency}>
                Reset
              </FilterResetMobile>
            </DropdownHeader>
          )}
          <Menu>
            <DropdownMenuItem onClick={() => onToggleCurrency('a')}>
              Currency a {isCurrencySelected('a') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleCurrency('b')}>
              Currency b {isCurrencySelected('b') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleCurrency('c')}>
              Currency c {isCurrencySelected('c') && <FiCheck />}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onToggleCurrency('d')}>
              Currency d {isCurrencySelected('d') && <FiCheck />}
            </DropdownMenuItem>
          </Menu>
          {isDesktop && countCurrencySelected > 0 && (
            <FilterResetDesktop onClick={onResetCurrency}>
              Reset
            </FilterResetDesktop>
          )}
        </DropdownContent>
      </DropdownMenu>
    </FilterButtons>
  );
}

ProposalInfoCard: React.FC = () => {
  const [isHistoryExpanded, setIsHistoryExpanded] = useState(false);
  const { guild_id: guildId, proposal_id: proposalId } = useParams<{
    chain_name: string;
    guild_id?: string;
    proposal_id?: string;
  }>();
  const { data: proposal, error } = useProposal(guildId, proposalId);

  const { data: guildConfig } = useGuildConfig(guildId);
  const quorum = useVotingPowerPercent(
    guildConfig?.votingPowerForProposalExecution,
    guildConfig?.totalLocked
  );

  const endDetail = useMemo(() => {
    if (!proposal || !proposal.endTime) return null;

    const currentTime = moment();
    if (proposal.endTime.isBefore(currentTime)) {
      return `Ended ${proposal.endTime.fromNow()}`;
    } else {
      return `Ends ${proposal.endTime.toNow()}`;
    }
  }, [proposal]);

  if (error) return <div>Error</div>;

  return (
    <SidebarCard header={<SidebarCardHeader>Information</SidebarCardHeader>}>
      <SidebarCardContentUnpadded>
        <SidebarInfoContent>
          <InfoDetail>
            <span>Consensus System</span>
            <InfoDetailMuted>Guild</InfoDetailMuted>
          </InfoDetail>
          <InfoDetail>
            <span>Proposal Duration</span>
            <InfoDetailMuted>
              {guildConfig?.proposalTime ? (
                duration(
                  guildConfig?.proposalTime?.toNumber(),
                  'seconds'
                ).humanize()
              ) : (
                <Loading loading text skeletonProps={{ width: '50px' }} />
              )}
            </InfoDetailMuted>
          </InfoDetail>
          <InfoDetail>
            <span>Quorum</span>
            <InfoDetailMuted>
              {quorum != null ? (
                `${quorum}%`
              ) : (
                <Loading loading text skeletonProps={{ width: '50px' }} />
              )}
            </InfoDetailMuted>
          </InfoDetail>

          <InfoDetail>
            <span>Proposal History</span>
            <ProposalHistoryIcon
              active={isHistoryExpanded}
              onClick={() => setIsHistoryExpanded(!isHistoryExpanded)}
            >
              {isHistoryExpanded ? (
                <FiChevronUp height={16} />
              ) : (
                <FiChevronDown height={16} />
              )}
            </ProposalHistoryIcon>
          </InfoDetail>
        </SidebarInfoContent>

        {isHistoryExpanded && (
          <>
            <Separator />

            <SidebarInfoContent>
              {!proposal ? (
                <Loading loading text skeletonProps={{ height: '100px' }} />
              ) : (
                <>
                  <InfoItem
                    title="Proposal created"
                    description={proposal.startTime.format(
                      'MMM Do, YYYY - h:mm a'
                    )}
                  />
                  <InfoItem
                    title={endDetail}
                    description={proposal.endTime.format(
                      'MMM Do, YYYY - h:mm a'
                    )}
                  />
                </>
              )}
            </SidebarInfoContent>
          </>
        )}
      </SidebarCardContentUnpadded>
    </SidebarCard>
  );
}

SectionScroller: React.FC<Props> = (props) => {
  const { sections } = props;
  const startIndex =
    props.startIndex != null && props.startIndex < sections.length
      ? props.startIndex
      : Math.floor(sections.length / 2);
  const { windowWidth } = useWindowSize();
  const sectionContainerRef = useRef(null);
  const [showTopChevron, setShowTopChevron] = useState(false);
  const [showBottomChevron, setShowBottomChevron] = useState(false);

  const [index, setIndex] = useState(startIndex);
  const [codeBlockRefs] = useState<{
    [key: string]: HTMLDivElement | null;
  }>({});

  useEffect(() => {
    setShowBottomChevron(windowWidth <= 768 && index !== sections.length - 1);
    setShowTopChevron(windowWidth <= 768 && index !== 0);
  }, [windowWidth]);

  const calculateTop = (index: number): number => {
    const topPadding =
      (sectionContainerRef.current?.clientHeight || 0) / 3 -
      (codeBlockRefs[index]?.clientHeight || 0) / 2;
    const spaceBetweenItems = 12;
    let totalHeight = 0;
    for (let i = 0; i < index; i++) {
      totalHeight += codeBlockRefs[i]?.clientHeight || 0;
    }
    return -totalHeight - spaceBetweenItems * index + topPadding;
  };

  const handleChevronClick = useCallback(
    (up: boolean) => {
      let newIndex = 0;
      if (up) {
        newIndex = Math.max(index - 1, 0);
      } else {
        newIndex = Math.min(index + 1, sections.length - 1);
      }

      setShowTopChevron(newIndex !== 0);
      setShowBottomChevron(newIndex !== sections.length - 1);
      setIndex(newIndex);
    },
    [index, sections]
  );

  return (
    <div className={styles.SectionContainer} ref={sectionContainerRef}>
      <div
        className={styles.ChevronContainer}
        style={{
          visibility: showTopChevron ? 'visible' : 'hidden',
        }}
        onClick={() => {
          handleChevronClick(true);
        }}>
        <FiChevronUp />
      </div>
      <div className={styles.SectionInnerContainer}>
        <div className={styles.SectionLeftContainer}>
          {sections.map((section, i) => {
            return (
              <SectionLeftItem
                style={{ top: calculateTop(index) }}
                key={i}
                forwardRef={(element) => {
                  codeBlockRefs[i] = element;
                }}
                code={
                  windowWidth < 768
                    ? section.codeWithComment || section.code
                    : section.code
                }
                active={index === i}
              />
            );
          })}
        </div>
        <div className={styles.SectionRightContainer}>
          {sections.map((section, i) => {
            return (
              <SectionRightItem
                key={i}
                title={section.title}
                description={section.description}
                onClick={() => {
                  setIndex(i);
                }}
                icon={section.icon}
                active={index === i}
              />
            );
          })}
        </div>
      </div>
      <div
        className={styles.ChevronContainer}
        style={{
          visibility: showBottomChevron ? 'visible' : 'hidden',
        }}
        onClick={() => {
          handleChevronClick(false);
        }}>
        <FiChevronDown />
      </div>
    </div>
  );
}

TableOfContents = ({ onClose = null, tree, ignoreList = [] }: Props) => {
  function renderHeading(
    heading: Heading,
    hasChildren = false,
    isChildren = false
  ) {
    const { pathname } = useRouter();
    const isActive = pathname === heading.slug;

    const Icon =
      require(`react-icons/fi`)[heading.iconComponentName] ?? BulletSvg;

    if (heading === undefined || ignoreList.includes(heading.content)) {
      return null;
    }

    if (hasChildren) {
      return (
        <Box
          css={{
            color: "black",
            alignItems: "center",
            display: "flex",
            pl: "0",
            py: "12px",
          }}>
          <IconContainer>
            <Icon />
          </IconContainer>
          {heading.content}
        </Box>
      );
    }
    const labelStyles = {
      fontSize: "10px",
      color: "white",
      fontWeight: 600,
      px: 2,
      py: "2px",
      borderRadius: 4,
    };
    return (
      <Link href={heading.slug} passHref>
        <Box
          as="a"
          onClick={onClose}
          css={{
            fontSize: "$3",
            color: isActive ? "primary" : "black",
            fontWeight: isActive ? 600 : 400,
            borderLeft: "1px solid",
            borderColor: isChildren
              ? isActive
                ? "$violet9"
                : "$primary9"
              : "transparent",
            alignItems: "center",
            py: isChildren ? "8px" : "12px",
            pl: isChildren ? "12px" : "0",
            display: "flex",
            "&:hover": {
              color: "$violet9",
            },
          }}>
          <IconContainer>
            <Icon />
          </IconContainer>
          <Box
            css={{
              ...(heading.content === "POST" && {
                bc: "green",
                ...labelStyles,
              }),
              ...(heading.content === "GET" && {
                bc: "blue",
                ...labelStyles,
              }),
              ...(heading.content === "DELETE" && {
                bc: "red",
                ...labelStyles,
              }),
              ...(heading.content === "PUT" && {
                bc: "orange",
                ...labelStyles,
              }),
            }}>
            {heading.content}
          </Box>
        </Box>
      </Link>
    );
  }

  function renderChildren(children: Tree[]) {
    if (children.length === 0) {
      return null;
    }

    return (
      <>
        {children.map((child, i) => (
          <Box key={i}>{renderPair(child, true)}</Box>
        ))}
      </>
    );
  }

  function renderPair(pair: Tree, isChildren = false) {
    const [isOpen, setIsOpen] = useState(false);
    const [heading, children] = pair;
    const hasChildren = children?.length > 0;
    const router = useRouter();
    const isActive = flatten(children).filter(
      (obj) => obj.slug === router?.pathname
    ).length;
    if (ignoreList.includes(heading.content)) return <></>;
    return (
      <>
        <Flex
          onClick={() => setIsOpen(isOpen ? false : true)}
          css={{
            cursor: "pointer",
            alignItems: "center",
            justifyContent: "space-between",
          }}>
          <Box>{renderHeading(heading, hasChildren, isChildren)}</Box>
          {hasChildren && (
            <>
              {isOpen || isActive ? (
                <IconContainer>
                  <FiChevronUp />
                </IconContainer>
              ) : (
                <IconContainer>
                  <FiChevronDown />
                </IconContainer>
              )}
            </>
          )}
        </Flex>
        {hasChildren && (
          <Box
            css={{
              display: isOpen || isActive ? "block" : "none",
              my: 0,
              pl: "8px",
            }}>
            {renderChildren(children)}
          </Box>
        )}
      </>
    );
  }

  function render(tree: Tree) {
    const [heading, children] = tree;

    let Toc = renderPair(tree);

    if (heading) {
      Toc = renderPair(tree);
    } else {
      Toc = renderChildren(children);
    }
    return Toc;
  }

  return (
    <>
      {tree.map((t, i) => (
        <div key={`tree-${i}`}>{render(t)}</div>
      ))}
    </>
  );
}

NavigationBar: React.FC<NavigationBarProps> = ({ isSticky }) => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const { changeTheme, theme, themeList } = React.useContext(ThemeContext);
  const { title } = React.useContext(NavigationContext);
  const navbarClass = cn({
    sticky: isSticky,
  });

  const isMainPage = checkIsMainPage(pathname);

  const onBackButtonClick = () => {
    navigate(-1);
  };

  const onThemeChange = React.useCallback(
    (theme: ThemeValue) => {
      return () => {
        changeTheme(theme);
      };
    },
    [changeTheme],
  );

  const themeDropdownItems = React.useMemo((): DropdownItem[] | null => {
    if (!themeList) {
      return null;
    }

    return themeList?.map(({ icon, label, value }) => {
      return {
        title: (
          <div>
            <span className="mr-3">{icon}</span>
            {label}
          </div>
        ),
        onClick: onThemeChange(value),
        className: cn({
          active: theme === value,
        }),
      };
    });
  }, [onThemeChange, theme, themeList]);

  const renderThemeDropDown = () => {
    if (!themeDropdownItems) {
      return null;
    }

    return (
      <Dropdown items={themeDropdownItems} trigger="hover" className="max-h-96">
        <Button isRounded isGhost className="px-0" size="small">
          <div className="flex items-center">
            <CgDarkMode size={22} className="mx-1" />
          </div>
          <div className="flex items-center">
            <FiChevronDown size="22" />
          </div>
        </Button>
      </Dropdown>
    );
  };

  return (
    <div
      className={cn('navbar w-full bg-neutral text-neutral-content justify-between top-0 z-20 shadow-lg', navbarClass)}
    >
      <div className="w-[80%]">
        <div className="mr-3">
          {isMainPage ? null : (
            <Button isSquare isGhost size="small" onClick={onBackButtonClick}>
              <FiArrowLeft size={24} />
            </Button>
          )}
        </div>
        <p className="text-lg font-bold truncate">{title}</p>
      </div>
      <div>{renderThemeDropDown()}</div>
      <Helmet>
        <title>{title}</title>
      </Helmet>
    </div>
  );
}