Skip to content

Commit bb5c603

Browse files
pstachula-devpstachula-dev
committed
fix: container width issues
1 parent 5877f24 commit bb5c603

File tree

8 files changed

+90
-90
lines changed

8 files changed

+90
-90
lines changed

‎package-lock.json‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-simple-headless-carousel/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"author": "Paweł Stachula",
99
"license": "MIT",
1010
"homepage": "https://simple-headless-carousel.onrender.com/",
11-
"version": "0.0.30",
11+
"version": "0.0.33",
1212
"sideEffects": false,
1313
"description": "React Micro Carousel",
1414
"keywords": [

‎packages/react-simple-headless-carousel/src/App.tsx‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,6 @@ function App() {
1010
<div className="my-4">
1111
<h2 className="my-2 text-2xl">Basic example</h2>
1212
<ExampleCarousel infinite lazy />
13-
<pre className="my-4 rounded-lg bg-gray-900 p-4 text-left font-mono text-xs font-normal text-gray-400">
14-
<code>
15-
{`
16-
<CarouselProvider
17-
total={5}
18-
slideHeight={400}
19-
>
20-
<Carousel>
21-
<Slide index={0}>
22-
<img src="/imgs/img1.jpg" />
23-
</Slide>
24-
<Slide index={1}>
25-
<img src="/imgs/img2.jpg" />
26-
</Slide>
27-
<Slide index={2}>
28-
<img src="/imgs/img3.jpg" />
29-
</Slide>
30-
<Slide index={3}>
31-
<img src="/imgs/img4.jpg" />
32-
</Slide>
33-
<Slide index={4}>
34-
<img src="/imgs/img5.jpg" />
35-
</Slide>
36-
</Carousel>
37-
38-
<DotsGroup />
39-
<Counter />
40-
<PrevButton className="rounded-md border px-4 py-1">Prev</PrevButton>
41-
<NextButton className="rounded-md border px-4 py-1">Next</NextButton>
42-
</CarouselProvider>`}
43-
</code>
44-
</pre>
4513
</div>
4614
{/* example end */}
4715
</div>

‎packages/react-simple-headless-carousel/src/lib/simple-headless-carousel/components/Carousel.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ export const Carousel = memo(
5353
step,
5454
disableTouch,
5555
} = state;
56-
const totalWidth = (fullSize * total) / slidesVisible;
56+
const totalWidth = (fullSize * total) / (slidesVisible || 1);
5757
const totalWidthPercent = `${totalWidth}%`;
58+
5859
const width = (refWidth || 0) / total;
5960
const cancelWrongTarget = ({ target }: SlideEvent) => {
6061
return target !== imgRef.current;
@@ -198,7 +199,7 @@ export const Carousel = memo(
198199
<div
199200
ref={imgRef}
200201
className={clsx(
201-
'relative flex w-full flex-row',
202+
'relative flex w-full flex-row items-stretch',
202203
isMoving && 'transition-transform duration-500',
203204
carouselClassName,
204205
)}

‎packages/react-simple-headless-carousel/src/lib/simple-headless-carousel/components/Slide.tsx‎

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type SlideProps = {
77
children: ReactNode;
88
index: number;
99
className?: string;
10+
onClick?: () => void;
1011
};
1112

1213
/**
@@ -16,41 +17,45 @@ type SlideProps = {
1617
* @param {ReactNode} children - The content of the slide.
1718
* @param {number} index - Slide index
1819
* @param {string} className - Additional CSS classes for the slide.
20+
* @param {() => void} onClick - Callback function when the slide is clicked.
1921
*/
20-
export const Slide = memo(({ children, index, className }: SlideProps) => {
21-
const { state } = useContext(CarouselContext);
22-
const isVisible = useRef(false);
23-
const intersectionRef = useRef(null);
24-
const { entry } = useIntersectionObserver({
25-
ref: intersectionRef,
26-
opts: { threshold: 0.5 },
27-
});
22+
export const Slide = memo(
23+
({ children, index, className, onClick }: SlideProps) => {
24+
const { state } = useContext(CarouselContext);
25+
const isVisible = useRef(false);
26+
const intersectionRef = useRef(null);
27+
const { entry } = useIntersectionObserver({
28+
ref: intersectionRef,
29+
opts: { threshold: 0.5 },
30+
});
2831

29-
const { currentIndex, slidesVisible, lazy, slideHeight } = state;
32+
const { currentIndex, slidesVisible, lazy, slideHeight } = state;
3033

31-
if (!isVisible.current && entry?.isIntersecting) {
32-
isVisible.current = entry.isIntersecting;
33-
}
34+
if (!isVisible.current && entry?.isIntersecting) {
35+
isVisible.current = entry.isIntersecting;
36+
}
3437

35-
const showLazy = lazy ? isVisible.current : true;
36-
const showSlide = currentIndex === index || showLazy;
37-
const isSelected =
38-
index >= currentIndex && index < currentIndex + slidesVisible;
38+
const showLazy = lazy ? isVisible.current : true;
39+
const showSlide = currentIndex === index || showLazy;
40+
const isSelected =
41+
index >= currentIndex && index < currentIndex + slidesVisible;
3942

40-
return (
41-
<div
42-
role="row"
43-
className={clsx(
44-
'slide-item pointer-events-none relative w-full',
45-
className,
46-
)}
47-
style={{ height: slideHeight }}
48-
ref={intersectionRef}
49-
data-index={index}
50-
data-testid={`slide-${index}`}
51-
aria-selected={isSelected}
52-
>
53-
{showSlide && children}
54-
</div>
55-
);
56-
});
43+
return (
44+
<div
45+
role="row"
46+
className={clsx(
47+
'slide-item pointer-events-none relative w-full',
48+
className,
49+
)}
50+
style={{ height: slideHeight }}
51+
ref={intersectionRef}
52+
data-index={index}
53+
data-testid={`slide-${index}`}
54+
aria-selected={isSelected}
55+
onClick={onClick}
56+
>
57+
{showSlide && children}
58+
</div>
59+
);
60+
},
61+
);

‎packages/react-simple-headless-carousel/src/lib/simple-headless-carousel/components/SliderButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
33
export type SliderButtonProps = {
44
children: ReactNode;
55
action?: () => void;
6-
onClick?: () => void;
6+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
77
className?: string;
88
};
99

@@ -26,9 +26,9 @@ export function SliderButton({
2626
<button
2727
className={className}
2828
type="button"
29-
onClick={() => {
29+
onClick={(e) => {
3030
action?.();
31-
onClick?.();
31+
onClick?.(e);
3232
}}
3333
>
3434
{children}

‎packages/react-simple-headless-carousel/src/lib/simple-headless-carousel/context/CarouselProvider.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type Props = Partial<CarouselState> &
2727
*/
2828
export function CarouselProvider({ children, ...configProps }: Props) {
2929
const { dispatch, state } = useCarouselReducer();
30+
3031
const ctx = useMemo(
3132
() => ({
3233
dispatch,

‎packages/react-simple-headless-carousel/src/lib/simple-headless-carousel/hooks/useMergeConfig.ts‎

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,36 @@ import {
77

88
const isDefined = <T>(prop: T) => prop !== undefined;
99

10+
export const mergeConfig = ({
11+
autoPlay,
12+
autoPlayDelay,
13+
slidesVisible,
14+
threshold,
15+
disableTouch,
16+
step,
17+
lazy,
18+
infinite,
19+
total,
20+
}: Partial<CarouselState>) => {
21+
return {
22+
autoPlayDelay: isDefined(autoPlayDelay)
23+
? autoPlayDelay
24+
: stateDefaults.autoPlayDelay,
25+
slidesVisible: isDefined(slidesVisible)
26+
? slidesVisible
27+
: stateDefaults.slidesVisible,
28+
autoPlay: isDefined(autoPlay) ? autoPlay : stateDefaults.autoPlay,
29+
step: isDefined(step) ? step : stateDefaults.step,
30+
infinite: isDefined(infinite) ? infinite : stateDefaults.infinite,
31+
lazy: isDefined(lazy) ? lazy : stateDefaults.lazy,
32+
threshold: isDefined(threshold) ? threshold : stateDefaults.threshold,
33+
disableTouch: isDefined(disableTouch)
34+
? disableTouch
35+
: stateDefaults.disableTouch,
36+
total,
37+
};
38+
};
39+
1040
export const useMergeConfig = ({
1141
dispatch,
1242
autoPlay,
@@ -23,24 +53,18 @@ export const useMergeConfig = ({
2353
useEffect(() => {
2454
dispatch({
2555
action: 'setConfig',
26-
config: {
27-
autoPlayDelay: isDefined(autoPlayDelay)
28-
? autoPlayDelay
29-
: stateDefaults.autoPlayDelay,
30-
slidesVisible: isDefined(slidesVisible)
31-
? slidesVisible
32-
: stateDefaults.slidesVisible,
33-
autoPlay: isDefined(autoPlay) ? autoPlay : stateDefaults.autoPlay,
34-
step: isDefined(step) ? step : stateDefaults.step,
35-
infinite: isDefined(infinite) ? infinite : stateDefaults.infinite,
36-
lazy: isDefined(lazy) ? lazy : stateDefaults.lazy,
37-
threshold: isDefined(threshold) ? threshold : stateDefaults.threshold,
38-
disableTouch: isDefined(disableTouch)
39-
? disableTouch
40-
: stateDefaults.disableTouch,
41-
total,
56+
config: mergeConfig({
57+
autoPlay,
58+
autoPlayDelay,
59+
slidesVisible,
60+
threshold,
61+
disableTouch,
62+
step,
63+
lazy,
64+
infinite,
4265
slideHeight,
43-
},
66+
total,
67+
}),
4468
});
4569
}, [
4670
dispatch,

0 commit comments

Comments
 (0)