Skip to content

Commit ee79b4b

Browse files
author
Mariela Tihova
authored
refactor: Accordion samples update for react v19 (#834)
1 parent 0884270 commit ee79b4b

File tree

3 files changed

+348
-320
lines changed

3 files changed

+348
-320
lines changed

‎samples/layouts/accordion/customization/src/index.tsx‎

Lines changed: 209 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,224 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import './AccordionCustomization.css';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
4+
import "./AccordionCustomization.css";
55
import {
6-
IgrAccordion, IgrAccordionModule, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrCheckboxModule,
7-
IgrDateTimeInput, IgrDateTimeInputModule, IgrExpansionPanel, IgrExpansionPanelModule, IgrIcon,
8-
IgrIconModule, IgrRadio, IgrRadioModule, IgrRadioGroup, IgrRadioGroupModule, IgrRating,
9-
IgrRatingModule, IgrRangeSlider, IgrRangeSliderModule, IgrRadioChangeEventArgs,
10-
IgrRangeSliderValueEventArgs, IgrComponentDateValueChangedEventArgs, registerIconFromText
11-
} from 'igniteui-react';
12-
import 'igniteui-webcomponents/themes/light/bootstrap.css';
13-
14-
IgrAccordionModule.register();
15-
IgrCheckboxModule.register();
16-
IgrDateTimeInputModule.register();
17-
IgrExpansionPanelModule.register();
18-
IgrIconModule.register();
19-
IgrRadioModule.register();
20-
IgrRadioGroupModule.register();
21-
IgrRangeSliderModule.register();
22-
IgrRatingModule.register();
6+
IgrAccordion,
7+
IgrCheckbox,
8+
IgrCheckboxChangeEventArgs,
9+
IgrDateTimeInput,
10+
IgrExpansionPanel,
11+
IgrIcon,
12+
IgrRadio,
13+
IgrRadioGroup,
14+
IgrRating,
15+
IgrRangeSlider,
16+
IgrRadioChangeEventArgs,
17+
IgrRangeSliderValueEventArgs,
18+
IgrComponentDateValueChangedEventArgs,
19+
registerIconFromText,
20+
} from "igniteui-react";
21+
import "igniteui-webcomponents/themes/light/bootstrap.css";
2322

2423
type Category = { checked: boolean; type: string };
2524

2625
const clearIcon =
27-
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>";
26+
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg>";
2827
const clockIcon =
29-
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z' /></svg>";
28+
"<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'><path d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z' /></svg>";
3029

