Skip to content

refactor: update registerIconFromText use on manual samples; small fi… #787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 14, 2025
Merged

refactor: update registerIconFromText use on manual samples; small fi… #787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f193389
refactor: update registerIconFromText use on manual samples; small fi…
damyanpetev May 13, 2025
f4f5467
Merge remote-tracking branch 'origin/v19-updates' into dpetev/update-…
damyanpetev May 14, 2025
8565504
chore: missed cleanup of useRefs
damyanpetev May 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions samples/grids/grid/custom-context-menu/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ import { NwindData } from "./NwindData";

import "igniteui-react-grids/grids/combined";
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
import { IgrIcon } from "igniteui-react";
import { registerIconFromText } from "igniteui-webcomponents";
import { IgrIcon, registerIconFromText } from "igniteui-react";

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>`;

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

Expand Down Expand Up @@ -133,7 +131,6 @@ export default function App() {
>
<span className="item" onClick={copySelectedCellData}>
<IgrIcon
ref={iconRef}
collection="material"
name="content_copy"
></IgrIcon>
Expand Down
33 changes: 10 additions & 23 deletions samples/grids/grid/data-searching/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
IgrInput,
IgrInputModule,
IgrIconButtonModule,
registerIconFromText,
} from "igniteui-react";

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

export default function Sample() {
const gridRef = useRef<IgrGrid>(null);
const searchIconRef = useRef<IgrIconButton>(null);
const clearIconRef = useRef<IgrIconButton>(null);
const iconButtonNextRef = useRef<IgrIconButton>(null);
const iconButtonPrevRef = useRef<IgrIconButton>(null);
const caseSensitiveChipRef = useRef<IgrChip>(null);
const exactMatchChipRef = useRef<IgrChip>(null);

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

useEffect(() => {
if (searchIconRef?.current) {
searchIconRef.current.registerIconFromText("search", searchIconText, "material");
searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
}
if (iconButtonPrevRef?.current) {
iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material");
}
if (iconButtonNextRef?.current) {
iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
}
registerIconFromText("search", searchIconText, "material");
registerIconFromText("clear", clearIconText, "material");
registerIconFromText("prev", prevIconText, "material");
registerIconFromText("next", nextIconText, "material");
}, []);

function handleOnSearchChange(event: IgrComponentValueChangedEventArgs) {
Expand Down Expand Up @@ -94,15 +85,13 @@ export default function Sample() {
{searchText.length === 0 ? (
<IgrIconButton
key="searchIcon"
ref={searchIconRef}
variant="flat"
name="search"
collection="material"
></IgrIconButton>
) : (
<IgrIconButton
key="clearIcon"
ref={clearIconRef}
variant="flat"
name="clear"
collection="material"
Expand All @@ -122,15 +111,13 @@ export default function Sample() {
<div slot="suffix" key="buttonsSuffix">
<IgrIconButton
key="prevIconButton"
ref={iconButtonPrevRef}
variant="flat"
name="prev"
collection="material"
onClick={prevSearch}
></IgrIconButton>
<IgrIconButton
key="nextIconButton"
ref={iconButtonNextRef}
variant="flat"
name="next"
collection="material"
Expand All @@ -140,11 +127,11 @@ export default function Sample() {
</IgrInput>
</div>
<IgrGrid className="gridSize" ref={gridRef} autoGenerate={false} allowFiltering={true} data={data} height="100%" width="100%">
<IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
<IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
<IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
<IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
<IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
</IgrGrid>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions samples/grids/grid/state-persistence-main/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import {
IgrGridState,
IgrGridStateOptions
} from 'igniteui-react-grids';
import { IgrButton, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrIcon } from 'igniteui-react';
import { registerIconFromText } from 'igniteui-webcomponents';
import { IgrButton, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrIcon, registerIconFromText } from 'igniteui-react';
import { CustomersData } from './CustomersData';

import 'igniteui-react-grids/grids/combined';
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/hierarchical-grid/state-persistence-main/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ import {
IgrCheckbox,
IgrCheckboxChangeEventArgs,
IgrIcon,
registerIconFromText,
} from "igniteui-react";
import { registerIconFromText } from "igniteui-webcomponents";
import SingersData from "./SingersData.json";

import "igniteui-react-grids/grids/combined";
Expand Down
9 changes: 3 additions & 6 deletions samples/grids/hierarchical-grid/toolbar-sample-4/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
IgrColumn,
IgrRowIsland,
} from "igniteui-react-grids";
import { IgrButton, IgrIcon, IgrIconModule } from "igniteui-react";
import { IgrButton, IgrIcon, IgrIconModule, registerIconFromText } from "igniteui-react";
import { SingersData } from "./SingersData";

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

useEffect(() => {
if (iconClear?.current) {
iconClear.current.registerIconFromText("clear", icon, "material");
}
registerIconFromText("clear", icon, "material");
}, []);

function clearSort() {
Expand All @@ -55,7 +52,7 @@ export default function App() {
</IgrGridToolbarTitle>
<IgrButton key="btn" onClick={clearSort}>
<span slot="prefix" key="clearIcon">
<IgrIcon name="clear" ref={iconClear} collection="material"></IgrIcon>
<IgrIcon name="clear" collection="material"></IgrIcon>
</span>
<span key="clearSort">Clear Sort</span>
</IgrButton>
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/pivot-grid/state-persistence-main/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import {
IgrCheckbox,
IgrCheckboxChangeEventArgs,
IgrIcon,
registerIconFromText,
} from "igniteui-react";
import { registerIconFromText } from "igniteui-webcomponents";
import { PivotDataFlat } from "./PivotDataFlat";

import "igniteui-react-grids/grids/combined";
Expand Down
23 changes: 5 additions & 18 deletions samples/grids/tree-grid/data-searching/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
IgrIconButtonModule,
IgrInput,
IgrInputModule,
registerIconFromText,
} from "igniteui-react";

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

export default function Sample() {
const gridRef = useRef<IgrTreeGrid>(null);
const searchIconRef = useRef<IgrIconButton>(null);
const clearIconRef = useRef<IgrIconButton>(null);
const iconButtonNextRef = useRef<IgrIconButton>(null);
const iconButtonPrevRef = useRef<IgrIconButton>(null);
const caseSensitiveChipRef = useRef<IgrChip>(null);
const exactMatchChipRef = useRef<IgrChip>(null);

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

useEffect(() => {
if (searchIconRef?.current) {
searchIconRef.current.registerIconFromText("search", searchIconText, "material");
searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
}
if (iconButtonPrevRef?.current) {
iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
}
if (iconButtonNextRef?.current) {
iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
}
registerIconFromText("search", searchIconText, "material");
registerIconFromText("clear", clearIconText, "material");
registerIconFromText("prev", prevIconText,"material");
registerIconFromText("next", nextIconText, "material");
}, []);

function handleOnSearchChange(event: IgrComponentValueChangedEventArgs) {
Expand Down Expand Up @@ -103,15 +94,13 @@ export default function Sample() {
{searchText.length === 0 ? (
<IgrIconButton
key="searchIcon"
ref={searchIconRef}
variant="flat"
name="search"
collection="material"
></IgrIconButton>
) : (
<IgrIconButton
key="clearIcon"
ref={clearIconRef}
variant="flat"
name="clear"
collection="material"
Expand All @@ -131,15 +120,13 @@ export default function Sample() {
<div slot="suffix" key="buttonsSuffix">
<IgrIconButton
key="prevIconButton"
ref={iconButtonPrevRef}
variant="flat"
name="prev"
collection="material"
onClick={prevSearch}
></IgrIconButton>
<IgrIconButton
key="nextIconButton"
ref={iconButtonNextRef}
variant="flat"
name="next"
collection="material"
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/tree-grid/state-persistence-main/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import {
IgrCheckbox,
IgrCheckboxChangeEventArgs,
IgrIcon,
registerIconFromText,
} from "igniteui-react";
import { registerIconFromText } from "igniteui-webcomponents";

import "igniteui-react-grids/grids/combined";
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
Expand Down
9 changes: 3 additions & 6 deletions samples/grids/tree-grid/toolbar-sample-4/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
IgrTreeGridModule,
} from "igniteui-react-grids";
import { IgrColumn } from "igniteui-react-grids";
import { IgrAvatar, IgrAvatarModule, IgrButton, IgrIcon, IgrIconModule } from "igniteui-react";
import { IgrAvatar, IgrAvatarModule, IgrButton, IgrIcon, IgrIconModule, registerIconFromText } from "igniteui-react";

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

useEffect(() => {
if (iconClear?.current) {
iconClear.current.registerIconFromText("clear", icon, "material");
}
registerIconFromText("clear", icon, "material");
}, []);

function webTreeGridAvatarCellTemplate(props: {
Expand Down Expand Up @@ -73,7 +70,7 @@ export default function App() {
</IgrGridToolbarTitle>
<IgrButton key="btn" onClick={clearSort}>
<span slot="prefix" key="clearIcon">
<IgrIcon name="clear" ref={iconClear} collection="material"></IgrIcon>
<IgrIcon name="clear" collection="material"></IgrIcon>
</span>
<span key="clearSort">Clear Sort</span>
</IgrButton>
Expand Down
2 changes: 1 addition & 1 deletion samples/inputs/button-group/overview/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import {
IgrRipple,
IgrRippleModule,
IgrToggleButton,
registerIconFromText,
} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupOverview.css';
import './index.css';
import { registerIconFromText } from 'igniteui-webcomponents'

IgrButtonGroupModule.register();
IgrIconModule.register();
Expand Down
2 changes: 1 addition & 1 deletion samples/inputs/button-group/selection/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import {
IgrRipple,
IgrRippleModule,
IgrToggleButton,
registerIconFromText,
} from 'igniteui-react';
import { registerIconFromText } from 'igniteui-webcomponents'
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupSelection.css';
import './index.css';
Expand Down
Loading