Skip to content

Commit eb2d7b1

Browse files
damyanpetevdamyanpetev
authored
refactor: update registerIconFromText use on manual samples; small fi… (#787)
1 parent 8fbc8b5 commit eb2d7b1

59 files changed

Lines changed: 465 additions & 879 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎samples/grids/grid/custom-context-menu/src/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import { NwindData } from "./NwindData";
1010

1111
import "igniteui-react-grids/grids/combined";
1212
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
13-
import { IgrIcon } from "igniteui-react";
14-
import { registerIconFromText } from "igniteui-webcomponents";
13+
import { IgrIcon, registerIconFromText } from "igniteui-react";
1514

1615
const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M180-81q-24 0-42-18t-18-42v-603h60v603h474v60H180Zm120-120q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h440q24 0 42 18t18 42v560q0 24-18 42t-42 18H300Zm0-60h440v-560H300v560Zm0 0v-560 560Z"/></svg>`;
1716

@@ -20,7 +19,6 @@ export default function App() {
2019
const [isCellWithinRange, setIsCellWithinRange] = useState(false);
2120
const [selectedData, setSelectedData] = useState("");
2221
const gridRef = useRef<IgrGrid>(null);
23-
const iconRef = useRef<IgrIcon>(null);
2422
const contextMenuRef = useRef(null);
2523
const northWindData = new NwindData();
2624

@@ -133,7 +131,6 @@ export default function App() {
133131
>
134132
<span className="item" onClick={copySelectedCellData}>
135133
<IgrIcon
136-
ref={iconRef}
137134
collection="material"
138135
name="content_copy"
139136
></IgrIcon>

‎samples/grids/grid/data-searching/src/index.tsx‎

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
IgrInput,
1717
IgrInputModule,
1818
IgrIconButtonModule,
19+
registerIconFromText,
1920
} from "igniteui-react";
2021

2122
const mods: any[] = [IgrGridModule, IgrChipModule, IgrInputModule, IgrIconButtonModule];
@@ -34,26 +35,16 @@ const data = new MarketData();
3435

3536
export default function Sample() {
3637
const gridRef = useRef<IgrGrid>(null);
37-
const searchIconRef = useRef<IgrIconButton>(null);
38-
const clearIconRef = useRef<IgrIconButton>(null);
39-
const iconButtonNextRef = useRef<IgrIconButton>(null);
40-
const iconButtonPrevRef = useRef<IgrIconButton>(null);
4138
const caseSensitiveChipRef = useRef<IgrChip>(null);
4239
const exactMatchChipRef = useRef<IgrChip>(null);
4340

4441
const [searchText, setSearchText] = useState('');
4542

4643
useEffect(() => {
47-
if (searchIconRef?.current) {
48-
searchIconRef.current.registerIconFromText("search", searchIconText, "material");
49-
searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
50-
}
51-
if (iconButtonPrevRef?.current) {
52-
iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material");
53-
}
54-
if (iconButtonNextRef?.current) {
55-
iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
56-
}
44+
registerIconFromText("search", searchIconText, "material");
45+
registerIconFromText("clear", clearIconText, "material");
46+
registerIconFromText("prev", prevIconText, "material");
47+
registerIconFromText("next", nextIconText, "material");
5748
}, []);
5849

5950
function handleOnSearchChange(event: IgrComponentValueChangedEventArgs) {
@@ -94,15 +85,13 @@ export default function Sample() {
9485
{searchText.length === 0 ? (
9586
<IgrIconButton
9687
key="searchIcon"
97-
ref={searchIconRef}
9888
variant="flat"
9989
name="search"
10090
collection="material"
10191
></IgrIconButton>
10292
) : (
10393
<IgrIconButton
10494
key="clearIcon"
105-
ref={clearIconRef}
10695
variant="flat"
10796
name="clear"
10897
collection="material"
@@ -122,15 +111,13 @@ export default function Sample() {
122111
<div slot="suffix" key="buttonsSuffix">
123112
<IgrIconButton
124113
key="prevIconButton"
125-
ref={iconButtonPrevRef}
126114
variant="flat"
127115
name="prev"
128116
collection="material"
129117
onClick={prevSearch}
130118
></IgrIconButton>
131119
<IgrIconButton
132120
key="nextIconButton"
133-
ref={iconButtonNextRef}
134121
variant="flat"
135122
name="next"
136123
collection="material"
@@ -140,11 +127,11 @@ export default function Sample() {
140127
</IgrInput>
141128
</div>
142129
<IgrGrid className="gridSize" ref={gridRef} autoGenerate={false} allowFiltering={true} data={data} height="100%" width="100%">
143-
<IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
144-
<IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
145-
<IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
146-
<IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
147-
<IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
130+
<IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
131+
<IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
132+
<IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
133+
<IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
134+
<IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
148135
</IgrGrid>
149136
</div>
150137
</div>

‎samples/grids/grid/state-persistence-main/src/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ import {
1414
IgrGridState,
1515
IgrGridStateOptions
1616
} from 'igniteui-react-grids';
17-
import { IgrButton, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrIcon } from 'igniteui-react';
18-
import { registerIconFromText } from 'igniteui-webcomponents';
17+
import { IgrButton, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrIcon, registerIconFromText } from 'igniteui-react';
1918
import { CustomersData } from './CustomersData';
2019

2120
import 'igniteui-react-grids/grids/combined';

‎samples/grids/hierarchical-grid/state-persistence-main/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import {
2020
IgrCheckbox,
2121
IgrCheckboxChangeEventArgs,
2222
IgrIcon,
23+
registerIconFromText,
2324
} from "igniteui-react";
24-
import { registerIconFromText } from "igniteui-webcomponents";
2525
import SingersData from "./SingersData.json";
2626

2727
import "igniteui-react-grids/grids/combined";

‎samples/grids/hierarchical-grid/toolbar-sample-4/src/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
IgrColumn,
1515
IgrRowIsland,
1616
} from "igniteui-react-grids";
17-
import { IgrButton, IgrIcon, IgrIconModule } from "igniteui-react";
17+
import { IgrButton, IgrIcon, IgrIconModule, registerIconFromText } from "igniteui-react";
1818
import { SingersData } from "./SingersData";
1919

2020
import "igniteui-react-grids/grids/combined";
@@ -28,12 +28,9 @@ const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -96
2828
export default function App() {
2929
const singersData = new SingersData();
3030
const hierarchicalGridRef = useRef<IgrHierarchicalGrid>(null);
31-
const iconClear = useRef<IgrIcon>(null);
3231

3332
useEffect(() => {
34-
if (iconClear?.current) {
35-
iconClear.current.registerIconFromText("clear", icon, "material");
36-
}
33+
registerIconFromText("clear", icon, "material");
3734
}, []);
3835

3936
function clearSort() {
@@ -55,7 +52,7 @@ export default function App() {
5552
</IgrGridToolbarTitle>
5653
<IgrButton key="btn" onClick={clearSort}>
5754
<span slot="prefix" key="clearIcon">
58-
<IgrIcon name="clear" ref={iconClear} collection="material"></IgrIcon>
55+
<IgrIcon name="clear" collection="material"></IgrIcon>
5956
</span>
6057
<span key="clearSort">Clear Sort</span>
6158
</IgrButton>

‎samples/grids/pivot-grid/state-persistence-main/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
IgrCheckbox,
1616
IgrCheckboxChangeEventArgs,
1717
IgrIcon,
18+
registerIconFromText,
1819
} from "igniteui-react";
19-
import { registerIconFromText } from "igniteui-webcomponents";
2020
import { PivotDataFlat } from "./PivotDataFlat";
2121

2222
import "igniteui-react-grids/grids/combined";

‎samples/grids/tree-grid/data-searching/src/index.tsx‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
IgrIconButtonModule,
1818
IgrInput,
1919
IgrInputModule,
20+
registerIconFromText,
2021
} from "igniteui-react";
2122

2223
const mods: any[] = [IgrTreeGridModule, IgrChipModule, IgrIconButtonModule, IgrInputModule];
@@ -35,26 +36,16 @@ const data = new EmployeesFlatData();
3536

3637
export default function Sample() {
3738
const gridRef = useRef<IgrTreeGrid>(null);
38-
const searchIconRef = useRef<IgrIconButton>(null);
39-
const clearIconRef = useRef<IgrIconButton>(null);
40-
const iconButtonNextRef = useRef<IgrIconButton>(null);
41-
const iconButtonPrevRef = useRef<IgrIconButton>(null);
4239
const caseSensitiveChipRef = useRef<IgrChip>(null);
4340
const exactMatchChipRef = useRef<IgrChip>(null);
4441

4542
const [searchText, setSearchText] = useState('')
4643

4744
useEffect(() => {
48-
if (searchIconRef?.current) {
49-
searchIconRef.current.registerIconFromText("search", searchIconText, "material");
50-
searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
51-
}
52-
if (iconButtonPrevRef?.current) {
53-
iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
54-
}
55-
if (iconButtonNextRef?.current) {
56-
iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
57-
}
45+
registerIconFromText("search", searchIconText, "material");
46+
registerIconFromText("clear", clearIconText, "material");
47+
registerIconFromText("prev", prevIconText,"material");
48+
registerIconFromText("next", nextIconText, "material");
5849
}, []);
5950

6051
function handleOnSearchChange(event: IgrComponentValueChangedEventArgs) {
@@ -103,15 +94,13 @@ export default function Sample() {
10394
{searchText.length === 0 ? (
10495
<IgrIconButton
10596
key="searchIcon"
106-
ref={searchIconRef}
10797
variant="flat"
10898
name="search"
10999
collection="material"
110100
></IgrIconButton>
111101
) : (
112102
<IgrIconButton
113103
key="clearIcon"
114-
ref={clearIconRef}
115104
variant="flat"
116105
name="clear"
117106
collection="material"
@@ -131,15 +120,13 @@ export default function Sample() {
131120
<div slot="suffix" key="buttonsSuffix">
132121
<IgrIconButton
133122
key="prevIconButton"
134-
ref={iconButtonPrevRef}
135123
variant="flat"
136124
name="prev"
137125
collection="material"
138126
onClick={prevSearch}
139127
></IgrIconButton>
140128
<IgrIconButton
141129
key="nextIconButton"
142-
ref={iconButtonNextRef}
143130
variant="flat"
144131
name="next"
145132
collection="material"

‎samples/grids/tree-grid/state-persistence-main/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ import {
1919
IgrCheckbox,
2020
IgrCheckboxChangeEventArgs,
2121
IgrIcon,
22+
registerIconFromText,
2223
} from "igniteui-react";
23-
import { registerIconFromText } from "igniteui-webcomponents";
2424

2525
import "igniteui-react-grids/grids/combined";
2626
import "igniteui-react-grids/grids/themes/light/bootstrap.css";

‎samples/grids/tree-grid/toolbar-sample-4/src/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
IgrTreeGridModule,
1515
} from "igniteui-react-grids";
1616
import { IgrColumn } from "igniteui-react-grids";
17-
import { IgrAvatar, IgrAvatarModule, IgrButton, IgrIcon, IgrIconModule } from "igniteui-react";
17+
import { IgrAvatar, IgrAvatarModule, IgrButton, IgrIcon, IgrIconModule, registerIconFromText } from "igniteui-react";
1818

1919
import "igniteui-react-grids/grids/combined";
2020
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
@@ -30,12 +30,9 @@ const icon = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -96
3030
export default function App() {
3131
const employeesData = new EmployeesFlatAvatars();
3232
const treeGridRef = useRef<IgrTreeGrid>(null);
33-
const iconClear = useRef<IgrIcon>(null);
3433

3534
useEffect(() => {
36-
if (iconClear?.current) {
37-
iconClear.current.registerIconFromText("clear", icon, "material");
38-
}
35+
registerIconFromText("clear", icon, "material");
3936
}, []);
4037

4138
function webTreeGridAvatarCellTemplate(props: {
@@ -73,7 +70,7 @@ export default function App() {
7370
</IgrGridToolbarTitle>
7471
<IgrButton key="btn" onClick={clearSort}>
7572
<span slot="prefix" key="clearIcon">
76-
<IgrIcon name="clear" ref={iconClear} collection="material"></IgrIcon>
73+
<IgrIcon name="clear" collection="material"></IgrIcon>
7774
</span>
7875
<span key="clearSort">Clear Sort</span>
7976
</IgrButton>

‎samples/inputs/button-group/overview/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import {
88
IgrRipple,
99
IgrRippleModule,
1010
IgrToggleButton,
11+
registerIconFromText,
1112
} from 'igniteui-react';
1213
import 'igniteui-webcomponents/themes/light/material.css';
1314
import './ButtonGroupOverview.css';
1415
import './index.css';
15-
import { registerIconFromText } from 'igniteui-webcomponents'
1616

1717
IgrButtonGroupModule.register();
1818
IgrIconModule.register();

0 commit comments

Comments
 (0)