@growth-angels/ds-core 1.25.5 → 2.0.0

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowSize(): {
+    width: number | null;
+    height: number | null;
+};

package/dist/hooks/useWindowSize.js

@@ -0,0 +1,22 @@
+import { useReactAdapter } from "./useReactAdaptater";
+export function useWindowSize() {
+    const React = useReactAdapter();
+    const [size, setSize] = React.useState({
+        width: null,
+        height: null,
+    });
+    React.useLayoutEffect(() => {
+        const handleResize = () => {
+            setSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    return size;
+}

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -23,6 +23,7 @@ export type CarouselAttributes = {
         disableOnInteraction?: boolean;
     };
     speed?: number;
+    loopOnMobile?: boolean;
 };
 export interface CarouselProps extends CarouselAttributes, WordpressDefault {
     children: React.ReactNode | React.ReactNode[];

package/dist/organisms/Carousel/CarouselSwiper.js

@@ -4,7 +4,7 @@ import { Button } from "../../atoms/atoms";
 import Swiper from "swiper";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 export const CarouselSwiper = (props) => {
-    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 48, navigation, pagination, hasPagination, hasNavigation, loop = false, autoplay, speed, } = props;
+    const { children, slidesPerView: slidesPerViewDefault, spaceBetween = 48, navigation, pagination, hasPagination, hasNavigation, loop = false, autoplay, speed, loopOnMobile = false, } = props;
     const classes = ["ga-ds-carousel"];
     if (props.extraClassNames) {
         if (typeof props.extraClassNames === "string") {
@@ -14,64 +14,102 @@ export const CarouselSwiper = (props) => {
             classes.push(...props.extraClassNames);
         }
     }
-    if (Swiper) {
-        const slidesPerView = { xs: 1, ...slidesPerViewDefault };
-        const { useEffect, useState, useRef, Children } = useReactAdapter();
-        const trackRef = useRef(null);
-        const containerRef = useRef(null);
-        const slides = Children.toArray(children);
-        const [swiperInstance, setSwiperInstance] = useState(null);
-        useEffect(() => {
-            if (trackRef.current && containerRef.current && !swiperInstance) {
-                const { current } = containerRef;
-                const swiper = new Swiper(trackRef.current, {
-                    modules: [Autoplay, Navigation, Pagination],
-                    slidesPerView: 1,
-                    breakpoints: {
-                        375: {
-                            slidesPerView: slidesPerView.xs ?? 1,
-                        },
-                        576: {
-                            slidesPerView: slidesPerView.sm ?? 1,
-                        },
-                        768: {
-                            slidesPerView: slidesPerView.md ?? 1,
-                        },
-                        992: {
-                            slidesPerView: slidesPerView.lg ?? 1,
-                        },
-                        1200: {
-                            slidesPerView: slidesPerView.xl ?? 1,
-                        },
+    const slidesPerView = { xs: 1, ...slidesPerViewDefault };
+    const { useLayoutEffect, useRef, Children } = useReactAdapter();
+    const trackRef = useRef(null);
+    const containerRef = useRef(null);
+    const slides = Children.toArray(children);
+    const initSwiper = (current, track, windowWidth) => {
+        if (!current || !track) {
+            return null;
+        }
+        return new Swiper(track, loopOnMobile && windowWidth && windowWidth < 768
+            ? {
+                modules: [Autoplay],
+                slidesPerView: "auto",
+                spaceBetween: 80,
+                loop: true,
+                speed: 5000,
+                allowTouchMove: false,
+                autoplay: {
+                    delay: 1,
+                    disableOnInteraction: false,
+                },
+            }
+            : {
+                modules: [Autoplay, Navigation, Pagination],
+                slidesPerView: 1,
+                breakpoints: {
+                    375: {
+                        slidesPerView: slidesPerView.xs ?? 1,
+                    },
+                    576: {
+                        slidesPerView: slidesPerView.sm ?? 1,
+                    },
+                    768: {
+                        slidesPerView: slidesPerView.md ?? 1,
                     },
-                    spaceBetween,
-                    loop,
-                    mousewheel: true,
-                    navigation: hasNavigation
-                        ? {
-                            nextEl: current.querySelector(".ga-ds-carousel__button--next"),
-                            prevEl: current.querySelector(".ga-ds-carousel__button--prev"),
-                        }
-                        : false,
-                    pagination: hasPagination
-                        ? {
-                            el: current.querySelector(".ga-ds-carousel__dots"),
-                            clickable: pagination ? pagination.clickable : false,
-                            bulletClass: "ga-ds-carousel__dot",
-                            bulletActiveClass: "ga-ds-carousel__dot--active",
-                        }
-                        : false,
-                    autoplay: autoplay
-                        ? { delay: autoplay.delay || 5000, disableOnInteraction: autoplay.disableOnInteraction ?? false }
-                        : false,
-                    speed: speed || 300,
-                });
-                setSwiperInstance(swiper);
+                    992: {
+                        slidesPerView: slidesPerView.lg ?? 1,
+                    },
+                    1200: {
+                        slidesPerView: slidesPerView.xl ?? 1,
+                    },
+                },
+                spaceBetween,
+                loop,
+                mousewheel: true,
+                navigation: hasNavigation
+                    ? {
+                        nextEl: current.querySelector(".ga-ds-carousel__button--next"),
+                        prevEl: current.querySelector(".ga-ds-carousel__button--prev"),
+                    }
+                    : false,
+                pagination: hasPagination
+                    ? {
+                        el: current.querySelector(".ga-ds-carousel__dots"),
+                        clickable: pagination ? pagination.clickable : false,
+                        bulletClass: "ga-ds-carousel__dot",
+                        bulletActiveClass: "ga-ds-carousel__dot--active",
+                    }
+                    : false,
+                autoplay: autoplay
+                    ? {
+                        delay: autoplay.delay || 5000,
+                        disableOnInteraction: autoplay.disableOnInteraction ?? false,
+                    }
+                    : false,
+                speed: speed || 300,
+            });
+    };
+    useLayoutEffect(() => {
+        if (!trackRef.current || !containerRef.current) {
+            return;
+        }
+        const container = containerRef.current;
+        let swiper = initSwiper(container, trackRef.current, window.innerWidth);
+        let wasMobile = window.innerWidth < 768;
+        if (!loopOnMobile) {
+            return () => swiper?.destroy(true, true);
+        }
+        const handleResize = () => {
+            const isMobile = window.innerWidth < 768;
+            if (isMobile !== wasMobile) {
+                swiper?.destroy(true, true);
+                swiper = initSwiper(container, trackRef.current, window.innerWidth);
+                wasMobile = isMobile;
             }
-        }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance]);
-        return (_jsxs("div", { className: `ga-carousel-swiper ${classes.join(" ")}`, ref: containerRef, children: [_jsx("div", { className: "swiper", ref: trackRef, children: _jsx("div", { className: "swiper-wrapper", children: slides.map((slide, index) => (_jsx("div", { className: "swiper-slide", children: slide }, index))) }) }), hasNavigation || hasPagination ? (_jsxs("div", { className: "ga-ds-carousel__navigation", children: [hasPagination && _jsx("div", { className: "ga-ds-carousel__dots" }), hasNavigation && _jsx(CarouselNavigation, {})] })) : null] }));
+        };
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            swiper?.destroy(true, true);
+        };
+    }, []);
+    if (!Swiper) {
+        return _jsx("div", { children: "Swiper library is not loaded." });
     }
-    return _jsx("div", { children: "Swiper library is not loaded." });
+    return (_jsxs("div", { className: `ga-carousel-swiper ${loopOnMobile ? "ga-carousel-swiper--loop-on-mobile" : ""} ${classes.join(" ")}`, ref: containerRef, children: [_jsx("div", { className: "swiper", ref: trackRef, children: _jsx("div", { className: "swiper-wrapper", children: slides.map((slide, index) => (_jsx("div", { className: "swiper-slide", children: slide }, index))) }) }), hasNavigation || hasPagination ? (_jsxs("div", { className: "ga-ds-carousel__navigation", children: [hasPagination && _jsx("div", { className: "ga-ds-carousel__dots" }), hasNavigation && _jsx(CarouselNavigation, {})] })) : null] }));
 };
 const CarouselNavigation = () => {
     return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left", ariaLabel: "Slide pr\u00E9c\u00E9dente" }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right", ariaLabel: "Slide suivante" })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.25.5",
+  "version": "2.0.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/organisms/Carousel/Carousel.types.ts

@@ -24,6 +24,7 @@ export type CarouselAttributes = {
     disableOnInteraction?: boolean;
   }
   speed?: number;
+  loopOnMobile?: boolean
 }
 export interface CarouselProps extends CarouselAttributes, WordpressDefault {
   children: React.ReactNode | React.ReactNode[]

package/src/organisms/Carousel/CarouselSwiper.tsx

@@ -16,6 +16,7 @@ export const CarouselSwiper = (props: CarouselProps) => {
     loop = false,
     autoplay,
     speed,
+    loopOnMobile = false,
   } = props
 
   const classes = ["ga-ds-carousel"]
@@ -27,86 +28,134 @@ export const CarouselSwiper = (props: CarouselProps) => {
       classes.push(...props.extraClassNames)
     }
   }
-  if (Swiper) {
-    const slidesPerView = { xs: 1, ...slidesPerViewDefault }
-    const { useEffect, useState, useRef, Children } = useReactAdapter()
-    const trackRef = useRef<HTMLDivElement>(null)
-    const containerRef = useRef<HTMLDivElement>(null)
-    const slides = Children.toArray(children)
 
-    const [swiperInstance, setSwiperInstance] = useState<any>(null)
+  const slidesPerView = { xs: 1, ...slidesPerViewDefault }
+  const { useLayoutEffect, useRef, Children } = useReactAdapter()
+  const trackRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const slides = Children.toArray(children)
 
-    useEffect(() => {
-      if (trackRef.current && containerRef.current && !swiperInstance) {
-        const { current } = containerRef
-        const swiper = new Swiper(trackRef.current, {
-          modules: [Autoplay, Navigation, Pagination],
-          slidesPerView: 1,
-          breakpoints: {
-            375: {
-              slidesPerView: (slidesPerView as Record<string, number>).xs ?? 1,
-            },
-            576: {
-              slidesPerView: (slidesPerView as Record<string, number>).sm ?? 1,
-            },
-            768: {
-              slidesPerView: (slidesPerView as Record<string, number>).md ?? 1,
-            },
-            992: {
-              slidesPerView: (slidesPerView as Record<string, number>).lg ?? 1,
+  const initSwiper = (current: HTMLElement | null, track: HTMLElement | null, windowWidth: number | null) => {
+    if (!current || !track) {
+      return null
+    }
+    return new Swiper(
+      track,
+      loopOnMobile && windowWidth && windowWidth < 768
+        ? {
+            modules: [Autoplay],
+            slidesPerView: "auto",
+            spaceBetween: 80,
+            loop: true,
+            speed: 5000,
+            allowTouchMove: false,
+            autoplay: {
+              delay: 1,
+              disableOnInteraction: false,
             },
-            1200: {
-              slidesPerView: (slidesPerView as Record<string, number>).xl ?? 1,
+          }
+        : {
+            modules: [Autoplay, Navigation, Pagination],
+            slidesPerView: 1,
+            breakpoints: {
+              375: {
+                slidesPerView: (slidesPerView as Record<string, number>).xs ?? 1,
+              },
+              576: {
+                slidesPerView: (slidesPerView as Record<string, number>).sm ?? 1,
+              },
+              768: {
+                slidesPerView: (slidesPerView as Record<string, number>).md ?? 1,
+              },
+              992: {
+                slidesPerView: (slidesPerView as Record<string, number>).lg ?? 1,
+              },
+              1200: {
+                slidesPerView: (slidesPerView as Record<string, number>).xl ?? 1,
+              },
             },
+            spaceBetween,
+            loop,
+            mousewheel: true,
+            navigation: hasNavigation
+              ? {
+                  nextEl: current.querySelector(".ga-ds-carousel__button--next") as HTMLElement,
+                  prevEl: current.querySelector(".ga-ds-carousel__button--prev") as HTMLElement,
+                }
+              : false,
+            pagination: hasPagination
+              ? {
+                  el: current.querySelector(".ga-ds-carousel__dots") as HTMLElement,
+                  clickable: pagination ? pagination.clickable : false,
+                  bulletClass: "ga-ds-carousel__dot",
+                  bulletActiveClass: "ga-ds-carousel__dot--active",
+                }
+              : false,
+            autoplay: autoplay
+              ? {
+                  delay: autoplay.delay || 5000,
+                  disableOnInteraction: autoplay.disableOnInteraction ?? false,
+                }
+              : false,
+            speed: speed || 300,
           },
-          spaceBetween,
-          loop,
-          mousewheel: true,
-          navigation: hasNavigation
-            ? {
-                nextEl: current.querySelector(".ga-ds-carousel__button--next") as HTMLElement,
-                prevEl: current.querySelector(".ga-ds-carousel__button--prev") as HTMLElement,
-              }
-            : false,
-          pagination: hasPagination
-            ? {
-                el: current.querySelector(".ga-ds-carousel__dots") as HTMLElement,
-                clickable: pagination ? pagination.clickable : false,
-                bulletClass: "ga-ds-carousel__dot",
-                bulletActiveClass: "ga-ds-carousel__dot--active",
-              }
-            : false,
-          autoplay: autoplay
-            ? { delay: autoplay.delay || 5000, disableOnInteraction: autoplay.disableOnInteraction ?? false }
-            : false,
-          speed: speed || 300,
-        })
+    )
+  }
+  useLayoutEffect(() => {
+    if (!trackRef.current || !containerRef.current) {
+      return
+    }
+    const container = containerRef.current
+    let swiper = initSwiper(container, trackRef.current, window.innerWidth)
+    let wasMobile = window.innerWidth < 768
+
+    if (!loopOnMobile) {
+      return () => swiper?.destroy(true, true)
+    }
 
-        setSwiperInstance(swiper)
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 768
+      if (isMobile !== wasMobile) {
+        swiper?.destroy(true, true)
+        swiper = initSwiper(container, trackRef.current, window.innerWidth)
+        wasMobile = isMobile
       }
-    }, [slidesPerView, spaceBetween, navigation, pagination, hasNavigation, hasPagination, loop, trackRef, swiperInstance])
+    }
+
+    window.addEventListener("resize", handleResize)
 
-    return (
-      <div className={`ga-carousel-swiper ${classes.join(" ")}`} ref={containerRef}>
-        <div className="swiper" ref={trackRef}>
-          <div className="swiper-wrapper">
-            {slides.map((slide, index) => (
-              <div className="swiper-slide" key={index}>
-                {slide}
-              </div>
-            ))}
-          </div>
+    return () => {
+      window.removeEventListener("resize", handleResize)
+      swiper?.destroy(true, true)
+    }
+  }, [])
+
+  if (!Swiper) {
+    return <div>Swiper library is not loaded.</div>
+  }
+
+  return (
+    <div
+      className={`ga-carousel-swiper ${loopOnMobile ? "ga-carousel-swiper--loop-on-mobile" : ""} ${classes.join(" ")}`}
+      ref={containerRef}
+    >
+      <div className="swiper" ref={trackRef}>
+        <div className="swiper-wrapper">
+          {slides.map((slide, index) => (
+            <div className="swiper-slide" key={index}>
+              {slide}
+            </div>
+          ))}
         </div>
-        {hasNavigation || hasPagination ? (
-          <div className="ga-ds-carousel__navigation">
-            {hasPagination && <div className="ga-ds-carousel__dots"></div>}
-            {hasNavigation && <CarouselNavigation />}
-          </div>
-        ) : null}
       </div>
-    )
-  }
-  return <div>Swiper library is not loaded.</div>
+      {hasNavigation || hasPagination ? (
+        <div className="ga-ds-carousel__navigation">
+          {hasPagination && <div className="ga-ds-carousel__dots"></div>}
+          {hasNavigation && <CarouselNavigation />}
+        </div>
+      ) : null}
+    </div>
+  )
 }
 
 const CarouselNavigation = () => {