Skip to content

Commit 56060ed

Browse files
gjulivangjulivan
committed
chore(carousel): update carousel dependency
1 parent 265d298 commit 56060ed

8 files changed

Lines changed: 46 additions & 148 deletions

File tree

‎packages/pluggableWidgets/carousel-web/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Changed
10+
11+
- We update swiper library dependency from v9 to v11.
12+
913
## [2.2.1] - 2023-09-27
1014

1115
### Fixed

‎packages/pluggableWidgets/carousel-web/package.json‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@mendix/carousel-web",
33
"widgetName": "Carousel",
4-
"version": "2.2.1",
4+
"version": "2.3.0",
55
"description": "Displays images in a carousel",
66
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
77
"license": "Apache-2.0",
@@ -44,7 +44,7 @@
4444
"dependencies": {
4545
"@mendix/widget-plugin-component-kit": "workspace:*",
4646
"classnames": "^2.5.1",
47-
"swiper": "^9.4.1"
47+
"swiper": "^11.2.10"
4848
},
4949
"devDependencies": {
5050
"@mendix/automation-utils": "workspace:*",
@@ -53,10 +53,6 @@
5353
"@mendix/prettier-config-web-widgets": "workspace:*",
5454
"@mendix/run-e2e": "workspace:*",
5555
"@mendix/widget-plugin-platform": "workspace:*",
56-
"cross-env": "^7.0.3",
57-
"mime-types": "^2.1.35",
58-
"postcss": "^8.5.6",
59-
"postcss-url": "^10.1.3",
60-
"shelljs": "^0.8.5"
56+
"cross-env": "^7.0.3"
6157
}
6258
}

‎packages/pluggableWidgets/carousel-web/rollup.config.mjs‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎packages/pluggableWidgets/carousel-web/src/Carousel.tsx‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
import { createElement, ReactNode, useCallback, ReactElement, useId } from "react";
2-
import { ValueStatus, GUID, ObjectItem } from "mendix";
31
import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
2+
import classNames from "classnames";
3+
import { GUID, ObjectItem, ValueStatus } from "mendix";
4+
import { createElement, ReactNode, useCallback, useId } from "react";
45
import { CarouselContainerProps } from "../typings/CarouselProps";
56
import { Carousel as CarouselComponent } from "./components/Carousel";
6-
import loadingCircleSvg from "./ui/loading-circle.svg";
7-
import classNames from "classnames";
87
import "./ui/Carousel.scss";
8+
import loadingCircleSvg from "./ui/loading-circle.svg";
99

1010
export function Carousel(props: CarouselContainerProps): ReactNode {
1111
const { showPagination, loop, tabIndex, navigation, animation, delay, autoplay } = props;
1212
const onClick = useCallback(() => executeAction(props.onClickAction), [props.onClickAction]);
1313
const id = useId();
1414

15-
const renderCarousel = (): ReactElement => {
16-
return (
17-
<CarouselComponent
18-
id={id}
19-
className={props.class}
20-
tabIndex={tabIndex}
21-
pagination={showPagination}
22-
loop={loop}
23-
animation={animation}
24-
autoplay={autoplay}
25-
delay={delay}
26-
navigation={navigation}
27-
items={
28-
props.dataSource?.items?.map((item: ObjectItem) => ({
29-
id: item.id as GUID,
30-
content: props.content?.get(item)
31-
})) ?? []
32-
}
33-
onClick={onClick}
34-
/>
35-
);
36-
};
37-
const renderLoading = (): ReactNode => {
15+
if (props.dataSource?.status !== ValueStatus.Available) {
3816
return (
3917
<div className={classNames(props.class, "widget-carousel")} tabIndex={tabIndex}>
4018
<img src={loadingCircleSvg} className="widget-carousel-loading-spinner" alt="" aria-hidden />
4119
</div>
4220
);
43-
};
21+
}
4422

45-
return props.dataSource?.status !== ValueStatus.Available ? renderLoading() : renderCarousel();
23+
return (
24+
<CarouselComponent
25+
id={id}
26+
className={props.class}
27+
tabIndex={tabIndex}
28+
pagination={showPagination}
29+
loop={loop}
30+
animation={animation}
31+
autoplay={autoplay}
32+
delay={delay}
33+
navigation={navigation}
34+
items={
35+
props.dataSource?.items?.map((item: ObjectItem) => ({
36+
id: item.id as GUID,
37+
content: props.content?.get(item)
38+
})) ?? []
39+
}
40+
onClick={onClick}
41+
/>
42+
);
4643
}

‎packages/pluggableWidgets/carousel-web/src/components/Carousel.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { createElement, ReactNode, ReactElement, useCallback, useState } from "react";
22
import { GUID } from "mendix";
33
import classNames from "classnames";
4-
import { SwiperOptions, A11y, Navigation, Pagination, EffectFade, Autoplay } from "swiper";
5-
import { Swiper as ReactSwiper, SwiperClass, SwiperSlide } from "swiper/react";
6-
import { PaginationOptions } from "swiper/types";
4+
import { A11y, Navigation, Pagination, EffectFade, Autoplay } from "swiper/modules";
5+
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
6+
import { PaginationOptions, SwiperOptions } from "swiper/types";
7+
import "swiper/css";
8+
import "swiper/css/bundle";
79

810
interface CarouselItem {
911
id: GUID;
@@ -68,7 +70,7 @@ export function Carousel(props: CarouselProps): ReactElement {
6870

6971
return (
7072
<div className={classNames(className, "widget-carousel")} tabIndex={tabIndex}>
71-
<ReactSwiper
73+
<Swiper
7274
onActiveIndexChange={updateSwiperIndex}
7375
wrapperTag={"ul"}
7476
{...options}
@@ -80,7 +82,7 @@ export function Carousel(props: CarouselProps): ReactElement {
8082
{item.content}
8183
</SwiperSlide>
8284
))}
83-
</ReactSwiper>
85+
</Swiper>
8486
</div>
8587
);
8688
}

‎packages/pluggableWidgets/carousel-web/src/package.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="Carousel" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="Carousel" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="Carousel.xml" />
66
</widgetFiles>

‎packages/pluggableWidgets/carousel-web/src/ui/Carousel.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@use "~swiper/swiper";
2-
@use "~swiper/swiper-bundle.css";
3-
41
.swiper {
52
width: 100%;
63
height: 100%;

‎pnpm-lock.yaml‎

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

0 commit comments

Comments
 (0)