DropDownEditor: Add fieldAddons option (DevExpress#30766)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -47,6 +47,8 @@ const DROP_DOWN_EDITOR_OVERLAY_FLIPPED = 'dx-dropdowneditor-overlay-flipped';
 const DROP_DOWN_EDITOR_ACTIVE = 'dx-dropdowneditor-active';
 const DROP_DOWN_EDITOR_FIELD_CLICKABLE = 'dx-dropdowneditor-field-clickable';
 const DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER = 'dx-dropdowneditor-field-template-wrapper';
+export const DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON = 'dx-dropdowneditor-field-before-template';
+export const DROP_DOWN_EDITOR_AFTER_FIELD_ADDON = 'dx-dropdowneditor-field-after-template';
 
 const OVERLAY_CONTENT_LABEL = 'Dropdown';
 
@@ -80,6 +82,17 @@ export interface DropDownEditorProperties extends Omit<
   onPopupInitialized?: (e: { component: DropDownEditor; popup: Popup }) => void;
 }
 
+interface TemplateRenderPayload {
+  model: Properties['value'];
+  container: Element;
+  onRendered?: () => void;
+}
+
+interface FieldAddonsTemplates {
+  beforeTemplate?: { render: (payload: TemplateRenderPayload) => void };
+  afterTemplate?: { render: (payload: TemplateRenderPayload) => void };
+}
+
 function createTemplateWrapperElement(): dxElementWrapper {
   return $('<div>').addClass(DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER);
 }
@@ -97,6 +110,10 @@ class DropDownEditor<
 
   _$templateWrapper?: dxElementWrapper;
 
+  _$beforeFieldAddon?: dxElementWrapper | null;
+
+  _$afterFieldAddon?: dxElementWrapper | null;
+
   _openAction!: (event?: Record<string, unknown>) => void;
 
   _closeAction!: (event?: Record<string, unknown>) => void;
@@ -314,6 +331,7 @@ class DropDownEditor<
   _renderInput(): void {
     super._renderInput();
     this._renderTemplateWrapper();
+    this._renderFieldAddons();
 
     this._wrapInput();
     this._setDefaultAria();
@@ -374,6 +392,14 @@ class DropDownEditor<
   }
 
   _renderField(): void {
+    const fieldAddonsTemplates = this._getFieldAddonsTemplates();
+
+    if (fieldAddonsTemplates) {
+      this._renderFieldAddonsContent(fieldAddonsTemplates);
+
+      return;
+    }
+
     const fieldTemplate = this._getFieldTemplate();
 
     if (fieldTemplate) {
@@ -404,6 +430,33 @@ class DropDownEditor<
     return fieldTemplate ? this._$container : this._$textEditorContainer;
   }
 
+  _renderBeforeFieldAddon(): void {
+    if (!this._$beforeFieldAddon) {
+      this._$beforeFieldAddon = $('<div>')
+        .addClass(DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON)
+        .insertBefore(this._$textEditorContainer);
+    }
+  }
+
+  _renderAfterFieldAddon(): void {
+    if (!this._$afterFieldAddon) {
+      this._$afterFieldAddon = $('<div>')
+        .addClass(DROP_DOWN_EDITOR_AFTER_FIELD_ADDON)
+        .insertAfter(this._$textEditorContainer);
+    }
+  }
+
+  _renderFieldAddons(): void {
+    const { fieldAddons } = this.option();
+
+    if (!fieldAddons) {
+      return;
+    }
+
+    this._renderBeforeFieldAddon();
+    this._renderAfterFieldAddon();
+  }
+
   _renderTemplateWrapper(): void {
     const fieldTemplate = this._getFieldTemplate();
     if (!fieldTemplate) {
@@ -463,6 +516,65 @@ class DropDownEditor<
     });
   }
 
