Merge branch 'vnext' into dkamburov/update-ig-18.5.2-beta.1

Author: dkamburov

samples/layouts/stepper/animations/src/index.tsx

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import {
     IgrStepper, IgrStep, IgrStepperModule, IgrRadio, IgrRadioGroup, IgrRadioModule, IgrRadioGroupModule,
-    IgrButton, IgrButtonModule, IgrInput, IgrInputModule, IgrSelect, IgrSelectItem, IgrSelectModule, IgrDropdown,
-    IgrDropdownItemComponentEventArgs, IgrComponentValueChangedEventArgs, IgrSelectItemComponentEventArgs
+    IgrButton, IgrButtonModule, IgrInput, IgrInputModule, IgrSelect, IgrSelectItem, IgrSelectModule,
+    IgrSelectItemComponentEventArgs, IgrComponentValueChangedEventArgs
 } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 

samples/layouts/stepper/linear/src/index.tsx

@@ -19,6 +19,7 @@ export default class LinearStepper extends React.Component<any, any> {
     private stepperRef = React.createRef<IgrStepper>();
     private InfoForm = React.createRef<any>();
     private AddressForm = React.createRef<any>();
+    private activeStepIndex = 0;
 
     constructor(props: any) {
         super(props);
@@ -34,7 +35,7 @@ export default class LinearStepper extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="container sample">
-                <IgrSwitch change={this.OnSwitchChange}></IgrSwitch>
+                <IgrSwitch change={this.OnSwitchChange}><span key="liner-switch">Linear</span></IgrSwitch>
 
                 <IgrStepper ref={this.stepperRef} linear={this.state.linear} >
                     <IgrStep key="info-step" invalid={this.state.linear && this.state.firstStepInvalid}>
@@ -89,24 +90,26 @@ export default class LinearStepper extends React.Component<any, any> {
     public OnSwitchChange(s: IgrCheckboxBase, e: IgrComponentBoolValueChangedEventArgs) {
         this.setState({ linear: s.checked });
         if(s.checked){
-            this.checkAtiveStepValidity();
+           this.checkActiveStepValidity();
         }
     }
 
     public onInput(s: IgrInput, e: IgrComponentValueChangedEventArgs) {
         if(!this.state.linear) return;
 
-        this.checkAtiveStepValidity();       
+        this.checkActiveStepValidity();       
     }
 
-    private checkAtiveStepValidity(){
+    private checkActiveStepValidity(){
         const activeStep = this.activeStep;
-
-        const isInvalidForm = this.checkFormValidity(this.InfoForm);
-        this.setState({firstStepInvalid: isInvalidForm});
-
-        const isInvalidForm2 = this.checkFormValidity(this.AddressForm);
-        this.setState({ secondStepInvalid: isInvalidForm2 });
+        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){
@@ -126,7 +129,10 @@ export default class LinearStepper extends React.Component<any, any> {
     }
 
     private get activeStep(): IgrStep | undefined {
-        return this.stepperRef.current.steps.find((step: IgrStep) => step.active);
+        return this.stepperRef.current.steps.find((step: IgrStep, index: number) => {
+            this.activeStepIndex = index;
+            return step.active;
+        });
     }
 }