Form: add default ButtonItems for names 'smart', 'reset', 'submit'

Author: EugeniyKiyashko

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

@@ -7,7 +7,7 @@ import type { HorizontalAlignment, VerticalAlignment } from '@js/ui/form';
 import type Button from '@ts/ui/button/wrapper';
 import type { TemplatesInfo } from '@ts/ui/form/form.layout_manager';
 
-const FIELD_BUTTON_ITEM_CLASS = 'dx-field-button-item';
+export const FIELD_BUTTON_ITEM_CLASS = 'dx-field-button-item';
 
 type ButtonItemRenderInfo = TemplatesInfo & {
   validationGroup?: string;

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

@@ -23,6 +23,7 @@ import { getCurrentScreenFactor, hasWindow } from '@js/core/utils/window';
 import type { EventInfo } from '@js/events';
 import type { Properties as ButtonProperties, Properties } from '@js/ui/button';
 import type {
+  ButtonItem,
   FieldDataChangedEvent,
   FormItemComponent, Item, SimpleItem, TabbedItem,
 } from '@js/ui/form';
@@ -684,9 +685,61 @@ class LayoutManager extends Widget<LayoutManagerProperties> {
     return result;
   }
 
+  private _handleSmartPasteClick(): void {
+    const form = this._getFormOrThis();
+    // @ts-expect-error
+    form?.smartPaste();
+  }
+
+  private _handleResetClick(): void {
+    const form = this._getFormOrThis();
+    // @ts-expect-error
+    form?.reset();
+  }
+
+  private _configureDefaultButton(item: ButtonItem): void {
+    if (!item.name) {
+      return;
+    }
+
+    const buttonConfigs = {
+      smartPaste: {
+        icon: 'sparkle',
+        text: 'Smart Paste',
+        type: 'default',
+        onClick: (): void => {
+          this._handleSmartPasteClick();
+        },
+      },
+      reset: {
+        icon: 'refresh',
+        text: 'Reset',
+        onClick: (): void => {
+          this._handleResetClick();
+        },
+      },
+      submit: {
+        text: 'Submit',
+        type: 'default',
+        useSubmitBehavior: true,
+      },
+    };
+
+    const config = buttonConfigs[item.name];
+    if (config) {
+      item.buttonOptions = {
+        ...config,
+        ...item.buttonOptions ?? {},
+      };
+    }
+  }
+
   _renderButtonItem(info: TemplatesInfo): void {
     const { item, $parent, rootElementCssClassList } = info;
     const { validationGroup } = this.option();
+
+    this._configureDefaultButton(item);
+
     const { $rootElement, buttonInstance } = renderButtonItem({
       item,
       $parent,
@@ -828,6 +881,7 @@ class LayoutManager extends Widget<LayoutManagerProperties> {
 
   _getFormOrThis(): Form | LayoutManager {
     const { form } = this.option();
+
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     return form || this;
   }

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

@@ -1636,7 +1636,7 @@ class Form extends Widget<FormProperties> {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  reset(editorsData: Record<string, any>): void {
+  reset(editorsData?: Record<string, any>): void {
     this.updateRunTimeInfoForEachEditor((editor) => {
       const { name = '' } = editor.option();
       if (editorsData && name in editorsData) {