react-icons/fi#FiChevronUp 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>
  );
}

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>
      ))}
    </>
  );
}