3130
export default class AccordionCustomization extends React.Component<any, any> {
32-
private categories = [
33-
{ checked: false, type: "Bike" },
34-
{ checked: false, type: "Motorcycle" },
35-
{ checked: false, type: "Car" },
36-
{ checked: false, type: "Taxi" },
37-
{ checked: false, type: "Public Transport" }
38-
];
39-
40-
private dateTimeInput: IgrDateTimeInput;
41-
42-
constructor(props: any) {
43-
super(props);
44-
this.state = {
45-
categories: this.categories,
46-
cost: { lower: 200, upper: 800 },
47-
rating: '',
48-
time: 'Time'
49-
};
50-
51-
this.categoriesChange = this.categoriesChange.bind(this);
52-
this.costRangeChange = this.costRangeChange.bind(this);
53-
this.ratingChange = this.ratingChange.bind(this);
54-
this.timeChange = this.timeChange.bind(this);
55-
this.clearTime = this.clearTime.bind(this);
56-
this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
57-
58-
registerIconFromText("clear", clearIcon, "material");
59-
registerIconFromText("clock", clockIcon, "material");
60-
}
61-
62-
public render(): JSX.Element {
63-
return (
64-
<div id="root">
65-
<div className="sample-wrapper">
66-
<IgrAccordion>
67-
<IgrExpansionPanel key="ep1">
68-
<h1 slot="title" key="ep1Title">
69-
Categories
70-
{this.state.categories.some((c: Category) => c.checked) && ': '}
71-
{this.state.categories.filter((c: Category) => c.checked).map((c: Category) => c.type).join(', ')}
72-
</h1>
73-
<span key="ep1Span">
74-
<div className="categories-container">
75-
{this.state.categories.map((c: Category) => {
76-
return (
77-
<IgrCheckbox key={'checkbox-' + c.type}
78-
onChange={(e: IgrCheckboxChangeEventArgs) => this.categoriesChange(e, c.type)}>
79-
<span key={'cbSpan-' + c.type}>{c.type}</span>
80-
</IgrCheckbox>
81-
);
82-
})}
83-
</div>
84-
</span>
85-
</IgrExpansionPanel>
86-
<IgrExpansionPanel key="ep2">
87-
<h1 slot="title" key="ep2Title">
88-
Cost: $<span id="lowerCost">{this.state.cost.lower}</span> to $<span id="upperCost">{this.state.cost.upper}</span>
89-
</h1>
90-
<span key="ep2Span">
91-
<IgrRangeSlider key="rangeSlider" min={0} max={1000} lower={this.state.cost.lower} upper={this.state.cost.upper}
92-
onChange={this.costRangeChange}>
93-
</IgrRangeSlider>
94-
</span>
95-
</IgrExpansionPanel>
96-
<IgrExpansionPanel key="ep3">
97-
<h1 slot="title" key="ep3Title">Rating{this.state.rating && ': '}{this.state.rating}</h1>
98-
<span key="ep3Span">
99-
<IgrRadioGroup key="radio" alignment="horizontal">
100-
{[1, 2, 3, 4].map(rating => {
101-
return (
102-
<IgrRadio key={`${rating}star`} name="rating" value={rating.toString()} onChange={this.ratingChange}>
103-
<IgrRating label={`${rating} star${rating > 1 ? 's' : ''} or more`} max={5} value={rating + 0.5}
104-
className="size-small" readOnly={true} key={`{r-${rating}}`}>
105-
</IgrRating>
106-
</IgrRadio>
107-
);
108-
})}
109-
</IgrRadioGroup>
110-
</span>
111-
</IgrExpansionPanel>
112-
<IgrExpansionPanel key="ep4">
113-
<h1 slot="title" key="ep4Title">{this.state.time}</h1>
114-
<span key="ep4Span">
115-
<IgrDateTimeInput className="size-small" key="dtInput" inputFormat="hh:mm tt" label="Arrive before"
116-
ref={this.dateTimeInputRef} onChange={this.timeChange}>
117-
<span key="sPrefix" slot="prefix">
118-
<IgrIcon name="clock" collection="material" />
119-
</span>
120-
<span key="sSuffix" slot="suffix" onClick={this.clearTime}>
121-
<IgrIcon name="clear" collection="material" />
122-
</span>
123-
</IgrDateTimeInput>
124-
</span>
125-
</IgrExpansionPanel>
126-
</IgrAccordion>
31+
private categories = [
32+
{ checked: false, type: "Bike" },
33+
{ checked: false, type: "Motorcycle" },
34+
{ checked: false, type: "Car" },
35+
{ checked: false, type: "Taxi" },
36+
{ checked: false, type: "Public Transport" },
37+
];
38+
39+
private dateTimeInput: IgrDateTimeInput;
40+
41+
constructor(props: any) {
42+
super(props);
43+
this.state = {
44+
categories: this.categories,
45+
cost: { lower: 200, upper: 800 },
46+
rating: "",
47+
time: "Time",
48+
};
49+
50+
this.categoriesChange = this.categoriesChange.bind(this);
51+
this.costRangeChange = this.costRangeChange.bind(this);
52+
this.ratingChange = this.ratingChange.bind(this);
53+
this.timeChange = this.timeChange.bind(this);
54+
this.clearTime = this.clearTime.bind(this);
55+
this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
56+
57+
registerIconFromText("clear", clearIcon, "material");
58+
registerIconFromText("clock", clockIcon, "material");
59+
}
60+
61+
public render(): JSX.Element {
62+
return (
63+
<div id="root">
64+
<div className="sample-wrapper">
65+
<IgrAccordion>
66+
<IgrExpansionPanel>
67+
<h1 slot="title">
68+
Categories
69+
{this.state.categories.some((c: Category) => c.checked) && ": "}
70+
{this.state.categories
71+
.filter((c: Category) => c.checked)
72+
.map((c: Category) => c.type)
73+
.join(", ")}
74+
</h1>
75+
<span>
76+
<div className="categories-container">
77+
{this.state.categories.map((c: Category) => {
78+
return (
79+
<IgrCheckbox
80+
key={"checkbox-" + c.type}
81+
onChange={(e: IgrCheckboxChangeEventArgs) =>
82+
this.categoriesChange(e, c.type)
83+
}
84+
>
85+
<span>{c.type}</span>
86+
</IgrCheckbox>
87+
);
88+
})}
12789
</div>
128-
</div>
129-
);
90+
</span>
91+
</IgrExpansionPanel>
92+
<IgrExpansionPanel>
93+
<h1 slot="title">
94+
Cost: $<span id="lowerCost">{this.state.cost.lower}</span> to $
95+
<span id="upperCost">{this.state.cost.upper}</span>
96+
</h1>
97+
<span>
98+
<IgrRangeSlider
99+
min={0}
100+
max={1000}
101+
lower={this.state.cost.lower}
102+
upper={this.state.cost.upper}
103+
onChange={this.costRangeChange}
104+
></IgrRangeSlider>
105+
</span>
106+
</IgrExpansionPanel>
107+
<IgrExpansionPanel>
108+
<h1 slot="title">
109+
Rating{this.state.rating && ": "}
110+
{this.state.rating}
111+
</h1>
112+
<span>
113+
<IgrRadioGroup alignment="horizontal">
114+
{[1, 2, 3, 4].map((rating) => {
115+
return (
116+
<IgrRadio
117+
key={`${rating}star`}
118+
name="rating"
119+
value={rating.toString()}
120+
onChange={this.ratingChange}
121+
>
122+
<IgrRating
123+
label={`${rating} star${
124+
rating > 1 ? "s" : ""
125+
} or more`}
126+
max={5}
127+
value={rating + 0.5}
128+
className="size-small"
129+
readOnly={true}
130+
></IgrRating>
131+
</IgrRadio>
132+
);
133+
})}
134+
</IgrRadioGroup>
135+
</span>
136+
</IgrExpansionPanel>
137+
<IgrExpansionPanel>
138+
<h1 slot="title">
139+
{this.state.time}
140+
</h1>
141+
<span>
142+
<IgrDateTimeInput
143+
className="size-small"
144+
inputFormat="hh:mm tt"
145+
label="Arrive before"
146+
ref={this.dateTimeInputRef}
147+
onChange={this.timeChange}
148+
>
149+
<span slot="prefix">
150+
<IgrIcon name="clock" collection="material" />
151+
</span>
152+
<span slot="suffix" onClick={this.clearTime}>
153+
<IgrIcon name="clear" collection="material" />
154+
</span>
155+
</IgrDateTimeInput>
156+
</span>
157+
</IgrExpansionPanel>
158+
</IgrAccordion>
159+
</div>
160+
</div>
161+
);
162+
}
163+
164+
public categoriesChange(e: IgrCheckboxChangeEventArgs, type: string) {
165+
const categoryIndex = this.categories.findIndex((c) => c.type === type);
166+
if (categoryIndex === -1) {
167+
return;
130168
}
131-
132-
public categoriesChange(e: IgrCheckboxChangeEventArgs, type: string) {
133-
const categoryIndex = this.categories.findIndex(c => c.type === type);
134-
if (categoryIndex === -1) { return; }
135-
let categoriesCopy = this.state.categories;
136-
categoriesCopy[categoryIndex].checked = e.detail.checked;
137-
this.setState({
138-
categories: categoriesCopy
139-
});
169+
let categoriesCopy = this.state.categories;
170+
categoriesCopy[categoryIndex].checked = e.detail.checked;
171+
this.setState({
172+
categories: categoriesCopy,
173+
});
174+
}
175+
176+
public costRangeChange(e: IgrRangeSliderValueEventArgs) {
177+
this.setState({
178+
cost: { lower: e.detail.lower, upper: e.detail.upper },
179+
});
180+
}
181+
182+
public ratingChange(e: IgrRadioChangeEventArgs) {
183+
if (!e.detail.value) {
184+
return;
140185
}
141-
142-
public costRangeChange(e: IgrRangeSliderValueEventArgs) {
143-
this.setState({
144-
cost: { lower: e.detail.lower, upper: e.detail.upper }
145-
});
146-
}
147-
148-
public ratingChange(e: IgrRadioChangeEventArgs) {
149-
if (!e.detail.value) { return; }
150-
this.setState({
151-
rating: `${+e.detail.value} star${+e.detail.value > 1 ? 's' : ''} or more`
152-
});
153-
}
154-
155-
public timeChange(e: IgrComponentDateValueChangedEventArgs) {
156-
const s = e.target as IgrDateTimeInput;
157-
const result = s.value !== null ? `Arrive before ${e.detail.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` : 'Time';
158-
this.setState({
159-
time: result
160-
});
161-
}
162-
163-
public clearTime() {
164-
this.dateTimeInput.clear(); this.setState({
165-
time: 'Time'
166-
});
167-
}
168-
169-
public dateTimeInputRef(input: IgrDateTimeInput) {
170-
if (!input) { return; }
171-
this.dateTimeInput = input;
186+
this.setState({
187+
rating: `${+e.detail.value} star${
188+
+e.detail.value > 1 ? "s" : ""
189+
} or more`,
190+
});
191+
}
192+
193+
public timeChange(e: IgrComponentDateValueChangedEventArgs) {
194+
const s = e.target as IgrDateTimeInput;
195+
const result =
196+
s.value !== null
197+
? `Arrive before ${e.detail.toLocaleTimeString([], {
198+
hour: "2-digit",
199+
minute: "2-digit",
200+
})}`
201+
: "Time";
202+
this.setState({
203+
time: result,
204+
});
205+
}
206+
207+
public clearTime() {
208+
this.dateTimeInput.clear();
209+
this.setState({
210+
time: "Time",
211+
});
212+
}
213+
214+
public dateTimeInputRef(input: IgrDateTimeInput) {
215+
if (!input) {
216+
return;
172217
}
218+
this.dateTimeInput = input;
219+
}
173220
}
174221

175-
// rendering above class to the React DOM
176-
const root = ReactDOM.createRoot(document.getElementById('root'));
222+
// rendering above component to the React DOM
223+
const root = ReactDOM.createRoot(document.getElementById("root"));
177224
root.render(<AccordionCustomization />);

0 commit comments

Comments
 (0)