react#FC TypeScript Examples

CircleButton: FC<CircleButtonProps> = (props) => {
  const {
    link,
    target,
    tooltip,
    tooltipPlacement,
    onClick,
    size,
    ...commonProps
  } = props;

  return link ? (
    <StyledLink {...commonProps} $size={size} href={link} target={target} />
  ) : (
    <StyledButton {...commonProps} $size={size} onClick={onClick} />
  );
}

DocumentNav: FC<{}> = () => {
  const {
    state: { currentDocument, currentFileNo, documents },
    dispatch,
  } = useContext(DocViewerContext);

  if (documents.length <= 1 || !currentDocument) return null;

  let fileName = currentDocument.uri;

  const splitURL = fileName.split("/");
  if (splitURL.length) {
    fileName = splitURL[splitURL.length - 1];
  }

  return (
    <Container id="doc-nav">
      <p id="doc-nav-info">
        Doc {currentFileNo + 1} of {documents.length}
      </p>

      <ButtonPrev
        id="doc-nav-prev"
        onClick={() => dispatch(previousDocument())}
        disabled={currentFileNo === 0}
      >
        <PrevDocIcon color="#fff" size="60%" />
      </ButtonPrev>

      <ButtonNext
        id="doc-nav-next"
        onClick={() => dispatch(nextDocument())}
        disabled={currentFileNo >= documents.length - 1}
      >
        <NextDocIcon color="#fff" size="60%" />
      </ButtonNext>
    </Container>
  );
}

Head: FC<{ seoInfo: any }> = (props) => {
  return (
    <>
      <DefaultSeo {...props.seoInfo} />
      <NextHead>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
        <link
          rel="icon"
          type="image/png"
          href="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F2d86a5bb30f44d2db3564aa2962bb093"
        />
      </NextHead>
    </>
  )
}

XarrowProvider: FC<{ instanceCount: React.MutableRefObject<number> }> = ({ children, instanceCount }) => {
  const [, setRender] = useState({});
  const updateXarrow = () => setRender({});
  useEffect(() => {
    instanceCount.current = updateRefCount; // so this instance would know what is id
    updateRef[instanceCount.current] = updateXarrow;
  }, []);
  // log('XarrowProvider', updateRefCount);
  return <XarrowContext.Provider value={updateXarrow}>{children}</XarrowContext.Provider>;
}

Cell: FC<{
  gutter: boolean
  stickyRight: boolean
  disabled?: boolean
  column: Column<any, any, any>
  className: string
  active?: boolean
  children?: any
}> = ({
  children,
  gutter,
  stickyRight,
  column,
  active,
  disabled,
  className,
}) => {
  return (
    <div
      className={cx(
        'dsg-cell',
        gutter && 'dsg-cell-gutter',
        disabled && 'dsg-cell-disabled',
        gutter && active && 'dsg-cell-gutter-active',
        stickyRight && 'dsg-cell-sticky-right',
        className
      )}
      style={{
        flex: String(column.width),
        minWidth: column.minWidth,
        maxWidth: column.maxWidth,
      }}
    >
      {children}
    </div>
  )
}

contextHoc: (Comp: ComponentType) => ComponentType = function contextHoc(Comp) {
    // class组件
    if ( Comp.prototype.render ) {
        let C = Comp as ComponentClass;
        C.contextType = BaseContext;
        return C;
    // function组件
    } else {
        let fc = Comp as FC
        return function(props) {
            return (
                <BaseContext.Consumer>
                { (context) => fc(props, context) }
                </BaseContext.Consumer>
            )
        }
    }
}

Popup: FC<IProps> = () => {
	return (
		<div>
			<TabBtnContainer>
				<TabBtn id='shelfBtn' value='书架'></TabBtn>
			</TabBtnContainer>
			<NoteTabContent/>
			<TabContent for='shelfBtn' id='shelf'>
				<a>...</a>
			</TabContent>
		</div>
	);
}

