antd#Carousel TypeScript Examples

Slides = React.forwardRef<SlidesRef, CarouselProps>(
  (props, ref) => {
    const carouselRef = useRef<CarouselRef>(null);

    useImperativeHandle(
      ref,
      () => ({
        next() {
          carouselRef.current?.next();
        },
        prev() {
          carouselRef.current?.prev();
        },
      }),
      []
    );

    return (
      <Carousel
        className="slides"
        ref={carouselRef}
        {...props}
        dots={false}
        swipe={false}
        adaptiveHeight={true}
        infinite={false}
        beforeChange={(current, next) => {
          console.log(current, next, carouselRef.current?.innerSlider);
        }}
      >
        {props.children}
      </Carousel>
    );
  }
)

export function GeneralCarousel({
  speed,
  slidesToShow,
  slidesToScroll,
  autoplay,
  dots,
  components,
  carouselStyle,
  pauseOnDotsHover,
  adaptiveHeight,
  infinite,
  responsive,
  onHandleClick,
  noDataDesc,
  arrows,
  dotsTheme,
  useBrick,
  dataSource,
  autoplaySpeed,
}: GeneralCarouselProps): React.ReactElement {
  const comps = Array.isArray(components) ? components : compact([components]);
  const data = Array.isArray(dataSource) ? dataSource : compact([dataSource]);

  const carousel = (
    <Carousel
      className={classNames({
        "carousel-dots-dark": dotsTheme === "dark",
      })}
      style={carouselStyle}
      autoplay={autoplay}
      dots={dots}
      speed={speed}
      autoplaySpeed={autoplaySpeed}
      slidesToShow={slidesToShow}
      slidesToScroll={slidesToScroll}
      pauseOnDotsHover={pauseOnDotsHover}
      arrows={arrows}
      infinite={infinite}
      adaptiveHeight={adaptiveHeight}
      responsive={responsive}
      prevArrow={<LeftOutlined />}
      nextArrow={<RightOutlined />}
    >
      {useBrick
        ? renderCustomBrick(useBrick, data, onHandleClick)
        : renderCustomComp(comps, onHandleClick)}
    </Carousel>
  );

  return (
    <div className={style.generalCarousel}>
      {useBrick ? (
        data.length !== 0 ? (
          carousel
        ) : (
          <Empty description={noDataDesc} />
        )
      ) : comps.length !== 0 ? (
        carousel
      ) : (
        <Empty description={noDataDesc} />
      )}
    </div>
  );
}

DocPage = () => {
  const history = useHistory();
  const docGroup = chunk(DOCS, 3);
  useEffect(() => {
    trackPageView('/doc');
  }, []);
  
  return (
    <div className={cls(styles.studioDoc, 'studioCenterLayout')}>
      <h1 className={styles.welcomeLabel}>{intl.get('doc.welcome')} <span>Nebula Studio</span></h1>
      <div className={styles.docBox}>
        <div className={styles.header}>{intl.get('doc.functionIntro')}</div>
        <div className={styles.moduleIntro}>
          {MODULES.map(module => <Col span={8} key={module.title}>
            <div className={styles.moduleItem} onClick={() => history.push(module.link)}>
              <Icon type={module.icon} />
              <span className={styles.title}>{intl.get(module.title)}</span>
              <span className={styles.tip}>{intl.get(module.tip)}</span>
            </div>
          </Col>)}
        </div>
      </div>
      <div className={styles.docBox}>
        <div className={styles.header}>{intl.get('doc.learningDoc')}</div>
        <div className={styles.docCarousel}>
          <Carousel dotPosition="bottom" lazyLoad="progressive" dots={{ className: 'btn-carousel' }}>
            {docGroup.map((group, index) => (
              <Row className={styles.docGroup} gutter={26} key={index}>
                {group.map(doc => <Col span={8} key={doc.title}>
                  <div className={styles.docItem}>
                    <div className={styles.docDesc}>
                      <p className={styles.docTitle}>{intl.get(doc.title)}</p>
                      <p className={styles.docTip}>{intl.get(doc.tip)}</p>
                    </div>
                    <Button type="primary">
                      <a href={intl.get(doc.link)} target="_blank" rel="noreferrer">
                        {intl.get('doc.start')}
                      </a>
                    </Button>
                  </div>
                </Col>)}
              </Row>
            ))}
          </Carousel>
        </div>
      </div>
    </div>
  );
}

