Skip to content

Commit 9537a74

Browse files
damyanpetevdamyanpetev
authored
Enums to union types for 19 update (#789)
1 parent 3852aca commit 9537a74

7 files changed

Lines changed: 43 additions & 78 deletions

File tree

‎samples/grids/grid/keyboard-custom-navigation/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { IgrGridModule } from 'igniteui-react-grids';
77
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
88
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-react-core';
99
import NwindData from './NwindData.json';
10-
import { IgrGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-react-grids';
10+
import { IgrGridKeydownEventArgs } from 'igniteui-react-grids';
1111

1212
import 'igniteui-react-grids/grids/combined';
1313
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
@@ -106,7 +106,7 @@ export default class Sample extends React.Component<any, any> {
106106
const type = args.targetType;
107107
const grid = eventArgs.target as IgrGrid;
108108

109-
if (type === GridKeydownTargetType.DataCell && target.editMode && evt.key.toLowerCase() === 'tab') {
109+
if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
110110
// Value validation for number column.
111111
// This covers both 'tab' and 'shift+tab' key interactions.
112112
args.event.preventDefault();
@@ -121,7 +121,7 @@ export default class Sample extends React.Component<any, any> {
121121

122122
grid.navigateTo(cell.rowIndex, cell.visibleColumnIndex,
123123
(obj: any) => { obj.target.activate(); });
124-
} else if (type === GridKeydownTargetType.DataCell && evt.key.toLowerCase() === 'enter') {
124+
} else if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
125125
// Perform column based kb navigation with 'enter' key press
126126
args.cancel = true;
127127
grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj: any) => {

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44

5-
import { GridSelectionMode, IgrColumnComponentEventArgs, IgrTreeGridModule } from 'igniteui-react-grids';
5+
import { IgrColumnComponentEventArgs, IgrTreeGridModule } from 'igniteui-react-grids';
66
import { IgrTreeGrid, IgrColumn } from 'igniteui-react-grids';
77
import { EmployeesFlatDetails } from './EmployeesFlatDetails';
88

@@ -147,8 +147,7 @@ export default class Sample extends React.Component<any, any> {
147147
}
148148

149149
private handleClearSelection() {
150-
this.treeGrid.cellSelection = GridSelectionMode.None;
151-
this.treeGrid.cellSelection = GridSelectionMode.Multiple;
150+
this.treeGrid.clearCellSelection();
152151
}
153152

154153
private webGridClipboardOperationsColumnInit = (args: IgrColumnComponentEventArgs) => {

‎samples/grids/tree-grid/keyboard-custom-navigation/src/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { IgrTreeGridModule } from 'igniteui-react-grids';
77
import { IgrTreeGrid, IgrPaginator, IgrColumn } from 'igniteui-react-grids';
88
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-react-core';
99
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
10-
import { IgrGrid, IgrGridKeydownEventArgs, GridKeydownTargetType } from 'igniteui-react-grids';
10+
import { IgrGrid, IgrGridKeydownEventArgs } from 'igniteui-react-grids';
1111

1212
import 'igniteui-react-grids/grids/combined';
1313
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
@@ -106,7 +106,7 @@ export default class Sample extends React.Component<any, any> {
106106
const type = args.targetType;
107107
const grid = eventArgs.target as IgrGrid;
108108

109-
if (type === GridKeydownTargetType.DataCell && target.editMode && evt.key.toLowerCase() === 'tab') {
109+
if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
110110
// Value validation for number column.
111111
// This covers both 'tab' and 'shift+tab' key interactions.
112112
args.event.preventDefault();
@@ -121,7 +121,7 @@ export default class Sample extends React.Component<any, any> {
121121

122122
grid.navigateTo(cell.rowIndex, cell.visibleColumnIndex,
123123
(obj: any) => { obj.target.activate(); });
124-
} else if (type === GridKeydownTargetType.DataCell && evt.key.toLowerCase() === 'enter') {
124+
} else if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
125125
// Perform column based kb navigation with 'enter' key press
126126
args.cancel = true;
127127
grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj: any) => {

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

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,8 @@ export default function ButtonGroupSelectionSample() {
4949
const buttonGroupRef = useRef<IgrButtonGroup>(null);
5050

5151
function onRadioChange(e: IgrRadioChangeEventArgs) {
52-
switch (e.detail.value) {
53-
case 'single':
54-
buttonGroupRef.current.selection = ButtonGroupSelection.Single;
55-
break;
56-
case 'single-required':
57-
buttonGroupRef.current.selection = ButtonGroupSelection.SingleRequired;
58-
break;
59-
default:
60-
buttonGroupRef.current.selection = ButtonGroupSelection.Multiple;
61-
break;
62-
}
52+
const value = e.detail.value as ButtonGroupSelection;
53+
buttonGroupRef.current.selection = value;
6354
}
6455

6556
return (

‎samples/layouts/carousel/animations/src/index.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useRef } from "react";
22
import ReactDOM from "react-dom/client";
33
import {
44
CarouselAnimationType,
5-
CheckboxBaseLabelPosition,
65
IgrButton,
76
IgrButtonModule,
87
IgrCard,
@@ -35,17 +34,8 @@ export default function CarouselComponents() {
3534
const carouselRef = useRef<IgrCarousel>(null);
3635

3736
function onSelectChange(e: CustomEvent<IgrSelectItem>) {
38-
switch (e.detail.value) {
39-
case "slide":
40-
carouselRef.current.animationType = CarouselAnimationType.Slide;
41-
break;
42-
case "fade":
43-
carouselRef.current.animationType = CarouselAnimationType.Fade;
44-
break;
45-
default:
46-
carouselRef.current.animationType = CarouselAnimationType.None;
47-
break;
48-
}
37+
const value = e.detail.value as CarouselAnimationType;
38+
carouselRef.current.animationType = value;
4939
}
5040

5141
function onSwitchChange(e: IgrCheckboxChangeEventArgs) {
@@ -72,7 +62,7 @@ export default function CarouselComponents() {
7262
<div className="action">
7363
<IgrSwitch
7464
onChange={onSwitchChange}
75-
labelPosition={CheckboxBaseLabelPosition.Before}
65+
labelPosition="before"
7666
>
7767
<span key="switch-span">Vertical alignment</span>
7868
</IgrSwitch>

‎samples/layouts/carousel/thumbnail/src/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import {
4-
CarouselAnimationType,
54
IgrCarousel,
65
IgrCarouselIndicator,
76
IgrCarouselModule,
@@ -44,7 +43,7 @@ export default function CarouselThumbnail() {
4443
hideNavigation={true}
4544
interval={2000}
4645
vertical={true}
47-
animationType={CarouselAnimationType.Fade}
46+
animationType="fade"
4847
>
4948
{images.map((image, index) => {
5049
return (

‎samples/layouts/stepper/orientation/src/index.tsx‎

Lines changed: 29 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,28 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import {
5-
IgrStepper, IgrStep, StepperOrientation, StepperTitlePosition, IgrStepperModule, IgrStepModule, IgrRadio, IgrRadioGroup,
6-
IgrRadioChangeEventArgs, IgrRadioModule, IgrRadioGroupModule, IgrButton, IgrButtonModule
5+
IgrButton,
6+
IgrRadio,
7+
IgrRadioChangeEventArgs,
8+
IgrRadioGroup,
9+
IgrStep,
10+
IgrStepper,
11+
StepperOrientation,
12+
StepperTitlePosition,
713
} from 'igniteui-react';
814
import 'igniteui-webcomponents/themes/light/bootstrap.css';
915

10-
IgrStepperModule.register();
11-
IgrStepModule.register();
12-
IgrRadioModule.register();
13-
IgrRadioGroupModule.register();
14-
IgrButtonModule.register();
16+
export interface StepperOrientationProps {
17+
orientation: StepperOrientation;
18+
titlePosition: StepperTitlePosition;
19+
}
1520

16-
export default class StepperOrientationSample extends React.Component<any, any> {
21+
export default class StepperOrientationSample extends React.Component<any, StepperOrientationProps> {
1722
private stepperRef = React.createRef<IgrStepper>();
1823

19-
constructor(props: any) {
24+
constructor(props: StepperOrientationProps) {
2025
super(props);
21-
this.state = { orientation: StepperOrientation.Horizontal, isDefaultTitlePosition: true };
26+
this.state = { orientation: "horizontal", titlePosition: "auto" };
2227
this.handleTitlePositionChange = this.handleTitlePositionChange.bind(this);
2328
this.handleOrientationChange = this.handleOrientationChange.bind(this);
2429
}
@@ -30,26 +35,26 @@ export default class StepperOrientationSample extends React.Component<any, any>
3035
<div className="radio-group">
3136
<label>Title position</label>
3237
<div className="radio-group-container">
33-
<IgrRadioGroup alignment="horizontal">
34-
<IgrRadio name="title" value="Top" onChange={this.handleTitlePositionChange}><span>Top</span></IgrRadio>
35-
<IgrRadio name="title" value="Bottom" onChange={this.handleTitlePositionChange}><span>Bottom</span></IgrRadio>
36-
<IgrRadio name="title" value="Start" onChange={this.handleTitlePositionChange}><span>Start</span></IgrRadio>
37-
<IgrRadio name="title" value="End" onChange={this.handleTitlePositionChange}><span>End</span></IgrRadio>
38-
<IgrRadio name="title" value="" checked={true} onChange={this.handleTitlePositionChange}><span>Default</span></IgrRadio>
38+
<IgrRadioGroup alignment="horizontal" onChange={this.handleTitlePositionChange} value={this.state.titlePosition}>
39+
<IgrRadio name="title" value="top"><span>Top</span></IgrRadio>
40+
<IgrRadio name="title" value="bottom"><span>Bottom</span></IgrRadio>
41+
<IgrRadio name="title" value="start"><span>Start</span></IgrRadio>
42+
<IgrRadio name="title" value="end"><span>End</span></IgrRadio>
43+
<IgrRadio name="title" value="auto"><span>Auto (default)</span></IgrRadio>
3944
</IgrRadioGroup>
4045
</div>
4146
</div>
4247
<div className="radio-group">
4348
<label>Orientation</label>
4449
<div className="radio-group-container">
45-
<IgrRadioGroup alignment="horizontal">
46-
<IgrRadio name="orientation" value="Horizontal" checked={true} onChange={this.handleOrientationChange}><span>Horizontal</span></IgrRadio>
47-
<IgrRadio name="orientation" value="Vertical" onChange={this.handleOrientationChange}><span>Vertical</span></IgrRadio>
50+
<IgrRadioGroup alignment="horizontal" onChange={this.handleOrientationChange} value={this.state.orientation}>
51+
<IgrRadio name="orientation" value="horizontal"><span>Horizontal</span></IgrRadio>
52+
<IgrRadio name="orientation" value="vertical"><span>Vertical</span></IgrRadio>
4853
</IgrRadioGroup>
4954
</div>
5055
</div>
5156
</div>
52-
<IgrStepper ref={this.stepperRef} orientation={this.state.orientation} >
57+
<IgrStepper ref={this.stepperRef} orientation={this.state.orientation} titlePosition={this.state.titlePosition}>
5358
<IgrStep>
5459
<span slot="title">Order</span>
5560
<IgrButton onClick={() => { this.stepperRef.current.next(); }}><span>NEXT</span></IgrButton>
@@ -70,32 +75,13 @@ export default class StepperOrientationSample extends React.Component<any, any>
7075
}
7176

7277
public handleTitlePositionChange(e: IgrRadioChangeEventArgs) {
73-
const value = e.detail.value;
74-
75-
if (value === '') {
76-
this.setDefaultTitlePosition();
77-
this.setState({ isDefaultTitlePosition: true });
78-
} else {
79-
const newTitlePosition: StepperTitlePosition = StepperTitlePosition[value as keyof typeof StepperTitlePosition];
80-
this.stepperRef.current.titlePosition = newTitlePosition;
81-
this.setState({ isDefaultTitlePosition: false });
82-
}
78+
const newTitlePosition = e.detail.value as StepperTitlePosition;
79+
this.setState({ titlePosition: newTitlePosition });
8380
}
8481

8582
public handleOrientationChange(e: IgrRadioChangeEventArgs) {
86-
const value = e.detail.value;
87-
const newOrientation: StepperOrientation = StepperOrientation[value as keyof typeof StepperOrientation];
88-
this.setDefaultTitlePosition(newOrientation);
89-
this.setState({ orientation: newOrientation });
90-
}
91-
92-
public setDefaultTitlePosition(orientation?: StepperOrientation) {
93-
const currentOrientation = orientation !== undefined ? orientation : this.state.orientation;
94-
if (currentOrientation === StepperOrientation.Horizontal) {
95-
this.stepperRef.current.titlePosition = StepperTitlePosition.Bottom;
96-
} else {
97-
this.stepperRef.current.titlePosition = StepperTitlePosition.End;
98-
}
83+
const newOrientation = e.detail.value as StepperOrientation;
84+
this.setState({ orientation: newOrientation, titlePosition: "auto" });
9985
}
10086
}
10187

0 commit comments

Comments
 (0)