Skip to content

Commit 9fc138a

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #754 from IgniteUI/dpetev/wrappers-update-event-names
Grids and inputs event on- prefix
2 parents 8e6c2cd + 2739511 commit 9fc138a

File tree

79 files changed

+226
-232
lines changed

Some content is hidden

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

79 files changed

+226
-232
lines changed

‎samples/grids/grid/binding-composite-data/src/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -125,19 +125,19 @@ export default class Sample extends React.Component<any, any> {
125125
return (
126126
<>
127127
<div className="contact-container--edit" style={{padding: "1rem"}}>
128-
<IgrInput label='Name' inputOcurred={(input: any, e: any) =>
128+
<IgrInput label='Name' onInput={(e: any) =>
129129
{
130130
cell.row.data.ContactName = e.detail;
131131
grid.forceUpdate();
132132
}
133133
} value={cell.row.data.ContactName}></IgrInput>
134-
<IgrInput label='Title' inputOcurred={(input: any, e: any) =>
134+
<IgrInput label='Title' onInput={(e: any) =>
135135
{
136136
cell.row.data.ContactTitle = e.detail;
137137
grid.forceUpdate();
138138
}
139139
} value={cell.row.data.ContactTitle}></IgrInput>
140-
<IgrInput label='Company' inputOcurred={(input: any, e: any) =>
140+
<IgrInput label='Company' onInput={(e: any) =>
141141
{
142142
cell.row.data.Company = e.detail;
143143
grid.forceUpdate();
@@ -184,25 +184,25 @@ export default class Sample extends React.Component<any, any> {
184184
return (
185185
<>
186186
<div className="contact-container--edit" style={{padding: "1rem"}}>
187-
<IgrInput label='Country' inputOcurred={(input: any, e: any) =>
187+
<IgrInput label='Country' onInput={(e: any) =>
188188
{
189189
cell.row.data.Country = e.detail;
190190
grid.forceUpdate();
191191
}
192192
} value={cell.row.data.Country}></IgrInput>
193-
<IgrInput label='City' inputOcurred={(input: any, e: any) =>
193+
<IgrInput label='City' onInput={(e: any) =>
194194
{
195195
cell.row.data.City = e.detail;
196196
grid.forceUpdate();
197197
}
198198
} value={cell.row.data.City}></IgrInput>
199-
<IgrInput label='Postal Code' inputOcurred={(input: any, e: any) =>
199+
<IgrInput label='Postal Code' onInput={(e: any) =>
200200
{
201201
cell.row.data.PostalCode = e.detail;
202202
grid.forceUpdate();
203203
}
204204
} value={cell.row.data.PostalCode}></IgrInput>
205-
<IgrInput label='Phone' inputOcurred={(input: any, e: any) =>
205+
<IgrInput label='Phone' onInput={(e: any) =>
206206
{
207207
cell.row.data.Phone = e.detail;
208208
grid.forceUpdate();

‎samples/grids/grid/binding-nested-data-1/src/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,12 +109,12 @@ export default class Sample extends React.Component<any, any> {
109109
{value.Name}
110110
</div>
111111
<div className="description">
112-
<IgrInput type="text" label="Title" name="title" value={value.Title} change={(s:any, e: any) => {
113-
props.dataContext.cell.value[0][s.label] = e.detail;
112+
<IgrInput type="text" label="Title" name="title" value={value.Title} onChange={(e: any) => {
113+
props.dataContext.cell.value[0][e.target.label] = e.detail;
114114
grid.markForCheck();
115115
}} style={{textOverflow: "ellipsis"}} />
116-
<IgrInput type="number" label="Age" name="title" value={value.Age} inputOcurred={(s:any, e: any) => {
117-
props.dataContext.cell.value[0][s.label] = e.detail;
116+
<IgrInput type="number" label="Age" name="title" value={value.Age} onInput={(e: any) => {
117+
props.dataContext.cell.value[0][e.target.label] = e.detail;
118118
grid.markForCheck();
119119
}} style={{textOverflow: "ellipsis"}} />
120120
</div>

‎samples/grids/grid/cascading-combo/src/index.tsx‎

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default class Sample extends React.Component<any, any> {
4141
autoGenerate={false}
4242
data={this.worldCitiesAbove500K}
4343
primaryKey="ID"
44-
rendered={this.webGridWithComboRendered}>
44+
onRendered={this.webGridWithComboRendered}>
4545
<IgrColumn
4646
field="ID"
4747
header="ID"
@@ -98,53 +98,47 @@ export default class Sample extends React.Component<any, any> {
9898
}
9999
}
100100

101-
public webGridWithComboRendered(gridRef: IgrGrid, args: IgrVoidEventArgs) {
102-
gridRef.data = this.gridData;
101+
public webGridWithComboRendered(args: IgrVoidEventArgs) {
102+
args.target.data = this.gridData;
103103
}
104104

105-
public onCountryChange( rowId: string, cmp: any, args:any) {
105+
public onCountryChange(rowId: string, args: CustomEvent<any>) {
106106
// find next combo
107-
// args incomplete, so gte value from component on timeout as workaround.
108107
const regionCombo = this.comboRefCollection.get("region_" + rowId);
109108
const cityCombo = this.comboRefCollection.get("city_" + rowId);
110109
const regions = this.regions;
111-
setTimeout(() => {
112-
const newValue = cmp.value[0];
113-
if (newValue === undefined) {
114-
regionCombo.deselect(regionCombo.value);
115-
regionCombo.disabled = true;
116-
regionCombo.data = [];
117-
118-
cityCombo.deselect(regionCombo.value);
119-
cityCombo.disabled = true;
120-
cityCombo.data = [];
121-
} else {
122-
regionCombo.disabled = false;
123-
regionCombo.data = regions.filter(x => x.Country === newValue);
124-
125-
cityCombo.deselect(cityCombo.value);
126-
cityCombo.disabled = true;
127-
cityCombo.data = [];
128-
}
129-
});
110+
const newValue = args.detail.newValue[0];
111+
if (newValue === undefined) {
112+
regionCombo.deselect(regionCombo.value);
113+
regionCombo.disabled = true;
114+
regionCombo.data = [];
115+
116+
cityCombo.deselect(regionCombo.value);
117+
cityCombo.disabled = true;
118+
cityCombo.data = [];
119+
} else {
120+
regionCombo.disabled = false;
121+
regionCombo.data = regions.filter(x => x.Country === newValue);
122+
123+
cityCombo.deselect(cityCombo.value);
124+
cityCombo.disabled = true;
125+
cityCombo.data = [];
126+
}
130127
}
131128

132-
public onRegionChange( rowId: string, cmp: any, args:any) {
129+
public onRegionChange(rowId: string, args: CustomEvent<any>) {
133130
// find next combo
134-
// args incomplete
135131
const cityCombo = this.comboRefCollection.get("city_" + rowId);
136132
const cities = this.cities;
137-
setTimeout(() => {
138-
const newValue = cmp.value[0];
139-
if (newValue === undefined) {
140-
cityCombo.deselect(cityCombo.value);
141-
cityCombo.disabled = true;
142-
cityCombo.data = [];
143-
} else {
144-
cityCombo.disabled = false;
145-
cityCombo.data = cities.filter(x => x.Region === newValue);
146-
}
147-
});
133+
const newValue = args.detail.newValue[0];
134+
if (newValue === undefined) {
135+
cityCombo.deselect(cityCombo.value);
136+
cityCombo.disabled = true;
137+
cityCombo.data = [];
138+
} else {
139+
cityCombo.disabled = false;
140+
cityCombo.data = cities.filter(x => x.Region === newValue);
141+
}
148142
}
149143

150144
public webGridCountryDropDownTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
@@ -157,7 +151,7 @@ export default class Sample extends React.Component<any, any> {
157151
const comboId = "country" + id;
158152
return (
159153
<>
160-
<IgrCombo data={this.countries} ref={(this as any).comboRefs} change={(x: any, args: any) => { (this as any).onCountryChange(id, x, args) }} placeholder="Choose Country..." valueKey="Country" displayKey="Country" singleSelect={true} name={comboId}></IgrCombo>
154+
<IgrCombo data={this.countries} ref={(this as any).comboRefs} onChange={(args: any) => { (this as any).onCountryChange(id, args) }} placeholder="Choose Country..." valueKey="Country" displayKey="Country" singleSelect={true} name={comboId}></IgrCombo>
161155
</>
162156
);
163157
}
@@ -173,7 +167,7 @@ export default class Sample extends React.Component<any, any> {
173167
return (
174168
<>
175169
<div style={{display: "flex", flexDirection: "column"}}>
176-
<IgrCombo ref={(this as any).comboRefs} change={(x: any, args: any) => { (this as any).onRegionChange(id, x, args) }} placeholder="Choose Region..." disabled={true} valueKey="Region" displayKey="Region" singleSelect={true} name={comboId}>
170+
<IgrCombo ref={(this as any).comboRefs} onChange={(args: any) => { (this as any).onRegionChange(id, args) }} placeholder="Choose Region..." disabled={true} valueKey="Region" displayKey="Region" singleSelect={true} name={comboId}>
177171
</IgrCombo>
178172
</div>
179173
</>

‎samples/grids/grid/cell-editing-sample/src/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ export default class Sample extends React.Component<any, any> {
122122
index++;
123123
}
124124
return (
125-
<IgrSelect className="size-large" key={key} change={(x: any) => {
125+
<IgrSelect className="size-large" key={key} onChange={(x: any) => {
126126
setTimeout(() => {
127-
cell.editValue = x.value;
127+
cell.editValue = x.target.value;
128128
});
129129
}}>
130130
{cellValues}

‎samples/grids/grid/clipboard-operations/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function App() {
6666
<IgrSwitch labelPosition="before" checked change={changeGridCopyFormattersBehavior}>
6767
<span key="gridCopyFormatters">Copying column formatters</span>
6868
</IgrSwitch>
69-
<IgrButton clicked={clearSelection}>
69+
<IgrButton onClick={clearSelection}>
7070
<span key="clearSelection">Clear selection</span>
7171
</IgrButton>
7272
</div>

‎samples/grids/grid/column-resizing/src/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default class Sample extends React.Component<any, any> {
4848
autoGenerate={false}
4949
data={this.customersData}
5050
id="grid"
51-
columnResized={this.webGridColumnResized}>
51+
onColumnResized={this.webGridColumnResized}>
5252
<IgrColumn
5353
field="ID"
5454
header="ID">
@@ -115,7 +115,7 @@ export default class Sample extends React.Component<any, any> {
115115
}
116116

117117

118-
public webGridColumnResized(grid: IgrGridBaseDirective, args: IgrColumnResizeEventArgs): void {
118+
public webGridColumnResized(args: IgrColumnResizeEventArgs): void {
119119
var col = args.detail.column;
120120
var pWidth = args.detail.prevWidth;
121121
var nWidth = args.detail.newWidth;

‎samples/grids/grid/conditional-row-selectors/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default class Sample extends React.Component<any, any> {
4141
id="grid"
4242
primaryKey="ID"
4343
rowSelection="multiple"
44-
rowSelectionChanging={this.webGridRowSelectionConditional}>
44+
onRowSelectionChanging={this.webGridRowSelectionConditional}>
4545
<IgrColumn
4646
field="ContactName"
4747
header="Name"

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
IgrComponentValueChangedEventArgs,
1515
IgrIconButton,
1616
IgrInput,
17-
IgrInputBase,
1817
IgrInputModule,
1918
IgrIconButtonModule,
2019
} from "igniteui-react";
@@ -57,7 +56,7 @@ export default function Sample() {
5756
}
5857
}, []);
5958

60-
function handleOnSearchChange(input: IgrInputBase, event: IgrComponentValueChangedEventArgs) {
59+
function handleOnSearchChange(event: IgrComponentValueChangedEventArgs) {
6160
setSearchText(event.detail);
6261
gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
6362
}
@@ -89,7 +88,7 @@ export default function Sample() {
8988
<div className="container sample">
9089
<div className="container vertical">
9190
<div style={{ marginBottom: "1rem" }} onKeyDown={searchKeyDown}>
92-
<IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
91+
<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
9392

9493
<div slot="prefix" key="prefix">
9594
{searchText.length === 0 ? (
@@ -107,7 +106,7 @@ export default function Sample() {
107106
variant="flat"
108107
name="clear"
109108
collection="material"
110-
clicked={clearSearch}
109+
onClick={clearSearch}
111110
></IgrIconButton>
112111
)}
113112
</div>
@@ -127,15 +126,15 @@ export default function Sample() {
127126
variant="flat"
128127
name="prev"
129128
collection="material"
130-
clicked={prevSearch}
129+
onClick={prevSearch}
131130
></IgrIconButton>
132131
<IgrIconButton
133132
key="nextIconButton"
134133
ref={iconButtonNextRef}
135134
variant="flat"
136135
name="next"
137136
collection="material"
138-
clicked={nextSearch}
137+
onClick={nextSearch}
139138
></IgrIconButton>
140139
</div>
141140
</IgrInput>

‎samples/grids/grid/data-summary-options/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class Sample extends React.Component<any, any> {
4545
autoGenerate={false}
4646
data={this.nwindData}
4747
primaryKey="ProductID"
48-
columnInit={this.webGridCustomSummary}>
48+
onColumnInit={this.webGridCustomSummary}>
4949
<IgrColumn
5050
field="ProductID">
5151
</IgrColumn>

‎samples/grids/grid/editing-events/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default class Sample extends React.Component<any, any> {
4242
autoGenerate={false}
4343
data={this.nwindData}
4444
primaryKey="ProductID"
45-
cellEdit={this.webGridEditingEventsCellEdit}>
45+
onCellEdit={this.webGridEditingEventsCellEdit}>
4646
<IgrColumn
4747
field="ProductName"
4848
header="Product Name"

0 commit comments

Comments
 (0)