|
1 | 1 |
|
2 | | -import React, {useLayoutEffect, useState, useRef} from "react"; |
| 2 | +import React, { useLayoutEffect, useState, useRef } from "react"; |
3 | 3 | import Slider from "react-slick"; |
4 | 4 | import SoSpecialWrapper from "./so-special-style"; |
5 | 5 |
|
@@ -64,47 +64,47 @@ const SoSpecial = () => { |
64 | 64 | arrows: slidesToShowState !== 1, |
65 | 65 | slidesToShow: slidesToShowState ?? 2.5, |
66 | 66 | }; |
67 | | - |
68 | | - const computeSlides = () => { |
69 | | - const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200; |
70 | | - if (w <= 600) return 1; |
71 | | - if (w <= 800) return 1.5; |
72 | | - if (w <= 1024) return 2; |
73 | | - if (w <= 1200) return 2.2; |
74 | | - return 3; |
| 67 | + |
| 68 | + const computeSlides = () => { |
| 69 | + const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200; |
| 70 | + if (w <= 600) return 1; |
| 71 | + if (w <= 800) return 1.5; |
| 72 | + if (w <= 1024) return 2; |
| 73 | + if (w <= 1200) return 2.2; |
| 74 | + return 3; |
| 75 | + }; |
| 76 | + |
| 77 | + useLayoutEffect(() => { |
| 78 | + |
| 79 | + setIsClient(true); |
| 80 | + setSlidesToShowState(computeSlides()); |
| 81 | + |
| 82 | + let resizeTimeout = null; |
| 83 | + const onResizeDebounced = () => { |
| 84 | + clearTimeout(resizeTimeout); |
| 85 | + resizeTimeout = setTimeout(() => { |
| 86 | + const slides = computeSlides(); |
| 87 | + setSlidesToShowState((prev) => { |
| 88 | + if (prev !== slides) return slides; |
| 89 | + return prev; |
| 90 | + }); |
| 91 | + if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") { |
| 92 | + sliderRef.current.innerSlider.onWindowResized(); |
| 93 | + } |
| 94 | + }, 100); |
75 | 95 | }; |
76 | | - |
77 | | - useLayoutEffect(() => { |
78 | | - |
79 | | - setIsClient(true); |
80 | | - setSlidesToShowState(computeSlides()); |
81 | | - |
82 | | - let resizeTimeout = null; |
83 | | - const onResizeDebounced = () => { |
84 | | - clearTimeout(resizeTimeout); |
85 | | - resizeTimeout = setTimeout(() => { |
86 | | - const slides = computeSlides(); |
87 | | - setSlidesToShowState((prev) => { |
88 | | - if (prev !== slides) return slides; |
89 | | - return prev; |
90 | | - }); |
91 | | - if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") { |
92 | | - sliderRef.current.innerSlider.onWindowResized(); |
93 | | - } |
94 | | - }, 100); |
95 | | - }; |
96 | | - |
97 | | - window.addEventListener("resize", onResizeDebounced); |
98 | | - window.addEventListener("load", onResizeDebounced); |
99 | | - |
100 | | - return () => { |
101 | | - window.removeEventListener("resize", onResizeDebounced); |
102 | | - window.removeEventListener("load", onResizeDebounced); |
103 | | - clearTimeout(resizeTimeout); |
104 | | - }; |
105 | | - }, []); |
106 | | - |
107 | | - if (!isClient || slidesToShowState === null) return null; |
| 96 | + |
| 97 | + window.addEventListener("resize", onResizeDebounced); |
| 98 | + window.addEventListener("load", onResizeDebounced); |
| 99 | + |
| 100 | + return () => { |
| 101 | + window.removeEventListener("resize", onResizeDebounced); |
| 102 | + window.removeEventListener("load", onResizeDebounced); |
| 103 | + clearTimeout(resizeTimeout); |
| 104 | + }; |
| 105 | + }, []); |
| 106 | + |
| 107 | + if (!isClient || slidesToShowState === null) return null; |
108 | 108 |
|
109 | 109 | // const { isDark } = useStyledDarkMode(); |
110 | 110 |
|
|
0 commit comments