ArticleList: FC<Props> = ({articles, pagination, onSelectPage, onReload}) => {
  const [selectedIDs, select, renderDeleteBtn] = useSelectedIDs(onReload)

  return (
    <>
      {
        articles.map((article, i) => (
          <ArticleListItem
            article={article}
            isSelected={selectedIDs.indexOf(article.id) >= 0}
            onSelect={select}
            key={i}
          />
        ))
      }
      {renderDeleteBtn()}
      <PaginationDiv>
        <Pagination
          pageCount={pagination.totalPages}
          selectedPage={pagination.page}
          onPageChange={onSelectPage}
        />
      </PaginationDiv>
    </>
  )
}

EmptyFallback: FC<EmptyFallbackProps> = ({
  title,
  subtitle,
  variant = 'large',
  button,
  verticalCentered,
  className,
}) => (
  <Container className={className} variant={variant} verticalCentered={verticalCentered}>
    <SvgEmptyStateIllustration />
    <Message>
      {title && <Title variant={variant === 'large' ? 'h500' : 't300'}>{title}</Title>}
      {variant === 'large' && subtitle && (
        <Subtitle variant="t200" secondary>
          {subtitle}
        </Subtitle>
      )}
    </Message>
    {variant === 'large' && button && <ButtonWrapper>{button}</ButtonWrapper>}
  </Container>
)

CouponTag: FC<PropTypes> = props => {
  const { label, color, tooltip } = props;

  return (
    <Tooltip title={tooltip} placement="bottom">
      <Tag color={color}>
        {label}
        <Icon
          type="question-circle"
          theme="twoTone"
          style={{ marginLeft: 3 }}
        />
      </Tag>
    </Tooltip>
  );
}

Header: FC<{className?: any}> = ({className}) => {
  const { isMarket, isOffer, isRules, isProfile } = useRouteCheck() as CheckState
  const { near, setNear }: { near: INearProps | null, setNear: Dispatch<INearProps | null> } = useContext(NearContext)
  const [open, setOpen] = useOpen()

  return (
    <Container className={className}>
      <MenuButton open={open} onClick={() => setOpen(!open)} />
      <Link to="/"><Brand /></Link>
      <Menu open={open}>
        <MenuItem onClick={() => setOpen(false)} to="/" $active={isMarket}>Market</MenuItem>
        <MenuItem onClick={() => setOpen(false)} to="/offer" $active={isOffer}>Offer</MenuItem>
        {near?.signedIn && <MenuItem onClick={() => setOpen(false)} to="/profile" $active={isProfile}>Profile</MenuItem>}
        <MenuItem onClick={() => setOpen(false)} to="/rules" $active={isRules}>{open ? 'Rules' : 'How it works'}</MenuItem>
      </Menu>
      <Authorize near={near} setNear={setNear} />
      <Line />
    </Container>
  )
}

HighlightCard: FC<IIHighlightCardProps> = props => {
  const { cardTitle, showHighLightIcon, className, style, children } = props;

  const containerCls = classNames('ii-highlight-card', className);

  const headCls = classNames('ii-highlight-card-head', {
    'ii-highlight-icon': showHighLightIcon,
  });

  return (
    <div className={containerCls} style={style}>
      {cardTitle ? <div className={headCls}>{cardTitle}</div> : null}
      <div>{children}</div>
    </div>
  );
}

Back: FC<BackProps> = ({
  variant = 'default',
  onPress: onPressProp
}) => {
  const navigation = useNavigation();
  const {t} = useTranslation();

  const onPress = () => navigation.goBack();

  return (
    <TouchableWithoutFeedback
      accessible
      accessibilityRole="button"
      accessibilityHint={t('common:back:hint')}
      accessibilityLabel={t('common:back:label')}
      onPress={onPressProp || onPress}>
      <View style={styles.container}>
        <Image
          source={icons[variant]}
          accessibilityIgnoresInvertColors={false}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}