Skip to content

Commit 6b3b787

Browse files
author
Mariela Tihova
authored
fix: Updated Stepper samples for react v19 (#847)
1 parent 857f693 commit 6b3b787

12 files changed

Lines changed: 991 additions & 263 deletions

File tree

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

Lines changed: 192 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,206 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
1+
import React, { useRef, useState } from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
44
import {
5-
IgrStepper, IgrStep, IgrStepperModule, IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule,
6-
IgrButton, IgrButtonModule, IgrInput, IgrInputModule, IgrSelect, IgrSelectItem, IgrSelectModule,
7-
IgrSelectItemComponentEventArgs, IgrComponentDataValueChangedEventArgs,
8-
IgrComponentValueChangedEventArgs
9-
} from 'igniteui-react';
10-
import 'igniteui-webcomponents/themes/light/bootstrap.css';
5+
IgrStepper,
6+
IgrStep,
7+
IgrRadio,
8+
IgrRadioGroup,
9+
IgrButton,
10+
IgrInput,
11+
IgrSelect,
12+
IgrSelectItem,
13+
IgrSelectItemComponentEventArgs,
14+
IgrComponentValueChangedEventArgs,
15+
StepperOrientation,
16+
HorizontalTransitionAnimation,
17+
StepperVerticalAnimation,
18+
} from "igniteui-react";
19+
import "igniteui-webcomponents/themes/light/bootstrap.css";
1120

