Skip to content

Commit 4c69b0c

Browse files
author
Mariela Tihova
authored
Update Carousel samples for react 19 (#846)
1 parent 0ff143f commit 4c69b0c

4 files changed

Lines changed: 70 additions & 97 deletions

File tree

‎samples/layouts/carousel/animations/src/index.tsx‎

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,36 @@
1-
import React, { useRef } from "react";
1+
import React, { useRef, useState } from "react";
22
import ReactDOM from "react-dom/client";
33
import {
4-
CarouselAnimationType,
4+
HorizontalTransitionAnimation,
55
IgrButton,
6-
IgrButtonModule,
76
IgrCard,
87
IgrCardActions,
98
IgrCardContent,
109
IgrCardHeader,
1110
IgrCardMedia,
12-
IgrCardModule,
1311
IgrCarousel,
14-
IgrCarouselModule,
1512
IgrCarouselSlide,
1613
IgrCheckboxChangeEventArgs,
1714
IgrSelect,
1815
IgrSelectItem,
19-
IgrSelectModule,
2016
IgrSwitch,
21-
IgrSwitchModule,
2217
} from "igniteui-react";
2318
import "igniteui-webcomponents/themes/light/bootstrap.css";
2419
import "./CarouselAnimations.css";
2520
import "./index.css";
2621

27-
IgrButtonModule.register();
28-
IgrCarouselModule.register();
29-
IgrSelectModule.register();
30-
IgrSwitchModule.register();
31-
IgrCardModule.register();
32-
3322
export default function CarouselComponents() {
34-
const carouselRef = useRef<IgrCarousel>(null);
3523

36-
function onSelectChange(e: CustomEvent<IgrSelectItem>) {
37-
const value = e.detail.value as CarouselAnimationType;
38-
carouselRef.current.animationType = value;
24+
const [animationType, setAnimationType] = useState<HorizontalTransitionAnimation>('slide');
25+
const [isCarouselVertical, setIsCarouselVertical] = useState<boolean>(false);
26+
27+
const onSelectChange = (e: CustomEvent<IgrSelectItem>) => {
28+
const value = e.detail.value as HorizontalTransitionAnimation;
29+
setAnimationType(value);
3930
}
4031

41-
function onSwitchChange(e: IgrCheckboxChangeEventArgs) {
42-
carouselRef.current.vertical = e.detail.checked;
32+
const onSwitchChange = (e: IgrCheckboxChangeEventArgs) => {
33+
setIsCarouselVertical(e.detail.checked);
4334
}
4435

4536
return (
@@ -48,14 +39,14 @@ export default function CarouselComponents() {
4839
<div className="action">
4940
<span>Animation type</span>
5041
<IgrSelect onChange={onSelectChange}>
51-
<IgrSelectItem value="slide" selected={true} key="slide">
52-
<span key="select-span">Slide</span>
42+
<IgrSelectItem value="slide" selected={true}>
43+
<span>Slide</span>
5344
</IgrSelectItem>
54-
<IgrSelectItem value="fade" key="fade">
55-
<span key="select-span">Fade</span>
45+
<IgrSelectItem value="fade">
46+
<span>Fade</span>
5647
</IgrSelectItem>
57-
<IgrSelectItem value="none" key="none">
58-
<span key="select-span">None</span>
48+
<IgrSelectItem value="none">
49+
<span>None</span>
5950
</IgrSelectItem>
6051
</IgrSelect>
6152
</div>
@@ -64,108 +55,105 @@ export default function CarouselComponents() {
6455
onChange={onSwitchChange}
6556
labelPosition="before"
6657
>
67-
<span key="switch-span">Vertical alignment</span>
58+
<span>Vertical alignment</span>
6859
</IgrSwitch>
6960
</div>
7061
</div>
71-
<IgrCarousel hideIndicators={true} ref={carouselRef}>
72-
<IgrCarouselSlide key="slide-1">
73-
<div className="slide-wrapper" key="card-wrapper">
62+
<IgrCarousel
63+
hideIndicators={true}
64+
animationType={animationType}
65+
vertical={isCarouselVertical}>
66+
<IgrCarouselSlide>
67+
<div className="slide-wrapper">
7468
<IgrCard>
75-
<IgrCardHeader key="card-header">
76-
<h3 slot="title" key="header-title">
69+
<IgrCardHeader>
70+
<h3 slot="title">
7771
Ignite UI for Angular
7872
</h3>
7973
</IgrCardHeader>
80-
<IgrCardContent key="card-content">
81-
<p key="content">
74+
<IgrCardContent>
75+
<p>
8276
30+ Material-based Angular components to code speedy web apps
8377
faster.
8478
</p>
8579
</IgrCardContent>
86-
<IgrCardMedia key="card-media">
80+
<IgrCardMedia>
8781
<img
8882
src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide1-angular.png"
89-
key="img"
9083
/>
9184
</IgrCardMedia>
92-
<IgrCardActions key="card-actions">
85+
<IgrCardActions>
9386
<IgrButton
9487
slot="start"
9588
href="https://www.infragistics.com/products/ignite-ui-angular"
9689
target="_blank"
9790
rel="noopener"
98-
key="button"
9991
>
100-
<span key="button-span">Visit Page</span>
92+
<span>Visit Page</span>
10193
</IgrButton>
10294
</IgrCardActions>
10395
</IgrCard>
10496
</div>
10597
</IgrCarouselSlide>
106-
<IgrCarouselSlide key="slide-2">
107-
<div className="slide-wrapper" key="card-wrapper">
98+
<IgrCarouselSlide>
99+
<div className="slide-wrapper">
108100
<IgrCard>
109-
<IgrCardHeader key="card-header">
110-
<h3 slot="title" key="header-title">
101+
<IgrCardHeader>
102+
<h3 slot="title">
111103
Ignite UI for Javascript
112104
</h3>
113105
</IgrCardHeader>
114-
<IgrCardContent key="card-content">
115-
<p key="content">
106+
<IgrCardContent>
107+
<p>
116108
A complete JavaScript UI library empowering you to build
117109
data-rich responsive web apps.
118110
</p>
119111
</IgrCardContent>
120-
<IgrCardMedia key="card-media">
112+
<IgrCardMedia>
121113
<img
122114
src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide2-ignite.png"
123-
key="img"
124115
/>
125116
</IgrCardMedia>
126-
<IgrCardActions key="card-actions">
117+
<IgrCardActions>
127118
<IgrButton
128119
slot="start"
129120
href="https://www.infragistics.com/products/ignite-ui"
130121
target="_blank"
131122
rel="noopener"
132-
key="button"
133123
>
134-
<span key="button-span">Visit Page</span>
124+
<span>Visit Page</span>
135125
</IgrButton>
136126
</IgrCardActions>
137127
</IgrCard>
138128
</div>
139129
</IgrCarouselSlide>
140-
<IgrCarouselSlide key="slide-3">
141-
<div className="slide-wrapper" key="card-wrapper">
130+
<IgrCarouselSlide>
131+
<div className="slide-wrapper">
142132
<IgrCard>
143-
<IgrCardHeader key="card-header">
144-
<h3 slot="title" key="header-title">
133+
<IgrCardHeader>
134+
<h3 slot="title">
145135
Ultimate UI for ASP.NET
146136
</h3>
147137
</IgrCardHeader>
148-
<IgrCardContent key="card-content">
149-
<p key="content">
138+
<IgrCardContent>
139+
<p>
150140
Build full-featured business apps with the most versatile set
151141
of ASP.NET AJAX UI controls.
152142
</p>
153143
</IgrCardContent>
154-
<IgrCardMedia key="card-media">
144+
<IgrCardMedia>
155145
<img
156146
src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slide3-aspnet.png"
157-
key="img"
158147
/>
159148
</IgrCardMedia>
160-
<IgrCardActions key="card-actions">
149+
<IgrCardActions>
161150
<IgrButton
162151
slot="start"
163152
href="https://www.infragistics.com/products/aspnet"
164153
target="_blank"
165154
rel="noopener"
166-
key="button"
167155
>
168-
<span key="button-span">Visit Page</span>
156+
<span>Visit Page</span>
169157
</IgrButton>
170158
</IgrCardActions>
171159
</IgrCard>
@@ -176,6 +164,6 @@ export default function CarouselComponents() {
176164
);
177165
}
178166

179-
// rendering above class to the React DOM
167+
// rendering above component to the React DOM
180168
const root = ReactDOM.createRoot(document.getElementById("root"));
181169
root.render(<CarouselComponents />);

‎samples/layouts/carousel/components/src/index.tsx‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,16 @@ import React, { useEffect } from "react";
22
import ReactDOM from "react-dom/client";
33
import {
44
IgrButton,
5-
IgrButtonModule,
65
IgrCarousel,
7-
IgrCarouselModule,
86
IgrCarouselSlide,
97
IgrIcon,
10-
IgrIconModule,
118
IgrInput,
12-
IgrInputModule,
139
registerIconFromText,
1410
} from "igniteui-react";
1511
import "igniteui-webcomponents/themes/light/bootstrap.css";
1612
import "./CarouselComponents.css";
1713
import "./index.css";
1814

19-
IgrButtonModule.register();
20-
IgrCarouselModule.register();
21-
IgrIconModule.register();
22-
IgrInputModule.register();
23-
2415
const icons = [
2516
{
2617
name: "person",
@@ -49,31 +40,31 @@ export default function CarouselComponents() {
4940
return (
5041
<div className="carousel-container">
5142
<IgrCarousel>
52-
<IgrCarouselSlide key="slide-1">
53-
<div key="slide-content">
43+
<IgrCarouselSlide>
44+
<div>
5445
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/SignUp.svg" />
5546
<form>
5647
<IgrInput type="text" placeholder="Username">
57-
<IgrIcon slot="prefix" name="person" key="icon"></IgrIcon>
48+
<IgrIcon slot="prefix" name="person"></IgrIcon>
5849
</IgrInput>
5950
<IgrInput type="password" placeholder="Password">
60-
<IgrIcon slot="prefix" name="password" key="icon"></IgrIcon>
51+
<IgrIcon slot="prefix" name="password"></IgrIcon>
6152
</IgrInput>
6253
<IgrButton type="reset">
63-
<span key="button-span">Sign In</span>
54+
<span>Sign In</span>
6455
</IgrButton>
6556
</form>
6657
</div>
6758
</IgrCarouselSlide>
68-
<IgrCarouselSlide key="slide-2">
69-
<div key="slide-content">
59+
<IgrCarouselSlide>
60+
<div>
7061
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/svg/carousel/Route.svg" />
7162
<form>
7263
<IgrInput type="text" placeholder="Search">
73-
<IgrIcon slot="prefix" name="search" key="icon"></IgrIcon>
64+
<IgrIcon slot="prefix" name="search"></IgrIcon>
7465
</IgrInput>
7566
<IgrButton type="reset">
76-
<span key="button-span">Search</span>
67+
<span>Search</span>
7768
</IgrButton>
7869
</form>
7970
</div>
@@ -83,6 +74,6 @@ export default function CarouselComponents() {
8374
);
8475
}
8576

86-
// rendering above class to the React DOM
77+
// rendering above component to the React DOM
8778
const root = ReactDOM.createRoot(document.getElementById("root"));
8879
root.render(<CarouselComponents />);

‎samples/layouts/carousel/overview/src/index.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,29 @@ import React from "react";
22
import ReactDOM from "react-dom/client";
33
import {
44
IgrCarousel,
5-
IgrCarouselModule,
65
IgrCarouselSlide,
76
} from "igniteui-react";
87
import "igniteui-webcomponents/themes/light/bootstrap.css";
98
import "./CarouselOverview.css";
109
import "./index.css";
1110

12-
IgrCarouselModule.register();
1311

1412
export default function CarouselOverview() {
1513
return (
1614
<div className="carousel-container">
1715
<IgrCarousel>
18-
<IgrCarouselSlide key="slide-1">
19-
<div className="image-container" key="image-container">
16+
<IgrCarouselSlide>
17+
<div className="image-container">
2018
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-indigo-design.png" />
2119
</div>
2220
</IgrCarouselSlide>
23-
<IgrCarouselSlide key="slide-2">
24-
<div className="image-container" key="image-container">
21+
<IgrCarouselSlide>
22+
<div className="image-container">
2523
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/slider-image-chart.png" />
2624
</div>
2725
</IgrCarouselSlide>
28-
<IgrCarouselSlide key="slide-3">
29-
<div className="image-container" key="image-container">
26+
<IgrCarouselSlide>
27+
<div className="image-container">
3028
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/ignite-ui-angular-charts.png" />
3129
</div>
3230
</IgrCarouselSlide>
@@ -35,6 +33,6 @@ export default function CarouselOverview() {
3533
);
3634
}
3735

38-
// rendering above class to the React DOM
36+
// rendering above component to the React DOM
3937
const root = ReactDOM.createRoot(document.getElementById("root"));
4038
root.render(<CarouselOverview />);

‎samples/layouts/carousel/thumbnail/src/index.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import ReactDOM from "react-dom/client";
33
import {
44
IgrCarousel,
55
IgrCarouselIndicator,
6-
IgrCarouselModule,
76
IgrCarouselSlide,
87
} from "igniteui-react";
98
import "igniteui-webcomponents/themes/light/bootstrap.css";
109
import "./CarouselThumbnail.css";
1110
import "./index.css";
1211

13-
IgrCarouselModule.register();
1412

1513
export default function CarouselThumbnail() {
1614
const images = [
@@ -48,20 +46,18 @@ export default function CarouselThumbnail() {
4846
{images.map((image, index) => {
4947
return (
5048
<React.Fragment key={index}>
51-
<IgrCarouselSlide key={`slide-${index}`}>
52-
<img src={image.src} alt={image.alt} key="slide-img" />
49+
<IgrCarouselSlide>
50+
<img src={image.src} alt={image.alt} />
5351
</IgrCarouselSlide>
54-
<IgrCarouselIndicator key={`indicator-${index}`}>
52+
<IgrCarouselIndicator>
5553
<img
56-
key="img-blur"
5754
className="blurred"
5855
src={image.src.replace(".png", "Thumb.png")}
5956
alt={`${image.alt} Thumb`}
6057
width="50"
6158
height="60"
6259
/>
6360
<img
64-
key="img-active"
6561
slot="active"
6662
src={image.src.replace(".png", "Thumb.png")}
6763
alt={`${image.alt} Thumb Active`}
@@ -77,6 +73,6 @@ export default function CarouselThumbnail() {
7773
);
7874
}
7975

80-
// rendering above class to the React DOM
76+
// rendering above component to the React DOM
8177
const root = ReactDOM.createRoot(document.getElementById("root"));
8278
root.render(<CarouselThumbnail />);

0 commit comments

Comments
 (0)