Stepper Form Demo: update way to set Stepper readonly (#30176)

Author: anna-shakhova

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.css

@@ -33,3 +33,7 @@
   display: flex;
   gap: 8px;
 }
+
+::ng-deep .readonly {
+  pointer-events: none;
+}

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.html

@@ -1,4 +1,6 @@
 <dx-stepper
+  [focusStateEnabled]="!isStepperReadonly"
+  [class.readonly]="isStepperReadonly"
   [(selectedIndex)]="selectedIndex"
   (onSelectionChanging)="onSelectionChanging($event)"
 >
@@ -61,7 +63,7 @@
     <div class="current-step">
       <span *ngIf="!isConfirmed">
         Step <span class="selected-index">{{ selectedIndex + 1 }}</span> of
-        <span class="step-count">{{ steps.length }}</span>
+        {{ steps.length }}
       </span>
     </div>
     <div class="nav-buttons">

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts

@@ -45,15 +45,16 @@ export class AppComponent {
 
   isConfirmed: boolean;
 
+  isStepperReadonly: boolean;
+
   validationGroups = ['dates', 'guests', 'roomAndMealPlan'];
 
   constructor(private readonly appService: AppService) {
     this.steps = this.appService.getInitialSteps();
     this.formData = this.appService.getInitialFormData();
     this.selectedIndex = 0;
     this.isConfirmed = false;
-
-    this.getNextButtonText = this.getNextButtonText.bind(this);
+    this.isStepperReadonly = false;
   }
 
   getValidationResult(index: number){
@@ -69,12 +70,6 @@ export class AppComponent {
   }
 
   onSelectionChanging(e: SelectionChangingEvent) {
-    if (this.isConfirmed) {
-      e.cancel = true;
-
-      return;
-    }
-
     const { component, addedItems, removedItems } = e;
     const { items = [] } = component.option();
 
@@ -122,11 +117,13 @@ export class AppComponent {
     this.formData = this.appService.getInitialFormData();
     validationEngine.resetGroup(this.validationGroups[0]);
     validationEngine.resetGroup(this.validationGroups[1]);
+    this.isStepperReadonly = false;
   }
 
   confirm(){
     this.isConfirmed = true;
     this.setStepValidationResult(this.selectedIndex, true);
+    this.isStepperReadonly = true;
   }
 
   onNextButtonClick() {

apps/demos/Demos/Stepper/FormIntegration/React/App.tsx

@@ -22,6 +22,28 @@ export default function App () {
   const [steps, setSteps] = useState<IItemProps[]>(initialSteps);
   const [formData, setFormData] = useState<BookingFormData>(getInitialFormData);
   const [isConfirmed, setIsConfirmed] = useState(false);
+  const [isStepperReadonly, setIsStepperReadonly] = useState(false);
+
+  const getValidationResult = useCallback((index: number) => {
+    if (index >= validationGroups.length) {
+      return true;
+    }
+
+    return validationEngine.validateGroup(validationGroups[index]).isValid;
+  }, []);
+
+  const setStepValidationResult = useCallback((index: number, isValid: boolean | undefined) => {
+    setSteps((prev) => prev.map((step, i) => {
+      if (i === index) {
+        return {
+          ...step,
+          isValid,
+        }
+      }
+
+      return step;
+    }));
+  }, []);
 
   const onPrevButtonClick = useCallback(() => {
     setSelectedIndex((prev) => prev - 1);
@@ -35,18 +57,20 @@ export default function App () {
     if (isValid){
       setSelectedIndex(selectedIndex + 1);
     }
-  }, [selectedIndex]);
+  }, [getValidationResult, selectedIndex, setStepValidationResult]);
 
   const onConfirm = useCallback(() => {
     setIsConfirmed(true);
     setStepValidationResult(initialSteps.length - 1, true);
-  }, []);
+    setIsStepperReadonly(true);
+  }, [setStepValidationResult]);
 
   const onReset = useCallback(() => {
     setIsConfirmed(false);
     setSteps(initialSteps);
     setSelectedIndex(0);
     setFormData(getInitialFormData);
+    setIsStepperReadonly(false);
   }, []);
 
   const onNextButtonClick = useCallback(() => {
@@ -57,7 +81,7 @@ export default function App () {
     } else {
       onConfirm();
     }
-  }, [selectedIndex, isConfirmed, onConfirm, onReset]);
+  }, [selectedIndex, isConfirmed, onConfirm, onReset, moveNext]);
 
   const nextButtonText = useMemo(() => {
     if (selectedIndex < steps.length - 1) {
@@ -69,36 +93,9 @@ export default function App () {
     }
 
     return 'Confirm';
-  }, [selectedIndex, isConfirmed]);
-
-  const getValidationResult = useCallback((index: number) => {
-    if (index >= validationGroups.length) {
-      return true;
-    }
-
-    return validationEngine.validateGroup(validationGroups[index]).isValid;
-  }, []);
-
-  const setStepValidationResult = useCallback((index: number, isValid: boolean | undefined) => {
-    setSteps((prev) => prev.map((step, i) => {
-      if (i === index) {
-        return {
-          ...step,
-          isValid,
-        }
-      }
-
-      return step;
-    }));
-  }, []);
+  }, [selectedIndex, isConfirmed, steps.length]);
 
   const onSelectionChanging = useCallback((args: SelectionChangingEvent) => {
-    if (isConfirmed) {
-      args.cancel = true;
-
-      return;
-    }
-
     const { component, addedItems, removedItems } = args;
     const { items = [] } = component.option();
 
@@ -115,7 +112,7 @@ export default function App () {
         args.cancel = true;
       }
     }
-  }, [setStepValidationResult, isConfirmed]);
+  }, [setStepValidationResult, getValidationResult]);
 
   const onSelectionChanged = useCallback(({ component }: SelectionChangedEvent) => {
     setSelectedIndex(component.option('selectedIndex') ?? 0);
@@ -144,6 +141,8 @@ export default function App () {
   return (
     <>
       <Stepper
+        className={ isStepperReadonly ? 'readonly' : ''}
+        focusStateEnabled={!isStepperReadonly}
         selectedIndex={selectedIndex}
         onSelectionChanged={onSelectionChanged}
         onSelectionChanging={onSelectionChanging}
@@ -172,7 +171,7 @@ export default function App () {
               <>
                 Step <span className="selected-index">{selectedIndex + 1}</span>
                 {' of '}
-                <span className="step-count">{steps.length}</span>
+                {steps.length}
                </>
             )}
           </div>

apps/demos/Demos/Stepper/FormIntegration/React/styles.css

@@ -68,3 +68,7 @@
     display: flex;
     gap: 8px;
 }
+
+.readonly {
+    pointer-events: none;
+}

apps/demos/Demos/Stepper/FormIntegration/ReactJs/App.js

@@ -16,6 +16,25 @@ export default function App() {
   const [steps, setSteps] = useState(initialSteps);
   const [formData, setFormData] = useState(getInitialFormData);
   const [isConfirmed, setIsConfirmed] = useState(false);
+  const [isStepperReadonly, setIsStepperReadonly] = useState(false);
+  const getValidationResult = useCallback((index) => {
+    if (index >= validationGroups.length) {
+      return true;
+    }
+    return validationEngine.validateGroup(validationGroups[index]).isValid;
+  }, []);
+  const setStepValidationResult = useCallback((index, isValid) => {
+    setSteps((prev) =>
+      prev.map((step, i) => {
+        if (i === index) {
+          return {
+            ...step,
+            isValid,
+          };
+        }
+        return step;
+      }));
+  }, []);
   const onPrevButtonClick = useCallback(() => {
     setSelectedIndex((prev) => prev - 1);
   }, []);
@@ -25,16 +44,18 @@ export default function App() {
     if (isValid) {
       setSelectedIndex(selectedIndex + 1);
     }
-  }, [selectedIndex]);
+  }, [getValidationResult, selectedIndex, setStepValidationResult]);
   const onConfirm = useCallback(() => {
     setIsConfirmed(true);
     setStepValidationResult(initialSteps.length - 1, true);
-  }, []);
+    setIsStepperReadonly(true);
+  }, [setStepValidationResult]);
   const onReset = useCallback(() => {
     setIsConfirmed(false);
     setSteps(initialSteps);
     setSelectedIndex(0);
     setFormData(getInitialFormData);
+    setIsStepperReadonly(false);
   }, []);
   const onNextButtonClick = useCallback(() => {
     if (selectedIndex < initialSteps.length - 1) {
@@ -44,7 +65,7 @@ export default function App() {
     } else {
       onConfirm();
     }
-  }, [selectedIndex, isConfirmed, onConfirm, onReset]);
+  }, [selectedIndex, isConfirmed, onConfirm, onReset, moveNext]);
   const nextButtonText = useMemo(() => {
     if (selectedIndex < steps.length - 1) {
       return 'Next';
@@ -53,31 +74,9 @@ export default function App() {
       return 'Reset';
     }
     return 'Confirm';
-  }, [selectedIndex, isConfirmed]);
-  const getValidationResult = useCallback((index) => {
-    if (index >= validationGroups.length) {
-      return true;
-    }
-    return validationEngine.validateGroup(validationGroups[index]).isValid;
-  }, []);
-  const setStepValidationResult = useCallback((index, isValid) => {
-    setSteps((prev) =>
-      prev.map((step, i) => {
-        if (i === index) {
-          return {
-            ...step,
-            isValid,
-          };
-        }
-        return step;
-      }));
-  }, []);
+  }, [selectedIndex, isConfirmed, steps.length]);
   const onSelectionChanging = useCallback(
     (args) => {
-      if (isConfirmed) {
-        args.cancel = true;
-        return;
-      }
       const { component, addedItems, removedItems } = args;
       const { items = [] } = component.option();
       const addedIndex = items.findIndex((item) => item === addedItems[0]);
@@ -91,7 +90,7 @@ export default function App() {
         }
       }
     },