AuctionView = () => {
  const { width } = useWindowDimensions();
  const { id } = useParams<{ id: string }>();
  const { endpoint } = useConnectionConfig();
  const auction = useAuction(id);
  const [currentIndex, setCurrentIndex] = useState(0);
  const art = useArt(auction?.thumbnail.metadata.pubkey);
  const { ref, data } = useExtendedArt(auction?.thumbnail.metadata.pubkey);
  const creators = useCreators(auction);
  const { pullAuctionPage } = useMeta();
  useEffect(() => {
    pullAuctionPage(id);
  }, []);

  let edition = '';
  if (art.type === ArtType.NFT) {
    edition = 'Unique';
  } else if (art.type === ArtType.Master) {
    edition = 'NFT 0';
  } else if (art.type === ArtType.Print) {
    edition = `${art.edition} of ${art.supply}`;
  }
  const nftCount = auction?.items.flat().length;
  const winnerCount = auction?.items.length;
  const isOpen =
    auction?.auction.info.bidState.type === BidStateType.OpenEdition;
  const hasDescription = data === undefined || data.description === undefined;
  const description = data?.description;
  const attributes = data?.attributes;

  const tokenInfo = useTokenList()?.subscribedTokens.filter(
    m => m.address == auction?.auction.info.tokenMint,
  )[0];

  const items = [
    ...(auction?.items
      .flat()
      .reduce((agg, item) => {
        agg.set(item.metadata.pubkey, item);
        return agg;
      }, new Map<string, AuctionViewItem>())
      .values() || []),
    auction?.participationItem,
  ].map((item, index, arr) => {
    if (!item || !item?.metadata || !item.metadata?.pubkey) {
      return null;
    }

    return (
      <AuctionItem
        key={item.metadata.pubkey}
        item={item}
        index={index}
        size={arr.length}
        active={index === currentIndex}
      />
    );
  });

  if (width < 768) {
    return (
      <Row
        justify="center"
        gutter={[48, 0]}
        className="auction-mobile-container"
      >
        <Col span={24} className={'img-cont-500'}>
          <div className="auction-view" style={{ minHeight: 300 }}>
            <Carousel
              autoplay={false}
              afterChange={index => setCurrentIndex(index)}
            >
              {items}
            </Carousel>
          </div>
        </Col>
        <Col className="auction-mobile-section">
          <h2 className="art-title">
            {art.title || <Skeleton paragraph={{ rows: 0 }} />}
          </h2>

          <div className="info-container">
            <div className={'info-component'}>
              <h6 className={'info-title'}>Edition</h6>
              <span>
                {(auction?.items.length || 0) > 1 ? 'Multiple' : edition}
              </span>
            </div>
            <div className={'info-component'}>
              <h6 className={'info-title'}>Winners</h6>
              <span>
                {winnerCount === undefined ? (
                  <Skeleton paragraph={{ rows: 0 }} />
                ) : isOpen ? (
                  'Unlimited'
                ) : (
                  winnerCount
                )}
              </span>
            </div>
            <div className={'info-component'}>
              <h6 className={'info-title'}>NFTS</h6>
              <span>
                {nftCount === undefined ? (
                  <Skeleton paragraph={{ rows: 0 }} />
                ) : isOpen ? (
                  'Open'
                ) : (
                  nftCount
                )}
              </span>
            </div>
          </div>
        </Col>

        <Col className="auction-mobile-section" span={24}>
          {!auction && <Skeleton paragraph={{ rows: 6 }} />}
          {auction && (
            <AuctionCard auctionView={auction} hideDefaultAction={false} />
          )}
        </Col>
        <Col className="auction-mobile-section" span={24}>
          <h6 className={'info-title'}>Details</h6>
          <div className="description">
            <p className={'about-nft-collection a-description'}>
              {hasDescription && <Skeleton paragraph={{ rows: 3 }} />}
              {description ||
                (winnerCount !== undefined && (
                  <div style={{ fontStyle: 'italic' }}>
                    No description provided.
                  </div>
                ))}
            </p>
          </div>
        </Col>
        {attributes && (
          <Col
            className="auction-mobile-section about-nft-collection a-attributes"
            span={24}
          >
            <h6>Attributes</h6>
            <List grid={{ column: 4 }}>
              {attributes.map((attribute, index) => (
                <List.Item key={`${attribute.value}-${index}`}>
                  <Card title={attribute.trait_type}>{attribute.value}</Card>
                </List.Item>
              ))}
            </List>
          </Col>
        )}
        <Col className="auction-mobile-section" span={24}>
          <div className={'info-view'}>
            <h6 className={'info-title'}>Artists</h6>
            <div style={{ display: 'flex' }}>
              <MetaAvatarDetailed creators={creators} />
            </div>
          </div>
        </Col>
        <Col className="auction-mobile-section" span={24}>
          <div className={'info-view'}>
            <h6 className={'info-title'}>View on</h6>
            <div style={{ display: 'flex' }}>
              <Button
                className="tag"
                onClick={() => window.open(art.uri || '', '_blank')}
              >
                Arweave
              </Button>
              <Button
                className="tag"
                onClick={() => {
                  const cluster = endpoint.name;
                  const explorerURL = new URL(
                    `account/${art?.mint || ''}`,
                    'https://explorer.solana.com',
                  );
                  if (!cluster.includes('mainnet')) {
                    explorerURL.searchParams.set('cluster', cluster);
                  }
                  window.open(explorerURL.href, '_blank');
                }}
              >
                Solana
              </Button>
            </div>
          </div>
        </Col>
        <Col className="auction-mobile-section" span={24}>
          <AuctionBids auctionView={auction} />
        </Col>
      </Row>
    );
  } else {
    return (
      <Row justify="center" ref={ref} gutter={[48, 0]}>
        <Col span={24} md={10} className={'img-cont-500'}>
          <div className="auction-view" style={{ minHeight: 300 }}>
            <Carousel
              autoplay={false}
              afterChange={index => setCurrentIndex(index)}
            >
              {items}
            </Carousel>
          </div>
          <h6 className={'about-nft-collection'}>
            ABOUT THIS {nftCount === 1 ? 'NFT' : 'COLLECTION'}
          </h6>
          <p className={'about-nft-collection a-description'}>
            {hasDescription && <Skeleton paragraph={{ rows: 3 }} />}
            {description ||
              (winnerCount !== undefined && (
                <div style={{ fontStyle: 'italic' }}>
                  No description provided.
                </div>
              ))}
          </p>
          {attributes && (
            <div className={'about-nft-collection a-attributes'}>
              <h6>Attributes</h6>
              <List grid={{ column: 4 }}>
                {attributes.map((attribute, index) => (
                  <List.Item key={`${attribute.value}-${index}`}>
                    <Card title={attribute.trait_type}>{attribute.value}</Card>
                  </List.Item>
                ))}
              </List>
            </div>
          )}
          {/* {auctionData[id] && (
            <>
              <h6>About this Auction</h6>
              <p>{auctionData[id].description.split('\n').map((t: string) => <div>{t}</div>)}</p>
            </>
          )} */}
        </Col>

        <Col span={24} md={14}>
          <h2 className="art-title">
            {art.title || <Skeleton paragraph={{ rows: 0 }} />}
          </h2>
          <Row gutter={[44, 0]}>
            <Col span={12} md={16}>
              <div className={'info-container'}>
                <div className={'info-component'}>
                  <h6 className={'info-title'}>CREATED BY</h6>
                  <span>{<MetaAvatar creators={creators} />}</span>
                </div>
                <div className={'info-component'}>
                  <h6 className={'info-title'}>Edition</h6>
                  <span>
                    {(auction?.items.length || 0) > 1 ? 'Multiple' : edition}
                  </span>
                </div>
                <div className={'info-component'}>
                  <h6 className={'info-title'}>Winners</h6>
                  <span>
                    {winnerCount === undefined ? (
                      <Skeleton paragraph={{ rows: 0 }} />
                    ) : isOpen ? (
                      'Unlimited'
                    ) : (
                      winnerCount
                    )}
                  </span>
                </div>
                <div className={'info-component'}>
                  <h6 className={'info-title'}>NFTS</h6>
                  <span>
                    {nftCount === undefined ? (
                      <Skeleton paragraph={{ rows: 0 }} />
                    ) : isOpen ? (
                      'Open'
                    ) : (
                      nftCount
                    )}
                  </span>
                </div>
                <div className={'info-component'}>
                  <h6 className={'info-title'}>CURRENCY</h6>
                  <span>
                    {nftCount === undefined ? (
                      <Skeleton paragraph={{ rows: 0 }} />
                    ) : (
                      `${tokenInfo?.name || 'Custom Token'} ($${
                        tokenInfo?.symbol || 'CUSTOM'
                      })`
                    )}
                    <ClickToCopy
                      className="copy-pubkey"
                      copyText={
                        tokenInfo
                          ? tokenInfo?.address
                          : auction?.auction.info.tokenMint || ''
                      }
                    />
                  </span>
                </div>
              </div>
            </Col>
            <Col span={12} md={8} className="view-on-container">
              <div className="info-view-container">
                <div className="info-view">
                  <h6 className="info-title">View on</h6>
                  <div style={{ display: 'flex' }}>
                    <Button
                      className="tag"
                      onClick={() => window.open(art.uri || '', '_blank')}
                    >
                      Arweave
                    </Button>
                    <Button
                      className="tag"
                      onClick={() => {
                        const cluster = endpoint.name;
                        const explorerURL = new URL(
                          `account/${art?.mint || ''}`,
                          'https://explorer.solana.com',
                        );
                        if (!cluster.includes('mainnet')) {
                          explorerURL.searchParams.set('cluster', cluster);
                        }
                        window.open(explorerURL.href, '_blank');
                      }}
                    >
                      Solana
                    </Button>
                  </div>
                </div>
              </div>
            </Col>
          </Row>

          {!auction && <Skeleton paragraph={{ rows: 6 }} />}
          {auction && (
            <AuctionCard auctionView={auction} hideDefaultAction={false} />
          )}
          <AuctionBids auctionView={auction} />
        </Col>
      </Row>
    );
  }
}