12-
IgrStepperModule.register();
13-
IgrInputModule.register();
14-
IgrRadioModule.register();
15-
IgrRadioGroupModule.register();
16-
IgrButtonModule.register();
17-
IgrSelectModule.register();
21+
export default function StepperAnimations() {
1822

19-
export default class StepperAnimations extends React.Component<any, any> {
20-
private stepperRef = React.createRef<IgrStepper>();
21-
constructor(props: any) {
22-
super(props);
23-
this.state = { orientation: 'horizontal', horizontalAnimation: 'slide', verticalAnimation: 'grow', animationDuration: "320" };
24-
this.orientationChange = this.orientationChange.bind(this);
25-
this.horizontalAnimationChange = this.horizontalAnimationChange.bind(this);
26-
this.verticalAnimationChange = this.verticalAnimationChange.bind(this);
27-
this.animationDurationChange = this.animationDurationChange.bind(this);
23+
const stepperRef = useRef<IgrStepper>(null);
24+
const [orientation, setOrientation] = useState<StepperOrientation>("horizontal");
25+
const [horizontalAnimation, setHorizontalAnimation] = useState<HorizontalTransitionAnimation>("slide");
26+
const [verticalAnimation, setVerticalAnimation] = useState<StepperVerticalAnimation>("grow");
27+
const [animationDuration, setAnimationDuration] = useState("320");
28+
29+
30+
const orientationChange = (e: IgrSelectItemComponentEventArgs) => {
31+
const selectedValue = e.detail.value as StepperOrientation;
32+
setOrientation(selectedValue);
2833
}
34+
35+
const horizontalAnimationChange = (e: IgrSelectItemComponentEventArgs) => {
36+
const selectedValue = e.detail.value as HorizontalTransitionAnimation;
37+
setHorizontalAnimation(selectedValue);
2938

30-
public render(): JSX.Element {
31-
return (
32-
<div className="container sample">
33-
<article className="settings">
34-
<IgrSelect label="Orienation" onChange={this.orientationChange}>
35-
<IgrSelectItem key="horizontal-item" value="horizontal" selected><span key="horizontal">Horizontal</span></IgrSelectItem>
36-
<IgrSelectItem key="vertical-item" value="vertical"><span key="vertical">Vertical</span></IgrSelectItem>
37-
</IgrSelect>
38-
<IgrSelect label="Vertical Animation" onChange={this.verticalAnimationChange}>
39-
<IgrSelectItem key="grow-item" value="grow" selected><span key="grow">Grow</span></IgrSelectItem>
40-
<IgrSelectItem key="vertical-fade-item" value="fade"><span key="vertical-fade">Fade</span></IgrSelectItem>
41-
<IgrSelectItem key="vertical-none-item" value="none"><span key="vertical-none">None</span></IgrSelectItem>
42-
</IgrSelect>
43-
<IgrSelect label="Horizontal Animation" onChange={this.horizontalAnimationChange}>
44-
<IgrSelectItem key="slide-item" value="slide" selected><span key="slide">Slide</span></IgrSelectItem>
45-
<IgrSelectItem key="horizontal-fade-item" value="fade"><span key="horizontal-fade">Fade</span></IgrSelectItem>
46-
<IgrSelectItem key="horizontal-none-item" value="none"><span key="horizontal-none">None</span></IgrSelectItem>
47-
</IgrSelect>
48-
<IgrInput type="number" value="320" label="Duration" onChange={this.animationDurationChange}>
49-
<span key="duration-suffix" slot="suffix">ms</span>
50-
</IgrInput>
51-
</article>
39+
}
5240

53-
<IgrStepper ref={this.stepperRef} orientation={this.state.orientation}
54-
horizontalAnimation={this.state.horizontalAnimation} verticalAnimation={this.state.verticalAnimation}
55-
animationDuration={this.state.animationDuration} >
56-
<IgrStep key="info">
57-
<span key="info-title" slot="title">Personal Info</span>
58-
<form key="info-form">
59-
<IgrInput key="full-name" label="Full Name" type="text" name="fullName"></IgrInput>
60-
<IgrInput key="email" label="Email" type="email" name="email"></IgrInput>
41+
const verticalAnimationChange = (e: IgrSelectItemComponentEventArgs) => {
42+
const selectedValue = e.detail.value as StepperVerticalAnimation;
43+
setVerticalAnimation(selectedValue);
44+
}
6145

62-
<IgrButton key="info-next" onClick={() => { this.stepperRef.current.next(); }}><span key="info-label-next">NEXT</span></IgrButton>
63-
</form>
64-
</IgrStep>
65-
<IgrStep key="address">
66-
<span key="address-title" slot="title">Delivery address</span>
67-
<form key="address-form">
68-
<IgrInput key="city" label="City" type="text" name="city"></IgrInput>
69-
<IgrInput key="street" label="Street" type="text" name="street"></IgrInput>
46+
const animationDurationChange = (e: IgrComponentValueChangedEventArgs) => {
47+
const animationDuration = e.detail;
48+
setAnimationDuration(animationDuration);
49+
}
7050

71-
<IgrButton key="address-prev" onClick={() => { this.stepperRef.current.prev(); }}><span key="address-label-prev">PREVIOUS</span></IgrButton>
72-
<IgrButton key="address-next" onClick={() => { this.stepperRef.current.next(); }}><span key="address-label-next">NEXT</span></IgrButton>
73-
</form>
74-
</IgrStep>
75-
<IgrStep key="payment">
76-
<span key="payment-title" slot="title">Payment</span>
77-
<IgrRadioGroup key="payment-options">
78-
<IgrRadio key="pay-pal-radio" name="payment" checked><span key="pay-pal">PayPal (n@mail.com; 18/02/2021)</span></IgrRadio>
79-
<IgrRadio key="visa-radio" name="payment"><span key="visa">Visa (**** **** **** 1234; 12/23)</span></IgrRadio>
80-
<IgrRadio key="master-card-radio" name="payment"><span key="master-card">MasterCard (**** **** **** 5678; 12/24)</span></IgrRadio>
81-
</IgrRadioGroup>
51+
return (
52+
<div className="container sample">
53+
<article className="settings">
54+
<IgrSelect label="Orienation" onChange={orientationChange}>
55+
<IgrSelectItem value="horizontal" selected={orientation === 'horizontal'}>
56+
<span>Horizontal</span>
57+
</IgrSelectItem>
58+
<IgrSelectItem value="vertical">
59+
<span>Vertical</span>
60+
</IgrSelectItem>
61+
</IgrSelect>
62+
<IgrSelect
63+
label="Vertical Animation"
64+
onChange={verticalAnimationChange}
65+
>
66+
<IgrSelectItem value="grow" selected={verticalAnimation === 'grow'}>
67+
<span>Grow</span>
68+
</IgrSelectItem>
69+
<IgrSelectItem value="fade">
70+
<span>Fade</span>
71+
</IgrSelectItem>
72+
<IgrSelectItem value="none">
73+
<span>None</span>
74+
</IgrSelectItem>
75+
</IgrSelect>
76+
<IgrSelect
77+
label="Horizontal Animation"
78+
onChange={horizontalAnimationChange}
79+
>
80+
<IgrSelectItem value="slide" selected={horizontalAnimation === 'slide'}>
81+
<span>Slide</span>
82+
</IgrSelectItem>
83+
<IgrSelectItem value="fade">
84+
<span>Fade</span>
85+
</IgrSelectItem>
86+
<IgrSelectItem value="none">
87+
<span>None</span>
88+
</IgrSelectItem>
89+
</IgrSelect>
90+
<IgrInput
91+
type="number"
92+
value={animationDuration}
93+
label="Duration"
94+
onChange={animationDurationChange}
95+
>
96+
<span slot="suffix">ms</span>
97+
</IgrInput>
98+
</article>
8299

83-
<IgrButton key="payment-prev" onClick={() => { this.stepperRef.current.prev(); }}><span key="payment-label-prev">PREVIOUS</span></IgrButton>
84-
<IgrButton key="payment-next" onClick={() => { this.stepperRef.current.next(); }}><span key="address-label-submit">SUBMIT</span></IgrButton>
85-
</IgrStep>
86-
<IgrStep key="status">
87-
<span key="status-title" slot="title">Delivery status</span>
88-
<p key="status-text">Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.</p>
100+
<IgrStepper
101+
ref={stepperRef}
102+
orientation={orientation}
103+
horizontalAnimation={horizontalAnimation}
104+
verticalAnimation={verticalAnimation}
105+
animationDuration={+animationDuration}
106+
>
107+
<IgrStep>
108+
<span slot="title">Personal Info</span>
109+
<form>
110+
<IgrInput
111+
label="Full Name"
112+
type="text"
113+
name="fullName"
114+
></IgrInput>
115+
<IgrInput label="Email" type="email" name="email"></IgrInput>
89116

90-
<IgrButton key="status-prev" onClick={() => { this.stepperRef.current.prev(); }}><span key="status-label-prev">PREVIOUS</span></IgrButton>
91-
<IgrButton key="status-reset" onClick={() => { this.stepperRef.current.reset(); }}><span key="status-label-reset">RESET</span></IgrButton>
92-
</IgrStep>
93-
</IgrStepper>
94-
</div>
95-
);
96-
}
117+
<IgrButton
118+
onClick={() => {
119+
stepperRef.current.next();
120+
}}
121+
>
122+
<span>NEXT</span>
123+
</IgrButton>
124+
</form>
125+
</IgrStep>
126+
<IgrStep>
127+
<span slot="title">Delivery address</span>
128+
<form>
129+
<IgrInput label="City" type="text" name="city"></IgrInput>
130+
<IgrInput label="Street" type="text" name="street"></IgrInput>
97131

98-
public orientationChange(e: IgrSelectItemComponentEventArgs){
99-
const selectedValue = e.detail.value;
100-
this.setState({orientation: selectedValue});
101-
}
102-
public horizontalAnimationChange(e: IgrSelectItemComponentEventArgs){
103-
const selectedValue = e.detail.value;
104-
this.setState({horizontalAnimation: selectedValue});
105-
}
106-
public verticalAnimationChange(e: IgrSelectItemComponentEventArgs){
107-
const selectedValue = e.detail.value;
108-
this.setState({verticalAnimation: selectedValue});
109-
}
110-
public animationDurationChange(e: IgrComponentValueChangedEventArgs){
111-
const animationDuration = e.detail;
112-
this.setState({animationDuration: animationDuration});
113-
}
132+
<IgrButton
133+
onClick={() => {
134+
stepperRef.current.prev();
135+
}}
136+
>
137+
<span>PREVIOUS</span>
138+
</IgrButton>
139+
<IgrButton
140+
onClick={() => {
141+
stepperRef.current.next();
142+
}}
143+
>
144+
<span>NEXT</span>
145+
</IgrButton>
146+
</form>
147+
</IgrStep>
148+
<IgrStep>
149+
<span slot="title">Payment</span>
150+
<IgrRadioGroup>
151+
<IgrRadio name="payment" checked>
152+
<span>PayPal (n@mail.com; 18/02/2021)</span>
153+
</IgrRadio>
154+
<IgrRadio name="payment">
155+
<span>Visa (**** **** **** 1234; 12/23)</span>
156+
</IgrRadio>
157+
<IgrRadio name="payment">
158+
<span>MasterCard (**** **** **** 5678; 12/24)</span>
159+
</IgrRadio>
160+
</IgrRadioGroup>
161+
162+
<IgrButton
163+
onClick={() => {
164+
stepperRef.current.prev();
165+
}}
166+
>
167+
<span>PREVIOUS</span>
168+
</IgrButton>
169+
<IgrButton
170+
onClick={() => {
171+
stepperRef.current.next();
172+
}}
173+
>
174+
<span>SUBMIT</span>
175+
</IgrButton>
176+
</IgrStep>
177+
<IgrStep>
178+
<span slot="title">Delivery status</span>
179+
<p>
180+
Your order is on its way. Expect delivery on 25th September 2021.
181+
Delivery address: San Jose, CA 94243.
182+
</p>
183+
184+
<IgrButton
185+
onClick={() => {
186+
stepperRef.current.prev();
187+
}}
188+
>
189+
<span>PREVIOUS</span>
190+
</IgrButton>
191+
<IgrButton
192+
onClick={() => {
193+
stepperRef.current.reset();
194+
}}
195+
>
196+
<span>RESET</span>
197+
</IgrButton>
198+
</IgrStep>
199+
</IgrStepper>
200+
</div>
201+
);
114202
}
115203

116-
// rendering above class to the React DOM
117-
const root = ReactDOM.createRoot(document.getElementById('root'));
204+
// rendering above component to the React DOM
205+
const root = ReactDOM.createRoot(document.getElementById("root"));
118206
root.render(<StepperAnimations />);

0 commit comments

Comments
 (0)