refactor

DevExpress · Nov 6, 2023 · b50dde1 · b50dde1
1 parent 182a96e
commit b50dde1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 31 deletions.
diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.base.js b/packages/devextreme/js/ui/text_box/ui.text_editor.base.js
@@ -509,14 +509,17 @@ const TextEditorBase = Editor.inherit({
 
         this._labelContainerElement = $(this._getLabelContainer()).get(0);
 
-        const { label, labelMode, labelMark } = this.option();
+        const { label, labelMode, labelMark, rtlEnabled } = this.option();
 
         const labelConfig = {
-            editor: this,
+            onClickHandler: () => {
+                this.focus();
+            },
             $editor: this.$element(),
             text: label,
             mark: labelMark,
             mode: labelMode,
+            rtlEnabled,
             containsButtonsBefore: !!this._$beforeButtonsContainer,
             containerWidth: this._getLabelContainerWidth(),
             beforeWidth: this._getLabelBeforeWidth()

diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.label.js b/packages/devextreme/js/ui/text_box/ui.text_editor.label.js
@@ -18,22 +18,9 @@ const LABEL_CLASS = 'dx-label';
 const LABEL_AFTER_CLASS = 'dx-label-after';
 
 class TextEditorLabel {
-    constructor({
-        editor,
-        $editor,
-        text, mode, mark,
-        containsButtonsBefore,
-        containerWidth,
-        beforeWidth
-    }) {
-        this._props = {
-            editor,
-            $editor,
-            text, mode, mark,
-            containsButtonsBefore,
-            containerWidth,
-            beforeWidth
-        };
+    constructor(props) {
+        this.NAME = 'dxLabel';
+        this._props = props;
 
         this._id = `${TEXTEDITOR_LABEL_CLASS}-${new Guid()}`;
 
@@ -82,30 +69,24 @@ class TextEditorLabel {
     }
 
     _attachEvents() {
-        const editorName = this._props.editor.NAME;
-        const clickEventName = addNamespace(click, editorName);
-        const hoverStartEventName = addNamespace(hoverStart, editorName);
-        const activeEventName = addNamespace('dxactive', editorName);
+        const clickEventName = addNamespace(click, this.NAME);
+        const hoverStartEventName = addNamespace(hoverStart, this.NAME);
 
         eventsEngine.off(this._$labelSpan, clickEventName);
         eventsEngine.off(this._$labelSpan, hoverStartEventName);
-        eventsEngine.off(this._$labelSpan, activeEventName);
 
         if(this._isVisible() && this._isOutsideMode()) {
             eventsEngine.on(this._$labelSpan, clickEventName, (e) => {
                 const selectedText = getWindow().getSelection().toString();
 
                 if(selectedText === '') {
-                    this._props.editor.focus();
+                    this._props.onClickHandler();
                     e.preventDefault();
                 }
             });
             eventsEngine.on(this._$labelSpan, hoverStartEventName, (e) => {
                 e.stopPropagation();
             });
-            eventsEngine.on(this._$labelSpan, activeEventName, (e) => {
-                e.stopPropagation();
-            });
         }
     }
 
@@ -161,7 +142,8 @@ class TextEditorLabel {
         this._$labelSpan.css('transform', '');
 
         if(this._isVisible() && this._isOutsideMode()) {
-            const sign = this._props.editor.option('rtlEnabled') ? 1 : -1;
+            const sign = this._props.rtlEnabled ? 1 : -1;
+
             this._$labelSpan.css('transform', 'translateX(' + sign * getWidth(this._$before) + 'px)');
         }
     }

diff --git a/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss b/packages/devextreme/scss/widgets/fluent/textEditor/_index.scss
@@ -18,6 +18,7 @@
 $fluent-base-standard-texteditor-input-horizontal-padding: 0;
 $fluent-texteditor-invalid-badge-size: $fluent-invalid-badge-size + 2 * $fluent-invalid-badge-horizontal-padding;
 $fluent-editor-custom-button-margin: 6px;
+$fluent-editor-border-width: 1px;
 
 @mixin texteditor-outlined-styling() {
   background-color: $texteditor-bg;
@@ -33,7 +34,7 @@ $fluent-editor-custom-button-margin: 6px;
     bottom: -1px;
     right: -1px;
     height: $texteditor-input-border-radius;
-    width: calc(100% + 2px);
+    width: calc(100% + 2 * $fluent-editor-border-width);
     border-bottom-left-radius: $texteditor-input-border-radius;
     border-bottom-right-radius: $texteditor-input-border-radius;
     border-bottom: 2px solid $texteditor-focused-border-color;
@@ -56,7 +57,7 @@ $fluent-editor-custom-button-margin: 6px;
   &.dx-texteditor-with-label,
   &.dx-texteditor-with-floating-label {
     .dx-texteditor-label {
-      width: calc(100% + 2px);
+      width: calc(100% + 2 * $fluent-editor-border-width);
       inset: -1px;
     }
 
@@ -127,7 +128,7 @@ $fluent-editor-custom-button-margin: 6px;
     bottom: -1px;
     right: -1px;
     height: $texteditor-input-border-radius;
-    width: calc(100% + 2px);
+    width: calc(100% + 2 * $fluent-editor-border-width);
     border-bottom-left-radius: $texteditor-input-border-radius;
     border-bottom-right-radius: $texteditor-input-border-radius;
     border-bottom: 2px solid $texteditor-focused-border-color;