-    [setStepValidationResult, isConfirmed],
+    [setStepValidationResult, getValidationResult],
   );
   const onSelectionChanged = useCallback(({ component }) => {
     setSelectedIndex(component.option('selectedIndex') ?? 0);
@@ -124,6 +123,8 @@ export default function App() {
   return (
     <React.Fragment>
       <Stepper
+        className={isStepperReadonly ? 'readonly' : ''}
+        focusStateEnabled={!isStepperReadonly}
         selectedIndex={selectedIndex}
         onSelectionChanged={onSelectionChanged}
         onSelectionChanging={onSelectionChanging}
@@ -157,7 +158,7 @@ export default function App() {
               <React.Fragment>
                 Step <span className="selected-index">{selectedIndex + 1}</span>
                 {' of '}
-                <span className="step-count">{steps.length}</span>
+                {steps.length}
               </React.Fragment>
             )}
           </div>

apps/demos/Demos/Stepper/FormIntegration/ReactJs/styles.css

@@ -68,3 +68,7 @@
     display: flex;
     gap: 8px;
 }
+
+.readonly {
+    pointer-events: none;
+}

apps/demos/Demos/Stepper/FormIntegration/Vue/App.vue

@@ -1,5 +1,7 @@
 <template>
   <DxStepper
+    :focus-state-enabled="!isStepperReadonly"
+    :class="{ readonly: isStepperReadonly }"
     v-model:selected-index="selectedIndex"
     @selection-changing="onSelectionChanging"
   >
@@ -61,9 +63,7 @@
     <div class="nav-panel">
       <div class="current-step">
         <span v-if="!isConfirmed">
-          Step <span class="selected-index">{{ selectedIndex + 1 }}</span> of <span class="step-count">{{
-            steps.length
-          }}</span>
+          Step <span class="selected-index">{{ selectedIndex + 1 }}</span> of {{ steps.length }}
         </span>
       </div>
       <div class="nav-buttons">
@@ -105,6 +105,7 @@ import type { BookingFormData } from './types';
 
 const selectedIndex = ref(0);
 const isConfirmed = ref(false);
+const isStepperReadonly = ref(false);
 const steps = ref<IItemProps[]>(getInitialSteps());
 const formData = ref<BookingFormData>(getInitialFormData());
 
@@ -131,12 +132,6 @@ const setStepValidationResult = (index: number, isValid: boolean | undefined) =>
 };
 
 function onSelectionChanging(e: SelectionChangingEvent) {
-  if (isConfirmed.value) {
-    e.cancel = true;
-
-    return;
-  }
-
   const { component, addedItems, removedItems } = e;
   const { items = [] } = component.option();
 
@@ -176,11 +171,13 @@ const reset = () => {
   formData.value = getInitialFormData();
   validationEngine.resetGroup(validationGroups[0]);
   validationEngine.resetGroup(validationGroups[1]);
+  isStepperReadonly.value = false;
 };
 
 const confirm = () => {
   isConfirmed.value = true;
   setStepValidationResult(selectedIndex.value, true);
+  isStepperReadonly.value = true;
 };
 
 function onNextButtonClick() {
@@ -265,4 +262,8 @@ function onNextButtonClick() {
   display: flex;
   gap: 8px;
 }
+
+.readonly {
+  pointer-events: none;
+}
 </style>

apps/demos/Demos/Stepper/FormIntegration/jQuery/index.html

@@ -18,7 +18,7 @@
       <div class="content">
         <div id="stepContent"></div>
         <div class="nav-panel">
-          <div class="current-step"> Step <span class="selected-index">1</span> of 5<span class="step-count"></span> </div>
+          <div class="current-step"> Step <span class="selected-index">1</span> of 5</div>
           <div class="nav-buttons">
             <div id="prevButton"></div>
             <div id="nextButton"></div>