Form: add indication for Smart Past feature (DevExpress#30917)

Author: EugeniyKiyashko

packages/devextreme-scss/scss/widgets/base/_form.scss

@@ -166,3 +166,13 @@
     unicode-bidi: embed;
   }
 }
+
+.dx-form {
+  position: relative;
+}
+
+.dx-form-loadpanel-wrapper {
+  .dx-loadpanel-content {
+    padding: 0;
+  }
+}

packages/devextreme/js/__internal/ui/form/constants.ts

@@ -21,5 +21,7 @@ export const GROUP_COL_COUNT_CLASS = 'dx-group-colcount-';
 export const GROUP_COL_COUNT_ATTR = 'group-col-count';
 export const FORM_VALIDATION_SUMMARY = 'dx-form-validation-summary';
 export const FORM_UNDERLINED_CLASS = 'dx-form-styling-mode-underlined';
+export const FORM_LOAD_PANEL_CLASS = 'dx-form-loadpanel';
+export const FORM_LOAD_PANEL_WRAPPER_CLASS = 'dx-form-loadpanel-wrapper';
 
 export const SIMPLE_ITEM_TYPE = 'simple';

packages/devextreme/js/__internal/ui/form/form.load_panel.ts

@@ -0,0 +1,99 @@
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import {
+  FORM_LOAD_PANEL_CLASS,
+  FORM_LOAD_PANEL_WRAPPER_CLASS,
+} from '@ts/ui/form/constants';
+import LoadIndicator, { AnimationType } from '@ts/ui/load_indicator';
+import type { LoadPanelProperties } from '@ts/ui/load_panel';
+import type LoadPanel from '@ts/ui/load_panel';
+
+const FORM_LOAD_INDICATOR_SIZE = 120;
+
+interface FormLoadPanelDependencies {
+  $container: dxElementWrapper;
+  onLoadPanelCreate: ($element: dxElementWrapper, options: LoadPanelProperties) => LoadPanel;
+}
+
+export class FormLoadPanel {
+  private readonly _dependencies: FormLoadPanelDependencies;
+
+  private _loadPanel?: LoadPanel;
+
+  constructor(dependencies: FormLoadPanelDependencies) {
+    this._dependencies = dependencies;
+  }
+
+  show(): void {
+    this._ensureLoadPanel();
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this._loadPanel?.show();
+  }
+
+  hide(): void {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this._loadPanel?.hide();
+  }
+
+  dispose(): void {
+    if (!this._loadPanel) {
+      return;
+    }
+
+    this._loadPanel.dispose();
+    this._loadPanel.$element().remove();
+    this._loadPanel = undefined;
+  }
+
+  get instance(): LoadPanel | undefined {
+    return this._loadPanel;
+  }
+
+  option(name: string): unknown {
+    return this._loadPanel?.option(name);
+  }
+
+  private _ensureLoadPanel(): void {
+    if (this._loadPanel) {
+      return;
+    }
+
+    const $loadPanel = $('<div>')
+      .addClass(FORM_LOAD_PANEL_CLASS)
+      .appendTo(this._dependencies.$container);
+
+    this._loadPanel = this._dependencies.onLoadPanelCreate($loadPanel, {
+      position: {
+        of: this._dependencies.$container.get(0),
+      },
+      visible: false,
+      showIndicator: true,
+      showPane: false,
+      shading: false,
+      hideOnOutsideClick: false,
+      hideOnParentScroll: false,
+      deferRendering: false,
+      disabled: false,
+      message: '',
+      wrapperAttr: {
+        class: FORM_LOAD_PANEL_WRAPPER_CLASS,
+      },
+    });
+
+    this._configureLoadIndicator();
+  }
+
+  private _configureLoadIndicator(): void {
+    const $loadIndicator = this._loadPanel?._$indicator;
+
+    if ($loadIndicator?.length) {
+      const loadIndicator = LoadIndicator.getInstance($loadIndicator.get(0));
+
+      loadIndicator.option({
+        animationType: AnimationType.Sparkle,
+        width: FORM_LOAD_INDICATOR_SIZE,
+        height: FORM_LOAD_INDICATOR_SIZE,
+      });
+    }
+  }
+}

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

