+
+ this.onRadioChange(e)} checked={this.state.mode === "raw"}>raw
+ this.onRadioChange(e)} checked={this.state.mode === "withFormatting"}>withFormatting
-
+
Value: {this.state.value}
+
diff --git a/samples/grids/grid/disabled-summaries/src/index.tsx b/samples/grids/grid/disabled-summaries/src/index.tsx
index 25dc5c2263..1c6f605c0c 100644
--- a/samples/grids/grid/disabled-summaries/src/index.tsx
+++ b/samples/grids/grid/disabled-summaries/src/index.tsx
@@ -1,314 +1,510 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-
-import { IgrButton, IgrDialog, IgrCheckbox } from 'igniteui-react';
-import { IgrButtonModule, IgrDialogModule, IgrCheckboxModule } from 'igniteui-react';
-import { IgrGridModule, IgrSummaryOperand, IgrSummaryResult } from 'igniteui-react-grids';
-import { IgrGrid, IgrColumn } from "igniteui-react-grids";
-import NwindData from './NwindData.json';
-
-import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
-
-IgrGridModule.register();
-IgrButtonModule.register();
-IgrDialogModule.register();
-IgrCheckboxModule.register();
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import { IgrButton, IgrDialog, IgrCheckbox } from "igniteui-react";
+import {
+ IgrGrid,
+ IgrColumn,
+ IgrSummaryOperand,
+ IgrSummaryResult,
+} from "igniteui-react-grids";
+import NwindData from "./NwindData.json";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
class UnitsInStockSummary extends IgrSummaryOperand {
- operate(data: any[] = [], allData: any[] = [], fieldName: string = "", summaryResult: any = null): IgrSummaryResult[] {
- const result: IgrSummaryResult[] = [];
- const values = allData.map((item) => item[fieldName] ?? 0).filter((value) => value !== null);
-
- const discontinuedItems = allData.filter((item) => item["Discontinued"] === true);
- const discontinuedValues = discontinuedItems.map((item) => item[fieldName] ?? 0).filter((value) => !isNaN(value));
-
- result.push({ key: "count", label: "Count", summaryResult: values.length });
- result.push({ key: "min", label: "Min", summaryResult: values.length > 0 ? Math.min(...values) : "N/A" });
- result.push({ key: "max", label: "Max", summaryResult: values.length > 0 ? Math.max(...values) : "N/A" });
- result.push({ key: "sum", label: "Sum", summaryResult: values.reduce((a, b) => a + b, 0) });
- result.push({
- key: "average",
- label: "Average",
- summaryResult: values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : "N/A"
- });
- result.push({
- key: "median",
- label: "Median",
- summaryResult:
- values.length > 0
- ? (() => {
- const sortedValues = values.slice().sort((a, b) => a - b);
- return sortedValues.length % 2 === 0 ? (sortedValues[sortedValues.length / 2 - 1] + sortedValues[sortedValues.length / 2]) / 2 : sortedValues[Math.floor(sortedValues.length / 2)];
- })()
- : "N/A"
- });
- result.push({ key: "range", label: "Range", summaryResult: values.length > 0 ? Math.max(...values) - Math.min(...values) : "N/A" });
- result.push({ key: "discontinued", label: "Discontinued Products", summaryResult: discontinuedItems.length });
- result.push({ key: "totalDiscontinued", label: "Total Discontinued Items", summaryResult: discontinuedValues.length > 0 ? discontinuedValues.reduce((a, b) => a + b, 0) : 0 });
-
- return result;
- }
+ operate(
+ data: any[] = [],
+ allData: any[] = [],
+ fieldName: string = "",
+ summaryResult: any = null
+ ): IgrSummaryResult[] {
+ const result: IgrSummaryResult[] = [];
+ const values = allData
+ .map((item) => item[fieldName] ?? 0)
+ .filter((value) => value !== null);
+
+ const discontinuedItems = allData.filter(
+ (item) => item["Discontinued"] === true
+ );
+ const discontinuedValues = discontinuedItems
+ .map((item) => item[fieldName] ?? 0)
+ .filter((value) => !isNaN(value));
+
+ result.push({ key: "count", label: "Count", summaryResult: values.length });
+ result.push({
+ key: "min",
+ label: "Min",
+ summaryResult: values.length > 0 ? Math.min(...values) : "N/A",
+ });
+ result.push({
+ key: "max",
+ label: "Max",
+ summaryResult: values.length > 0 ? Math.max(...values) : "N/A",
+ });
+ result.push({
+ key: "sum",
+ label: "Sum",
+ summaryResult: values.reduce((a, b) => a + b, 0),
+ });
+ result.push({
+ key: "average",
+ label: "Average",
+ summaryResult:
+ values.length > 0
+ ? values.reduce((a, b) => a + b, 0) / values.length
+ : "N/A",
+ });
+ result.push({
+ key: "median",
+ label: "Median",
+ summaryResult:
+ values.length > 0
+ ? (() => {
+ const sortedValues = values.slice().sort((a, b) => a - b);
+ return sortedValues.length % 2 === 0
+ ? (sortedValues[sortedValues.length / 2 - 1] +
+ sortedValues[sortedValues.length / 2]) /
+ 2
+ : sortedValues[Math.floor(sortedValues.length / 2)];
+ })()
+ : "N/A",
+ });
+ result.push({
+ key: "range",
+ label: "Range",
+ summaryResult:
+ values.length > 0 ? Math.max(...values) - Math.min(...values) : "N/A",
+ });
+ result.push({
+ key: "discontinued",
+ label: "Discontinued Products",
+ summaryResult: discontinuedItems.length,
+ });
+ result.push({
+ key: "totalDiscontinued",
+ label: "Total Discontinued Items",
+ summaryResult:
+ discontinuedValues.length > 0
+ ? discontinuedValues.reduce((a, b) => a + b, 0)
+ : 0,
+ });
+
+ return result;
+ }
}
class DiscontinuedSummary extends IgrSummaryOperand {
- operate(data: any[] = [], allData: any[] = [], fieldName: string = ""): IgrSummaryResult[] {
- const result: IgrSummaryResult[] = [];
- result.push({ key: "count", label: "Count", summaryResult: allData.length });
- result.push({ key: "true", label: "True", summaryResult: allData.filter((item) => item[fieldName] === true).length });
- result.push({ key: "false", label: "False", summaryResult: allData.filter((item) => item[fieldName] === false).length });
- return result;
- }
+ operate(
+ data: any[] = [],
+ allData: any[] = [],
+ fieldName: string = ""
+ ): IgrSummaryResult[] {
+ const result: IgrSummaryResult[] = [];
+ result.push({
+ key: "count",
+ label: "Count",
+ summaryResult: allData.length,
+ });
+ result.push({
+ key: "true",
+ label: "True",
+ summaryResult: allData.filter((item) => item[fieldName] === true).length,
+ });
+ result.push({
+ key: "false",
+ label: "False",
+ summaryResult: allData.filter((item) => item[fieldName] === false).length,
+ });
+ return result;
+ }
+}
+
+interface SummaryColumn {
+ field: string;
+ header: string;
+ hasSummary: boolean;
+ dataType?: string;
+ summaries?: any;
+ disabledSummaries: string[];
}
-export default class Sample extends React.Component
{searchText.length === 0 ? (
-
-
-
- Case Sensitive
+
+
-
+
+ Case Sensitive
-
- Exact Match
+
+ Exact Match
-
+
+ s.key);
-
- const updatedColumns: any[] = this.state.columns.map((col: any) =>
- col.field === this.state.currentColumn!.field
- ? { ...col, disabledSummaries: allSummaryKeys }
- : col
- );
-
- this.setState((prevState: any) => ({
- currentColumn: { ...prevState.currentColumn!, disabledSummaries: allSummaryKeys },
- columns: updatedColumns,
- disableAllBtnDisabled: true,
- enableAllBtnDisabled: false,
- }), () => {
- this.updateCheckboxes();
- this.grid.markForCheck();
- });
- };
-
- enableAllSummaries = () => {
- if (!this.state.currentColumn || !this.grid) return;
-
- const updatedColumns: any[] = this.state.columns.map((col: any) =>
- col.field === this.state.currentColumn!.field
- ? { ...col, disabledSummaries: [] }
- : col
- );
-
- this.setState((prevState: any) => ({
- currentColumn: { ...prevState.currentColumn!, disabledSummaries: [] },
- columns: updatedColumns,
- disableAllBtnDisabled: false,
- enableAllBtnDisabled: true,
- }), () => {
- this.updateCheckboxes();
- this.grid.markForCheck();
- });
- };
-
- public render(): JSX.Element {
- return (
-
+ Disable All
+
+
+ Enable All
+
+
+
+
+ );
}
// rendering above component in the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+ openDialog({ field: col.field, header: col.header })}
+ >
+ {col.header}
+
+ ))}
+
+ Disable Summaries for Column:
+ {columns.map((col: any) => ( +
-
- Disable All
- Enable All
-
-
-
- );
- }
+ >
+
- this.openDialog({ field: col.field, header: col.header })}
- >
- {col.header}
-
- ))}
-
- Disable Summaries for Column:
- {this.state.columns.map((col: any) => ( -
- {this.state.currentColumn && this.state.checkboxStates.map((checkbox: any) => (
- this.toggleSummary(checkbox.key)}
- >
- {checkbox.label}
-
- ))}
-
-
-
- col.field === "ProductID")?.disabledSummaries}>
- col.field === "ProductName")?.disabledSummaries}>
- col.field === "UnitPrice")?.disabledSummaries}>
- col.field === "UnitsInStock")?.disabledSummaries}>
- col.field === "Discontinued")?.disabledSummaries}>
- col.field === "OrderDate")?.disabledSummaries}>
-
-
-
+ {currentColumn &&
+ checkboxStates.map((checkbox: any) => (
+ toggleSummary(checkbox.key)}
+ >
+ {checkbox.label}
+
+ ))}
+
+
+
+ col.field === "ProductID")
+ ?.disabledSummaries
+ }
+ >
+ col.field === "ProductName")
+ ?.disabledSummaries
+ }
+ >
+ col.field === "UnitPrice")
+ ?.disabledSummaries
+ }
+ >
+ col.field === "UnitsInStock")
+ ?.disabledSummaries
+ }
+ >
+ col.field === "Discontinued")
+ ?.disabledSummaries
+ }
+ >
+ col.field === "OrderDate")
+ ?.disabledSummaries
+ }
+ >
+
+
+
diff --git a/samples/grids/grid/paste/src/index.tsx b/samples/grids/grid/paste/src/index.tsx
index 92bf6fd47e..6d4661a00b 100644
--- a/samples/grids/grid/paste/src/index.tsx
+++ b/samples/grids/grid/paste/src/index.tsx
@@ -313,4 +313,4 @@ export default class Sample extends React.Component {
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render( {
- private hierarchicalGrid: IgrHierarchicalGrid;
- private dialog: IgrDialog;
-
- constructor(props: any) {
- super(props);
-
- this.state = {
- currentColumn: null,
- disableAllBtnDisabled: false,
- enableAllBtnDisabled: false,
- checkboxStates: [],
- columns: [
- { field: "Artist", header: "Artist", hasSummary: true, disabledSummaries: [] },
- { field: "Photo", header: "Photo", dataType: "image", hasSummary: true, summaries: GrammySummary, disabledSummaries: [] },
- { field: "Debut", header: "Debut", hasSummary: true, disabledSummaries: [] },
- { field: "GrammyNominations", header: "Grammy Nominations", dataType: "number", hasSummary: true, disabledSummaries: [] },
- { field: "GrammyAwards", header: "Grammy Awards", dataType: "number", hasSummary: true, disabledSummaries: [] }
- ]
- };
-
- this.hierarchicalGridRef = this.hierarchicalGridRef.bind(this);
- this.dialogRef = this.dialogRef.bind(this);
- this.openDialog = this.openDialog.bind(this);
- this.updateCheckboxes = this.updateCheckboxes.bind(this);
- this.toggleSummary = this.toggleSummary.bind(this);
- this.disableAllSummaries = this.disableAllSummaries.bind(this);
- this.enableAllSummaries = this.enableAllSummaries.bind(this);
- }
-
- hierarchicalGridRef = (ref: IgrHierarchicalGrid) => {
- this.hierarchicalGrid = ref;
+interface SummaryColumn {
+ field: string;
+ header: string;
+ hasSummary: boolean;
+ dataType?: string;
+ summaries?: any;
+ disabledSummaries: string[];
+}
+
+export default function DisabledSummariesHierarchicalGridSample() {
+ // State
+ const [singersData, setSingersData] = useState([]);
+ const [currentColumn, setCurrentColumn] = useState(null);
+ const [currentColumnSource, setCurrentColumnSource] = useState<"dialog" | "toggle" | null>(null);
+ const [pendingUpdateType, setPendingUpdateType] = useState(null);
+ const [disableAllBtnDisabled, setDisableAllBtnDisabled] = useState(false);
+ const [enableAllBtnDisabled, setEnableAllBtnDisabled] = useState(false);
+ const [checkboxStates, setCheckboxStates] = useState([]);
+
+ const [columns, setColumns] = useState([
+ { field: "Artist", header: "Artist", hasSummary: true, disabledSummaries: [] },
+ { field: "Photo", header: "Photo", dataType: "image", hasSummary: true, summaries: GrammySummary, disabledSummaries: [] },
+ { field: "Debut", header: "Debut", hasSummary: true, disabledSummaries: [] },
+ { field: "GrammyNominations", header: "Grammy Nominations", dataType: "number", hasSummary: true, disabledSummaries: [] },
+ { field: "GrammyAwards", header: "Grammy Awards", dataType: "number", hasSummary: true, disabledSummaries: [] }
+ ]);
+
+ // Refs
+ let hierarchicalGrid: IgrHierarchicalGrid;
+ const hierarchicalGridRef = (ref: IgrHierarchicalGrid) => {
+ hierarchicalGrid = ref;
};
-
- dialogRef = (ref: IgrDialog) => {
- this.dialog = ref;
- if (this.dialog) {
- this.dialog.closeOnOutsideClick = true;
- this.dialog.keepOpenOnEscape = false;
+ let dialog: IgrDialog;
+ const dialogRef = (ref: IgrDialog) => {
+ dialog = ref;
+ if (dialog) {
+ dialog.closeOnOutsideClick = true;
+ dialog.keepOpenOnEscape = false;
}
};
- private _singersData: any[] = SingersData;
- public get singersData(): any[] {
- return this._singersData;
- }
-
- openDialog = (column: any) => {
- const columnState: any | undefined = this.state.columns.find((c: any) => c.field === column.field);
+ useEffect(() => {
+ setSingersData(SingersData);
+ }, []);
+
+ useEffect(() => {
+ if (!currentColumn) return;
+
+ const shouldShowDialog = currentColumnSource === "dialog";
+ const shouldMarkForCheck =
+ currentColumnSource === "toggle" ||
+ pendingUpdateType === "disableAll" ||
+ pendingUpdateType === "enableAll";
+
+ if (shouldShowDialog) {
+ updateCheckboxes();
+ dialog?.show();
+ setCurrentColumnSource(null);
+ }
+
+ if (shouldMarkForCheck && hierarchicalGrid) {
+ updateCheckboxes();
+ hierarchicalGrid.markForCheck();
+ setPendingUpdateType(null);
+ setCurrentColumnSource(null);
+ }
+ }, [currentColumn, currentColumnSource, pendingUpdateType, hierarchicalGrid]);
- this.setState({
- currentColumn: columnState!,
- checkboxStates: [],
- }, () => {
- this.updateCheckboxes();
- this.dialog?.show();
- });
+ const openDialog = (column: any) => {
+ const columnState = columns.find((c) => c.field === column.field);
+ setCurrentColumn(columnState!);
+ setCurrentColumnSource("dialog");
+ setCheckboxStates([]);
};
- getSummaryResults(operand: any, data: any[], field: string): IgrSummaryResult[] {
+ const getSummaryResults = (
+ operand: any,
+ data: any[],
+ field: string
+ ): IgrSummaryResult[] => {
if (typeof operand === "function") {
- operand = new operand();
+ operand = new operand();
}
if (operand instanceof IgrSummaryOperand) {
- return operand.operate([], data, field, null);
- } else if (!operand) {
- return new IgrSummaryOperand().operate([], data, field, null);
+ return operand.operate([], data, field, null);
+ } else if (!operand) {
+ return new IgrSummaryOperand().operate([], data, field, null);
}
return [];
- }
+ };
- getDefaultSummaries(data: any[], field: string): IgrSummaryResult[] {
- const columnInstance = this.hierarchicalGrid.columns.find((c: any) => c.field === field);
- if (columnInstance && columnInstance.summaries && typeof columnInstance.summaries.operate === 'function') {
+ const getDefaultSummaries = (
+ data: any[],
+ field: string
+ ): IgrSummaryResult[] => {
+ const columnInstance = hierarchicalGrid.columns.find((c) => c.field === field);
+ if (
+ columnInstance &&
+ columnInstance.summaries &&
+ typeof columnInstance.summaries.operate === "function"
+ ) {
return columnInstance.summaries.operate([], data, field, null);
}
return [];
- }
-
- updateCheckboxes() {
- if (!this.state.currentColumn || !this.hierarchicalGrid) return;
+ };
- const gridData: any[] = this.hierarchicalGrid.data;
+ const updateCheckboxes = () => {
+ if (!currentColumn || !hierarchicalGrid) return;
+
+ const gridData: any[] = hierarchicalGrid.data;
let allSummaries: IgrSummaryResult[] = [];
- if (this.state.currentColumn.summaries) {
- allSummaries = this.getSummaryResults(this.state.currentColumn.summaries, gridData, this.state.currentColumn.field);
- } else {
- allSummaries = this.getDefaultSummaries(gridData, this.state.currentColumn.field);
+ if (currentColumn.summaries) {
+ allSummaries = getSummaryResults(
+ currentColumn.summaries,
+ gridData,
+ currentColumn.field
+ );
+ } else {
+ allSummaries = getDefaultSummaries(gridData, currentColumn.field);
}
-
+
let allDisabled: boolean = true;
let allEnabled: boolean = true;
-
- const checkboxStates: any[] = allSummaries.map(summary => {
- const isDisabled = this.state.currentColumn.disabledSummaries.includes(summary.key);
- if (isDisabled) {
- allEnabled = false;
- } else {
- allDisabled = false;
- }
- return {
- label: summary.label,
- key: summary.key,
- checked: isDisabled,
- };
+
+ const newCheckboxStates: any[] = allSummaries.map((summary) => {
+ const isDisabled = currentColumn.disabledSummaries.includes(summary.key);
+ if (isDisabled) {
+ allEnabled = false;
+ } else {
+ allDisabled = false;
+ }
+ return {
+ label: summary.label,
+ key: summary.key,
+ checked: isDisabled,
+ };
});
+
+ setCheckboxStates(newCheckboxStates);
+ setDisableAllBtnDisabled(allDisabled);
+ setEnableAllBtnDisabled(allEnabled);
+ };
- this.setState({
- checkboxStates,
- disableAllBtnDisabled: allDisabled,
- enableAllBtnDisabled: allEnabled,
- });
- }
-
- toggleSummary = (summaryKey: string) => {
- if (!this.state.currentColumn || !this.hierarchicalGrid) return;
- const { currentColumn, columns } = this.state;
-
- const updatedDisabledSummaries: string[] = currentColumn.disabledSummaries.includes(summaryKey)
- ? currentColumn.disabledSummaries.filter((key: any) => key !== summaryKey)
- : [...currentColumn.disabledSummaries, summaryKey];
-
- const updatedColumns: any[] = columns.map((col: any) =>
- col.field === currentColumn.field
- ? { ...col, disabledSummaries: updatedDisabledSummaries }
- : col
+ const toggleSummary = (summaryKey: string) => {
+ if (!currentColumn || !hierarchicalGrid) return;
+
+ const updatedDisabledSummaries = currentColumn.disabledSummaries.includes(
+ summaryKey
+ )
+ ? currentColumn.disabledSummaries.filter((key: any) => key !== summaryKey)
+ : [...currentColumn.disabledSummaries, summaryKey];
+
+ const updatedColumns = columns.map((col: any) =>
+ col.field === currentColumn.field
+ ? { ...col, disabledSummaries: updatedDisabledSummaries }
+ : col
);
-
- this.setState({
- currentColumn: { ...currentColumn, disabledSummaries: updatedDisabledSummaries },
- columns: updatedColumns,
- }, () => {
- this.hierarchicalGrid.markForCheck();
- });
+
+ setCurrentColumn((prev) => ({
+ ...prev,
+ disabledSummaries: updatedDisabledSummaries,
+ }));
+ setColumns(updatedColumns);
+ setCurrentColumnSource("toggle");
};
- disableAllSummaries = () => {
- if (!this.state.currentColumn || !this.hierarchicalGrid) return;
-
- const gridData: any[] = this.hierarchicalGrid.data;
- let allSummaries: IgrSummaryResult[] = [];
- if (this.state.currentColumn.summaries) {
- allSummaries = this.getSummaryResults(this.state.currentColumn.summaries, gridData, this.state.currentColumn.field);
- } else {
- allSummaries = this.getDefaultSummaries(gridData, this.state.currentColumn.field);
- }
-
- const allSummaryKeys: string[] = allSummaries.map(s => s.key);
-
- const updatedColumns: any[] = this.state.columns.map((col: any) =>
- col.field === this.state.currentColumn!.field
- ? { ...col, disabledSummaries: allSummaryKeys }
- : col
+ const disableAllSummaries = () => {
+ if (!currentColumn || !hierarchicalGrid) return;
+
+ const gridData: any[] = hierarchicalGrid.data;
+ let allSummaries: IgrSummaryResult[] = currentColumn.summaries
+ ? getSummaryResults(
+ currentColumn.summaries,
+ gridData,
+ currentColumn.field
+ )
+ : getDefaultSummaries(gridData, currentColumn.field);
+
+ const allSummaryKeys: string[] = allSummaries.map((s) => s.key);
+
+ const updatedColumns = columns.map((col: any) =>
+ col.field === currentColumn.field
+ ? { ...col, disabledSummaries: allSummaryKeys }
+ : col
);
-
- this.setState((prevState: any) => ({
- currentColumn: { ...prevState.currentColumn!, disabledSummaries: allSummaryKeys },
- columns: updatedColumns,
- disableAllBtnDisabled: true,
- enableAllBtnDisabled: false,
- }), () => {
- this.updateCheckboxes();
- this.hierarchicalGrid.markForCheck();
- });
+
+ setCurrentColumn((prev) => ({
+ ...prev,
+ disabledSummaries: allSummaryKeys,
+ }));
+ setColumns(updatedColumns);
+ setDisableAllBtnDisabled(true);
+ setEnableAllBtnDisabled(false);
+
+ setPendingUpdateType("disableAll");
};
- enableAllSummaries = () => {
- if (!this.state.currentColumn || !this.hierarchicalGrid) return;
-
- const updatedColumns: any[] = this.state.columns.map((col: any) =>
- col.field === this.state.currentColumn!.field
- ? { ...col, disabledSummaries: [] }
- : col
+ const enableAllSummaries = () => {
+ if (!currentColumn || !hierarchicalGrid) return;
+
+ const updatedColumns = columns.map((col: any) =>
+ col.field === currentColumn.field
+ ? { ...col, disabledSummaries: [] }
+ : col
);
-
- this.setState((prevState: any) => ({
- currentColumn: { ...prevState.currentColumn!, disabledSummaries: [] },
- columns: updatedColumns,
- disableAllBtnDisabled: false,
- enableAllBtnDisabled: true,
- }), () => {
- this.updateCheckboxes();
- this.hierarchicalGrid.markForCheck();
- });
+
+ setCurrentColumn((prev) => ({ ...prev, disabledSummaries: [] }));
+ setColumns(updatedColumns);
+ setDisableAllBtnDisabled(false);
+ setEnableAllBtnDisabled(true);
+
+ setPendingUpdateType("enableAll");
};
- public render(): JSX.Element {
- return (
- {
constructor(props: any) {
diff --git a/samples/grids/list/list-item-content/src/index.tsx b/samples/grids/list/list-item-content/src/index.tsx
index c1963666c2..3d58052ad2 100644
--- a/samples/grids/list/list-item-content/src/index.tsx
+++ b/samples/grids/list/list-item-content/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrList, IgrListItem, IgrListHeader, IgrListModule } from 'igniteui-react';
+import { IgrList, IgrListItem, IgrListHeader } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrListModule.register();
-
export default class ListItemContent extends React.Component {
constructor(props: any) {
diff --git a/samples/grids/list/overview/src/index.tsx b/samples/grids/list/overview/src/index.tsx
index 09b3985a2e..e744c51aa4 100644
--- a/samples/grids/list/overview/src/index.tsx
+++ b/samples/grids/list/overview/src/index.tsx
@@ -1,16 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton,
- IgrListModule, IgrRadioGroupModule, IgrRadioModule, IgrAvatarModule, IgrButtonModule } from 'igniteui-react';
+import { IgrList, IgrListItem, IgrListHeader, IgrRadioGroup, IgrRadio, IgrAvatar, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrAvatarModule.register();
-IgrButtonModule.register();
-IgrListModule.register();
-IgrRadioGroupModule.register();
-IgrRadioModule.register();
-
export default class ListOverview extends React.Component {
constructor(props: any) {
@@ -23,13 +16,13 @@ export default class ListOverview extends React.Component {
return (
-
+
Small
-
+
Medium
-
+
Large
@@ -96,7 +89,7 @@ export default class ListOverview extends React.Component {
public onRadioChange(e: any) {
if (e.detail.checked == true) {
- this.setState({ listSize: e.value });
+ this.setState({ listSize: e.detail.value });
}
}
}
diff --git a/samples/grids/list/styling/src/index.tsx b/samples/grids/list/styling/src/index.tsx
index e9d66699c3..156fb51156 100644
--- a/samples/grids/list/styling/src/index.tsx
+++ b/samples/grids/list/styling/src/index.tsx
@@ -2,13 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ListStyling.css';
-import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton, IgrListModule, IgrAvatarModule, IgrButtonModule } from 'igniteui-react';
+import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrAvatarModule.register();
-IgrButtonModule.register();
-IgrListModule.register();
-
export default class ListStyling extends React.Component {
constructor(props: any) {
diff --git a/samples/grids/pivot-grid/data-selector/src/index.tsx b/samples/grids/pivot-grid/data-selector/src/index.tsx
index 71a7baafb8..3e7ce5e3db 100644
--- a/samples/grids/pivot-grid/data-selector/src/index.tsx
+++ b/samples/grids/pivot-grid/data-selector/src/index.tsx
@@ -2,17 +2,10 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { SALES_DATA_NEW as pivotData } from './salesDataNew';
-import { IgrPivotConfiguration, IgrPivotDataSelector, IgrPivotDataSelectorModule,
- IgrPivotGrid, IgrPivotGridModule } from 'igniteui-react-grids';
+import { IgrPivotConfiguration, IgrPivotDataSelector, IgrPivotDateDimension, IgrPivotGrid } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
-const mods: any[] = [
- IgrPivotGridModule,
- IgrPivotDataSelectorModule
-];
-mods.forEach((m) => m.register());
-
export default function App() {
let grid: IgrPivotGrid;
const gridRef = (r: IgrPivotGrid) => {
@@ -23,10 +16,10 @@ export default function App() {
}
const pivotConfiguration: IgrPivotConfiguration = {
rows: [
- {
+ new IgrPivotDateDimension({
enabled: true,
memberName: "Date",
- },
+ })
],
columns: [
{
@@ -66,7 +59,7 @@ export default function App() {
(null);
- const caseSensitiveChipRef = useRef(null);
- const exactMatchChipRef = useRef(null);
-
- const [searchText, setSearchText] = useState('')
+ const [caseSensitiveSelected, setCaseSensitiveSelected] = useState(false);
+ const [exactMatchSelected, setExactMatchSelected] = useState(false);
+ const [searchText, setSearchText] = useState('');
useEffect(() => {
registerIconFromText("search", searchIconText, "material");
registerIconFromText("clear", clearIconText, "material");
- registerIconFromText("prev", prevIconText,"material");
+ registerIconFromText("prev", prevIconText, "material");
registerIconFromText("next", nextIconText, "material");
}, []);
- function handleOnSearchChange(event: IgrComponentValueChangedEventArgs) {
+ const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => {
setSearchText(event.detail);
- gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+ nextSearch(event.detail, caseSensitiveSelected, exactMatchSelected);
}
- function handleCaseSensitiveChange(event: IgrComponentBoolValueChangedEventArgs) {
- gridRef.current.findNext(searchText, event.detail, exactMatchChipRef.current.selected);
+ const clearSearch = () => {
+ setSearchText('');
+ gridRef.current.clearSearch();
}
- function handleExactMatchChange(event: IgrComponentBoolValueChangedEventArgs) {
- gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, event.detail);
+ const searchKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Enter' || e.key === 'ArrowDown') {
+ e.preventDefault();
+ nextSearch(searchText, caseSensitiveSelected, exactMatchSelected);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ prevSearch(searchText, caseSensitiveSelected, exactMatchSelected);
+ }
}
- function clearSearch() {
- setSearchText('');
- gridRef.current.clearSearch();
+ const handleCaseSensitiveChange = (event: IgrComponentBoolValueChangedEventArgs) => {
+ setCaseSensitiveSelected(!caseSensitiveSelected);
+ nextSearch(searchText, event.detail, exactMatchSelected);
}
- function prevSearch() {
- gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+ const handleExactMatchChange = (event: IgrComponentBoolValueChangedEventArgs) => {
+ setExactMatchSelected(!exactMatchSelected);
+ nextSearch(searchText, caseSensitiveSelected, event.detail);
}
- function nextSearch() {
- gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+ const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
+ gridRef.current.findPrev(text, caseSensitive, exactMatch);
}
- function searchKeyDown(e: KeyboardEvent) {
- if (e.key === 'Enter' || e.key === 'ArrowDown') {
- e.preventDefault();
- gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
- } else if (e.key === 'ArrowUp') {
- e.preventDefault();
- gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
- }
+ const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
+ gridRef.current.findNext(text, caseSensitive, exactMatch);
}
return (
@@ -89,17 +82,15 @@ export default function Sample() {
- {
- private treeGrid: IgrTreeGrid;
- private dialog: IgrDialog;
-
- constructor(props: any) {
- super(props);
-
- this.state = {
- currentColumn: null,
- disableAllBtnDisabled: false,
- enableAllBtnDisabled: false,
- checkboxStates: [],
- columns: [
- { field: "ID", header: "Order ID", hasSummary: true, disabledSummaries: [] },
- { field: "Name", header: "Order Product", hasSummary: true, disabledSummaries: [] },
- { field: "Units", header: "Units", hasSummary: true, dataType: "number", summaries: UnitsSummary, disabledSummaries: [] },
- { field: "UnitPrice", header: "Unit Price", hasSummary: true, dataType: "number", disabledSummaries: [] },
- { field: "Price", header: "Price", hasSummary: true, dataType: "number", disabledSummaries: [] },
- { field: "Delivered", header: "Delivered", hasSummary: true, summaries: DeliveredSummary, disabledSummaries: [] },
- { field: "OrderDate", header: "Order Date", hasSummary: true, dataType: "date", disabledSummaries: [] },
- ],
- };
-
- this.treeGridRef = this.treeGridRef.bind(this);
- this.dialogRef = this.dialogRef.bind(this);
- this.openDialog = this.openDialog.bind(this);
- this.updateCheckboxes = this.updateCheckboxes.bind(this);
- this.toggleSummary = this.toggleSummary.bind(this);
- this.disableAllSummaries = this.disableAllSummaries.bind(this);
- this.enableAllSummaries = this.enableAllSummaries.bind(this);
- }
+interface SummaryColumn {
+ field: string;
+ header: string;
+ hasSummary: boolean;
+ dataType?: string;
+ summaries?: any;
+ disabledSummaries: string[];
+}
- treeGridRef = (ref: IgrTreeGrid) => {
- this.treeGrid = ref;
+export default function DisabledSummariesTreeGridSample() {
+
+ // State
+ const [ordersTreeData, setOrdersTreeData] = useState([]);
+ const [currentColumn, setCurrentColumn] = useState(null);
+ const [currentColumnSource, setCurrentColumnSource] = useState<"dialog" | "toggle" | null>(null);
+ const [pendingUpdateType, setPendingUpdateType] = useState(null);
+ const [disableAllBtnDisabled, setDisableAllBtnDisabled] = useState(false);
+ const [enableAllBtnDisabled, setEnableAllBtnDisabled] = useState(false);
+ const [checkboxStates, setCheckboxStates] = useState([]);
+ const [columns, setColumns] = useState([
+ { field: "ID", header: "Order ID", hasSummary: true, disabledSummaries: [] },
+ { field: "Name", header: "Order Product", hasSummary: true, disabledSummaries: [] },
+ { field: "Units", header: "Units", hasSummary: true, dataType: "number", summaries: UnitsSummary, disabledSummaries: [] },
+ { field: "UnitPrice", header: "Unit Price", hasSummary: true, dataType: "number", disabledSummaries: [] },
+ { field: "Price", header: "Price", hasSummary: true, dataType: "number", disabledSummaries: [] },
+ { field: "Delivered", header: "Delivered", hasSummary: true, summaries: DeliveredSummary, disabledSummaries: [] },
+ { field: "OrderDate", header: "Order Date", hasSummary: true, dataType: "date", disabledSummaries: [] },
+ ]);
+
+ // Refs
+ let treeGrid: IgrTreeGrid;
+ const treeGridRef = (ref: IgrTreeGrid) => {
+ treeGrid = ref;
};
-
- dialogRef = (ref: IgrDialog) => {
- this.dialog = ref;
- if (this.dialog) {
- this.dialog.closeOnOutsideClick = true;
- this.dialog.keepOpenOnEscape = false;
+ let dialog: IgrDialog;
+ const dialogRef = (ref: IgrDialog) => {
+ dialog = ref;
+ if (dialog) {
+ dialog.closeOnOutsideClick = true;
+ dialog.keepOpenOnEscape = false;
}
};
- private _ordersTreeData: OrdersTreeData = null;
- public get ordersTreeData(): OrdersTreeData {
- if (this._ordersTreeData == null)
- {
- this._ordersTreeData = new OrdersTreeData();
+ useEffect(() => {
+ const data = new OrdersTreeData();
+ setOrdersTreeData(data);
+ }, []);
+
+ useEffect(() => {
+ if (!currentColumn) return;
+
+ const shouldShowDialog = currentColumnSource === "dialog";
+ const shouldMarkForCheck =
+ currentColumnSource === "toggle" ||
+ pendingUpdateType === "disableAll" ||
+ pendingUpdateType === "enableAll";
+
+ if (shouldShowDialog) {
+ updateCheckboxes();
+ dialog?.show();
+ setCurrentColumnSource(null);
}
- return this._ordersTreeData;
- }
-
- openDialog = (column: any) => {
- const columnState: any | undefined = this.state.columns.find((c: any) => c.field === column.field);
-
- this.setState({
- currentColumn: columnState!,
- checkboxStates: [],
- }, () => {
- this.updateCheckboxes();
- this.dialog?.show();
- });
- };
-
- getSummaryResults(operand: any, data: any[], field: string): IgrSummaryResult[] {
+
+ if (shouldMarkForCheck && treeGrid) {
+ updateCheckboxes();
+ treeGrid.markForCheck();
+ setPendingUpdateType(null);
+ setCurrentColumnSource(null);
+ }
+ }, [currentColumn, currentColumnSource, pendingUpdateType, treeGrid]);
+
+ const openDialog = (column: any) => {
+ const columnState = columns.find((c) => c.field === column.field);
+ setCurrentColumn(columnState!);
+ setCurrentColumnSource("dialog");
+ setCheckboxStates([]);
+ };
+
+ const getSummaryResults = (
+ operand: any,
+ data: any[],
+ field: string
+ ): IgrSummaryResult[] => {
if (typeof operand === "function") {
- operand = new operand();
+ operand = new operand();
}
if (operand instanceof IgrSummaryOperand) {
- return operand.operate([], data, field, null);
- } else if (!operand) {
- return new IgrSummaryOperand().operate([], data, field, null);
+ return operand.operate([], data, field, null);
+ } else if (!operand) {
+ return new IgrSummaryOperand().operate([], data, field, null);
}
return [];
- }
-
- getDefaultSummaries(data: any[], field: string): IgrSummaryResult[] {
- const columnInstance = this.treeGrid.columns.find(c => c.field === field);
- if (columnInstance && columnInstance.summaries && typeof columnInstance.summaries.operate === 'function') {
+ };
+
+ const getDefaultSummaries = (
+ data: any[],
+ field: string
+ ): IgrSummaryResult[] => {
+ const columnInstance = treeGrid.columns.find((c) => c.field === field);
+ if (
+ columnInstance &&
+ columnInstance.summaries &&
+ typeof columnInstance.summaries.operate === "function"
+ ) {
return columnInstance.summaries.operate([], data, field, null);
}
return [];
- }
-
- updateCheckboxes() {
- if (!this.state.currentColumn || !this.treeGrid) return;
-
- const gridData: any[] = this.treeGrid.data;
+ };
+
+ const updateCheckboxes = () => {
+ if (!currentColumn || !treeGrid) return;
+
+ const gridData: any[] = treeGrid.data;
let allSummaries: IgrSummaryResult[] = [];
- if (this.state.currentColumn.summaries) {
- allSummaries = this.getSummaryResults(this.state.currentColumn.summaries, gridData, this.state.currentColumn.field);
- } else {
- allSummaries = this.getDefaultSummaries(gridData, this.state.currentColumn.field);
+ if (currentColumn.summaries) {
+ allSummaries = getSummaryResults(
+ currentColumn.summaries,
+ gridData,
+ currentColumn.field
+ );
+ } else {
+ allSummaries = getDefaultSummaries(gridData, currentColumn.field);
}
-
+
let allDisabled: boolean = true;
let allEnabled: boolean = true;
-
- const checkboxStates: any[] = allSummaries.map(summary => {
- const isDisabled = this.state.currentColumn.disabledSummaries.includes(summary.key);
- if (isDisabled) {
- allEnabled = false;
- } else {
- allDisabled = false;
- }
- return {
- label: summary.label,
- key: summary.key,
- checked: isDisabled,
- };
- });
-
- this.setState({
- checkboxStates,
- disableAllBtnDisabled: allDisabled,
- enableAllBtnDisabled: allEnabled,
+
+ const newCheckboxStates: any[] = allSummaries.map((summary) => {
+ const isDisabled = currentColumn.disabledSummaries.includes(summary.key);
+ if (isDisabled) {
+ allEnabled = false;
+ } else {
+ allDisabled = false;
+ }
+ return {
+ label: summary.label,
+ key: summary.key,
+ checked: isDisabled,
+ };
});
- }
-
- toggleSummary = (summaryKey: string) => {
- if (!this.state.currentColumn || !this.treeGrid) return;
- const { currentColumn, columns } = this.state;
-
- const updatedDisabledSummaries: string[] = currentColumn.disabledSummaries.includes(summaryKey)
- ? currentColumn.disabledSummaries.filter((key: any) => key !== summaryKey)
- : [...currentColumn.disabledSummaries, summaryKey];
-
- const updatedColumns: any[] = columns.map((col: any) =>
- col.field === currentColumn.field
- ? { ...col, disabledSummaries: updatedDisabledSummaries }
- : col
+
+ setCheckboxStates(newCheckboxStates);
+ setDisableAllBtnDisabled(allDisabled);
+ setEnableAllBtnDisabled(allEnabled);
+ };
+
+ const toggleSummary = (summaryKey: string) => {
+ if (!currentColumn || !treeGrid) return;
+
+ const updatedDisabledSummaries = currentColumn.disabledSummaries.includes(
+ summaryKey
+ )
+ ? currentColumn.disabledSummaries.filter((key: any) => key !== summaryKey)
+ : [...currentColumn.disabledSummaries, summaryKey];
+
+ const updatedColumns = columns.map((col: any) =>
+ col.field === currentColumn.field
+ ? { ...col, disabledSummaries: updatedDisabledSummaries }
+ : col
);
-
- this.setState({
- currentColumn: { ...currentColumn, disabledSummaries: updatedDisabledSummaries },
- columns: updatedColumns,
- }, () => {
- this.treeGrid.markForCheck();
- });
- };
-
- disableAllSummaries = () => {
- if (!this.state.currentColumn || !this.treeGrid) return;
-
- const gridData: any[] = this.treeGrid.data;
- let allSummaries: IgrSummaryResult[] = [];
- if (this.state.currentColumn.summaries) {
- allSummaries = this.getSummaryResults(this.state.currentColumn.summaries, gridData, this.state.currentColumn.field);
- } else {
- allSummaries = this.getDefaultSummaries(gridData, this.state.currentColumn.field);
- }
-
- const allSummaryKeys: string[] = allSummaries.map(s => s.key);
-
- const updatedColumns: any[] = this.state.columns.map((col: any) =>
- col.field === this.state.currentColumn!.field
- ? { ...col, disabledSummaries: allSummaryKeys }
- : col
+
+ setCurrentColumn((prev) => ({
+ ...prev,
+ disabledSummaries: updatedDisabledSummaries,
+ }));
+ setColumns(updatedColumns);
+ setCurrentColumnSource("toggle");
+ };
+
+ const disableAllSummaries = () => {
+ if (!currentColumn || !treeGrid) return;
+
+ const gridData: any[] = treeGrid.data;
+ let allSummaries: IgrSummaryResult[] = currentColumn.summaries
+ ? getSummaryResults(
+ currentColumn.summaries,
+ gridData,
+ currentColumn.field
+ )
+ : getDefaultSummaries(gridData, currentColumn.field);
+
+ const allSummaryKeys: string[] = allSummaries.map((s) => s.key);
+
+ const updatedColumns = columns.map((col: any) =>
+ col.field === currentColumn.field
+ ? { ...col, disabledSummaries: allSummaryKeys }
+ : col
);
-
- this.setState((prevState: any) => ({
- currentColumn: { ...prevState.currentColumn!, disabledSummaries: allSummaryKeys },
- columns: updatedColumns,
- disableAllBtnDisabled: true,
- enableAllBtnDisabled: false,
- }), () => {
- this.updateCheckboxes();
- this.treeGrid.markForCheck();
- });
- };
-
- enableAllSummaries = () => {
- if (!this.state.currentColumn || !this.treeGrid) return;
-
- const updatedColumns: any[] = this.state.columns.map((col: any) =>
- col.field === this.state.currentColumn!.field
- ? { ...col, disabledSummaries: [] }
- : col
+
+ setCurrentColumn((prev) => ({
+ ...prev,
+ disabledSummaries: allSummaryKeys,
+ }));
+ setColumns(updatedColumns);
+ setDisableAllBtnDisabled(true);
+ setEnableAllBtnDisabled(false);
+
+ setPendingUpdateType("disableAll");
+ };
+
+ const enableAllSummaries = () => {
+ if (!currentColumn || !treeGrid) return;
+
+ const updatedColumns = columns.map((col: any) =>
+ col.field === currentColumn.field
+ ? { ...col, disabledSummaries: [] }
+ : col
);
-
- this.setState((prevState: any) => ({
- currentColumn: { ...prevState.currentColumn!, disabledSummaries: [] },
- columns: updatedColumns,
- disableAllBtnDisabled: false,
- enableAllBtnDisabled: true,
- }), () => {
- this.updateCheckboxes();
- this.treeGrid.markForCheck();
- });
- };
-
- public render(): JSX.Element {
- return (
- {
constructor(props: any) {
@@ -23,7 +21,7 @@ export default class TreeBasicExample extends React.Component {
{
constructor(props: any) {
diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx
index cc02159870..abe11d2fd9 100644
--- a/samples/inputs/badge/shape/src/index.tsx
+++ b/samples/inputs/badge/shape/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrBadge, IgrBadgeModule } from 'igniteui-react';
+import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrBadgeModule.register();
-
export default class BadgeShape extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx
index 78c0074caf..b036427cbc 100644
--- a/samples/inputs/badge/variants/src/index.tsx
+++ b/samples/inputs/badge/variants/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrBadge, IgrBadgeModule } from 'igniteui-react';
+import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrBadgeModule.register();
-
export default class BadgeVariants extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button-group/alignment/src/index.tsx b/samples/inputs/button-group/alignment/src/index.tsx
index 47f6b1baf4..b0721cb0d1 100644
--- a/samples/inputs/button-group/alignment/src/index.tsx
+++ b/samples/inputs/button-group/alignment/src/index.tsx
@@ -2,37 +2,33 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import {
IgrButtonGroup,
- IgrButtonGroupModule,
IgrRipple,
- IgrRippleModule,
IgrToggleButton,
} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupAlignment.css';
import './index.css';
-IgrButtonGroupModule.register();
-IgrRippleModule.register();
export default function ButtonGroupAlignment() {
return (
-
- Sofia
-
+ Sofia
+
-
- London
-
+ London
+
-
- New York
-
+ New York
+
-
- Tokio
-
+ Tokio
+
diff --git a/samples/inputs/button-group/overview/src/index.tsx b/samples/inputs/button-group/overview/src/index.tsx
index 1a1cff07d6..a7ceedc44a 100644
--- a/samples/inputs/button-group/overview/src/index.tsx
+++ b/samples/inputs/button-group/overview/src/index.tsx
@@ -2,11 +2,8 @@ import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import {
IgrButtonGroup,
- IgrButtonGroupModule,
IgrIcon,
- IgrIconModule,
IgrRipple,
- IgrRippleModule,
IgrToggleButton,
registerIconFromText,
} from 'igniteui-react';
@@ -14,9 +11,6 @@ import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupOverview.css';
import './index.css';
-IgrButtonGroupModule.register();
-IgrIconModule.register();
-IgrRippleModule.register();
const icons = [
{
@@ -47,21 +41,21 @@ export default function ButtonGroupOverview() {
return (
-
-
+
-
-
+
-
-
+
-
-
+
diff --git a/samples/inputs/button-group/selection/src/index.tsx b/samples/inputs/button-group/selection/src/index.tsx
index 3fad699586..90e51f5ecb 100644
--- a/samples/inputs/button-group/selection/src/index.tsx
+++ b/samples/inputs/button-group/selection/src/index.tsx
@@ -3,15 +3,11 @@ import ReactDOM from 'react-dom/client';
import {
ButtonGroupSelection,
IgrButtonGroup,
- IgrButtonGroupModule,
IgrIcon,
- IgrIconModule,
IgrRadio,
IgrRadioChangeEventArgs,
IgrRadioGroup,
- IgrRadioGroupModule,
IgrRipple,
- IgrRippleModule,
IgrToggleButton,
registerIconFromText,
} from 'igniteui-react';
@@ -19,11 +15,6 @@ import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupSelection.css';
import './index.css';
-IgrButtonGroupModule.register();
-IgrRadioGroupModule.register();
-IgrIconModule.register();
-IgrRippleModule.register();
-
const icons = [
{
name: 'bold',
@@ -58,29 +49,29 @@ export default function ButtonGroupSelectionSample() {
-
- Single
+
+ Single
-
- Single-Required
+
+ Single-Required
-
- Multiple
+
+ Multiple
-
-
+
-
-
+
-
-
+
diff --git a/samples/inputs/button-group/size/src/index.tsx b/samples/inputs/button-group/size/src/index.tsx
index 2f166cf304..969af56221 100644
--- a/samples/inputs/button-group/size/src/index.tsx
+++ b/samples/inputs/button-group/size/src/index.tsx
@@ -2,15 +2,12 @@ import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import {
IgrButtonGroup,
- IgrButtonGroupModule,
IgrComponentValueChangedEventArgs,
IgrToggleButton,
} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/material.css';
import './index.css';
-IgrButtonGroupModule.register();
-
export default function ButtonGroupSize() {
const [style, setStyle] = useState({ '--ig-size': 'var(--ig-size-large)' } as React.CSSProperties)
@@ -23,14 +20,14 @@ export default function ButtonGroupSize() {
return (
-
- Small
+
+ Small
-
- Medium
+
+ Medium
-
- Large
+
+ Large
diff --git a/samples/inputs/button-group/styling/src/index.tsx b/samples/inputs/button-group/styling/src/index.tsx
index 59cf234c0a..936cd0af33 100644
--- a/samples/inputs/button-group/styling/src/index.tsx
+++ b/samples/inputs/button-group/styling/src/index.tsx
@@ -2,37 +2,32 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import {
IgrButtonGroup,
- IgrButtonGroupModule,
IgrRipple,
- IgrRippleModule,
IgrToggleButton,
} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/material.css';
import './ButtonGroupStyling.css';
import './index.css';
-IgrButtonGroupModule.register();
-IgrRippleModule.register();
-
export default function ButtonGroupStyling() {
return (
-
- Sofia
-
+ Sofia
+
-
- London
-
+ London
+
-
- New York
-
+ New York
+
-
- Tokio
-
+ Tokio
+
diff --git a/samples/inputs/button/contained/src/index.tsx b/samples/inputs/button/contained/src/index.tsx
index ec435763e6..dafc24a3e8 100644
--- a/samples/inputs/button/contained/src/index.tsx
+++ b/samples/inputs/button/contained/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonContained extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button/download/src/index.tsx b/samples/inputs/button/download/src/index.tsx
index 168bc6384c..9139fe801e 100644
--- a/samples/inputs/button/download/src/index.tsx
+++ b/samples/inputs/button/download/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonDownload extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button/fab/src/index.tsx b/samples/inputs/button/fab/src/index.tsx
index ae79ad5db0..84e995d1f2 100644
--- a/samples/inputs/button/fab/src/index.tsx
+++ b/samples/inputs/button/fab/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonFab extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button/flat/src/index.tsx b/samples/inputs/button/flat/src/index.tsx
index a59b15e9d6..319341db76 100644
--- a/samples/inputs/button/flat/src/index.tsx
+++ b/samples/inputs/button/flat/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonFlat extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button/outlined/src/index.tsx b/samples/inputs/button/outlined/src/index.tsx
index 24e9f88354..88a3b6cd3c 100644
--- a/samples/inputs/button/outlined/src/index.tsx
+++ b/samples/inputs/button/outlined/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonOutlined extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button/overview/src/index.tsx b/samples/inputs/button/overview/src/index.tsx
index 806fa14540..de65eed692 100644
--- a/samples/inputs/button/overview/src/index.tsx
+++ b/samples/inputs/button/overview/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ButtonOverviewStyle.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonOverview extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/button/size/src/index.tsx b/samples/inputs/button/size/src/index.tsx
index 9e9265be9a..02dfd28212 100644
--- a/samples/inputs/button/size/src/index.tsx
+++ b/samples/inputs/button/size/src/index.tsx
@@ -2,13 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ButtonSizingStyle.css';
-import { IgrButton, IgrRadio, IgrRadioGroup, IgrButtonModule, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-IgrRadioGroupModule.register();
-IgrRadioModule.register();
-
export default class ButtonSize extends React.Component {
constructor(props: any) {
@@ -21,10 +17,10 @@ export default class ButtonSize extends React.Component {
return (
-
+
Small
-
+
Medium
diff --git a/samples/inputs/button/styling/src/index.tsx b/samples/inputs/button/styling/src/index.tsx
index 1b073dc989..56b4a6d516 100644
--- a/samples/inputs/button/styling/src/index.tsx
+++ b/samples/inputs/button/styling/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ButtonStyle.css';
-import { IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-
export default class ButtonStyling extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/checkbox/checking/src/index.tsx b/samples/inputs/checkbox/checking/src/index.tsx
index 1745d94dd9..76cdf7abb6 100644
--- a/samples/inputs/checkbox/checking/src/index.tsx
+++ b/samples/inputs/checkbox/checking/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react';
+import { IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrCheckboxModule.register();
-
export default class CheckboxChecked extends React.Component {
constructor(props: any) {
@@ -16,7 +14,7 @@ export default class CheckboxChecked extends React.Component {
return (
- Label
+ Label
);
diff --git a/samples/inputs/checkbox/disabled/src/index.tsx b/samples/inputs/checkbox/disabled/src/index.tsx
index a5970cb8dc..bee5314a60 100644
--- a/samples/inputs/checkbox/disabled/src/index.tsx
+++ b/samples/inputs/checkbox/disabled/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react';
+import { IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrCheckboxModule.register();
-
export default class CheckboxDisabled extends React.Component {
constructor(props: any) {
@@ -16,7 +14,7 @@ export default class CheckboxDisabled extends React.Component {
return (
- Label
+ Label
);
diff --git a/samples/inputs/checkbox/indeterminate/src/index.tsx b/samples/inputs/checkbox/indeterminate/src/index.tsx
index 6a6246d6bd..990fdd25d6 100644
--- a/samples/inputs/checkbox/indeterminate/src/index.tsx
+++ b/samples/inputs/checkbox/indeterminate/src/index.tsx
@@ -4,8 +4,6 @@ import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrCheckboxModule.register();
-
export default class CheckboxIndeterminate extends React.Component {
constructor(props: any) {
@@ -16,7 +14,7 @@ export default class CheckboxIndeterminate extends React.Component {
return (
- Label
+ Label
);
diff --git a/samples/inputs/checkbox/label/src/index.tsx b/samples/inputs/checkbox/label/src/index.tsx
index 3633e57cea..1662d02b09 100644
--- a/samples/inputs/checkbox/label/src/index.tsx
+++ b/samples/inputs/checkbox/label/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CheckboxLabelStyles.css'
-import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react';
+import { IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrCheckboxModule.register();
-
export default class CheckboxLabel extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/checkbox/overview/src/index.tsx b/samples/inputs/checkbox/overview/src/index.tsx
index 1d444a50e7..1cfec221ac 100644
--- a/samples/inputs/checkbox/overview/src/index.tsx
+++ b/samples/inputs/checkbox/overview/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrCheckbox, IgrCheckboxModule } from 'igniteui-react';
+import { IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrCheckboxModule.register();
-
export default class CheckboxOverview extends React.Component {
constructor(props: any) {
@@ -16,7 +14,7 @@ export default class CheckboxOverview extends React.Component {
return (
- Checkbox
+ Checkbox
);
diff --git a/samples/inputs/chip/multiple/src/index.tsx b/samples/inputs/chip/multiple/src/index.tsx
index c4390d0859..b6626611d1 100644
--- a/samples/inputs/chip/multiple/src/index.tsx
+++ b/samples/inputs/chip/multiple/src/index.tsx
@@ -1,11 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrChip, IgrIcon, IgrChipModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrChip, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrChipModule.register();
-IgrIconModule.register();
+const customSelectIconText = '';
+const customRemoveIconText = '';
+const brushIconText = '';
+const brickIconText = '';
+const dogIconText = '';
const customSelectIconText = '';
const customRemoveIconText = '';
diff --git a/samples/inputs/chip/overview/src/index.tsx b/samples/inputs/chip/overview/src/index.tsx
index d26f48ed35..0a127f6bb0 100644
--- a/samples/inputs/chip/overview/src/index.tsx
+++ b/samples/inputs/chip/overview/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrChip, IgrChipModule } from 'igniteui-react';
+import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrChipModule.register();
-
export default class ChipOverview extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/chip/size/src/index.tsx b/samples/inputs/chip/size/src/index.tsx
index 45f390260e..b5934d2f12 100644
--- a/samples/inputs/chip/size/src/index.tsx
+++ b/samples/inputs/chip/size/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrChip, IgrChipModule } from 'igniteui-react';
+import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrChipModule.register();
-
export default class ChipSize extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/chip/styling/src/index.tsx b/samples/inputs/chip/styling/src/index.tsx
index f570a2007f..8bf0e56de2 100644
--- a/samples/inputs/chip/styling/src/index.tsx
+++ b/samples/inputs/chip/styling/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ChipStyle.css';
-import { IgrChip, IgrChipModule } from 'igniteui-react';
+import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrChipModule.register();
-
export default class ChipStyling extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/chip/variants/src/index.tsx b/samples/inputs/chip/variants/src/index.tsx
index 8e8b31ee5d..376c79ea36 100644
--- a/samples/inputs/chip/variants/src/index.tsx
+++ b/samples/inputs/chip/variants/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrChip, IgrChipModule } from 'igniteui-react';
+import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrChipModule.register();
-
export default class ChipVariants extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/combo/features/src/index.tsx b/samples/inputs/combo/features/src/index.tsx
index b0939181dc..5f8feacaa9 100644
--- a/samples/inputs/combo/features/src/index.tsx
+++ b/samples/inputs/combo/features/src/index.tsx
@@ -1,33 +1,15 @@
-import React, { useRef } from "react";
+import React, { useState } from "react";
import ReactDOM from "react-dom/client";
-import { IgrCheckboxChangeEventArgs, IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from "igniteui-react";
+import { IgrCombo, IgrSwitch } from "igniteui-react";
import "./index.css";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import { Cities } from "./ComboData";
-IgrComboModule.register();
-IgrSwitchModule.register();
-
export default function ComboFeatures() {
- const comboRef = useRef(null);
- const switchCaseSensitiveRef = useRef(null);
-
- const disableFiltering = (e: IgrCheckboxChangeEventArgs) => {
- comboRef.current.disableFiltering =
- switchCaseSensitiveRef.current.disabled = e.detail.checked;
- };
-
- const showCaseSencitiveIcon = (e: IgrCheckboxChangeEventArgs) => {
- comboRef.current.caseSensitiveIcon = e.detail.checked;
- };
-
- const enableGrouping = (e: IgrCheckboxChangeEventArgs) => {
- comboRef.current.groupKey = e.detail.checked ? "country" : undefined;
- };
-
- const disableCombo = (e: IgrCheckboxChangeEventArgs) => {
- comboRef.current.disabled = e.detail.checked;
- };
+ const [disableFiltering, setDisableFiltering] = useState(false);
+ const [caseSensitiveIcon, setCaseSensitiveIcon] = useState(false);
+ const [groupingEnabled, setGroupingEnabled] = useState(false);
+ const [comboDisabled, setComboDisabled] = useState(false);
return (
(null);
@@ -40,16 +37,16 @@ export default function ComboSelection() {
>
- Select UK Cities
+ Select UK Cities
- Deselect UK Favorites
+ Deselect UK Favorites
- Select All
+ Select All
- Deselect All
+ Deselect All
diff --git a/samples/inputs/combo/simplified/src/index.tsx b/samples/inputs/combo/simplified/src/index.tsx
index dc93894eda..5df07ff46d 100644
--- a/samples/inputs/combo/simplified/src/index.tsx
+++ b/samples/inputs/combo/simplified/src/index.tsx
@@ -1,23 +1,13 @@
-import React, { useRef } from "react";
+import React, { useState } from "react";
import ReactDOM from "react-dom/client";
-import { IgrCheckboxChangeEventArgs, IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from "igniteui-react";
+import { IgrCheckboxChangeEventArgs, IgrCombo, IgrSwitch } from "igniteui-react";
import "./index.css";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import { Cities } from "./ComboData";
-IgrComboModule.register();
-IgrSwitchModule.register();
-
export default function ComboSingleSelection() {
- const comboRef = useRef(null);
-
- const enableGrouping = (e: IgrCheckboxChangeEventArgs) => {
- comboRef.current.groupKey = e.detail.checked ? "country" : undefined;
- };
-
- const disableCombo = (e: IgrCheckboxChangeEventArgs) => {
- comboRef.current.disabled = e.detail.checked;
- };
+ const [groupingEnabled, setGroupingEnabled] = useState(false);
+ const [comboDisabled, setComboDisabled] = useState(false);
return (
diff --git a/samples/inputs/combo/templates/.eslintrc.js b/samples/inputs/combo/templates/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/inputs/combo/templates/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+ parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+ parserOptions: {
+ ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+ sourceType: "module", // Allows for the use of imports
+ ecmaFeatures: {
+ jsx: true // Allows for the parsing of JSX
+ }
+ },
+ settings: {
+ react: {
+ version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+ }
+ },
+ extends: [
+ "eslint:recommended",
+ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+ "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+ ],
+ rules: {
+ // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ },
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+ }
+ ]
+ };
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/README.md b/samples/inputs/combo/templates/README.md
new file mode 100644
index 0000000000..386e26cdfd
--- /dev/null
+++ b/samples/inputs/combo/templates/README.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of React application with example of Templates feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/combo/templates
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/combo/templates/package.json b/samples/inputs/combo/templates/package.json
new file mode 100644
index 0000000000..6833ffe105
--- /dev/null
+++ b/samples/inputs/combo/templates/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "react-combo-overview",
+ "description": "This project provides example of Combo Overview using Infragistics React components",
+ "author": "Infragistics",
+ "homepage": ".",
+ "version": "1.4.0",
+ "private": true,
+ "scripts": {
+ "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+ "build": "react-scripts --max_old_space_size=10240 build ",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "dependencies": {
+ "igniteui-dockmanager": "1.16.1",
+ "igniteui-react": "19.0.2",
+ "igniteui-react-core": "19.0.0-alpha.0",
+ "igniteui-react-grids": "19.0.2",
+ "igniteui-react-inputs": "19.0.0-alpha.0",
+ "igniteui-react-layouts": "19.0.0-alpha.0",
+ "igniteui-webcomponents": "6.0.0",
+ "lit-html": "^3.2.0",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "react-scripts": "^5.0.1",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@types/jest": "^29.2.0",
+ "@types/node": "^18.11.7",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "react-app-rewired": "^2.2.1",
+ "typescript": "^4.8.4",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/inputs/combo/templates/public/index.html b/samples/inputs/combo/templates/public/index.html
new file mode 100644
index 0000000000..2e48989a3b
--- /dev/null
+++ b/samples/inputs/combo/templates/public/index.html
@@ -0,0 +1,10 @@
+
+
+
+ Combo Overview
+
+
+
+
+
+
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/sandbox.config.json b/samples/inputs/combo/templates/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/inputs/combo/templates/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/src/data.ts b/samples/inputs/combo/templates/src/data.ts
new file mode 100644
index 0000000000..5809209978
--- /dev/null
+++ b/samples/inputs/combo/templates/src/data.ts
@@ -0,0 +1,33 @@
+export interface City {
+ id: string;
+ name: string;
+ country: string;
+ }
+
+ export const Cities: City[] = [
+ { name: "London", id: "UK01", country: "UK" },
+ { name: "Manchester", id: "UK02", country: "UK" },
+ { name: "Birmingham", id: "UK03", country: "UK" },
+ { name: "Glasgow", id: "UK04", country: "UK" },
+ { name: "Liverpool", id: "UK05", country: "UK" },
+ { name: "New York", id: "US01", country: "USA" },
+ { name: "Miami", id: "US02", country: "USA" },
+ { name: "Philadelphia", id: "US03", country: "USA" },
+ { name: "Chicago", id: "US04", country: "USA" },
+ { name: "Springfield", id: "US05", country: "USA" },
+ { name: "Los Angeles", id: "US06", country: "USA" },
+ { name: "Houston", id: "US07", country: "USA" },
+ { name: "Phoenix", id: "US08", country: "USA" },
+ { name: "San Diego", id: "US09", country: "USA" },
+ { name: "Dallas", id: "US010", country: "USA" },
+ { name: "Sofia", id: "BG01", country: "Bulgaria" },
+ { name: "Plovdiv", id: "BG02", country: "Bulgaria" },
+ { name: "Varna", id: "BG03", country: "Bulgaria" },
+ { name: "Burgas", id: "BG04", country: "Bulgaria" },
+ { name: "Rome", id: "IT01", country: "Italy" },
+ { name: "Milan", id: "IT02", country: "Italy" },
+ { name: "Naples", id: "IT03", country: "Italy" },
+ { name: "Turin", id: "IT04", country: "Italy" },
+ { name: "Palermo", id: "IT05", country: "Italy" },
+ { name: "Florence", id: "IT06", country: "Italy" },
+ ];
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/src/index.css b/samples/inputs/combo/templates/src/index.css
new file mode 100644
index 0000000000..c0938eecaa
--- /dev/null
+++ b/samples/inputs/combo/templates/src/index.css
@@ -0,0 +1,6 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.combo-padding {
+ padding: 12px 16px;
+}
\ No newline at end of file
diff --git a/samples/inputs/combo/templates/src/index.tsx b/samples/inputs/combo/templates/src/index.tsx
new file mode 100644
index 0000000000..1f3e928b03
--- /dev/null
+++ b/samples/inputs/combo/templates/src/index.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import {
+ IgrCombo,
+ ComboTemplateProps,
+ IgrIcon,
+ registerIconFromText
+} from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import { Cities, City } from "./data";
+import "./index.css";
+
+export default function ComboTemplates() {
+
+ const downIcon = '';
+ const clearIcon = '';
+
+ useEffect(() => {
+ registerIconFromText("down", downIcon, "material");
+ registerIconFromText("clear", clearIcon, "material");
+ }, []);
+
+ const renderGroupHeaderTemplate = (args: ComboTemplateProps) => {
+ return Country of {args.item.country};
+ };
+
+ const renderItemTemplate = (args: ComboTemplateProps) => {
+ const item = args.item;
+ return (
+
+ {item.name} [{item.id}] - {item.country}
+
+ );
+ };
+
+ return (
+
- this.dateTimeInput.clear()}>
+ this.dateTimeInput.clear()}>
diff --git a/samples/inputs/date-time-input/min-max-value/src/index.tsx b/samples/inputs/date-time-input/min-max-value/src/index.tsx
index 42f7907577..3746b125df 100644
--- a/samples/inputs/date-time-input/min-max-value/src/index.tsx
+++ b/samples/inputs/date-time-input/min-max-value/src/index.tsx
@@ -1,11 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrIcon, IgrIconModule, IgrDateTimeInput, IgrDateTimeInputModule, DatePart, registerIconFromText } from 'igniteui-react';
+import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrIconModule.register();
-IgrDateTimeInputModule.register();
+const upIconText = '';
+const downIconText = '';
+const clearIconText = '';
const upIconText = '';
const downIconText = '';
@@ -26,13 +27,13 @@ export default class DateTimeInputMinMaxValue extends React.Component
return (
- this.dateTimeInput.clear()}>
+ this.dateTimeInput.clear()}>
diff --git a/samples/inputs/date-time-input/overview/src/index.tsx b/samples/inputs/date-time-input/overview/src/index.tsx
index 1e6bffccec..f1ef93b95c 100644
--- a/samples/inputs/date-time-input/overview/src/index.tsx
+++ b/samples/inputs/date-time-input/overview/src/index.tsx
@@ -1,11 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrIcon, IgrIconModule, IgrDateTimeInput, IgrDateTimeInputModule, DatePart, registerIconFromText } from 'igniteui-react';
+import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrIconModule.register();
-IgrDateTimeInputModule.register();
+const upIconText = '';
+const downIconText = '';
+const clearIconText = '';
const upIconText = '';
const downIconText = '';
@@ -26,13 +27,13 @@ export default class DateTimeInputOverview extends React.Component {
return (
- this.dateTimeInput.clear()}>
+ this.dateTimeInput.clear()}>
diff --git a/samples/inputs/date-time-input/step-up-down/src/index.tsx b/samples/inputs/date-time-input/step-up-down/src/index.tsx
index 4fefcca435..67446ea4cc 100644
--- a/samples/inputs/date-time-input/step-up-down/src/index.tsx
+++ b/samples/inputs/date-time-input/step-up-down/src/index.tsx
@@ -1,11 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrIcon, IgrIconModule, IgrDateTimeInput, IgrDateTimeInputModule, DatePart, registerIconFromText } from 'igniteui-react';
+import { IgrIcon, IgrDateTimeInput, DatePart, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrIconModule.register();
-IgrDateTimeInputModule.register();
+const upIconText = '';
+const downIconText = '';
+const clearIconText = '';
const upIconText = '';
const downIconText = '';
@@ -27,13 +28,13 @@ export default class DateTimeInputStepUpDown extends React.Component {
return (
- this.dateTimeInput.clear()}>
+ this.dateTimeInput.clear()}>
diff --git a/samples/inputs/dropdown/group/src/index.tsx b/samples/inputs/dropdown/group/src/index.tsx
index 0ec1e32c8b..8d9753a65f 100644
--- a/samples/inputs/dropdown/group/src/index.tsx
+++ b/samples/inputs/dropdown/group/src/index.tsx
@@ -1,13 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, IgrDropdownGroup, registerIconFromText } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownGroup, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-IgrIconModule.register();
+const placeIconText = "";
const placeIconText = "";
diff --git a/samples/inputs/dropdown/header/src/index.tsx b/samples/inputs/dropdown/header/src/index.tsx
index b469f12b6d..0836ff1ace 100644
--- a/samples/inputs/dropdown/header/src/index.tsx
+++ b/samples/inputs/dropdown/header/src/index.tsx
@@ -1,13 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, IgrDropdownHeader, registerIconFromText } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownHeader, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-IgrIconModule.register();
+const ringIconText = "";
+const vibrateIconText = "";
+const silentIconText = "";
const ringIconText = "";
const vibrateIconText = "";
diff --git a/samples/inputs/dropdown/item/src/index.tsx b/samples/inputs/dropdown/item/src/index.tsx
index ddc1d3ca47..f4633b918d 100644
--- a/samples/inputs/dropdown/item/src/index.tsx
+++ b/samples/inputs/dropdown/item/src/index.tsx
@@ -1,13 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-IgrIconModule.register();
+const hotelIconText = "";
+const groceryIconText = "";
+const restaurantIconText = "";
const hotelIconText = "";
const groceryIconText = "";
diff --git a/samples/inputs/dropdown/overview/src/index.tsx b/samples/inputs/dropdown/overview/src/index.tsx
index 41340327ca..25bae3b5f1 100644
--- a/samples/inputs/dropdown/overview/src/index.tsx
+++ b/samples/inputs/dropdown/overview/src/index.tsx
@@ -1,13 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-
export default class DropDownOverview extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/dropdown/position/src/index.tsx b/samples/inputs/dropdown/position/src/index.tsx
index 91b0acb4fa..8ddabbdf6b 100644
--- a/samples/inputs/dropdown/position/src/index.tsx
+++ b/samples/inputs/dropdown/position/src/index.tsx
@@ -1,13 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, DropdownPlacement } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-
export default class DropDownPosition extends React.Component {
public dropdownRef: IgrDropdown;
diff --git a/samples/inputs/dropdown/styling/src/index.tsx b/samples/inputs/dropdown/styling/src/index.tsx
index 80a0a5b445..8345678655 100644
--- a/samples/inputs/dropdown/styling/src/index.tsx
+++ b/samples/inputs/dropdown/styling/src/index.tsx
@@ -1,13 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule, IgrIconModule, IgrDropdownGroup, registerIconFromText } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem, IgrIcon, IgrDropdownGroup, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-IgrIconModule.register();
+const placeIconText = "";
const placeIconText = "";
diff --git a/samples/inputs/dropdown/target/src/index.tsx b/samples/inputs/dropdown/target/src/index.tsx
index a06b72e6e7..f86463aae9 100644
--- a/samples/inputs/dropdown/target/src/index.tsx
+++ b/samples/inputs/dropdown/target/src/index.tsx
@@ -1,13 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrDropdown, IgrButton, IgrDropdownItem, IgrDropdownModule, IgrButtonModule, IgrDropdownItemModule } from 'igniteui-react';
+import { IgrDropdown, IgrButton, IgrDropdownItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrDropdownModule.register();
-IgrDropdownItemModule.register();
-IgrButtonModule.register();
-
export default class DropDownTarget extends React.Component {
public dropdownRef: IgrDropdown;
@@ -41,7 +37,7 @@ export default class DropDownTarget extends React.Component {
public onClick(event: any) {
if(this.dropdownRef){
- this.dropdownRef.toggle(event.i.nativeElement);
+ this.dropdownRef.toggle(event.currentTarget);
}
}
}
diff --git a/samples/inputs/icon-button/size/src/index.tsx b/samples/inputs/icon-button/size/src/index.tsx
index 25953bfc4d..08bff40e33 100644
--- a/samples/inputs/icon-button/size/src/index.tsx
+++ b/samples/inputs/icon-button/size/src/index.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrIconButton, IgrIconButtonModule, registerIconFromText } from 'igniteui-react';
+import { IgrIconButton, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrIconButtonModule.register();
+const iconText = '';
const iconText = '';
diff --git a/samples/inputs/icon-button/styling/src/index.tsx b/samples/inputs/icon-button/styling/src/index.tsx
index a3135d4106..f8bb3c7253 100644
--- a/samples/inputs/icon-button/styling/src/index.tsx
+++ b/samples/inputs/icon-button/styling/src/index.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrIconButton, IgrIconButtonModule, registerIconFromText } from 'igniteui-react';
+import { IgrIconButton, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./IconButtonStyling.css";
-IgrIconButtonModule.register();
+const iconText = '';
const iconText = '';
diff --git a/samples/inputs/icon-button/variant/src/index.tsx b/samples/inputs/icon-button/variant/src/index.tsx
index 53f7f30498..8d5aef4bb1 100644
--- a/samples/inputs/icon-button/variant/src/index.tsx
+++ b/samples/inputs/icon-button/variant/src/index.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrIconButton, IgrIconButtonModule, registerIconFromText } from 'igniteui-react';
+import { IgrIconButton, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrIconButtonModule.register();
+const iconText = '';
const iconText = '';
diff --git a/samples/inputs/input/helper-text/src/index.tsx b/samples/inputs/input/helper-text/src/index.tsx
index 8db24100ca..faee2b7bb9 100644
--- a/samples/inputs/input/helper-text/src/index.tsx
+++ b/samples/inputs/input/helper-text/src/index.tsx
@@ -1,11 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrInput, IgrInputModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrInput, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrInputModule.register();
-IgrIconModule.register();
+const phoneIconText = '';
const phoneIconText = '';
diff --git a/samples/inputs/input/overview/src/index.tsx b/samples/inputs/input/overview/src/index.tsx
index 9d4d8a6d6d..a9c5ad8952 100644
--- a/samples/inputs/input/overview/src/index.tsx
+++ b/samples/inputs/input/overview/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrInput, IgrInputModule } from 'igniteui-react';
+import { IgrInput } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrInputModule.register();
-
export default class InputOverview extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/input/prefix-suffix/src/index.tsx b/samples/inputs/input/prefix-suffix/src/index.tsx
index 6e2f7c2882..ad9f1ab625 100644
--- a/samples/inputs/input/prefix-suffix/src/index.tsx
+++ b/samples/inputs/input/prefix-suffix/src/index.tsx
@@ -1,11 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrInput, IgrInputModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrInput, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrInputModule.register();
-IgrIconModule.register();
+const phoneIconText = '';
const phoneIconText = '';
diff --git a/samples/inputs/input/size/src/index.tsx b/samples/inputs/input/size/src/index.tsx
index f1cd4dd0fa..adcf3db012 100644
--- a/samples/inputs/input/size/src/index.tsx
+++ b/samples/inputs/input/size/src/index.tsx
@@ -2,18 +2,15 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './InputSizeStyling.css';
-import { IgrInput, IgrInputModule, IgrRadio, IgrRadioModule, IgrRadioGroup, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrInput, IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrInputModule.register();
-IgrRadioModule.register();
-
export default class InputSize extends React.Component {
constructor(props: any) {
- super(props);
+ super(props);
this.onRadioChange = this.onRadioChange.bind(this);
- this.state = { size: "medium"};
+ this.state = { size: "medium" };
}
public render(): JSX.Element {
@@ -21,21 +18,21 @@ export default class InputSize extends React.Component {
- Small
- Medium
- Large
+ Small
+ Medium
+ Large
- {
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render( {
+const phoneIconText = '';
constructor(props: any) {
super(props);
diff --git a/samples/inputs/mask-input/overview/src/index.tsx b/samples/inputs/mask-input/overview/src/index.tsx
index 28142bf465..449b33c9f5 100644
--- a/samples/inputs/mask-input/overview/src/index.tsx
+++ b/samples/inputs/mask-input/overview/src/index.tsx
@@ -1,15 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrMaskInput, IgrIcon, IgrMaskInputModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrMaskInput, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrMaskInputModule.register();
-IgrIconModule.register();
-
const locationIconText = '';
-export default class MaskInputOverview extends React.Component {
+const locationIconText = '';
constructor(props: any) {
super(props);
diff --git a/samples/inputs/mask-input/value-modes/src/index.tsx b/samples/inputs/mask-input/value-modes/src/index.tsx
index 0963903556..17f8ddd9c1 100644
--- a/samples/inputs/mask-input/value-modes/src/index.tsx
+++ b/samples/inputs/mask-input/value-modes/src/index.tsx
@@ -1,14 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrMaskInput, IgrIcon, IgrRadioGroup, IgrRadio, IgrMaskInputModule, IgrIconModule, IgrRadioGroupModule, IgrRadioModule, registerIconFromText } from 'igniteui-react';
+import { IgrMaskInput, IgrIcon, IgrRadioGroup, IgrRadio, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrMaskInputModule.register();
-IgrIconModule.register();
-IgrRadioGroupModule.register();
-IgrRadioModule.register();
-
export default class MaskInputValueModes extends React.Component {
public maskRef: IgrMaskInput;
@@ -16,7 +11,7 @@ export default class MaskInputValueModes extends React.Component {
constructor(props: any) {
super(props);
this.onMaskRef = this.onMaskRef.bind(this);
- this.state = { value: "" };
+ this.state = { value: "", mode: "raw" };
const fileIconText = '';
registerIconFromText("file", fileIconText, "material");
@@ -25,25 +20,25 @@ export default class MaskInputValueModes extends React.Component {
public render(): JSX.Element {
return (
+ return (
+
this.openDialog({ field: col.field, header: col.header })}
+ onClick={() => openDialog({ field: col.field, header: col.header })}
>
{col.header}
))}
-
+
Disable All
- Enable All
+ Disable All
+ Enable All
col.field === "Artist")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Artist")?.disabledSummaries}>
{
dataType="image"
hasSummary={true}
summaries={GrammySummary}
- disabledSummaries={this.state.columns.find((col: any) => col.field === "Photo")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Photo")?.disabledSummaries}>
col.field === "Debut")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Debut")?.disabledSummaries}>
col.field === "GrammyNominations")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "GrammyNominations")?.disabledSummaries}>
col.field === "GrammyAwards")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "GrammyAwards")?.disabledSummaries}>
{
-
- );
- }
+
+ );
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(Disable Summaries for Column:
- {this.state.columns.map((col: any) => ( + {columns.map((col: any) => (
- {this.state.currentColumn && this.state.checkboxStates.map((checkbox: any) => (
+ {currentColumn && checkboxStates.map((checkbox: any) => (
this.toggleSummary(checkbox.key)}
+ onClick={() => toggleSummary(checkbox.key)}
>
{checkbox.label}
))}
-
-
);
}
diff --git a/samples/grids/list/add-list-items/src/index.tsx b/samples/grids/list/add-list-items/src/index.tsx
index 05ccbdfc66..67d21a75b6 100644
--- a/samples/grids/list/add-list-items/src/index.tsx
+++ b/samples/grids/list/add-list-items/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrList, IgrListItem, IgrListHeader, IgrListModule } from 'igniteui-react';
+import { IgrList, IgrListItem, IgrListHeader } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrListModule.register();
-
export default class ListAddListItems extends React.Component
-
+
+
-
- gridCreated(e, "Customers")
- }
+ childDataKey="Details"
+ primaryKey="productId"
+ onGridCreated={onOrdersGridCreatedHandler}
+ height="100%"
>
-
- gridCreated(e, "Orders")
- }
- >
-
+
-
-
+
+
-
+
+
diff --git a/samples/grids/tree-grid/disabled-summaries/src/index.tsx b/samples/grids/tree-grid/disabled-summaries/src/index.tsx
index 769488c57a..b564bad4f4 100644
--- a/samples/grids/tree-grid/disabled-summaries/src/index.tsx
+++ b/samples/grids/tree-grid/disabled-summaries/src/index.tsx
@@ -1,19 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrDialog, IgrCheckbox } from 'igniteui-react';
-import { IgrButtonModule, IgrDialogModule, IgrCheckboxModule } from 'igniteui-react';
-import { IgrTreeGridModule, IgrSummaryOperand, IgrSummaryResult } from 'igniteui-react-grids';
-import { IgrTreeGrid, IgrColumn } from "igniteui-react-grids";
+import { IgrSummaryOperand, IgrSummaryResult, IgrTreeGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
import { OrdersTreeData } from './OrdersTreeData';
+import { get } from 'http';
-IgrTreeGridModule.register();
-IgrButtonModule.register();
-IgrDialogModule.register();
-IgrCheckboxModule.register();
export class UnitsSummary extends IgrSummaryOperand {
operate(data: any[] = [], allData: any[] = [], fieldName: string = ""): IgrSummaryResult[] {
@@ -124,236 +119,262 @@ export class DeliveredSummary extends IgrSummaryOperand {
}
}
-export default class Sample extends React.Component
{searchText.length === 0 ? (
-
-
-
- Case Sensitive
+
+
-
+
+
+ Case Sensitive
-
- Exact Match
+
+ Exact Match
-
+
-
+
+ setCurrentColumn((prev) => ({ ...prev, disabledSummaries: [] }));
+ setColumns(updatedColumns);
+ setDisableAllBtnDisabled(false);
+ setEnableAllBtnDisabled(true);
+
+ setPendingUpdateType("enableAll");
+ };
+
+
+
+ return (
+
this.openDialog({ field: col.field, header: col.header })}
+ onClick={() => openDialog({ field: col.field, header: col.header })}
>
{col.header}
))}
-
+
Disable All
- Enable All
+ Disable All
+ Enable All
@@ -361,13 +382,13 @@ export default class Sample extends React.Component {
field="ID"
header="Order ID"
hasSummary={true}
- disabledSummaries={this.state.columns.find((col: any) => col.field === "ID")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "ID")?.disabledSummaries}>
col.field === "Name")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Name")?.disabledSummaries}>
{
dataType="number"
hasSummary={true}
summaries={UnitsSummary}
- disabledSummaries={this.state.columns.find((col: any) => col.field === "Units")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Units")?.disabledSummaries}>
col.field === "UnitPrice")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "UnitPrice")?.disabledSummaries}>
col.field === "Price")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Price")?.disabledSummaries}>
{
dataType="boolean"
hasSummary={true}
summaries={DeliveredSummary}
- disabledSummaries={this.state.columns.find((col: any) => col.field === "Delivered")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "Delivered")?.disabledSummaries}>
col.field === "OrderDate")?.disabledSummaries}>
+ disabledSummaries={columns.find((col: any) => col.field === "OrderDate")?.disabledSummaries}>
-
- );
- }
+
+ );
+
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(Disable Summaries for Column:
- {this.state.columns.map((col: any) => ( + {columns.map((col: any) => (
- {this.state.currentColumn && this.state.checkboxStates.map((checkbox: any) => (
+ {currentColumn && checkboxStates.map((checkbox: any) => (
this.toggleSummary(checkbox.key)}
+ onClick={() => toggleSummary(checkbox.key)}
>
{checkbox.label}
))}
-
@@ -38,26 +20,29 @@ export default function ComboFeatures() {
placeholder="Pick a city"
placeholderSearch="Search for a city"
data={Cities}
- ref={comboRef}
- >
+ disableFiltering={disableFiltering}
+ caseSensitiveIcon={caseSensitiveIcon}
+ groupKey={groupingEnabled ? "country" : undefined}
+ disabled={comboDisabled}>
+
);
}
-// rendering above class to the React DOM
+// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
- Disable Filtering
+ setDisableFiltering(e.detail.checked)}>
+ Disable Filtering
-
- Show Case-sensitive Icon
+ setCaseSensitiveIcon(e.detail.checked)}>
+ Show Case-sensitive Icon
-
- Enable Grouping
+ setGroupingEnabled(e.detail.checked)}>
+ Enable Grouping
-
- Disable Combo
+ setComboDisabled(e.detail.checked)}>
+ Disable Combo
@@ -28,20 +18,25 @@ export default function ComboSingleSelection() {
placeholder="Pick a city"
singleSelect
data={Cities}
- ref={comboRef}
+ groupKey={groupingEnabled ? "country" : undefined}
+ disabled={comboDisabled}
>
);
}
-// rendering above class to the React DOM
+// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
- Enable Grouping
+ setGroupingEnabled(e.detail.checked)}>
+ Enable Grouping
-
- Disable Combo
+ setComboDisabled(e.detail.checked)}>
+ Disable Combo
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/combo/templates
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/combo/templates/package.json b/samples/inputs/combo/templates/package.json
new file mode 100644
index 0000000000..6833ffe105
--- /dev/null
+++ b/samples/inputs/combo/templates/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "react-combo-overview",
+ "description": "This project provides example of Combo Overview using Infragistics React components",
+ "author": "Infragistics",
+ "homepage": ".",
+ "version": "1.4.0",
+ "private": true,
+ "scripts": {
+ "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+ "build": "react-scripts --max_old_space_size=10240 build ",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "dependencies": {
+ "igniteui-dockmanager": "1.16.1",
+ "igniteui-react": "19.0.2",
+ "igniteui-react-core": "19.0.0-alpha.0",
+ "igniteui-react-grids": "19.0.2",
+ "igniteui-react-inputs": "19.0.0-alpha.0",
+ "igniteui-react-layouts": "19.0.0-alpha.0",
+ "igniteui-webcomponents": "6.0.0",
+ "lit-html": "^3.2.0",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "react-scripts": "^5.0.1",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@types/jest": "^29.2.0",
+ "@types/node": "^18.11.7",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "react-app-rewired": "^2.2.1",
+ "typescript": "^4.8.4",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/inputs/combo/templates/public/index.html b/samples/inputs/combo/templates/public/index.html
new file mode 100644
index 0000000000..2e48989a3b
--- /dev/null
+++ b/samples/inputs/combo/templates/public/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+ Select a City
+
+
+
+
+
+ );
+}
+
+// rendering above function to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(List of countries and their most popular cities
+
- this.onInputChange(e)}>
+ this.onInputChange(e)}>
- {
public onInputChange(event: any) {
console.log(event)
if (this.maskRef) {
- this.setState({value: this.maskRef.value})
+ this.setState({ value: this.maskRef.value })
}
}
public onRadioChange(event: any) {
if (this.maskRef) {
- this.maskRef.valueMode = event.detail.value;
- this.setState({value: this.maskRef.value});
+ const mode = event.detail.value;
+ this.maskRef.valueMode = mode;
+ this.setState({
+ mode: mode,
+ value: this.maskRef.value
+ });
}
}
}
diff --git a/samples/inputs/radio/alignment/src/index.tsx b/samples/inputs/radio/alignment/src/index.tsx
index 55731f8a47..827b14d1c6 100644
--- a/samples/inputs/radio/alignment/src/index.tsx
+++ b/samples/inputs/radio/alignment/src/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRadioModule.register();
-IgrRadioGroupModule.register();
-
export default class RadioAlignment extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/radio/disabled/src/index.tsx b/samples/inputs/radio/disabled/src/index.tsx
index 8337d91023..99eda059ff 100644
--- a/samples/inputs/radio/disabled/src/index.tsx
+++ b/samples/inputs/radio/disabled/src/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRadioModule.register();
-IgrRadioGroupModule.register();
-
export default class RadioDisabled extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/radio/group/src/index.tsx b/samples/inputs/radio/group/src/index.tsx
index 5296e7724e..7f0964201b 100644
--- a/samples/inputs/radio/group/src/index.tsx
+++ b/samples/inputs/radio/group/src/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRadioModule.register();
-IgrRadioGroupModule.register();
-
export default class RadioGroup extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/radio/invalid/src/index.tsx b/samples/inputs/radio/invalid/src/index.tsx
index 8a4155ecba..89f7b49b49 100644
--- a/samples/inputs/radio/invalid/src/index.tsx
+++ b/samples/inputs/radio/invalid/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRadio, IgrRadioModule } from 'igniteui-react';
+import { IgrRadio } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRadioModule.register();
-
export default class RadioInvalid extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/radio/label/src/index.tsx b/samples/inputs/radio/label/src/index.tsx
index 1f6af6f830..9fddfe2556 100644
--- a/samples/inputs/radio/label/src/index.tsx
+++ b/samples/inputs/radio/label/src/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRadioModule.register();
-IgrRadioGroupModule.register();
-
export default class RadioLabel extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/radio/styling/src/index.tsx b/samples/inputs/radio/styling/src/index.tsx
index 4aad45e21c..5bfa1353ee 100644
--- a/samples/inputs/radio/styling/src/index.tsx
+++ b/samples/inputs/radio/styling/src/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import { IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule } from 'igniteui-react';
+import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css';
-IgrRadioModule.register();
-IgrRadioGroupModule.register();
-
export default class RadioStyling extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/rating/basic/src/index.tsx b/samples/inputs/rating/basic/src/index.tsx
index f0139a8c1d..1ef035a618 100644
--- a/samples/inputs/rating/basic/src/index.tsx
+++ b/samples/inputs/rating/basic/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRating, IgrRatingModule,} from 'igniteui-react';
+import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRatingModule.register();
-
export default class RatingOverview extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/rating/custom/src/index.tsx b/samples/inputs/rating/custom/src/index.tsx
index abf0801391..d59e77cd3e 100644
--- a/samples/inputs/rating/custom/src/index.tsx
+++ b/samples/inputs/rating/custom/src/index.tsx
@@ -1,12 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRatingModule.register();
-IgrRatingSymbolModule.register();
-IgrIconModule.register();
+const emptyHeart = "";
+const heartIcon = '';
const emptyHeart = "";
const heartIcon = '';
@@ -23,25 +22,25 @@ export default class RatingCustomSymbols extends React.Component {
return (
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
diff --git a/samples/inputs/rating/empty/src/index.tsx b/samples/inputs/rating/empty/src/index.tsx
index 7d5f689129..081c5fb382 100644
--- a/samples/inputs/rating/empty/src/index.tsx
+++ b/samples/inputs/rating/empty/src/index.tsx
@@ -1,12 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRatingModule.register();
-IgrRatingSymbolModule.register();
-IgrIconModule.register();
+const bandageIcon = '';
+const bacteriaIcon = '';
const bandageIcon = '';
const bacteriaIcon = '';
@@ -23,25 +22,25 @@ export default class RatingEmptyAndSelected extends React.Component {
return (
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
diff --git a/samples/inputs/rating/single-selection/src/index.tsx b/samples/inputs/rating/single-selection/src/index.tsx
index d30e68a49d..22c5779788 100644
--- a/samples/inputs/rating/single-selection/src/index.tsx
+++ b/samples/inputs/rating/single-selection/src/index.tsx
@@ -1,12 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIconModule } from 'igniteui-react';
+import { IgrRating, IgrRatingSymbol } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRatingModule.register();
-IgrRatingSymbolModule.register();
-IgrIconModule.register();
export default class RatingSingleSelection extends React.Component {
constructor(props: any) {
@@ -17,25 +14,25 @@ export default class RatingSingleSelection extends React.Component {
return (
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
diff --git a/samples/inputs/rating/styling/src/index.tsx b/samples/inputs/rating/styling/src/index.tsx
index 90ba0319e0..bb41096530 100644
--- a/samples/inputs/rating/styling/src/index.tsx
+++ b/samples/inputs/rating/styling/src/index.tsx
@@ -1,11 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRating, IgrRatingModule,} from 'igniteui-react';
+import { IgrRating } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRatingModule.register();
-
export default class RatingStyling extends React.Component {
constructor(props: any) {
diff --git a/samples/inputs/ripple/button/src/index.tsx b/samples/inputs/ripple/button/src/index.tsx
index 90cca55cd2..d1b9c5d53f 100644
--- a/samples/inputs/ripple/button/src/index.tsx
+++ b/samples/inputs/ripple/button/src/index.tsx
@@ -1,30 +1,21 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrRipple, IgrRippleModule, IgrButton, IgrButtonModule } from 'igniteui-react';
+import { IgrRipple, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrRippleModule.register();
-IgrButtonModule.register();
+export default function RippleButton() {
-export default class RippleButton extends React.Component {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
-
-
- this.onRadioChange(e)} checked>raw
- this.onRadioChange(e)}>withFormatting
+
);
}
- public onMaskRef(mask: IgrMaskInput){
+ public onMaskRef(mask: IgrMaskInput) {
if (!mask) { return; }
this.maskRef = mask;
}
@@ -51,14 +46,18 @@ export default class MaskInputValueModes extends React.Component😣
- 😣
+ 😣
+ 😣
😔
- 😔
+ 😔
+ 😔
😐
- 😐
+ 😐
+ 😐
🙂
- 🙂
+ 🙂
+ 🙂
😆
- 😆
+ 😆
+ 😆
-
-
-
- );
- }
+ return (
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
-
- );
- }
+ return (
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
@@ -28,6 +21,6 @@ export default function SelectHeader() {
);
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
- );
- }
+ return (
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
- );
- }
+ return (
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- Low
- Medium
- High
-
-
- );
- }
+ return (
+
+
+ Low
+ Medium
+ High
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
-
- Slider
-
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+ Slider
+
- );
- }
+
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- public slider: IgrSlider;
- public slider2: IgrSlider;
-
- constructor(props: any) {
- super(props);
- this.sliderRef = this.sliderRef.bind(this);
- this.sliderRef2 = this.sliderRef.bind(this);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- public slider: IgrSlider;
- public rangeSlider: IgrRangeSlider;
- public sliderValueSpan: HTMLElement;
- public sliderLowerSpan: HTMLElement;
- public sliderUpperSpan: HTMLElement;
-
- constructor(props: any) {
- super(props);
- this.onInput = this.onInput.bind(this);
- this.onRangeInput = this.onRangeInput.bind(this);
- this.sliderRef = this.sliderRef.bind(this);
- this.rangeSliderRef = this.rangeSliderRef.bind(this);
-
- this.sliderValueSpan = document.getElementById('slider-value') as HTMLElement;
- this.sliderLowerSpan = document.getElementById('slider-lower') as HTMLElement;
- this.sliderUpperSpan = document.getElementById('slider-upper') as HTMLElement;
-
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- public toastRef: IgrToast;
-
- constructor(props: any) {
- super(props);
- this.onSubmitButtonClicked = this.onSubmitButtonClicked.bind(this);
- this.onToastRef = this.onToastRef.bind(this);
- }
-
- public render(): JSX.Element {
- return (
- ) {
- if(this.toastRef){
- e.preventDefault();
- this.toastRef.show();
- }
+ const onSubmitButtonClicked = (e: React.FormEvent) => {
+ if (toastRef) {
+ e.preventDefault();
+ toastRef.show();
}
+ };
+
+ return (
+ {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
+ useEffect(() => {
registerIconFromText( "feedback",
``,
"material");
- }
+ }, []);
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
+ useEffect(() => {
registerIconFromText( "feedback",
``,
"material");
- }
-
- public render(): JSX.Element {
- return (
- {
- private categories = [
- { checked: false, type: "Bike" },
- { checked: false, type: "Motorcycle" },
- { checked: false, type: "Car" },
- { checked: false, type: "Taxi" },
- { checked: false, type: "Public Transport" }
- ];
-
- private dateTimeInput: IgrDateTimeInput;
-
- constructor(props: any) {
- super(props);
- this.state = {
- categories: this.categories,
- cost: { lower: 200, upper: 800 },
- rating: '',
- time: 'Time'
- };
-
- this.categoriesChange = this.categoriesChange.bind(this);
- this.costRangeChange = this.costRangeChange.bind(this);
- this.ratingChange = this.ratingChange.bind(this);
- this.timeChange = this.timeChange.bind(this);
- this.clearTime = this.clearTime.bind(this);
- this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
-
- registerIconFromText("clear", clearIcon, "material");
- registerIconFromText("clock", clockIcon, "material");
- }
-
- public render(): JSX.Element {
- return (
-
- Slider
-
-
-
- Range Slider
-
-
-
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+ Slider
+
+
+
+ Range Slider
+
+
- );
- }
+
-
-
-
- );
- }
+ return (
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
-
- public sliderRef(slider: IgrSlider){
- if (!slider) { return; }
- this.slider = slider;
- this.slider.valueFormatOptions = { style: 'currency', currency: 'USD'};
- }
-
- public sliderRef2(slider: IgrSlider){
- if (!slider) { return; }
- this.slider2 = slider;
- this.slider2.valueFormatOptions = { minimumFractionDigits: 1};
- }
+export default function SliderValueFormat() {
+
+ const formatOptions1: NumberFormatOptions = {
+ style: "currency",
+ currency: "USD"
+ };
+ const formatOptions2 = { minimumFractionDigits: 1};
+
+ return (
+
+
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
-
- public sliderRef(slider: IgrSlider){
- if (!slider) { return; }
- this.slider = slider;
- }
-
- public rangeSliderRef(slider: IgrRangeSlider){
- if (!slider) { return; }
- this.rangeSlider = slider;
- }
-
- public onInput(ev: any){
- if(!ev) { return; }
- //this.sliderValueSpan.innerHTML = ev.detail;
- }
-
- public onRangeInput(ev: any){
- // this.sliderLowerSpan.innerHTML = ev.detail.lower;
- // this.sliderUpperSpan.innerHTML = ev.detail.upper;
- }
-
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { IgrSlider, IgrRangeSlider } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+export default function SliderValue() {
+
+ const [sliderVal, setSliderVal] = useState(40);
+ const [rangeLower, setRangeLower] = useState(20);
+ const [rangeUpper, setRangeUpper] = useState(70);
+
+ const handleSliderInput = (event: any) => {
+ setSliderVal(event.detail);
+ };
+
+ const handleRangeInput = (event: any) => {
+ const { lower, upper } = event.detail;
+ setRangeLower(lower);
+ setRangeUpper(upper);
+ };
+
+ return (
+
-
-
- Value:
-
-
-
-
- Lower:
- 20
- , Upper:
- 70
-
-
+
+ );
}
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
+ Value: {sliderVal}
+
+
+
+ Lower: {rangeLower}
+ , Upper: {rangeUpper}
+
+
- Label
-
- );
- }
+ return (
+
+ Label
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
- Label
-
- );
- }
+ return (
+
+ Label
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
- );
- }
-
- public onToastRef(toast: IgrToast){
- if (!toast) { return; }
- this.toastRef = toast;
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { IgrTextarea, IgrButton, IgrToast } from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+export default function TextAreaFormIntegration() {
+ let toastRef: IgrToast;
+
+ const onToastRef = (toast: IgrToast) => {
+ if (!toast) {
+ return;
}
+ toastRef = toast;
+ };
- public onSubmitButtonClicked(e:React.FormEvent
+
+
+ );
}
// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
- It was a dark and stormy night...
-
- );
- }
+ return (
+
+ It was a dark and stormy night...
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
-
-
-
-
-
- );
- }
+ return (
+ This textarea does not resize and uses a scroll bar to show overflow text.
-This textarea lets the user resize vertically.
-This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.
-
+
+
+
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(This textarea does not resize and uses a scroll bar to show overflow text.
+This textarea lets the user resize vertically.
+This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.
+
-
-
-
-
- );
-
- }
+ return (
+ Give us a short description of what you liked/disliked
-
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Give us a short description of what you liked/disliked
+
-
-
-
-
- );
-
- }
+ }, []);
+
+ return (
+ Provide a detailed description of the steps that led to the issue you experienced
-
+
+
+
+
+ );
}
diff --git a/samples/layouts/accordion/customization/src/index.tsx b/samples/layouts/accordion/customization/src/index.tsx
index 5bc05a9f28..75a423073b 100644
--- a/samples/layouts/accordion/customization/src/index.tsx
+++ b/samples/layouts/accordion/customization/src/index.tsx
@@ -1,177 +1,224 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import './AccordionCustomization.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import "./AccordionCustomization.css";
import {
- IgrAccordion, IgrAccordionModule, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrCheckboxModule,
- IgrDateTimeInput, IgrDateTimeInputModule, IgrExpansionPanel, IgrExpansionPanelModule, IgrIcon,
- IgrIconModule, IgrRadio, IgrRadioModule, IgrRadioGroup, IgrRadioGroupModule, IgrRating,
- IgrRatingModule, IgrRangeSlider, IgrRangeSliderModule, IgrRadioChangeEventArgs,
- IgrRangeSliderValueEventArgs, IgrComponentDateValueChangedEventArgs, registerIconFromText
-} from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-
-IgrAccordionModule.register();
-IgrCheckboxModule.register();
-IgrDateTimeInputModule.register();
-IgrExpansionPanelModule.register();
-IgrIconModule.register();
-IgrRadioModule.register();
-IgrRadioGroupModule.register();
-IgrRangeSliderModule.register();
-IgrRatingModule.register();
+ IgrAccordion,
+ IgrCheckbox,
+ IgrCheckboxChangeEventArgs,
+ IgrDateTimeInput,
+ IgrExpansionPanel,
+ IgrIcon,
+ IgrRadio,
+ IgrRadioGroup,
+ IgrRating,
+ IgrRangeSlider,
+ IgrRadioChangeEventArgs,
+ IgrRangeSliderValueEventArgs,
+ IgrComponentDateValueChangedEventArgs,
+ registerIconFromText,
+} from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
type Category = { checked: boolean; type: string };
const clearIcon =
- "";
+ "";
const clockIcon =
- "";
+ "";
export default class AccordionCustomization extends React.ComponentProvide a detailed description of the steps that led to the issue you experienced
+
- {
-
- constructor(props: any) {
- super(props);
- this.state = { singleExpand: false };
- this.switchChange = this.switchChange.bind(this);
+ const [singleExpand, setSingleExpand] = useState(false);
+
+ const switchChange = (e: IgrCheckboxChangeEventArgs) => {
+ setSingleExpand(e.detail.checked);
}
- public render(): JSX.Element {
- return (
-
-
-
-
-
-
-
-
-
-
-
- {[1, 2, 3, 4].map(rating => {
- return (
-
- 1 ? 's' : ''} or more`} max={5} value={rating + 0.5}
- className="size-small" readOnly={true} key={`{r-${rating}}`}>
-
-
- );
- })}
-
-
-
-
-
-
-
-
-
-
+ private categories = [
+ { checked: false, type: "Bike" },
+ { checked: false, type: "Motorcycle" },
+ { checked: false, type: "Car" },
+ { checked: false, type: "Taxi" },
+ { checked: false, type: "Public Transport" },
+ ];
+
+ private dateTimeInput: IgrDateTimeInput;
+
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ categories: this.categories,
+ cost: { lower: 200, upper: 800 },
+ rating: "",
+ time: "Time",
+ };
+
+ this.categoriesChange = this.categoriesChange.bind(this);
+ this.costRangeChange = this.costRangeChange.bind(this);
+ this.ratingChange = this.ratingChange.bind(this);
+ this.timeChange = this.timeChange.bind(this);
+ this.clearTime = this.clearTime.bind(this);
+ this.dateTimeInputRef = this.dateTimeInputRef.bind(this);
+
+ registerIconFromText("clear", clearIcon, "material");
+ registerIconFromText("clock", clockIcon, "material");
+ }
+
+ public render(): JSX.Element {
+ return (
+
+ );
+ }
+
+ public categoriesChange(e: IgrCheckboxChangeEventArgs, type: string) {
+ const categoryIndex = this.categories.findIndex((c) => c.type === type);
+ if (categoryIndex === -1) {
+ return;
}
-
- public categoriesChange(e: IgrCheckboxChangeEventArgs, type: string) {
- const categoryIndex = this.categories.findIndex(c => c.type === type);
- if (categoryIndex === -1) { return; }
- let categoriesCopy = this.state.categories;
- categoriesCopy[categoryIndex].checked = e.detail.checked;
- this.setState({
- categories: categoriesCopy
- });
+ let categoriesCopy = this.state.categories;
+ categoriesCopy[categoryIndex].checked = e.detail.checked;
+ this.setState({
+ categories: categoriesCopy,
+ });
+ }
+
+ public costRangeChange(e: IgrRangeSliderValueEventArgs) {
+ this.setState({
+ cost: { lower: e.detail.lower, upper: e.detail.upper },
+ });
+ }
+
+ public ratingChange(e: IgrRadioChangeEventArgs) {
+ if (!e.detail.value) {
+ return;
}
-
- public costRangeChange(e: IgrRangeSliderValueEventArgs) {
- this.setState({
- cost: { lower: e.detail.lower, upper: e.detail.upper }
- });
- }
-
- public ratingChange(e: IgrRadioChangeEventArgs) {
- if (!e.detail.value) { return; }
- this.setState({
- rating: `${+e.detail.value} star${+e.detail.value > 1 ? 's' : ''} or more`
- });
- }
-
- public timeChange(e: IgrComponentDateValueChangedEventArgs) {
- const s = e.target as IgrDateTimeInput;
- const result = s.value !== null ? `Arrive before ${e.detail.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}` : 'Time';
- this.setState({
- time: result
- });
- }
-
- public clearTime() {
- this.dateTimeInput.clear(); this.setState({
- time: 'Time'
- });
- }
-
- public dateTimeInputRef(input: IgrDateTimeInput) {
- if (!input) { return; }
- this.dateTimeInput = input;
+ this.setState({
+ rating: `${+e.detail.value} star${
+ +e.detail.value > 1 ? "s" : ""
+ } or more`,
+ });
+ }
+
+ public timeChange(e: IgrComponentDateValueChangedEventArgs) {
+ const s = e.target as IgrDateTimeInput;
+ const result =
+ s.value !== null
+ ? `Arrive before ${e.detail.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ })}`
+ : "Time";
+ this.setState({
+ time: result,
+ });
+ }
+
+ public clearTime() {
+ this.dateTimeInput.clear();
+ this.setState({
+ time: "Time",
+ });
+ }
+
+ public dateTimeInputRef(input: IgrDateTimeInput) {
+ if (!input) {
+ return;
}
+ this.dateTimeInput = input;
+ }
}
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(- Categories - {this.state.categories.some((c: Category) => c.checked) && ': '} - {this.state.categories.filter((c: Category) => c.checked).map((c: Category) => c.type).join(', ')} -
- -
- {this.state.categories.map((c: Category) => {
- return (
- this.categoriesChange(e, c.type)}>
- {c.type}
-
- );
- })}
-
-
- - Cost: ${this.state.cost.lower} to ${this.state.cost.upper} -
- -Rating{this.state.rating && ': '}{this.state.rating}
- -{this.state.time}
- -
+
+
+
+
+ {[1, 2, 3, 4].map((rating) => {
+ return (
+
+ 1 ? "s" : ""
+ } or more`}
+ max={5}
+ value={rating + 0.5}
+ className="size-small"
+ readOnly={true}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- );
+
+
+ + Categories + {this.state.categories.some((c: Category) => c.checked) && ": "} + {this.state.categories + .filter((c: Category) => c.checked) + .map((c: Category) => c.type) + .join(", ")} +
+ +
+ {this.state.categories.map((c: Category) => {
+ return (
+
+ this.categoriesChange(e, c.type)
+ }
+ >
+ {c.type}
+
+ );
+ })}
- + Cost: ${this.state.cost.lower} to $ + {this.state.cost.upper} +
+ ++ Rating{this.state.rating && ": "} + {this.state.rating} +
+ ++ {this.state.time} +
+ +
- Single Expand
- {
+ const [singleExpand, setSingleExpand] = useState(false);
- constructor(props: any) {
- super(props);
- this.state = { singleExpand: false };
- this.switchChange = this.switchChange.bind(this);
+ const switchChange = (e: IgrCheckboxChangeEventArgs) => {
+ setSingleExpand(e.detail.checked);
}
-
- public render(): JSX.Element {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ return (
+ What has changed about subscription and pricing model?
- We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. -Who will the updated changes impact?
- The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. -What is the difference between your old model and your current subscription model for Ignite UI?
- For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with - packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet - server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages -Common questions about renewal.
- -What happens if I don't renew my subscription?
- Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. -If I don't renew my subscription will I still have access to previous versions of Infragistics products?
- Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. -Will I be automatically charged for my renewal/ Can I be automatically charged for renewal?
- Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, - at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are - subject to the renewal terms that were agreed upon as part of that purchase. -I split my work across two computers. Can I install on both using my single-user license?
- The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome to install and use Ignite UI, - Infragistics Professional, and Infragistics Ultimate on any computer you use. However, if we notice a large number of activations using the - same license, we may contact you to verify this behavior. -I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a major version is released?
- Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the next major version for another 30 days! - You can do this in the following two ways: --
-
- If you have days remaining in your 30-day trial period for the current version (e.g., the - Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or - your account. You will be able to start a fresh trial for the next major version (e.g., 20.1 - Volume Release) -
- If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume - Release), simply download and install Infragistics Ultimate from our website (This will also allow you - to start a new trial.) -
+ Single Expand
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- );
- }
-
- public switchChange(e: IgrCheckboxChangeEventArgs) {
- this.setState({ singleExpand: e.detail.checked })
- }
+ What has changed about subscription and pricing model?
+ We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. We + updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI + (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, + including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, + Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, + so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best + price. +Who will the updated changes impact?
+ The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and + Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, + Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this + blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. + So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will + be honored and renewed based upon the current agreement. +What is the difference between your old model and your current subscription model for Ignite UI?
+ For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with + packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet + server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages +Common questions about renewal.
+ +What happens if I don't renew my subscription?
+ Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. +If I don't renew my subscription will I still have access to previous versions of Infragistics products?
+ Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or + previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing + to renew it. +Will I be automatically charged for my renewal/ Can I be automatically charged for renewal?
+ Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, + at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are + subject to the renewal terms that were agreed upon as part of that purchase. +I split my work across two computers. Can I install on both using my single-user license?
+ The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome to install and use Ignite UI, + Infragistics Professional, and Infragistics Ultimate on any computer you use. However, if we notice a large number of activations using the + same license, we may contact you to verify this behavior. +I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a major version is released?
+ Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the next major version for another 30 days! + You can do this in the following two ways: +-
+
- If you have days remaining in your 30-day trial period for the current version (e.g., the + Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or + your account. You will be able to start a fresh trial for the next major version (e.g., 20.1 + Volume Release) +
- If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume + Release), simply download and install Infragistics Ultimate from our website (This will also allow you + to start a new trial.) +
- Single Expand
- {
+export default function AvatarIcon() {
- constructor(props: any) {
- super(props);
+ useEffect(() => {
registerIconFromText("home", homeIcon, "material");
- }
+ }, []);
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- {
+export default function AvatarShape() {
- constructor(props: any) {
- super(props);
+ useEffect(() => {
registerIconFromText("home", homeIcon, "material");
- }
-
- public render(): JSX.Element {
- return (
- {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
- AvatarStyling
+
+
+
+
+
+
\ No newline at end of file
diff --git a/samples/layouts/avatar/styling/sandbox.config.json b/samples/layouts/avatar/styling/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/avatar/styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/layouts/avatar/styling/src/index.css b/samples/layouts/avatar/styling/src/index.css
new file mode 100644
index 0000000000..aec0352f9e
--- /dev/null
+++ b/samples/layouts/avatar/styling/src/index.css
@@ -0,0 +1,48 @@
+.sizes .size-small {
+ --ig-size: var(--ig-size-small);
+}
+
+.sizes .size-medium {
+ --ig-size: var(--ig-size-medium);
+}
+
+.sizes .size-large,
+.size-large {
+ --ig-size: var(--ig-size-large);
+}
+
+.sample {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ gap: 10px;
+ margin-top: 20px;
+}
+
+.sizes {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+}
+
+igc-avatar::part(base) {
+ background: var(--ig-success-100);
+ border: 2px solid var(--ig-error-500);
+}
+
+igc-avatar::part(initials) {
+ color: var(--ig-success-500-contrast);
+ background: var(--ig-error-500);
+ padding: 5px 10px;
+ margin: 10px;
+ border-radius: 50px;
+ /* border: 1px solid greenyellow; */
+}
+
+igc-avatar::part(image) {
+ border-radius: 20px;
+ padding: 5px;
+ border: 2px solid var(--ig-primary-500);
+}
+
+
diff --git a/samples/layouts/avatar/styling/src/index.tsx b/samples/layouts/avatar/styling/src/index.tsx
new file mode 100644
index 0000000000..7c85c55918
--- /dev/null
+++ b/samples/layouts/avatar/styling/src/index.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+
+const homeIcon =
+ '';
+
+export default function AvatarStyling() {
+
+ useEffect(() => {
+ registerIconFromText("home", homeIcon, "material");
+ }, []);
+
+ return (
+ {
-
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ return (
+ What has changed about subscription and pricing model?
- We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. -Who will the updated changes impact?
- The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. -What is the difference between your old model and your current subscription model for Ignite UI?
- For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with - packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet - server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages -What happens if I don't renew my subscription?
- Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. -If I don't renew my subscription will I still have access to previous versions of Infragistics products?
- Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. -
+ Single Expand
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+
+
+
+
+
+
+
+
+
+
+
- );
- }
-
- public switchChange(e: IgrCheckboxChangeEventArgs) {
- this.setState({ singleExpand: e.detail.checked })
- }
+ What has changed about subscription and pricing model?
+ We have moved to a subscription-based pricing model for all our developer tools. This makes it easier + for you to manage your license subscriptions and allows us to provide a better level of service for you. We + updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI + (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, + including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional, + Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, + so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best + price. +Who will the updated changes impact?
+ The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and + Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, + Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this + blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. + So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will + be honored and renewed based upon the current agreement. +What is the difference between your old model and your current subscription model for Ignite UI?
+ For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with + packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet + server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages +What happens if I don't renew my subscription?
+ Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. +If I don't renew my subscription will I still have access to previous versions of Infragistics products?
+ Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or + previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing + to renew it. +
-
-
-
- );
- }
+ return (
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
-
-
- );
- }
+ }, []);
+
+ return (
+
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- );
- }
+ return (
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/avatar/styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/avatar/styling/package.json b/samples/layouts/avatar/styling/package.json
new file mode 100644
index 0000000000..dd6da6303f
--- /dev/null
+++ b/samples/layouts/avatar/styling/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "react-avatar-styling",
+ "description": "This project provides example of Avatar Size using Infragistics React components",
+ "author": "Infragistics",
+ "homepage": ".",
+ "version": "1.4.0",
+ "private": true,
+ "scripts": {
+ "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+ "build": "react-scripts --max_old_space_size=10240 build ",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "dependencies": {
+ "igniteui-dockmanager": "1.16.1",
+ "igniteui-react": "19.0.2",
+ "igniteui-react-core": "19.0.0-alpha.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-scripts": "^5.0.1",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@types/jest": "^29.2.0",
+ "@types/node": "^18.11.7",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "react-app-rewired": "^2.2.1",
+ "typescript": "^4.8.4",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/layouts/avatar/styling/public/index.html b/samples/layouts/avatar/styling/public/index.html
new file mode 100644
index 0000000000..6cbaae7d4e
--- /dev/null
+++ b/samples/layouts/avatar/styling/public/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
-
-
- {
-
- constructor(props: any) {
- super(props);
- registerIconFromText("twitter", twitterIcon, "material");
- registerIconFromText("facebook", facebookIcon, "material");
- }
-
- public render(): JSX.Element {
- return (
-
-
- skip_previous
- play_arrow
- skip_next
-
+ return (
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
- 
-
-
-
-
-
-
- Rozes
-Under the Grave (2016)
-As I have always said: I write what’s real and what’s true, - even if it means throwing myself under the bus.
-
+
- );
- }
+
+
+
+ skip_previous
+ play_arrow
+ skip_next
+
+
+
+
+
+
+
+
+
+
+
-
-
+ Rozes
+Under the Grave (2016)
+As I have always said: I write what’s real and what’s true, + even if it means throwing myself under the bus.
+
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
- Read more
-
-
-
-
+ return (
+
- New York City
-City in New York
-New York City comprises 5 boroughs sitting where the - Hudson River meets the Atlantic Ocean. At its core is Manhattan, - a densely populated borough that’s among the world’s major commercial, - financial and cultural centers.
-
-
-
-
-
-
-
+
+ );
}
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
+
+
+
+
+
+
+
+
+ Read more
+
+
+
+
+
+ New York City
+City in New York
++ New York City comprises 5 boroughs sitting where the Hudson River + meets the Atlantic Ocean. At its core is Manhattan, a densely + populated borough that’s among the world’s major commercial, + financial and cultural centers. +
+
+
+
+
+
- );
- }
+
+ {
-
- constructor(props: any) {
- super(props);
- registerIconFromText("facebook", facebookIcon, "material");
- registerIconFromText("twitter", twitterIcon, "material");
- registerIconFromText("instagram", instagramIcon, "material");
- }
-
- public render(): JSX.Element {
- return (
-
-
+
+
+ );
}
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
+
+
-export default class CardSemiHorizontal extends React.Component {
+
+
- constructor(props: any) {
- super(props);
- }
-
- public render(): JSX.Element {
- return (
-
+ 
+
+
+
+ HERE
+by Mellow D
++ Far far away, behind the word mountains, far from the + countries Vokalia and Consonantia, there live the blind texts. +
+
-
+
+ Play Album
+
+
- );
- }
+
+
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- Play Album
-
-
-
-
- HERE
-by Mellow D
-Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.
-
-
+
- (null);
- function onSelectChange(e: CustomEvent) {
- const value = e.detail.value as CarouselAnimationType;
- carouselRef.current.animationType = value;
+ const [animationType, setAnimationType] = useState('slide');
+ const [isCarouselVertical, setIsCarouselVertical] = useState(false);
+
+ const onSelectChange = (e: CustomEvent) => {
+ const value = e.detail.value as HorizontalTransitionAnimation;
+ setAnimationType(value);
}
- function onSwitchChange(e: IgrCheckboxChangeEventArgs) {
- carouselRef.current.vertical = e.detail.checked;
+ const onSwitchChange = (e: IgrCheckboxChangeEventArgs) => {
+ setIsCarouselVertical(e.detail.checked);
}
return (
@@ -48,14 +39,14 @@ export default function CarouselComponents() {
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
+ return (
+
- Jane Doe
-Professional Photographer
-Hi! I am Jane, photographer and filmmaker. - Photography is a way of feeling, of touching, - of loving. What you have caught on film is captured forever... - it remembers little things, long after you have - forgotten everything.
-
-
-
-
-
-
-
-
-
-
-
+
+ );
}
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Jane Doe
+Professional Photographer
++ Hi! I am Jane, photographer and filmmaker. Photography is a way of + feeling, of touching, of loving. What you have caught on film is + captured forever... it remembers little things, long after you + have forgotten everything. +
+
+
+
+
+
+
+
- );
- }
+
Animation type
-
- Slide
+
+ Slide
-
- Fade
+
+ Fade
-
- None
+
+ None
@@ -64,108 +55,105 @@ export default function CarouselComponents() {
onChange={onSwitchChange}
labelPosition="before"
>
- Vertical alignment
+ Vertical alignment
+
+
+
-
-
+
-
-
+
+
Ignite UI for Angular
-
-
+
+
30+ Material-based Angular components to code speedy web apps
faster.
-
+
-
+
- Visit Page
+ Visit Page
Ignite UI for Angular
+
30+ Material-based Angular components to code speedy web apps
faster.
+
+
-
-
+
-
-
+
+
Ignite UI for Javascript
-
-
+
+
A complete JavaScript UI library empowering you to build
data-rich responsive web apps.
-
+
-
+
- Visit Page
+ Visit Page
Ignite UI for Javascript
+
A complete JavaScript UI library empowering you to build
data-rich responsive web apps.
+
+
-
-
+
@@ -176,6 +164,6 @@ export default function CarouselComponents() {
);
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
-
+
+
Ultimate UI for ASP.NET
-
-
+
+
Build full-featured business apps with the most versatile set
of ASP.NET AJAX UI controls.
-
+
-
+
- Visit Page
+ Visit Page
Ultimate UI for ASP.NET
+
Build full-featured business apps with the most versatile set
of ASP.NET AJAX UI controls.
+
+
-
-
+
+
@@ -83,6 +74,6 @@ export default function CarouselComponents() {
);
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
-
+
+
-
-
+
+
-
-
+
+
@@ -35,6 +33,6 @@ export default function CarouselOverview() {
);
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
-
- 
+
+
-
+
![{`${image.alt}]({image.src.replace(".png",)
);
diff --git a/samples/layouts/expansion-panel/component-customization/src/index.tsx b/samples/layouts/expansion-panel/component-customization/src/index.tsx
index 44dea73092..f502cae493 100644
--- a/samples/layouts/expansion-panel/component-customization/src/index.tsx
+++ b/samples/layouts/expansion-panel/component-customization/src/index.tsx
@@ -2,12 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelCustomization.css';
-import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from 'igniteui-react';
+import { IgrExpansionPanel, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-IgrExpansionPanelModule.register();
-
export default class ExpansionPanelComponentCustomization extends React.Component {
constructor(props: any) {
@@ -22,16 +19,16 @@ export default class ExpansionPanelComponentCustomization extends React.Componen
return (
- 
- The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+
+ The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.
-
- Read more
+
+ Read more
diff --git a/samples/layouts/expansion-panel/properties-and-events/src/index.tsx b/samples/layouts/expansion-panel/properties-and-events/src/index.tsx
index 26d1530b4e..e2088cd40c 100644
--- a/samples/layouts/expansion-panel/properties-and-events/src/index.tsx
+++ b/samples/layouts/expansion-panel/properties-and-events/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelPropsAndEvents.css';
-import { IgrExpansionPanel, IgrExpansionPanelModule } from 'igniteui-react';
+import { IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrExpansionPanelModule.register();
-
export default class ExpansionPanelPropertiesAndEvents extends React.Component {
constructor(props: any) {
@@ -21,10 +19,10 @@ export default class ExpansionPanelPropertiesAndEvents extends React.Component
- {
constructor(props: any) {
@@ -18,15 +15,15 @@ export default class ExpansionPanelStyling extends React.Component {
return (
-
- The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+
+ The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.
-
- Read more
+
+ Read more
diff --git a/samples/layouts/expansion-panel/usage/src/index.tsx b/samples/layouts/expansion-panel/usage/src/index.tsx
index 28729d2d30..a27c1c5734 100644
--- a/samples/layouts/expansion-panel/usage/src/index.tsx
+++ b/samples/layouts/expansion-panel/usage/src/index.tsx
@@ -2,11 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelUsage.css';
-import { IgrExpansionPanel, IgrExpansionPanelModule } from 'igniteui-react';
+import { IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrExpansionPanelModule.register();
-
export default class ExpansionPanelUsage extends React.Component {
constructor(props: any) {
@@ -17,9 +15,9 @@ export default class ExpansionPanelUsage extends React.Component {
return (
- {
- private stepperRef = React.createRef();
- constructor(props: any) {
- super(props);
- this.state = { orientation: 'horizontal', horizontalAnimation: 'slide', verticalAnimation: 'grow', animationDuration: "320" };
- this.orientationChange = this.orientationChange.bind(this);
- this.horizontalAnimationChange = this.horizontalAnimationChange.bind(this);
- this.verticalAnimationChange = this.verticalAnimationChange.bind(this);
- this.animationDurationChange = this.animationDurationChange.bind(this);
+ const stepperRef = useRef(null);
+ const [orientation, setOrientation] = useState("horizontal");
+ const [horizontalAnimation, setHorizontalAnimation] = useState("slide");
+ const [verticalAnimation, setVerticalAnimation] = useState("grow");
+ const [animationDuration, setAnimationDuration] = useState("320");
+
+
+ const orientationChange = (e: IgrSelectItemComponentEventArgs) => {
+ const selectedValue = e.detail.value as StepperOrientation;
+ setOrientation(selectedValue);
}
+
+ const horizontalAnimationChange = (e: IgrSelectItemComponentEventArgs) => {
+ const selectedValue = e.detail.value as HorizontalTransitionAnimation;
+ setHorizontalAnimation(selectedValue);
- public render(): JSX.Element {
- return (
- {
- private stepperRef = React.createRef();
- private InfoForm = React.createRef();
- private AddressForm = React.createRef();
- private activeStepIndex = 0;
+ private stepperRef = React.createRef();
+ private InfoForm = React.createRef();
+ private AddressForm = React.createRef();
+ private activeStepIndex = 0;
- constructor(props: any) {
- super(props);
- this.state = { linear: false, firstStepInvalid: true, secondStepInvalid: true };
- this.OnSwitchChange = this.OnSwitchChange.bind(this);
- }
+ constructor(props: any) {
+ super(props);
+ this.state = {
+ linear: false,
+ firstStepInvalid: true,
+ secondStepInvalid: true,
+ };
+ this.onSwitchChange = this.onSwitchChange.bind(this);
+ }
- componentDidMount() {
- this.InfoForm.current.addEventListener("igcInput", this.onInput.bind(this));
- this.AddressForm.current.addEventListener("igcInput", this.onInput.bind(this));
- }
+ componentDidMount() {
+ this.InfoForm.current.addEventListener("igcInput", this.onInput.bind(this));
+ this.AddressForm.current.addEventListener(
+ "igcInput",
+ this.onInput.bind(this)
+ );
+ }
- public render(): JSX.Element {
- return (
- {
- constructor(props: any) {
- super(props);
- this.state = { stepType: "full" };
- this.onStepTypeChange = this.onStepTypeChange.bind(this);
- }
+export default function StepperStepTypes() {
- public render(): JSX.Element {
- return (
- StepperAnimations
+
+
+
+
+
+
\ No newline at end of file
diff --git a/samples/layouts/stepper/styling/sandbox.config.json b/samples/layouts/stepper/styling/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/stepper/styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/layouts/stepper/styling/src/index.css b/samples/layouts/stepper/styling/src/index.css
new file mode 100644
index 0000000000..a47c5463a7
--- /dev/null
+++ b/samples/layouts/stepper/styling/src/index.css
@@ -0,0 +1,62 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.settings {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1.125rem;
+ background: hsl(var(--ig-gray-100));
+ padding: 1.125rem;
+ border: 1px solid hsl(var(--ig-gray-300));
+ border-radius: .25rem;
+ margin-bottom: 2rem;
+}
+
+:root {
+ --color-teal: rgba(77, 182, 172, 1);
+ --color-dark-navy: rgba(26, 35, 126, 1);
+ --color-aqua-gray: rgba(208, 236, 236, 1);
+ --color-white: rgba(255, 255, 255, 1);
+
+ --color-teal-hover: rgba(26, 35, 126, 1);
+ --color-teal-shadow: rgba(77, 182, 172, 0.5);
+}
+
+igc-button::part(base) {
+ margin: 1rem 0.5rem 0 0;
+ background-color: var(--color-teal);
+ color: var(--color-white);
+ font-weight: 600;
+ transition: background-color 0.25s ease, transform 0.1s ease;
+}
+
+igc-button:hover::part(base) {
+ background-color: var(--color-dark-navy);
+}
+
+igc-button:active::part(base) {
+ transform: scale(0.96);
+}
+
+igc-step::part(title) {
+ color: var(--color-dark-navy);
+ font-variant: small-caps;
+ font-weight: bold;
+}
+
+igc-step::part(indicator) {
+ border-radius: 12px 6px 12px 6px;
+ background-color: var(--color-aqua-gray);
+ color: var(--color-dark-navy);
+ transition: all 0.2s ease;
+}
+
+igc-step[active]::part(indicator) {
+ background-color: var(--color-teal);
+ box-shadow: 0 2px 8px var(--color-teal-shadow);
+ transform: scale(1.04);
+}
+
+igc-step[active]:active::part(indicator) {
+ transform: scale(1.08);
+}
\ No newline at end of file
diff --git a/samples/layouts/stepper/styling/src/index.tsx b/samples/layouts/stepper/styling/src/index.tsx
new file mode 100644
index 0000000000..522bb199b9
--- /dev/null
+++ b/samples/layouts/stepper/styling/src/index.tsx
@@ -0,0 +1,231 @@
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import {
+ IgrStepper,
+ IgrStep,
+ IgrRadio,
+ IgrRadioGroup,
+ IgrButton,
+ IgrInput,
+ IgrSelect,
+ IgrSelectItem,
+ IgrSelectItemComponentEventArgs,
+ IgrComponentValueChangedEventArgs,
+ StepperOrientation,
+ HorizontalTransitionAnimation,
+ StepperVerticalAnimation,
+ IgrIcon,
+ registerIconFromText,
+} from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+
+const personalInfoIcon =
+ '';
+const addressIcon =
+ '';
+const paymentIcon =
+ '';
+const deliveryStatusIcon =
+ '';
+
+export default function StepperStyling() {
+ const stepperRef = useRef(null);
+ const [orientation, setOrientation] =
+ useState("horizontal");
+ const [horizontalAnimation, setHorizontalAnimation] =
+ useState("slide");
+ const [verticalAnimation, setVerticalAnimation] =
+ useState("grow");
+ const [animationDuration, setAnimationDuration] = useState("320");
+
+ useEffect(() => {
+ registerIconFromText("personal", personalInfoIcon, "material");
+ registerIconFromText("address", addressIcon, "material");
+ registerIconFromText("payment", paymentIcon, "material");
+ registerIconFromText("delivery", deliveryStatusIcon, "material");
+ }, []);
+
+ const orientationChange = (e: IgrSelectItemComponentEventArgs) => {
+ const selectedValue = e.detail.value as StepperOrientation;
+ setOrientation(selectedValue);
+ };
+
+ const horizontalAnimationChange = (e: IgrSelectItemComponentEventArgs) => {
+ const selectedValue = e.detail.value as HorizontalTransitionAnimation;
+ setHorizontalAnimation(selectedValue);
+ };
+
+ const verticalAnimationChange = (e: IgrSelectItemComponentEventArgs) => {
+ const selectedValue = e.detail.value as StepperVerticalAnimation;
+ setVerticalAnimation(selectedValue);
+ };
+
+ const animationDurationChange = (e: IgrComponentValueChangedEventArgs) => {
+ const animationDuration = e.detail;
+ setAnimationDuration(animationDuration);
+ };
+
+ return (
+ {
public render(): JSX.Element {
return (
);
diff --git a/samples/layouts/expansion-panel/component-customization/src/index.tsx b/samples/layouts/expansion-panel/component-customization/src/index.tsx
index 44dea73092..f502cae493 100644
--- a/samples/layouts/expansion-panel/component-customization/src/index.tsx
+++ b/samples/layouts/expansion-panel/component-customization/src/index.tsx
@@ -2,12 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelCustomization.css';
-import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from 'igniteui-react';
+import { IgrExpansionPanel, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-IgrExpansionPanelModule.register();
-
export default class ExpansionPanelComponentCustomization extends React.ComponentGolden Retriever
-Medium-large gun dog
-{this.state.expansionText}
-
- The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+ Golden Retriever
+Medium-large gun dog
+{this.state.expansionText}
+
+ The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.
- Golden Retriever
-Medium-large gun dog
-{this.state.expansionText}
- The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+ Golden Retriever
+Medium-large gun dog
+{this.state.expansionText}
+ The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.
diff --git a/samples/layouts/expansion-panel/styling/src/index.tsx b/samples/layouts/expansion-panel/styling/src/index.tsx
index e43830feaf..f5d96a9f18 100644
--- a/samples/layouts/expansion-panel/styling/src/index.tsx
+++ b/samples/layouts/expansion-panel/styling/src/index.tsx
@@ -2,12 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ExpansionPanelStyling.css';
-import { IgrExpansionPanel, IgrButton, IgrButtonModule, IgrExpansionPanelModule } from 'igniteui-react';
+import { IgrExpansionPanel, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrButtonModule.register();
-IgrExpansionPanelModule.register();
-
export default class ExpansionPanelStyling extends React.ComponentGolden Retriever
-Medium-large gun dog
-
- The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+ Golden Retriever
+Medium-large gun dog
+
+ The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.
- Golden Retriever
-Medium-large gun dog
- The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks +Golden Retriever
+Medium-large gun dog
+ The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards. diff --git a/samples/layouts/icon/sizing/src/index.tsx b/samples/layouts/icon/sizing/src/index.tsx index 4a7d648344..3e63dc1d8d 100644 --- a/samples/layouts/icon/sizing/src/index.tsx +++ b/samples/layouts/icon/sizing/src/index.tsx @@ -2,10 +2,11 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './IconSizing.css'; -import { IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react'; +import { IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -IgrIconModule.register(); +const buildIcon = + ''; const buildIcon = ''; diff --git a/samples/layouts/icon/styling/src/IconStyling.css b/samples/layouts/icon/styling/src/IconStyling.css index 949402bcbc..73b24e3db7 100644 --- a/samples/layouts/icon/styling/src/IconStyling.css +++ b/samples/layouts/icon/styling/src/IconStyling.css @@ -7,5 +7,5 @@ igc-icon { --size: 48px; - color: olive; + color: var(--ig-primary-500); } \ No newline at end of file diff --git a/samples/layouts/icon/styling/src/index.tsx b/samples/layouts/icon/styling/src/index.tsx index 84240dc4b0..8b22234c79 100644 --- a/samples/layouts/icon/styling/src/index.tsx +++ b/samples/layouts/icon/styling/src/index.tsx @@ -2,10 +2,11 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import './IconStyling.css'; -import { IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react'; +import { IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -IgrIconModule.register(); +const searchIcon = + ''; const searchIcon = ''; diff --git a/samples/layouts/stepper/animations/src/index.tsx b/samples/layouts/stepper/animations/src/index.tsx index 0eaddb32f1..0ab51421c4 100644 --- a/samples/layouts/stepper/animations/src/index.tsx +++ b/samples/layouts/stepper/animations/src/index.tsx @@ -1,118 +1,206 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; +import React, { useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; import { - IgrStepper, IgrStep, IgrStepperModule, IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule, - IgrButton, IgrButtonModule, IgrInput, IgrInputModule, IgrSelect, IgrSelectItem, IgrSelectModule, - IgrSelectItemComponentEventArgs, IgrComponentDataValueChangedEventArgs, - IgrComponentValueChangedEventArgs -} from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; + IgrStepper, + IgrStep, + IgrRadio, + IgrRadioGroup, + IgrButton, + IgrInput, + IgrSelect, + IgrSelectItem, + IgrSelectItemComponentEventArgs, + IgrComponentValueChangedEventArgs, + StepperOrientation, + HorizontalTransitionAnimation, + StepperVerticalAnimation, +} from "igniteui-react"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; -IgrStepperModule.register(); -IgrInputModule.register(); -IgrRadioModule.register(); -IgrRadioGroupModule.register(); -IgrButtonModule.register(); -IgrSelectModule.register(); +export default function StepperAnimations() { -export default class StepperAnimations extends React.Component
-
-
- Horizontal
- Vertical
-
-
- Grow
- Fade
- None
-
-
- Slide
- Fade
- None
-
-
- ms
-
-
+ }
-
-
- Personal Info
-
-
-
- Delivery address
-
-
-
- Payment
-
- PayPal (n@mail.com; 18/02/2021)
- Visa (**** **** **** 1234; 12/23)
- MasterCard (**** **** **** 5678; 12/24)
-
+ return (
+ {
+ stepperRef.current.next();
+ }}
+ >
+ NEXT
+
+
+
+
+ Delivery address
+
+
+
+ Payment
+
+
+ PayPal (n@mail.com; 18/02/2021)
+
+
+ Visa (**** **** **** 1234; 12/23)
+
+
+ MasterCard (**** **** **** 5678; 12/24)
+
+
+
+ {
+ stepperRef.current.prev();
+ }}
+ >
+ PREVIOUS
+
+ {
+ stepperRef.current.next();
+ }}
+ >
+ SUBMIT
+
+
+
+ Delivery status
+ {
+ stepperRef.current.prev();
+ }}
+ >
+ PREVIOUS
+
+ {
+ stepperRef.current.reset();
+ }}
+ >
+ RESET
+
+
+
+
+ );
}
-// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
+
+
+
+ Horizontal
+
+
+ Vertical
+
+
+
+
+ Grow
+
+
+ Fade
+
+
+ None
+
+
+
+
+ Slide
+
+
+ Fade
+
+
+ None
+
+
+
+ ms
+
+
- { this.stepperRef.current.prev(); }}>PREVIOUS
- { this.stepperRef.current.next(); }}>SUBMIT
-
-
- Delivery status
-
+
+ Personal Info
+
-
-
- );
- }
+ Your order is on its way. Expect delivery on 25th September 2021. Delivery address: San Jose, CA 94243.
++ Your order is on its way. Expect delivery on 25th September 2021. + Delivery address: San Jose, CA 94243. +
+ +
- Linear
+ public render(): JSX.Element {
+ return (
+ {
+ this.stepperRef.current.next();
+ }}
+ >
+ NEXT
+
+
+
+
+
+ Delivery address
+
+
+
+
+
+ Billing address
+
+
+ (optional)
+
+
+
+
+
+ Payment
+
+
+
+ PayPal (n@mail.com; 18/02/2021)
+
+
+ Visa (**** **** **** 1234; 12/23)
+
+
+
+ MasterCard (**** **** **** 5678; 12/24)
+
+
+
+ {
+ this.stepperRef.current.prev();
+ }}
+ >
+ PREVIOUS
+
+ {
+ this.stepperRef.current.next();
+ }}
+ >
+ SUBMIT
+
+
+
+
+ Delivery status
+
+ {
+ this.stepperRef.current.prev();
+ }}
+ >
+ PREVIOUS
+
+ {
+ this.stepperRef.current.reset();
+ }}
+ >
+ RESET
+
+
+
+
+ );
+ }
- public OnSwitchChange(e: IgrCheckboxChangeEventArgs) {
- this.setState({ linear: e.detail.checked });
- if(e.detail.checked){
- this.checkActiveStepValidity();
- }
+ public onSwitchChange(e: IgrCheckboxChangeEventArgs) {
+ this.setState({ linear: e.detail.checked });
+ if (e.detail.checked) {
+ this.checkActiveStepValidity();
}
+ }
- public onInput(s: IgrInput, e: IgrComponentValueChangedEventArgs) {
- if(!this.state.linear) return;
+ public onInput(s: IgrInput, e: IgrComponentValueChangedEventArgs) {
+ if (!this.state.linear) return;
- this.checkActiveStepValidity();
- }
+ this.checkActiveStepValidity();
+ }
- private checkActiveStepValidity(){
- const activeStep = this.activeStep;
- if (activeStep && this.activeStepIndex === 0) {
- const isInvalidForm = this.checkFormValidity(this.InfoForm);
- this.setState({firstStepInvalid: isInvalidForm});
- }
- if (activeStep && this.activeStepIndex === 1) {
- const isInvalidForm = this.checkFormValidity(this.AddressForm);
- this.setState({ secondStepInvalid: isInvalidForm });
- }
+ private checkActiveStepValidity() {
+ const activeStep = this.activeStep;
+ if (activeStep && this.activeStepIndex === 0) {
+ const isInvalidForm = this.checkFormValidity(this.InfoForm);
+ this.setState({ firstStepInvalid: isInvalidForm });
}
+ if (activeStep && this.activeStepIndex === 1) {
+ const isInvalidForm = this.checkFormValidity(this.AddressForm);
+ this.setState({ secondStepInvalid: isInvalidForm });
+ }
+ }
- private checkFormValidity(form: any){
- let isInvalidForm = false;
- for (const element of form.current.children) {
- if(element.tagName.toLowerCase() === 'igc-input' && element.value === ""){
- const oldInvalid = element.invalid;
- const isElementInvalid = !element.checkValidity();
- element.invalid = oldInvalid;
- if(isElementInvalid){
- isInvalidForm = true;
- break;
- }
- }
+ private checkFormValidity(form: any) {
+ let isInvalidForm = false;
+ for (const element of form.current.children) {
+ if (
+ element.tagName.toLowerCase() === "igc-input" &&
+ element.value === ""
+ ) {
+ const oldInvalid = element.invalid;
+ const isElementInvalid = !element.checkValidity();
+ element.invalid = oldInvalid;
+ if (isElementInvalid) {
+ isInvalidForm = true;
+ break;
}
- return isInvalidForm;
+ }
}
+ return isInvalidForm;
+ }
- private get activeStep(): IgrStep | undefined {
- return this.stepperRef.current.steps.find((step: IgrStep, index: number) => {
- this.activeStepIndex = index;
- return step.active;
- });
- }
+ private get activeStep(): IgrStep | undefined {
+ return this.stepperRef.current.steps.find(
+ (step: IgrStep, index: number) => {
+ this.activeStepIndex = index;
+ return step.active;
+ }
+ );
+ }
}
// rendering above class to the React DOM
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
+
+ Linear
+
-
-
- Personal Info
-
- );
- }
+ + Your order is on its way. Expect delivery on 25th September 2021. + Delivery address: San Jose, CA 94243. +
+
-
- ("full");
-
-
- Pricing Plan
-
-
- Car Details
-
-
- Payment
-
-
-
- );
+ const onStepTypeChange = (e: IgrRadioChangeEventArgs) => {
+ const newStepType = e.detail.value as StepperStepType;
+ setStepType(newStepType);
}
- public onStepTypeChange(e: IgrRadioChangeEventArgs) {
- const newStepType = e.detail.value;
- this.setState({ stepType: newStepType });
- }
+
+ return (
+
-
- Indicator
- Title
- Full
-
-
+ const [stepType, setStepType] = useState
+
+
+
+ Pricing Plan
+
+
+ Car Details
+
+
+ Payment
+
+
+
+ );
}
-// rendering above class to the React DOM
+// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+ Indicator
+ Title
+ Full
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/stepper/animations
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/stepper/styling/package.json b/samples/layouts/stepper/styling/package.json
new file mode 100644
index 0000000000..050ab21b29
--- /dev/null
+++ b/samples/layouts/stepper/styling/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "react-stepper-styling",
+ "description": "This project provides example of Stepper Styling using Infragistics React components",
+ "author": "Infragistics",
+ "homepage": ".",
+ "version": "1.4.0",
+ "private": true,
+ "scripts": {
+ "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+ "build": "react-scripts --max_old_space_size=10240 build ",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "dependencies": {
+ "igniteui-dockmanager": "1.16.1",
+ "igniteui-react": "19.0.2",
+ "igniteui-react-core": "19.0.0-alpha.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-scripts": "^5.0.1",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@types/jest": "^29.2.0",
+ "@types/node": "^18.11.7",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "react-app-rewired": "^2.2.1",
+ "typescript": "^4.8.4",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/layouts/stepper/styling/public/index.html b/samples/layouts/stepper/styling/public/index.html
new file mode 100644
index 0000000000..662d6963c9
--- /dev/null
+++ b/samples/layouts/stepper/styling/public/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+ Horizontal
+
+
+ Vertical
+
+
+
+
+ Grow
+
+
+ Fade
+
+
+ None
+
+
+
+
+ Slide
+
+
+ Fade
+
+
+ None
+
+
+
+ ms
+
+
+
+
+
+
+
+
+
+
+
+
+ PayPal (n@mail.com; 18/02/2021)
+
+
+ Visa (**** **** **** 1234; 12/23)
+
+
+ MasterCard (**** **** **** 5678; 12/24)
+
+
+
+ {
+ stepperRef.current.prev();
+ }}
+ >
+ PREVIOUS
+
+ {
+ stepperRef.current.next();
+ }}
+ >
+ SUBMIT
+
+
+
+ {
+ stepperRef.current.prev();
+ }}
+ >
+ PREVIOUS
+
+ {
+ stepperRef.current.reset();
+ }}
+ >
+ RESET
+
+
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(Personal Info
+ ++ Your order is on its way. Expect delivery on 25th September 2021. + Delivery address: San Jose, CA 94243. +
+ +
-
-
+
+
-
- Sample Drawer
+
+ Sample Drawer
-
-
+
+
-
- {
);
}
- public navDrawerRef(navDrawer: IgrNavDrawer){
+ public navDrawerRef(navDrawer: IgrNavDrawer) {
if (!navDrawer) { return; }
this.navDrawer = navDrawer;
}
@@ -74,20 +73,20 @@ export default class NavDrawerAddDrawerItems extends React.Component {
public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
- (e.target.parentElement?.closest('igc-nav-drawer-item') ??
- null)
+ (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+ null)
if (!drawerItem) { return; }
drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
- .filter((item: any) => item !== drawerItem)
- .forEach((child: any) => child.active = false);
+ .filter((item: any) => item !== drawerItem)
+ .forEach((child: any) => child.active = false);
}
}
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render( {
- Toggle
+ Toggle
-
-
+
+
@@ -61,7 +60,7 @@ export default class NavDrawerAddDrawerItems extends React.Component
+
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
@@ -74,16 +73,16 @@ export default class NavDrawerAddMini extends React.Component {
public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
- (e.target.parentElement?.closest('igc-nav-drawer-item') ??
- null)
+ (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+ null)
if (!drawerItem) { return; }
drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
- .filter((item: any) => item !== drawerItem)
- .forEach((child: any) => child.active = false);
+ .filter((item: any) => item !== drawerItem)
+ .forEach((child: any) => child.active = false);
const iconName = drawerItem.querySelector('igc-icon')!.name;
const icons = document.querySelectorAll(`igc-icon`);
diff --git a/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx b/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
index 52f73f2967..b8788c2b43 100644
--- a/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
+++ b/samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
@@ -1,14 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
-import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, IgrNavDrawerModule, IgrNavbarModule, IgrRadioGroupModule, IgrRadioModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
+import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, registerIconFromText, IgrRadioChangeEventArgs } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
-IgrNavDrawerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrRadioGroupModule.register();
-IgrRadioModule.register();
+const searchIcon = '';
+const homeIcon = '';
+const menuIcon = '';
const searchIcon = '';
const homeIcon = '';
@@ -38,45 +36,45 @@ export default class NavDrawerAddPositionsNavbar extends React.Component
-
- Sample Drawer
+
+ Sample Drawer
-
-
+
+
-
-
-
- Start
+
+ Start
-
- End
+
+ End
-
- Top
+
+ Top
-
- Bottom
+
+ Bottom
-
@@ -91,16 +89,16 @@ export default class NavDrawerAddPositionsNavbar extends React.Component item !== drawerItem)
- .forEach((child: any) => child.active = false);
+ .filter((item: any) => item !== drawerItem)
+ .forEach((child: any) => child.active = false);
this.setState({ title: drawerItem.textContent });
}
@@ -110,9 +108,9 @@ export default class NavDrawerAddPositionsNavbar extends React.Component {
-
- Sample Drawer
+
+ Sample Drawer
-
-
+
+
+
{this.state.title}
+{this.state.title}
+
+
-
- {
public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
- (e.target.parentElement?.closest('igc-nav-drawer-item') ??
- null)
+ (e.target.parentElement?.closest('igc-nav-drawer-item') ??
+ null)
if (!drawerItem) { return; }
drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
- .filter((item: any) => item !== drawerItem)
- .forEach((child: any) => child.active = false);
+ .filter((item: any) => item !== drawerItem)
+ .forEach((child: any) => child.active = false);
}
public navDrawerRef(navDrawer: IgrNavDrawer) {
diff --git a/samples/notifications/banner/banner-advanced-sample/src/index.tsx b/samples/notifications/banner/banner-advanced-sample/src/index.tsx
index 7b878fe8ce..ee3c68aaa5 100644
--- a/samples/notifications/banner/banner-advanced-sample/src/index.tsx
+++ b/samples/notifications/banner/banner-advanced-sample/src/index.tsx
@@ -2,33 +2,18 @@ import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom/client';
import {
IgrBanner,
- IgrBannerModule,
IgrButton,
- IgrButtonModule,
IgrCard,
- IgrCardModule,
IgrIcon,
- IgrIconModule,
IgrNavbar,
- IgrNavbarModule,
IgrRipple,
- IgrRippleModule,
IgrToast,
- IgrToastModule,
registerIconFromText,
- } from 'igniteui-react';
+} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './BannerAdvancedSample.css';
import './index.css';
-IgrBannerModule.register();
-IgrNavbarModule.register();
-IgrIconModule.register();
-IgrCardModule.register();
-IgrButtonModule.register();
-IgrRippleModule.register();
-IgrToastModule.register();
-
const wifiOnIcon =
'';
const wifiOffIcon =
@@ -40,6 +25,7 @@ export default function BannerAdvancedSample() {
const toastRef = useRef(null);
const [wifiState, setWifiState] = useState(false);
+ const [iconName, setIconName] = useState("signal_wifi_off");
useEffect(() => {
registerIconFromText('signal_wifi_off', wifiOffIcon);
@@ -47,20 +33,21 @@ export default function BannerAdvancedSample() {
bannerRef.current.open = true;
}, []);
- function refreshBanner() {
- if (!wifiState) {
- iconRef.current.name = 'signal_wifi_4_bar';
+ const refreshBanner = () => {
+ const nextWifiState = !wifiState;
+ setWifiState(nextWifiState);
+ setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");
+
+ if (nextWifiState) {
bannerRef.current.hide();
} else {
- iconRef.current.name = 'signal_wifi_off';
bannerRef.current.show();
}
- setWifiState(current => !current);
showToast();
}
- function showToast() {
+ const showToast = () => {
toastRef.current.open = false;
toastRef.current.show();
}
@@ -69,37 +56,37 @@ export default function BannerAdvancedSample() {
- refreshBanner()}>
+
-
+
+
@@ -72,16 +69,16 @@ export default class NavDrawerStyling extends React.ComponentGallery
-Gallery
+
- bannerRef.current.hide()}>
-
-
- bannerRef.current.show()}>
+ bannerRef.current.show()}>
- You are currently offline.
+ You are currently offline.
-
+
-
+ bannerRef.current.hide()}>
+
- refreshBanner()}>
-
+
- 
+
-
@@ -108,4 +95,4 @@ export default function BannerAdvancedSample() {
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
- 
+
- {`Wifi is now ${wifiState ? 'on' : 'off'}`}
+ {`Wifi is now ${wifiState ? 'on' : 'off'}`}
+
+
Gallery
-Gallery
+
-
+
-
- bannerRef.current.show()}>
+ bannerRef.current.show()}>
-
+
+
-
+
@@ -60,4 +51,4 @@ export default function BannerSample1() {
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
Gallery
-Gallery
+
- bannerRef.current.toggle()}>
-
-
+ bannerRef.current.toggle()}>
+
-
+
- (null);
const [wifiState, setWifiState] = useState(false);
+ const [iconName, setIconName] = useState("signal_wifi_off");
useEffect(() => {
registerIconFromText('signal_wifi_off', wifiOffIcon);
@@ -47,20 +33,21 @@ export default function BannerStyling() {
bannerRef.current.open = true;
}, []);
- function refreshBanner() {
- if (!wifiState) {
- iconRef.current.name = 'signal_wifi_4_bar';
+ const refreshBanner = () => {
+ const nextWifiState = !wifiState;
+ setWifiState(nextWifiState);
+ setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");
+
+ if (nextWifiState) {
bannerRef.current.hide();
} else {
- iconRef.current.name = 'signal_wifi_off';
bannerRef.current.show();
}
- setWifiState(current => !current);
showToast();
}
- function showToast() {
+ const showToast = () => {
toastRef.current.open = false;
toastRef.current.show();
}
@@ -69,37 +56,37 @@ export default function BannerStyling() {
- refreshBanner()}>
+
-
+
+
-
+
@@ -76,4 +63,4 @@ export default function BannerSample2() {
// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
+
+
Gallery
-Gallery
+
- bannerRef.current.hide()}>
-
-
+ bannerRef.current.hide()}>
+
- refreshBanner()}>
-
+
-
+
-
+
+
-