Skip to content

Commit 916e69a

Browse files
tishko0tishko0
authored
Merge pull request #849 from IgniteUI/ttonev/combo-topic-modules-removal
removed module register from combo topics since its deprecated
1 parent fdb117b commit 916e69a

5 files changed

Lines changed: 44 additions & 72 deletions

File tree

‎samples/inputs/combo/features/src/index.tsx‎

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,15 @@
1-
import React, { useRef } from "react";
1+
import React, { useState } from "react";
22
import ReactDOM from "react-dom/client";
3-
import { IgrCheckboxChangeEventArgs, IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from "igniteui-react";
3+
import { IgrCombo, IgrSwitch } from "igniteui-react";
44
import "./index.css";
55
import "igniteui-webcomponents/themes/light/bootstrap.css";
66
import { Cities } from "./ComboData";
77

8-
IgrComboModule.register();
9-
IgrSwitchModule.register();
10-
118
export default function ComboFeatures() {
12-
const comboRef = useRef<IgrCombo>(null);
13-
const switchCaseSensitiveRef = useRef<IgrSwitch>(null);
14-
15-
const disableFiltering = (e: IgrCheckboxChangeEventArgs) => {
16-
comboRef.current.disableFiltering =
17-
switchCaseSensitiveRef.current.disabled = e.detail.checked;
18-
};
19-
20-
const showCaseSencitiveIcon = (e: IgrCheckboxChangeEventArgs) => {
21-
comboRef.current.caseSensitiveIcon = e.detail.checked;
22-
};
23-
24-
const enableGrouping = (e: IgrCheckboxChangeEventArgs) => {
25-
comboRef.current.groupKey = e.detail.checked ? "country" : undefined;
26-
};
27-
28-
const disableCombo = (e: IgrCheckboxChangeEventArgs) => {
29-
comboRef.current.disabled = e.detail.checked;
30-
};
9+
const [disableFiltering, setDisableFiltering] = useState(false);
10+
const [caseSensitiveIcon, setCaseSensitiveIcon] = useState(false);
11+
const [groupingEnabled, setGroupingEnabled] = useState(false);
12+
const [comboDisabled, setComboDisabled] = useState(false);
3113

3214
return (
3315
<div className="sample">
@@ -38,26 +20,29 @@ export default function ComboFeatures() {
3820
placeholder="Pick a city"
3921
placeholderSearch="Search for a city"
4022
data={Cities}
41-
ref={comboRef}
42-
></IgrCombo>
23+
disableFiltering={disableFiltering}
24+
caseSensitiveIcon={caseSensitiveIcon}
25+
groupKey={groupingEnabled ? "country" : undefined}
26+
disabled={comboDisabled}>
27+
</IgrCombo>
4328
<div className="options">
44-
<IgrSwitch onChange={disableFiltering}>
45-
<span key="filtering">Disable Filtering</span>
29+
<IgrSwitch checked={disableFiltering} onChange={e => setDisableFiltering(e.detail.checked)}>
30+
<span>Disable Filtering</span>
4631
</IgrSwitch>
47-
<IgrSwitch onChange={showCaseSencitiveIcon} ref={switchCaseSensitiveRef}>
48-
<span key="caseSensitive">Show Case-sensitive Icon</span>
32+
<IgrSwitch checked={caseSensitiveIcon} onChange={e => setCaseSensitiveIcon(e.detail.checked)}>
33+
<span>Show Case-sensitive Icon</span>
4934
</IgrSwitch>
50-
<IgrSwitch onChange={enableGrouping}>
51-
<span key="grouping">Enable Grouping</span>
35+
<IgrSwitch checked={groupingEnabled} onChange={e => setGroupingEnabled(e.detail.checked)}>
36+
<span>Enable Grouping</span>
5237
</IgrSwitch>
53-
<IgrSwitch onChange={disableCombo}>
54-
<span key="disabled">Disable Combo</span>
38+
<IgrSwitch checked={comboDisabled} onChange={e => setComboDisabled(e.detail.checked)}>
39+
<span>Disable Combo</span>
5540
</IgrSwitch>
5641
</div>
5742
</div>
5843
);
5944
}
6045

61-
// rendering above class to the React DOM
46+
// rendering above function to the React DOM
6247
const root = ReactDOM.createRoot(document.getElementById("root"));
6348
root.render(<ComboFeatures />);

‎samples/inputs/combo/overview/src/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
3-
import { IgrComboModule, IgrCombo } from "igniteui-react";
3+
import { IgrCombo } from "igniteui-react";
44
import "igniteui-webcomponents/themes/light/bootstrap.css";
55

6-
IgrComboModule.register();
7-
86
interface City {
97
id: string;
108
name: string;

‎samples/inputs/combo/selection/src/index.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import React, { useRef } from "react";
22
import ReactDOM from "react-dom/client";
3-
import { IgrComboModule, IgrCombo, IgrButtonModule, IgrButton } from "igniteui-react";
3+
import { IgrCombo, IgrButton } from "igniteui-react";
44
import "./index.css";
55
import "igniteui-webcomponents/themes/light/bootstrap.css";
66
import { Cities } from "./ComboData";
77

8-
IgrComboModule.register();
9-
IgrButtonModule.register();
10-
118
export default function ComboSelection() {
129
const comboRef = useRef<IgrCombo>(null);
1310

@@ -40,16 +37,16 @@ export default function ComboSelection() {
4037
></IgrCombo>
4138
<div className="button-container">
4239
<IgrButton onClick={selectCities}>
43-
<span key="selectUK">Select UK Cities</span>
40+
<span>Select UK Cities</span>
4441
</IgrButton>
4542
<IgrButton onClick={deselectCities}>
46-
<span key="deselectUK">Deselect UK Favorites</span>
43+
<span>Deselect UK Favorites</span>
4744
</IgrButton>
4845
<IgrButton onClick={selectAll}>
49-
<span key="selectAll">Select All</span>
46+
<span>Select All</span>
5047
</IgrButton>
5148
<IgrButton onClick={deselectAll}>
52-
<span key="deselectAll">Deselect All</span>
49+
<span>Deselect All</span>
5350
</IgrButton>
5451
</div>
5552
</div>

‎samples/inputs/combo/simplified/src/index.tsx‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
1-
import React, { useRef } from "react";
1+
import React, { useState } from "react";
22
import ReactDOM from "react-dom/client";
3-
import { IgrCheckboxChangeEventArgs, IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from "igniteui-react";
3+
import { IgrCheckboxChangeEventArgs, IgrCombo, IgrSwitch } from "igniteui-react";
44
import "./index.css";
55
import "igniteui-webcomponents/themes/light/bootstrap.css";
66
import { Cities } from "./ComboData";
77

8-
IgrComboModule.register();
9-
IgrSwitchModule.register();
10-
118
export default function ComboSingleSelection() {
12-
const comboRef = useRef<IgrCombo>(null);
13-
14-
const enableGrouping = (e: IgrCheckboxChangeEventArgs) => {
15-
comboRef.current.groupKey = e.detail.checked ? "country" : undefined;
16-
};
17-
18-
const disableCombo = (e: IgrCheckboxChangeEventArgs) => {
19-
comboRef.current.disabled = e.detail.checked;
20-
};
9+
const [groupingEnabled, setGroupingEnabled] = useState(false);
10+
const [comboDisabled, setComboDisabled] = useState(false);
2111

2212
return (
2313
<div className="sample">
@@ -28,20 +18,25 @@ export default function ComboSingleSelection() {
2818
placeholder="Pick a city"
2919
singleSelect
3020
data={Cities}
31-
ref={comboRef}
21+
groupKey={groupingEnabled ? "country" : undefined}
22+
disabled={comboDisabled}
3223
></IgrCombo>
3324
<div className="options">
34-
<IgrSwitch onChange={enableGrouping}>
35-
<span key="grouping">Enable Grouping</span>
25+
<IgrSwitch
26+
checked={groupingEnabled}
27+
onChange={(e) => setGroupingEnabled(e.detail.checked)}>
28+
<span>Enable Grouping</span>
3629
</IgrSwitch>
37-
<IgrSwitch onChange={disableCombo}>
38-
<span key="disabled">Disable Combo</span>
30+
<IgrSwitch
31+
checked={comboDisabled}
32+
onChange={(e) => setComboDisabled(e.detail.checked)}>
33+
<span>Disable Combo</span>
3934
</IgrSwitch>
4035
</div>
4136
</div>
4237
);
4338
}
4439

45-
// rendering above class to the React DOM
40+
// rendering above function to the React DOM
4641
const root = ReactDOM.createRoot(document.getElementById("root"));
4742
root.render(<ComboSingleSelection />);

‎samples/inputs/combo/styling/src/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import React, { useEffect } from "react";
22
import ReactDOM from "react-dom/client";
3-
import { IgrComboModule, IgrCombo, IgrIconModule, IgrIcon, registerIconFromText } from "igniteui-react";
3+
import { IgrCombo, IgrIcon, registerIconFromText } from "igniteui-react";
44
import "./index.css";
55
import "igniteui-webcomponents/themes/light/bootstrap.css";
66
import { Cities } from "./ComboData";
77

8-
IgrComboModule.register();
9-
IgrIconModule.register();
10-
118
const placeSvg =
129
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z"/></svg>';
1310

@@ -27,8 +24,8 @@ export default function ComboStyling() {
2724
caseSensitiveIcon
2825
data={Cities}
2926
>
30-
<span slot="helper-text" key="helperText">Choose the desired place</span>
31-
<span slot="prefix" key="prefix">
27+
<span slot="helper-text">Choose the desired place</span>
28+
<span slot="prefix">
3229
<IgrIcon name="place" collection="material"></IgrIcon>
3330
</span>
3431
</IgrCombo>

0 commit comments

Comments
 (0)