@@ -75,6 +75,7 @@ import type {
 import FormItemsRunTimeInfo from '@ts/ui/form/form.items_runtime_info';
 import type { ExtendedLayoutManagerProperties, LayoutManagerProperties } from '@ts/ui/form/form.layout_manager';
 import LayoutManager from '@ts/ui/form/form.layout_manager';
+import { FormLoadPanel } from '@ts/ui/form/form.load_panel';
 import {
   concatPaths,
   convertToLayoutManagerOptions,
@@ -87,6 +88,8 @@ import {
   isFullPathContainsTabs,
   tryGetTabPath,
 } from '@ts/ui/form/form.utils';
+import type { LoadPanelProperties } from '@ts/ui/load_panel';
+import LoadPanel from '@ts/ui/load_panel';
 import ValidationEngine from '@ts/ui/m_validation_engine';
 import ValidationSummary from '@ts/ui/m_validation_summary';
 import type { ScreenSizeQualifier } from '@ts/ui/responsive_box';
@@ -157,6 +160,8 @@ class Form extends Widget<FormProperties> {
 
   _$validationSummary?: dxElementWrapper;
 
+  _loadPanel?: FormLoadPanel;
+
   _init(): void {
     super._init();
 
@@ -1653,8 +1658,33 @@ class Form extends Widget<FormProperties> {
     }
   }
 
+  private _ensureLoadPanel(): void {
+    if (!this._loadPanel) {
+      this._loadPanel = new FormLoadPanel({
+        $container: this.$element(),
+        onLoadPanelCreate: (
+          $element: dxElementWrapper,
+          options: LoadPanelProperties,
+        ): LoadPanel => this._createComponent($element, LoadPanel, options),
+      });
+    }
+  }
+
+  private _showLoadPanel(): void {
+    this._ensureLoadPanel();
+    this.option('disabled', true);
+    this._loadPanel?.show();
+  }
+
+  private _hideLoadPanel(): void {
+    this._loadPanel?.hide();
+    this.option('disabled', false);
+  }
+
   _dispose(): void {
     this._clearAutoColCountChangedTimeout();
+    this._processCommandCompletion();
+    this._loadPanel?.dispose();
     ValidationEngine.removeGroup(this._getValidationGroup());
     super._dispose();
   }
@@ -1793,6 +1823,7 @@ class Form extends Widget<FormProperties> {
     this._abort?.();
     this._abort = undefined;
     this._currentAICommand = undefined;
+    this._hideLoadPanel();
   }
 
   private _processAIIntegrationUpdate(): void {
@@ -1827,9 +1858,11 @@ class Form extends Widget<FormProperties> {
           this._updateFieldValue(name, value);
         });
         this.endUpdate();
+        this._hideLoadPanel();
         this._processCommandCompletion();
       },
       onError: (): void => {
+        this._hideLoadPanel();
         this._processCommandCompletion();
       },
     };
@@ -1840,14 +1873,20 @@ class Form extends Widget<FormProperties> {
       this._processCommandCompletion();
     }
 
+    const smartPasteText = text ?? await navigator.clipboard?.readText();
+
+    if (isDefined(smartPasteText)) {
+      this._showLoadPanel();
+    }
+
     const dataItems = this._itemsRunTimeInfo.getItemsForDataExtraction();
     const fields = dataItems.map((item) => ({
       name: item.dataField,
       format: getItemFormatInfo(item),
       instruction: item.aiOptions?.instruction,
     }));
     const smartPasteParams = {
-      text: text ?? await navigator.clipboard.readText(),
+      text: smartPasteText,
       fields,
     };
     const smartPasteCallbacks = this._getSmartPasteCommandCallbacks();