Stepper: render icons according to the isValid property value (#29338)

Author: EugeniyKiyashko

packages/devextreme-scss/scss/widgets/base/stepper/layout/connector/_index.scss

@@ -1,6 +1,5 @@
 .dx-stepper-connector {
   position: absolute;
-  z-index: -1;
 
   &.dx-stepper-connector-horizontal {
     height: 2px;

packages/devextreme-scss/scss/widgets/base/stepper/layout/step/_index.scss

@@ -34,7 +34,6 @@
   &::before {
     content: '';
     position: absolute;
-    z-index: -1;
     border-width: 1px;
     border-style: solid;
     border-radius: 999em;

packages/devextreme/js/__internal/ui/stepper/stepper.ts

@@ -1,11 +1,11 @@
-import type { Orientation } from '@js/common';
+import type { Orientation, SingleOrNone } from '@js/common';
 import registerComponent from '@js/core/component_registrator';
 import type { DxElement } from '@js/core/element';
 import $, { type dxElementWrapper } from '@js/core/renderer';
 import { Deferred } from '@js/core/utils/deferred';
 import { isDefined } from '@js/core/utils/type';
 import type { DxEvent } from '@js/events';
-import type { Item } from '@js/ui/stepper';
+import type { Item, Properties } from '@js/ui/stepper';
 import { BindableTemplate } from '@ts/core/templates/m_bindable_template';
 import type { Template } from '@ts/core/templates/m_template';
 import { getImageContainer } from '@ts/core/utils/m_icon';
@@ -17,10 +17,11 @@ import type {
 } from '@ts/ui/collection/collection_widget.base';
 import CollectionWidgetAsync from '@ts/ui/collection/m_collection_widget.async';
 import Connector from '@ts/ui/stepper/connector';
-import type { StepperItemProperties } from '@ts/ui/stepper/stepper_item';
-import StepperItem, { STEP_COMPLETED_CLASS } from '@ts/ui/stepper/stepper_item';
-
-import type { CollectionWidgetEditProperties } from '../collection/m_collection_widget.edit';
+import StepperItem, {
+  STEP_COMPLETED_CLASS,
+  STEP_INVALID_ICON,
+  STEP_VALID_ICON,
+} from '@ts/ui/stepper/stepper_item';
 
 export const STEPPER_CLASS = 'dx-stepper';
 export const STEP_LIST_CLASS = 'dx-step-list';
@@ -41,10 +42,12 @@ export const ORIENTATION: Record<string, Orientation> = {
   vertical: 'vertical',
 };
 
-export interface StepperProperties extends CollectionWidgetEditProperties<Stepper> {
-  orientation?: Orientation;
-  linear?: boolean;
-  isValidExpr?: (data: Item) => boolean | undefined;
+export interface StepperProperties extends Properties {
+  selectionMode?: SingleOrNone;
+
+  loopItemFocus?: boolean;
+
+  selectionRequired?: boolean;
 }
 
 class Stepper extends CollectionWidgetAsync<StepperProperties> {
@@ -66,9 +69,6 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
       focusStateEnabled: true,
       loopItemFocus: false,
       selectionRequired: true,
-      isValidExpr(data): boolean | undefined {
-        return data ? data.isValid : undefined;
-      },
     };
   }
 
@@ -83,17 +83,36 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
     };
   }
 
-  _prepareDefaultItemTemplate(data: StepperItemProperties, $container: dxElementWrapper): void {
+  _getStepIcon(data: Item): string | undefined {
+    const { isValid, icon } = data;
+
+    if (isValid === false) {
+      return STEP_INVALID_ICON;
+    }
+
+    if (isValid === true) {
+      return STEP_VALID_ICON;
+    }
+
+    return icon;
+  }
+
+  _prepareDefaultItemTemplate(data: Item, $container: dxElementWrapper): void {
+    const { text, title } = data;
+
     const $indicatorElement = $('<div>').addClass(STEP_INDICATOR_CLASS);
-    const $iconElement = getImageContainer(data.icon) ?? $('<div>').addClass(STEP_TEXT_CLASS).text(data.text ?? '');
+
+    const iconName = this._getStepIcon(data);
+    const $iconElement = getImageContainer(iconName) ?? $('<div>').addClass(STEP_TEXT_CLASS).text(text ?? '');
 
     $iconElement.appendTo($indicatorElement);
+
     $indicatorElement.prependTo($container);
 
-    if (isDefined(data.title)) {
+    if (isDefined(title)) {
       const $stepTitleDiv = $('<div>').addClass(STEP_TITLE_CLASS);
 
-      $stepTitleDiv.text(data.title);
+      $stepTitleDiv.text(title);
 
       $stepTitleDiv.appendTo($container);
     }
@@ -103,15 +122,18 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
     super._initTemplates();
 
     this._templateManager.addDefaultTemplates({
-      item: new BindableTemplate(($container: dxElementWrapper, data: StepperItemProperties) => {
+      item: new BindableTemplate((
+        $container: dxElementWrapper,
+        data: Item,
+      ) => {
         this._prepareDefaultItemTemplate(data, $container);
       }, ['text', 'icon', 'title', 'isValid'], this.option('integrationOptions.watchMethod')),
     });
   }
 
   _createItemByTemplate(
     itemTemplate: Template,
-    renderArgs: ItemRenderInfo<StepperItemProperties>,
+    renderArgs: ItemRenderInfo<Item>,
   ): DxElement {
     const { itemData, index } = renderArgs;
 
@@ -128,13 +150,26 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
     return StepperItem.getInstance<StepperItem>($item);
   }
 
+  _renderItem(
+    index: number,
+    itemData: Item,
+    $container: dxElementWrapper,
+    $itemToReplace: dxElementWrapper,
+  ): dxElementWrapper {
+    const $itemFrame = super._renderItem(index, itemData, $container, $itemToReplace);
+
+    this._getItemInstance($itemFrame).updateInvalidClass(itemData.isValid);
+
+    return $itemFrame;
+  }
+
   _postprocessRenderItem(args: PostprocessRenderItemInfo<StepperItem>): void {
     super._postprocessRenderItem(args);
 
     const { selectedIndex = 0 } = this.option();
-    const $itemInstance = this._getItemInstance(args.itemElement);
+    const itemInstance = this._getItemInstance(args.itemElement);
 
-    $itemInstance.changeCompleted(args.itemIndex < selectedIndex);
+    itemInstance.changeCompleted(args.itemIndex < selectedIndex);
   }
 
   _itemClass(): string {
@@ -276,9 +311,9 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
     const isCompleted = lastCompletedIndex < selectedIndex;
 
     for (let i = startIndex; i < endIndex; i += 1) {
-      const $itemInstance = this._getItemInstance($(itemElements[i]));
+      const itemInstance = this._getItemInstance($(itemElements[i]));
 
-      $itemInstance.changeCompleted(isCompleted);
+      itemInstance.changeCompleted(isCompleted);
     }
   }
 
@@ -296,12 +331,25 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
   }
 
   _itemOptionChanged(
-    item: StepperItemProperties,
-    property: keyof StepperItemProperties,
+    item: Item,
+    property: keyof Item,
     value: unknown,
     prevValue: unknown,
   ): void {
     switch (property) {
+      case 'isValid': {
+        type PropertyType = Item[typeof property];
+
+        const itemIndex = this._getIndexByItem(item);
+        const $item = $(this._itemElements()[itemIndex]);
+
+        const itemInstance = this._getItemInstance($item);
+
+        itemInstance.updateInvalidClass(value as PropertyType);
+
+        super._itemOptionChanged(item, property, value, prevValue);
+        break;
+      }
       default:
         super._itemOptionChanged(item, property, value, prevValue);
     }
@@ -318,9 +366,6 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
         break;
       case 'linear':
         break;
-      case 'isValidExpr':
-        this._invalidate();
-        break;
       default:
         super._optionChanged(args);
     }

packages/devextreme/js/__internal/ui/stepper/stepper_item.ts

@@ -1,30 +1,14 @@
-import type {
-  CollectionWidgetItem as CollectionWidgetItemProperties,
-} from '@js/ui/collection/ui.collection_widget.base';
+import type { Item } from '@js/ui/stepper';
 import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
 export const STEP_COMPLETED_CLASS = 'dx-step-completed';
 export const STEP_INVALID_CLASS = 'dx-step-invalid';
+export const STEP_VALID_ICON = 'check';
+export const STEP_INVALID_ICON = 'errorcircle';
 
-export interface StepperItemProperties extends CollectionWidgetItemProperties {
-  icon?: string;
-  title?: string;
-  isValid?: boolean;
-}
-
-class StepperItem extends CollectionWidgetItem<StepperItemProperties> {
-  _renderWatchers(): void {
-    super._renderWatchers();
-
-    this._startWatcher('isValid', this._renderValidState.bind(this));
-  }
-
-  _renderValidState(
-    value: boolean | undefined,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    oldValue?: boolean | undefined,
-  ): void {
-    this._$element.toggleClass(STEP_INVALID_CLASS, value !== undefined && !value);
+class StepperItem extends CollectionWidgetItem<Item> {
+  updateInvalidClass(isValid: boolean | undefined): void {
+    this._$element.toggleClass(STEP_INVALID_CLASS, isValid !== undefined && !isValid);
   }
 
   changeCompleted(isCompleted: boolean): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.markup.tests.js

@@ -15,6 +15,8 @@ import {
 import {
     STEP_COMPLETED_CLASS,
     STEP_INVALID_CLASS,
+    STEP_VALID_ICON,
+    STEP_INVALID_ICON,
 } from '__internal/ui/stepper/stepper_item';
 
 const STEP_CONTENT_CLASS = 'dx-step-content';
@@ -292,4 +294,43 @@ QUnit.module('Step.isValid', moduleConfig, () => {
 
         assert.strictEqual(this.getItems().eq(0).hasClass(STEP_INVALID_CLASS), false, `${STEP_INVALID_CLASS} is removed`);
     });
+
+    [
+        { options: { isValid: true, icon: 'test', text: 'test' }, expectedIcon: STEP_VALID_ICON },
+        { options: { isValid: false, icon: 'test', text: 'test' }, expectedIcon: STEP_INVALID_ICON },
+        { options: { isValid: undefined, icon: 'test', text: 'test' }, expectedIcon: 'test' },
+    ].forEach(({ options, expectedIcon }) => {
+        QUnit.test(`Step indicator should contain '${expectedIcon}' icon, step options: ${JSON.stringify(options)}`, function(assert) {
+            this.reinit({
+                items: [options],
+            });
+
+            const $stepText = this.getStepByIndex(0).find(`.${STEP_CONTENT_CLASS}`).children().eq(0);
+
+            assert.strictEqual($stepText.children().length, 1);
+            assert.strictEqual($stepText.children().eq(0).hasClass(STEP_TEXT_CLASS), false);
+            assert.strictEqual($stepText.children().eq(0).hasClass(ICON_CLASS), true);
+            assert.strictEqual($stepText.children().eq(0).hasClass(`${ICON_CLASS}-${expectedIcon}`), true);
+        });
+
+        QUnit.test(`Step indicator should be updated to '${expectedIcon}' icon after update step.isValid option at runtime`, function(assert) {
+            this.reinit({
+                items: [{
+                    icon: 'test',
+                    text: 'Step 1',
+                    title: 'Step title',
+                }],
+            });
+
+            this.instance.option('items[0].isValid', options.isValid);
+
+            const $stepText = this.getStepByIndex(0).find(`.${STEP_CONTENT_CLASS}`).children().eq(0);
+
+            assert.strictEqual($stepText.children().length, 1);
+            assert.strictEqual($stepText.children().eq(0).hasClass(STEP_TEXT_CLASS), false);
+            assert.strictEqual($stepText.children().eq(0).hasClass(ICON_CLASS), true);
+            assert.strictEqual($stepText.children().eq(0).hasClass(`${ICON_CLASS}-${expectedIcon}`), true);
+        });
+    });
+
 });