1 | import { createEffect, createSignal, onCleanup, splitProps } from 'solid-js';
|
2 | import { Dynamic } from 'solid-js/web';
|
3 | import { SwiperSlideContext } from './context.js';
|
4 | import { uniqueClasses } from '../components-shared/utils.js';
|
5 |
|
6 | const SwiperSlide = (props) => {
|
7 | const [local, rest] = splitProps(props, [
|
8 | 'children',
|
9 | 'class',
|
10 | 'ref',
|
11 | 'swiper',
|
12 | 'tag',
|
13 | 'virtualIndex',
|
14 | 'zoom',
|
15 | ]);
|
16 |
|
17 | const [slideClasses, setSlideClasses] = createSignal('swiper-slide');
|
18 |
|
19 | let ref = null;
|
20 |
|
21 | function updateClasses(_s, el, classNames) {
|
22 | if (el === ref) {
|
23 | setSlideClasses(classNames);
|
24 | }
|
25 | }
|
26 | createEffect(() => {
|
27 | if (!ref || !local.swiper) {
|
28 | return;
|
29 | }
|
30 | if (local.swiper.destroyed) {
|
31 | if (slideClasses() !== 'swiper-slide') {
|
32 | setSlideClasses('swiper-slide');
|
33 | }
|
34 | return;
|
35 | }
|
36 | local.swiper.on('_slideClass', updateClasses);
|
37 |
|
38 | onCleanup(() => {
|
39 | if (!local.swiper) return;
|
40 | local.swiper.off('_slideClass', updateClasses);
|
41 | });
|
42 | });
|
43 | createEffect(() => {
|
44 | if (local.swiper && ref && !local.swiper.destroyed) {
|
45 | setSlideClasses(local.swiper.getSlideClasses(ref));
|
46 | }
|
47 | });
|
48 |
|
49 | const slideData = () => ({
|
50 | isActive:
|
51 | slideClasses().indexOf('swiper-slide-active') >= 0 ||
|
52 | slideClasses().indexOf('swiper-slide-duplicate-active') >= 0,
|
53 | isVisible: slideClasses().indexOf('swiper-slide-visible') >= 0,
|
54 | isDuplicate: slideClasses().indexOf('swiper-slide-duplicate') >= 0,
|
55 | isPrev:
|
56 | slideClasses().indexOf('swiper-slide-prev') >= 0 ||
|
57 | slideClasses().indexOf('swiper-slide-duplicate-prev') >= 0,
|
58 | isNext:
|
59 | slideClasses().indexOf('swiper-slide-next') >= 0 ||
|
60 | slideClasses().indexOf('swiper-slide-duplicate-next') >= 0,
|
61 | });
|
62 |
|
63 | const renderChildren = () => {
|
64 | return typeof local.children === 'function' ? local.children(slideData()) : local.children;
|
65 | };
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | return (
|
71 | <Dynamic
|
72 | component={local.tag || 'div'}
|
73 | ref={(el) => {
|
74 | ref = el;
|
75 | if (typeof local.ref === 'function') {
|
76 | local.ref(el);
|
77 | } else {
|
78 | local.ref = el;
|
79 | }
|
80 | }}
|
81 | class={uniqueClasses(`${slideClasses()}${local.class ? ` ${local.class}` : ''}`)}
|
82 | data-swiper-slide-index={local.virtualIndex}
|
83 | {...rest}
|
84 | >
|
85 | <SwiperSlideContext.Provider value={slideData()}>
|
86 | {local.zoom ? (
|
87 | <div
|
88 | class="swiper-zoom-container"
|
89 | data-swiper-zoom={typeof local.zoom === 'number' ? local.zoom : undefined}
|
90 | >
|
91 | {renderChildren()}
|
92 | </div>
|
93 | ) : (
|
94 | renderChildren()
|
95 | )}
|
96 | </SwiperSlideContext.Provider>
|
97 | </Dynamic>
|
98 | );
|
99 | };
|
100 |
|
101 | export { SwiperSlide };
|