+  _getFieldAddonsTemplates(): FieldAddonsTemplates | null {
+    const { fieldAddons } = this.option();
+
+    if (!fieldAddons) {
+      return null;
+    }
+
+    const { beforeTemplate: before, afterTemplate: after } = fieldAddons;
+
+    const beforeTemplate = before ? this._getTemplate(before) : null;
+    const afterTemplate = after ? this._getTemplate(after) : null;
+
+    return {
+      beforeTemplate,
+      afterTemplate,
+    };
+  }
+
+  _clearFieldAddons(removeField?: boolean): void {
+    this._$beforeFieldAddon?.empty();
+    this._$afterFieldAddon?.empty();
+
+    if (removeField) {
+      this._$beforeFieldAddon = null;
+      this._$afterFieldAddon = null;
+    }
+  }
+
+  _renderBeforeFieldAddonContent(beforeTemplate?: FieldAddonsTemplates['beforeTemplate'] | null): void {
+    if (beforeTemplate && this._$beforeFieldAddon) {
+      beforeTemplate.render({
+        model: this._fieldRenderData(),
+        container: getPublicElement(this._$beforeFieldAddon),
+      });
+    }
+  }
+
+  _renderAfterFieldAddonContent(afterTemplate?: FieldAddonsTemplates['afterTemplate'] | null): void {
+    if (afterTemplate && this._$afterFieldAddon) {
+      afterTemplate.render({
+        model: this._fieldRenderData(),
+        container: getPublicElement(this._$afterFieldAddon),
+      });
+    }
+  }
+
+  _renderFieldAddonsContent(fieldAddonsTemplates: FieldAddonsTemplates): void {
+    this._clearFieldAddons();
+
+    if (!fieldAddonsTemplates) {
+      return;
+    }
+
+    const { beforeTemplate, afterTemplate } = fieldAddonsTemplates;
+
+    this._renderBeforeFieldAddonContent(beforeTemplate);
+    this._renderAfterFieldAddonContent(afterTemplate);
+  }
+
   _integrateInput(): void {
     const { isValid } = this.option();
 
@@ -484,8 +596,9 @@ class DropDownEditor<
     this._renderEmptinessEvent();
   }
 
-  _fieldRenderData(): any {
-    return this.option('value');
+  _fieldRenderData(): Properties['value'] {
+    const { value } = this.option();
+    return value;
   }
 
   _initTemplates(): void {
@@ -874,11 +987,14 @@ class DropDownEditor<
     delete this._openOnFieldClickAction;
     delete this._$templateWrapper;
 
+    this._clearFieldAddons(true);
+
     if (this._$popup) {
       this._$popup.remove();
       delete this._$popup;
       delete this._popup;
     }
+
     super._clean();
   }
 
@@ -1025,6 +1141,7 @@ class DropDownEditor<
       case 'onPopupInitialized': // for dashboards
         this._initPopupInitializedAction();
         break;
+      case 'fieldAddons':
       case 'fieldTemplate':
       case 'acceptCustomValue':
       case 'openOnFieldClick':

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.markup.tests.js

@@ -1,5 +1,9 @@
 import $ from 'jquery';
 import { Deferred } from 'core/utils/deferred';
+import {
+    DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON,
+    DROP_DOWN_EDITOR_AFTER_FIELD_ADDON
+} from '__internal/ui/drop_down_editor/m_drop_down_editor';
 
 import 'ui/drop_down_editor/ui.drop_down_editor';
 
@@ -112,6 +116,20 @@ module('DropDownEditor markup', {
         deferred.resolve();
         assert.ok(renderFieldSpy.calledOnce, 'field has been rendered');
     });
+
+    test('should render fieldAddons content slots if fieldAddons is provided', function(assert) {
+        const fieldAddons = { beforeTemplate: () => 'before', afterTemplate: 'after' };
+
+        const $dropDownEditor = $('#dropDownEditorLazy').dxDropDownEditor({
+            fieldAddons
+        });
+
+        const $before = $dropDownEditor.find(`.${DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON}`);
+        const $after = $dropDownEditor.find(`.${DROP_DOWN_EDITOR_AFTER_FIELD_ADDON}`);
+
+        assert.strictEqual($before.length, 1, 'before is  rendered ');
+        assert.strictEqual($after.length, 1, 'after slot is  rendered ');
+    });
 });
 
 module('option change', function() {