mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-01 02:12:36 +02:00
refactor(website): remove pure-react-carousel (#10784)
This commit is contained in:
Sébastien Lorber
GitHub
parent
c5a6c26d94
commit
b5359db47e
4 changed files with 79 additions and 92 deletions
|
|
@ -5,22 +5,46 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.carousel {
|
||||
.cssCarousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cssCarouselSlider {
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.cssCarouselItem {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
.cssCarouselContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
background-color: rgb(0 0 0 / 30%);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translateY(-50%);
|
||||
transition: all var(--ifm-transition-fast)
|
||||
var(--ifm-transition-timing-default);
|
||||
}
|
||||
|
|
@ -29,28 +53,12 @@
|
|||
background-color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.dotGroup {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
.navButton.navButtonNext {
|
||||
right: 0.1rem;
|
||||
}
|
||||
|
||||
.dotGroup > :global(.carousel__dot) {
|
||||
pointer-events: auto;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 50%;
|
||||
margin: 2px;
|
||||
background: rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.dotGroup > :global(.carousel__dot--selected) {
|
||||
background: rgb(0 0 0 / 45%);
|
||||
.navButton.navButtonPrev {
|
||||
left: 0.1rem;
|
||||
}
|
||||
|
||||
.siteSlide {
|
||||
|
|
|
|||
|
|
@ -7,18 +7,11 @@
|
|||
|
||||
/* eslint-disable global-require */
|
||||
|
||||
import React, {type ComponentProps, type ReactNode} from 'react';
|
||||
import {
|
||||
CarouselProvider,
|
||||
Slider,
|
||||
Slide,
|
||||
ButtonBack,
|
||||
ButtonNext,
|
||||
DotGroup,
|
||||
} from 'pure-react-carousel';
|
||||
import React, {type ComponentProps, type ReactNode, useRef} from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
import Image from '@theme/IdealImage';
|
||||
import 'pure-react-carousel/dist/react-carousel.es.css';
|
||||
import styles from './ShowcaseCarousel.module.css';
|
||||
|
||||
type Site = {
|
||||
|
|
@ -29,7 +22,7 @@ type Site = {
|
|||
|
||||
function SiteSlide({index, site}: {index: number; site: Site}) {
|
||||
return (
|
||||
<Slide index={index} className={styles.siteSlide}>
|
||||
<div key={index} className={styles.cssCarouselContent}>
|
||||
<Image
|
||||
img={site.image}
|
||||
alt={site.name}
|
||||
|
|
@ -38,10 +31,11 @@ function SiteSlide({index, site}: {index: number; site: Site}) {
|
|||
<Link to={site.url} className={styles.siteLink} target="_blank">
|
||||
🔗 {site.name}
|
||||
</Link>
|
||||
</Slide>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Inspired by: https://community.appsmith.com/content/blog/ditch-bloat-building-swipeable-carousel-only-css
|
||||
export default function ShowcaseCarousel({
|
||||
sites,
|
||||
aspectRatio,
|
||||
|
|
@ -49,26 +43,45 @@ export default function ShowcaseCarousel({
|
|||
sites: Site[];
|
||||
aspectRatio: number;
|
||||
}): ReactNode {
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scroll = (next: boolean) => {
|
||||
const sliderDiv = sliderRef.current!;
|
||||
const width = sliderDiv.offsetWidth;
|
||||
const scrollBy = next ? width : -width;
|
||||
sliderDiv.scrollBy({left: scrollBy, behavior: 'smooth'});
|
||||
};
|
||||
|
||||
const scrollNext = () => scroll(true);
|
||||
const scrollPrev = () => scroll(false);
|
||||
|
||||
return (
|
||||
<CarouselProvider
|
||||
naturalSlideWidth={1}
|
||||
naturalSlideHeight={1 / aspectRatio}
|
||||
totalSlides={sites.length}
|
||||
infinite
|
||||
className={styles.carousel}>
|
||||
<Slider>
|
||||
{sites.map((site, index) => (
|
||||
<SiteSlide key={index} index={index} site={site} />
|
||||
))}
|
||||
</Slider>
|
||||
<ButtonNext className={styles.navButton} style={{right: -20}}>
|
||||
{'>'}
|
||||
</ButtonNext>
|
||||
<ButtonBack className={styles.navButton} style={{left: -20}}>
|
||||
{'<'}
|
||||
</ButtonBack>
|
||||
<DotGroup className={styles.dotGroup} />
|
||||
</CarouselProvider>
|
||||
<div className={styles.cssCarousel} style={{aspectRatio}}>
|
||||
<div
|
||||
ref={sliderRef}
|
||||
className={styles.cssCarouselSlider}
|
||||
style={{aspectRatio}}>
|
||||
{sites.map((site, index) => {
|
||||
return (
|
||||
<div key={index} className={styles.cssCarouselItem}>
|
||||
<SiteSlide index={index} site={site} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
className={clsx(styles.navButton, styles.navButtonPrev)}
|
||||
type="button"
|
||||
onClick={scrollPrev}>
|
||||
{'<'}
|
||||
</button>
|
||||
<button
|
||||
className={clsx(styles.navButton, styles.navButtonNext)}
|
||||
type="button"
|
||||
onClick={scrollNext}>
|
||||
{'>'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,6 @@
|
|||
"color": "^4.2.3",
|
||||
"fs-extra": "^11.1.1",
|
||||
"netlify-plugin-cache": "^1.0.3",
|
||||
"pure-react-carousel": "^1.30.1",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
|
|
|
|||
35
yarn.lock
35
yarn.lock
|
|
@ -1180,7 +1180,7 @@
|
|||
core-js-pure "^3.30.2"
|
||||
regenerator-runtime "^0.14.0"
|
||||
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.8.4":
|
||||
version "7.25.9"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.9.tgz#65884fd6dc255a775402cc1d9811082918f4bf00"
|
||||
integrity sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==
|
||||
|
|
@ -7349,21 +7349,11 @@ deep-extend@^0.6.0:
|
|||
resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
|
||||
integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
|
||||
|
||||
deep-freeze@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
|
||||
integrity sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==
|
||||
|
||||
deep-is@^0.1.3:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
|
||||
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
|
||||
|
||||
deepmerge@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
|
||||
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
|
||||
|
||||
deepmerge@^4.2.2, deepmerge@^4.3.1:
|
||||
version "4.3.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
|
||||
|
|
@ -7811,13 +7801,6 @@ envinfo@7.14.0, envinfo@^7.7.4:
|
|||
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.14.0.tgz#26dac5db54418f2a4c1159153a0b2ae980838aae"
|
||||
integrity sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==
|
||||
|
||||
equals@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/equals/-/equals-1.0.5.tgz#212062dde5e1a510d955f13598efcc6a621b6ace"
|
||||
integrity sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==
|
||||
dependencies:
|
||||
jkroso-type "1"
|
||||
|
||||
err-code@^2.0.2:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
|
||||
|
|
@ -11021,11 +11004,6 @@ jiti@^1.20.0:
|
|||
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
|
||||
integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
|
||||
|
||||
jkroso-type@1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/jkroso-type/-/jkroso-type-1.1.1.tgz#bc4ced6d6c45fe0745282bafc86a9f8c4fc9ce61"
|
||||
integrity sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng==
|
||||
|
||||
joi@^17.9.2:
|
||||
version "17.13.3"
|
||||
resolved "https://registry.yarnpkg.com/joi/-/joi-17.13.3.tgz#0f5cc1169c999b30d344366d384b12d92558bcec"
|
||||
|
|
@ -14956,17 +14934,6 @@ pure-rand@^6.0.0:
|
|||
resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
|
||||
integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
|
||||
|
||||
pure-react-carousel@^1.30.1:
|
||||
version "1.30.1"
|
||||
resolved "https://registry.yarnpkg.com/pure-react-carousel/-/pure-react-carousel-1.30.1.tgz#006a333869b51339dafcdee2afa0561eb46d1743"
|
||||
integrity sha512-B1qi62hZk0OFqRR4cTjtgIeOn/Ls5wo+HsLtrXT4jVf5et8ldBHSt+6LsYRJN86Or8dm+XbnJNEHy6WDJ0/DQw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
deep-freeze "0.0.1"
|
||||
deepmerge "^2.2.1"
|
||||
equals "^1.0.5"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
q@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue