@yamada-ui/carousel 1.0.28 → 2.0.0-next-20240513035416
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/carousel-control.d.mts +8 -0
- package/dist/carousel-control.d.ts +8 -0
- package/dist/carousel-control.js +158 -0
- package/dist/carousel-control.js.map +1 -0
- package/dist/carousel-control.mjs +11 -0
- package/dist/carousel-control.mjs.map +1 -0
- package/dist/carousel-indicators.d.mts +17 -0
- package/dist/carousel-indicators.d.ts +17 -0
- package/dist/carousel-indicators.js +141 -0
- package/dist/carousel-indicators.js.map +1 -0
- package/dist/carousel-indicators.mjs +9 -0
- package/dist/carousel-indicators.mjs.map +1 -0
- package/dist/carousel-slide.d.mts +17 -0
- package/dist/carousel-slide.d.ts +17 -0
- package/dist/carousel-slide.js +106 -0
- package/dist/carousel-slide.js.map +1 -0
- package/dist/carousel-slide.mjs +9 -0
- package/dist/carousel-slide.mjs.map +1 -0
- package/dist/carousel.d.mts +144 -0
- package/dist/carousel.d.ts +144 -0
- package/dist/carousel.js +599 -0
- package/dist/carousel.js.map +1 -0
- package/dist/carousel.mjs +12 -0
- package/dist/carousel.mjs.map +1 -0
- package/dist/chunk-DDY7Q2IV.mjs +87 -0
- package/dist/chunk-DDY7Q2IV.mjs.map +1 -0
- package/dist/chunk-IKJXFLRJ.mjs +72 -0
- package/dist/chunk-IKJXFLRJ.mjs.map +1 -0
- package/dist/chunk-QQ2HS4J4.mjs +260 -0
- package/dist/chunk-QQ2HS4J4.mjs.map +1 -0
- package/dist/chunk-VQX7S5CU.mjs +50 -0
- package/dist/chunk-VQX7S5CU.mjs.map +1 -0
- package/dist/chunk-YDLJHKEU.mjs +171 -0
- package/dist/chunk-YDLJHKEU.mjs.map +1 -0
- package/dist/index.d.mts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +609 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +23 -0
- package/dist/index.mjs.map +1 -0
- package/dist/use-carousel.d.mts +176 -0
- package/dist/use-carousel.d.ts +176 -0
- package/dist/use-carousel.js +292 -0
- package/dist/use-carousel.js.map +1 -0
- package/dist/use-carousel.mjs +18 -0
- package/dist/use-carousel.mjs.map +1 -0
- package/package.json +1 -1
@@ -0,0 +1,292 @@
|
|
1
|
+
"use client"
|
2
|
+
"use strict";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// src/use-carousel.ts
|
32
|
+
var use_carousel_exports = {};
|
33
|
+
__export(use_carousel_exports, {
|
34
|
+
CarouselProvider: () => CarouselProvider,
|
35
|
+
useCarousel: () => useCarousel,
|
36
|
+
useCarouselContext: () => useCarouselContext,
|
37
|
+
useCarouselControl: () => useCarouselControl,
|
38
|
+
useCarouselIndicators: () => useCarouselIndicators,
|
39
|
+
useCarouselSlide: () => useCarouselSlide
|
40
|
+
});
|
41
|
+
module.exports = __toCommonJS(use_carousel_exports);
|
42
|
+
var import_core = require("@yamada-ui/core");
|
43
|
+
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
44
|
+
var import_utils = require("@yamada-ui/utils");
|
45
|
+
var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
|
46
|
+
var import_react = require("react");
|
47
|
+
var [CarouselProvider, useCarouselContext] = (0, import_utils.createContext)({
|
48
|
+
name: "CarouselContext",
|
49
|
+
errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in "<Carousel />"`
|
50
|
+
});
|
51
|
+
var useCarousel = ({
|
52
|
+
index,
|
53
|
+
defaultIndex = 0,
|
54
|
+
onChange,
|
55
|
+
align = "center",
|
56
|
+
orientation = "horizontal",
|
57
|
+
autoplay = false,
|
58
|
+
stopMouseEnterAutoplay = true,
|
59
|
+
loop = true,
|
60
|
+
speed = 10,
|
61
|
+
delay = 4e3,
|
62
|
+
gap = "fallback(4, 1rem)",
|
63
|
+
slidesToScroll = 1,
|
64
|
+
draggable = true,
|
65
|
+
dragFree = false,
|
66
|
+
inViewThreshold = 0,
|
67
|
+
skipSnaps = false,
|
68
|
+
containScroll = "",
|
69
|
+
slideSize = "100%",
|
70
|
+
includeGapInSize = true,
|
71
|
+
onScrollProgress,
|
72
|
+
children,
|
73
|
+
...rest
|
74
|
+
}) => {
|
75
|
+
const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
|
76
|
+
const [selectedIndex, setSelectedIndex] = (0, import_use_controllable_state.useControllableState)({
|
77
|
+
value: index,
|
78
|
+
defaultValue: defaultIndex,
|
79
|
+
onChange
|
80
|
+
});
|
81
|
+
const isVertical = orientation === "vertical";
|
82
|
+
const [carouselRef, carousel] = (0, import_embla_carousel_react.default)({
|
83
|
+
axis: isVertical ? "y" : "x",
|
84
|
+
startIndex: defaultIndex,
|
85
|
+
loop,
|
86
|
+
align,
|
87
|
+
slidesToScroll,
|
88
|
+
draggable,
|
89
|
+
dragFree,
|
90
|
+
speed,
|
91
|
+
inViewThreshold,
|
92
|
+
skipSnaps,
|
93
|
+
containScroll
|
94
|
+
});
|
95
|
+
const [indexes, setIndexes] = (0, import_react.useState)([]);
|
96
|
+
const [isMouseEnter, setIsMouseEnter] = (0, import_react.useState)(false);
|
97
|
+
const timeoutId = (0, import_react.useRef)(void 0);
|
98
|
+
const onScroll = (0, import_react.useCallback)(() => {
|
99
|
+
if (!carousel)
|
100
|
+
return;
|
101
|
+
const progress = Math.round(
|
102
|
+
Math.max(0, Math.min(1, carousel.scrollProgress())) * 100
|
103
|
+
);
|
104
|
+
onScrollProgress == null ? void 0 : onScrollProgress(progress);
|
105
|
+
}, [carousel, onScrollProgress]);
|
106
|
+
const onSelect = (0, import_react.useCallback)(() => {
|
107
|
+
if (!carousel)
|
108
|
+
return;
|
109
|
+
const index2 = carousel.selectedScrollSnap();
|
110
|
+
setSelectedIndex(index2);
|
111
|
+
}, [carousel, setSelectedIndex]);
|
112
|
+
(0, import_react.useEffect)(() => {
|
113
|
+
const isStop = isMouseEnter && stopMouseEnterAutoplay;
|
114
|
+
const isLast = !(carousel == null ? void 0 : carousel.canScrollNext());
|
115
|
+
if (carousel && autoplay && !isStop && !isLast) {
|
116
|
+
timeoutId.current = setInterval(() => {
|
117
|
+
carousel.scrollNext();
|
118
|
+
}, delay);
|
119
|
+
} else {
|
120
|
+
if (timeoutId.current)
|
121
|
+
clearInterval(timeoutId.current);
|
122
|
+
timeoutId.current = void 0;
|
123
|
+
}
|
124
|
+
return () => {
|
125
|
+
if (timeoutId.current)
|
126
|
+
clearInterval(timeoutId.current);
|
127
|
+
};
|
128
|
+
}, [
|
129
|
+
autoplay,
|
130
|
+
delay,
|
131
|
+
stopMouseEnterAutoplay,
|
132
|
+
carousel,
|
133
|
+
isMouseEnter,
|
134
|
+
loop,
|
135
|
+
selectedIndex
|
136
|
+
]);
|
137
|
+
(0, import_utils.useUpdateEffect)(() => {
|
138
|
+
if (!carousel)
|
139
|
+
return;
|
140
|
+
carousel.reInit();
|
141
|
+
const snapList = carousel.scrollSnapList();
|
142
|
+
const indexes2 = snapList.map((_, i) => i);
|
143
|
+
setIndexes(indexes2);
|
144
|
+
}, [
|
145
|
+
import_react.Children.toArray(children).length,
|
146
|
+
align,
|
147
|
+
orientation,
|
148
|
+
loop,
|
149
|
+
speed,
|
150
|
+
gap,
|
151
|
+
slidesToScroll,
|
152
|
+
draggable,
|
153
|
+
dragFree,
|
154
|
+
inViewThreshold,
|
155
|
+
skipSnaps,
|
156
|
+
containScroll,
|
157
|
+
slideSize,
|
158
|
+
includeGapInSize
|
159
|
+
]);
|
160
|
+
(0, import_utils.useUpdateEffect)(() => {
|
161
|
+
if (!carousel)
|
162
|
+
return;
|
163
|
+
const snapList = carousel.scrollSnapList();
|
164
|
+
const indexes2 = snapList.map((_, i) => i);
|
165
|
+
setIndexes(indexes2);
|
166
|
+
}, [carousel]);
|
167
|
+
(0, import_utils.useUpdateEffect)(() => {
|
168
|
+
if (carousel) {
|
169
|
+
carousel.on("select", onSelect);
|
170
|
+
carousel.on("scroll", onScroll);
|
171
|
+
onScroll();
|
172
|
+
return () => {
|
173
|
+
carousel.off("select", onSelect);
|
174
|
+
carousel.off("scroll", onScroll);
|
175
|
+
};
|
176
|
+
}
|
177
|
+
}, [carousel, onScroll]);
|
178
|
+
const getContainerProps = (0, import_react.useCallback)(
|
179
|
+
(props = {}, ref = null) => ({
|
180
|
+
...computedProps[0],
|
181
|
+
...props,
|
182
|
+
ref,
|
183
|
+
onMouseEnter: (0, import_utils.handlerAll)(props.onMouseEnter, () => {
|
184
|
+
setIsMouseEnter(true);
|
185
|
+
}),
|
186
|
+
onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, () => {
|
187
|
+
setIsMouseEnter(false);
|
188
|
+
})
|
189
|
+
}),
|
190
|
+
[computedProps]
|
191
|
+
);
|
192
|
+
const getSlidesProps = (0, import_react.useCallback)(
|
193
|
+
(props = {}) => ({
|
194
|
+
...computedProps[1],
|
195
|
+
...props,
|
196
|
+
ref: carouselRef
|
197
|
+
}),
|
198
|
+
[computedProps, carouselRef]
|
199
|
+
);
|
200
|
+
return {
|
201
|
+
carousel,
|
202
|
+
children,
|
203
|
+
indexes,
|
204
|
+
selectedIndex,
|
205
|
+
orientation,
|
206
|
+
slideSize,
|
207
|
+
gap,
|
208
|
+
slidesToScroll,
|
209
|
+
includeGapInSize,
|
210
|
+
getContainerProps,
|
211
|
+
getSlidesProps
|
212
|
+
};
|
213
|
+
};
|
214
|
+
var useCarouselSlide = ({ index }) => {
|
215
|
+
const { selectedIndex, slidesToScroll } = useCarouselContext();
|
216
|
+
index = Math.floor((index != null ? index : 0) / (slidesToScroll != null ? slidesToScroll : 1));
|
217
|
+
const isSelected = index === selectedIndex;
|
218
|
+
const getSlideProps = (0, import_react.useCallback)(
|
219
|
+
(props = {}) => ({
|
220
|
+
...props,
|
221
|
+
"data-index": index,
|
222
|
+
"data-selected": (0, import_utils.dataAttr)(isSelected)
|
223
|
+
}),
|
224
|
+
[isSelected, index]
|
225
|
+
);
|
226
|
+
return { getSlideProps };
|
227
|
+
};
|
228
|
+
var useCarouselControl = ({
|
229
|
+
operation,
|
230
|
+
...rest
|
231
|
+
}) => {
|
232
|
+
var _a, _b;
|
233
|
+
const { carousel } = useCarouselContext();
|
234
|
+
const isPrev = operation === "prev";
|
235
|
+
const disabled = (_b = (_a = rest.disabled) != null ? _a : rest.isDisabled) != null ? _b : isPrev ? !(carousel == null ? void 0 : carousel.canScrollPrev()) : !(carousel == null ? void 0 : carousel.canScrollNext());
|
236
|
+
const onClick = (0, import_react.useCallback)(() => {
|
237
|
+
if (!carousel)
|
238
|
+
return;
|
239
|
+
if (isPrev) {
|
240
|
+
carousel.scrollPrev();
|
241
|
+
} else {
|
242
|
+
carousel.scrollNext();
|
243
|
+
}
|
244
|
+
}, [carousel, isPrev]);
|
245
|
+
const getControlProps = (0, import_react.useCallback)(
|
246
|
+
(props = {}, ref = null) => ({
|
247
|
+
...props,
|
248
|
+
ref,
|
249
|
+
disabled,
|
250
|
+
onClick: (0, import_utils.handlerAll)(props.onClick, onClick)
|
251
|
+
}),
|
252
|
+
[disabled, onClick]
|
253
|
+
);
|
254
|
+
return { getControlProps };
|
255
|
+
};
|
256
|
+
var useCarouselIndicators = () => {
|
257
|
+
const { selectedIndex, carousel, indexes } = useCarouselContext();
|
258
|
+
const onClick = (0, import_react.useCallback)(
|
259
|
+
(ev, index) => {
|
260
|
+
if (!carousel)
|
261
|
+
return;
|
262
|
+
ev.stopPropagation();
|
263
|
+
carousel.scrollTo(index);
|
264
|
+
},
|
265
|
+
[carousel]
|
266
|
+
);
|
267
|
+
const getIndicatorProps = (0, import_react.useCallback)(
|
268
|
+
({ index, ...props }) => {
|
269
|
+
const isSelected = index === selectedIndex;
|
270
|
+
return {
|
271
|
+
"aria-label": `Go to ${index + 1} slide`,
|
272
|
+
...props,
|
273
|
+
key: index,
|
274
|
+
"data-index": index,
|
275
|
+
"data-selected": (0, import_utils.dataAttr)(isSelected),
|
276
|
+
onClick: (0, import_utils.handlerAll)(props.onClick, (ev) => onClick(ev, index))
|
277
|
+
};
|
278
|
+
},
|
279
|
+
[onClick, selectedIndex]
|
280
|
+
);
|
281
|
+
return { indexes, getIndicatorProps };
|
282
|
+
};
|
283
|
+
// Annotate the CommonJS export names for ESM import in node:
|
284
|
+
0 && (module.exports = {
|
285
|
+
CarouselProvider,
|
286
|
+
useCarousel,
|
287
|
+
useCarouselContext,
|
288
|
+
useCarouselControl,
|
289
|
+
useCarouselIndicators,
|
290
|
+
useCarouselSlide
|
291
|
+
});
|
292
|
+
//# sourceMappingURL=use-carousel.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/use-carousel.ts"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport type {\n CSSUIObject,\n HTMLUIProps,\n CSSUIProps,\n UIPropGetter,\n RequiredUIPropGetter,\n} from \"@yamada-ui/core\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n splitObject,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { EmblaCarouselType } from \"embla-carousel-react\"\nimport useEmblaCarousel from \"embla-carousel-react\"\nimport type { MouseEvent } from \"react\"\nimport { Children, useCallback, useEffect, useRef, useState } from \"react\"\n\ntype CarouselContext = {\n carousel: EmblaCarouselType | undefined\n indexes: number[]\n selectedIndex: number\n orientation: \"vertical\" | \"horizontal\"\n includeGapInSize: boolean\n slidesToScroll: number\n slideSize: string | number\n gap: CSSUIProps[\"gap\"]\n styles: Record<string, CSSUIObject>\n}\n\nexport const [CarouselProvider, useCarouselContext] =\n createContext<CarouselContext>({\n name: \"CarouselContext\",\n errorMessage: `useCarouselContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Carousel />\"`,\n })\n\nexport type UseCarouselProps = Omit<\n HTMLUIProps<\"div\">,\n \"onChange\" | \"draggable\" | \"gap\"\n> & {\n /**\n * The index of the carousel slide.\n */\n index?: number\n /**\n * The initial index of the carousel slide.\n *\n * @default 0\n */\n defaultIndex?: number\n /**\n * The callback invoked when carousel slide selected.\n */\n onChange?: (index: number) => void\n /**\n * The orientation of the carousel.\n *\n * @default 'horizontal'\n */\n orientation?: \"vertical\" | \"horizontal\"\n /**\n * The alignment of the carousel.\n *\n * @default 'center'\n */\n align?: \"start\" | \"center\" | \"end\" | number\n /**\n * Clear leading and trailing empty space that causes excessive scrolling.\n * Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.\n *\n * @default ''\n */\n containScroll?: \"trimSnaps\" | \"keepSnaps\" | \"\"\n /**\n * The number of slides that should be scrolled with next or previous buttons.\n *\n * @default 1\n */\n slidesToScroll?: number\n /**\n * If `true`, momentum scrolling will be enabled.\n *\n * @default false\n */\n dragFree?: boolean\n /**\n * If `true`, carousel can be scrolled with mouse and touch interactions.\n *\n * @default true\n */\n draggable?: boolean\n /**\n * Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.\n *\n * @default 0\n */\n inViewThreshold?: number\n /**\n * If `true`, infinite looping.\n * Automatically falls back to false if slide content isn't enough to loop.\n *\n * @default true\n */\n loop?: boolean\n /**\n * If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously.\n * Note that this option will be ignored if the dragFree option is set to true.\n *\n * @default false\n */\n skipSnaps?: boolean\n /**\n * Adjusts scroll speed when triggered by any of the methods.\n * Higher numbers enables faster scrolling.\n *\n * @default 10\n */\n speed?: number\n /**\n * The number for the autoplay interval of the carousel.\n *\n * @default 4000\n */\n delay?: number\n /**\n * If `true`, the carousel will be autoplay.\n *\n * @default false\n */\n autoplay?: boolean\n /**\n * If `true`, autoplay will pause when the mouse entries over.\n *\n * @default true\n */\n stopMouseEnterAutoplay?: boolean\n /**\n * If `true`, gap will be treated as part of the carousel slide size.\n *\n * @default true\n */\n includeGapInSize?: boolean\n /**\n * The CSS `gap` property.\n *\n * @default '4'\n */\n gap?: CSSUIProps[\"gap\"]\n /**\n * The carousel slide width.\n *\n * @default '100%'\n */\n slideSize?: string | number\n /**\n * A callback that return the current scroll amount when the carousel is scrolled.\n */\n onScrollProgress?: (progress: number) => void\n}\n\nexport const useCarousel = ({\n index,\n defaultIndex = 0,\n onChange,\n align = \"center\",\n orientation = \"horizontal\",\n autoplay = false,\n stopMouseEnterAutoplay = true,\n loop = true,\n speed = 10,\n delay = 4000,\n gap = \"fallback(4, 1rem)\",\n slidesToScroll = 1,\n draggable = true,\n dragFree = false,\n inViewThreshold = 0,\n skipSnaps = false,\n containScroll = \"\",\n slideSize = \"100%\",\n includeGapInSize = true,\n onScrollProgress,\n children,\n ...rest\n}: UseCarouselProps) => {\n const computedProps = splitObject(rest, layoutStyleProperties)\n\n const [selectedIndex, setSelectedIndex] = useControllableState({\n value: index,\n defaultValue: defaultIndex,\n onChange,\n })\n\n const isVertical = orientation === \"vertical\"\n\n const [carouselRef, carousel] = useEmblaCarousel({\n axis: isVertical ? \"y\" : \"x\",\n startIndex: defaultIndex,\n loop,\n align,\n slidesToScroll,\n draggable,\n dragFree,\n speed,\n inViewThreshold,\n skipSnaps,\n containScroll,\n })\n\n const [indexes, setIndexes] = useState<number[]>([])\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false)\n\n const timeoutId = useRef<any>(undefined)\n\n const onScroll = useCallback(() => {\n if (!carousel) return\n\n const progress = Math.round(\n Math.max(0, Math.min(1, carousel.scrollProgress())) * 100,\n )\n\n onScrollProgress?.(progress)\n }, [carousel, onScrollProgress])\n\n const onSelect = useCallback(() => {\n if (!carousel) return\n\n const index = carousel.selectedScrollSnap()\n\n setSelectedIndex(index)\n }, [carousel, setSelectedIndex])\n\n useEffect(() => {\n const isStop = isMouseEnter && stopMouseEnterAutoplay\n const isLast = !carousel?.canScrollNext()\n\n if (carousel && autoplay && !isStop && !isLast) {\n timeoutId.current = setInterval(() => {\n carousel.scrollNext()\n }, delay)\n } else {\n if (timeoutId.current) clearInterval(timeoutId.current)\n\n timeoutId.current = undefined\n }\n\n return () => {\n if (timeoutId.current) clearInterval(timeoutId.current)\n }\n }, [\n autoplay,\n delay,\n stopMouseEnterAutoplay,\n carousel,\n isMouseEnter,\n loop,\n selectedIndex,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n carousel.reInit()\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [\n Children.toArray(children).length,\n align,\n orientation,\n loop,\n speed,\n gap,\n slidesToScroll,\n draggable,\n dragFree,\n inViewThreshold,\n skipSnaps,\n containScroll,\n slideSize,\n includeGapInSize,\n ])\n\n useUpdateEffect(() => {\n if (!carousel) return\n\n const snapList = carousel.scrollSnapList()\n const indexes = snapList.map((_, i) => i)\n\n setIndexes(indexes)\n }, [carousel])\n\n useUpdateEffect(() => {\n if (carousel) {\n carousel.on(\"select\", onSelect)\n carousel.on(\"scroll\", onScroll)\n\n onScroll()\n\n return () => {\n carousel.off(\"select\", onSelect)\n carousel.off(\"scroll\", onScroll)\n }\n }\n }, [carousel, onScroll])\n\n const getContainerProps: UIPropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...computedProps[0],\n ...props,\n ref,\n onMouseEnter: handlerAll(props.onMouseEnter, () => {\n setIsMouseEnter(true)\n }),\n onMouseLeave: handlerAll(props.onMouseLeave, () => {\n setIsMouseEnter(false)\n }),\n }),\n [computedProps],\n )\n\n const getSlidesProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...computedProps[1],\n ...props,\n ref: carouselRef,\n }),\n [computedProps, carouselRef],\n )\n\n return {\n carousel,\n children,\n indexes,\n selectedIndex,\n orientation,\n slideSize,\n gap,\n slidesToScroll,\n includeGapInSize,\n getContainerProps,\n getSlidesProps,\n }\n}\n\nexport type UseCarouselReturn = ReturnType<typeof useCarousel>\n\nexport type UseCarouselSlideProps = {\n index?: number\n}\n\nexport const useCarouselSlide = ({ index }: UseCarouselSlideProps) => {\n const { selectedIndex, slidesToScroll } = useCarouselContext()\n\n index = Math.floor((index ?? 0) / (slidesToScroll ?? 1))\n\n const isSelected = index === selectedIndex\n\n const getSlideProps: UIPropGetter = useCallback(\n (props = {}) => ({\n ...props,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n }),\n [isSelected, index],\n )\n\n return { getSlideProps }\n}\n\nexport type UseCarouselSlideReturn = ReturnType<typeof useCarouselSlide>\n\nexport type UseCarouselControlProps = IconButtonProps & {\n operation: \"prev\" | \"next\"\n}\n\nexport const useCarouselControl = ({\n operation,\n ...rest\n}: UseCarouselControlProps) => {\n const { carousel } = useCarouselContext()\n\n const isPrev = operation === \"prev\"\n\n const disabled =\n rest.disabled ??\n rest.isDisabled ??\n (isPrev ? !carousel?.canScrollPrev() : !carousel?.canScrollNext())\n\n const onClick = useCallback(() => {\n if (!carousel) return\n\n if (isPrev) {\n carousel.scrollPrev()\n } else {\n carousel.scrollNext()\n }\n }, [carousel, isPrev])\n\n const getControlProps: UIPropGetter<\"button\"> = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n disabled,\n onClick: handlerAll(props.onClick, onClick),\n }),\n [disabled, onClick],\n )\n\n return { getControlProps }\n}\n\nexport type UseCarouselControlReturn = ReturnType<typeof useCarouselControl>\n\nexport const useCarouselIndicators = () => {\n const { selectedIndex, carousel, indexes } = useCarouselContext()\n\n const onClick = useCallback(\n (ev: MouseEvent, index: number) => {\n if (!carousel) return\n\n ev.stopPropagation()\n\n carousel.scrollTo(index)\n },\n [carousel],\n )\n\n const getIndicatorProps: RequiredUIPropGetter<\"button\", { index: number }> =\n useCallback(\n ({ index, ...props }) => {\n const isSelected = index === selectedIndex\n\n return {\n \"aria-label\": `Go to ${index + 1} slide`,\n ...props,\n key: index,\n \"data-index\": index,\n \"data-selected\": dataAttr(isSelected),\n onClick: handlerAll(props.onClick, (ev) => onClick(ev, index)),\n }\n },\n [onClick, selectedIndex],\n )\n\n return { indexes, getIndicatorProps }\n}\n\nexport type UseCarouselIndicatorsReturn = ReturnType<\n typeof useCarouselIndicators\n>\n"],"mappings":"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","names":["useEmblaCarousel","index","indexes"]}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use client"
|
2
|
+
import {
|
3
|
+
CarouselProvider,
|
4
|
+
useCarousel,
|
5
|
+
useCarouselContext,
|
6
|
+
useCarouselControl,
|
7
|
+
useCarouselIndicators,
|
8
|
+
useCarouselSlide
|
9
|
+
} from "./chunk-QQ2HS4J4.mjs";
|
10
|
+
export {
|
11
|
+
CarouselProvider,
|
12
|
+
useCarousel,
|
13
|
+
useCarouselContext,
|
14
|
+
useCarouselControl,
|
15
|
+
useCarouselIndicators,
|
16
|
+
useCarouselSlide
|
17
|
+
};
|
18
|
+
//# sourceMappingURL=use-carousel.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|