Fix remarks

DevExpress · Jan 16, 2025 · 6553990 · 6553990
1 parent 25cd36b
commit 6553990
Show file tree

Hide file tree

Showing 13 changed files with 311 additions and 431 deletions.
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts b/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
@@ -7,7 +7,7 @@ import type { Properties as ToolbarProperties } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
 import type { HeaderFilterController } from '@ts/grids/grid_core/header_filter/m_header_filter';
-import { normalizeToolbarItems } from '@ts/grids/new/grid_core/utils';
+import { normalizeToolbarItems } from '@ts/grids/new/grid_core/toolbar/utils';
 
 import type { ModuleType } from '../m_types';
 import { ColumnsView } from '../views/m_columns_view';

diff --git a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
@@ -4,6 +4,7 @@ exports[`common initial render should be successfull 1`] = `
 <div
   class="dx-widget dx-cardview"
 >
+  
   This is cardView
 </div>
 `;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts
@@ -29,8 +29,9 @@ export class Toolbar extends InfernoWrapper<ToolbarProps, dxToolbar> {
           });
         }
       });
-      const propsToUpdate = { ...props };
-      delete propsToUpdate.items;
+
+      const { items, ...propsToUpdate } = props;
+
       super.updateComponentOptions(prevProps, propsToUpdate);
     } else {
       super.updateComponentOptions(prevProps, props);

diff --git a/...e/toolbar/__snapshots__/view.test.ts.snap → ...oolbar/__snapshots__/options.test.ts.snap b/...e/toolbar/__snapshots__/view.test.ts.snap → ...oolbar/__snapshots__/options.test.ts.snap
@@ -1,38 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Applying options when changing a visible to 'false' at runtime Toolbar should be hidden 1`] = `
-<div>
-  
-</div>
-`;
-
-exports[`Applying options when changing a visible to 'true' at runtime Toolbar should be visible 1`] = `
-<div>
-  <div
-    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
-    role="toolbar"
-  >
-    <div
-      class="dx-toolbar-items-container"
-    >
-      <div
-        class="dx-toolbar-before"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-center"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-after"
-        role="presentation"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Applying options when disabled = 'false' Toolbar should not be disabled 1`] = `
+exports[`Options disabled when it is 'false' Toolbar should not be disabled 1`] = `
 <div>
   <div
     class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
@@ -58,7 +26,7 @@ exports[`Applying options when disabled = 'false' Toolbar should not be disabled
 </div>
 `;
 
-exports[`Applying options when disabled = 'true' Toolbar should be disabled 1`] = `
+exports[`Options disabled when it is 'true' Toolbar should be disabled 1`] = `
 <div>
   <div
     aria-disabled="true"
@@ -85,39 +53,13 @@ exports[`Applying options when disabled = 'true' Toolbar should be disabled 1`]
 </div>
 `;
 
-exports[`Applying options when visible = 'false' Toolbar should be hidden 1`] = `
+exports[`Options items when these are not set Toolbar should be hidden 1`] = `
 <div>
   
 </div>
 `;
 
-exports[`Applying options when visible = 'true' Toolbar should be visible 1`] = `
-<div>
-  <div
-    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
-    role="toolbar"
-  >
-    <div
-      class="dx-toolbar-items-container"
-    >
-      <div
-        class="dx-toolbar-before"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-center"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-after"
-        role="presentation"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Applying options when visible = 'undefined' and there are items Toolbar should be visible 1`] = `
+exports[`Options items when these are set Toolbar should be visible 1`] = `
 <div>
   <div
     class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
@@ -193,16 +135,16 @@ exports[`Applying options when visible = 'undefined' and there are items Toolbar
 </div>
 `;
 
-exports[`Applying options when visible = 'undefined' and there are no items Toolbar should be hidden 1`] = `
+exports[`Options visilbe when changing it to 'false' at runtime Toolbar should be hidden 1`] = `
 <div>
   
 </div>
 `;
 
-exports[`render Toolbar with options 1`] = `
+exports[`Options visilbe when changing it to 'true' at runtime Toolbar should be visible 1`] = `
 <div>
   <div
-    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
+    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
     role="toolbar"
   >
     <div
@@ -211,71 +153,27 @@ exports[`render Toolbar with options 1`] = `
       <div
         class="dx-toolbar-before"
         role="presentation"
-      >
-        <div
-          class="dx-item dx-toolbar-item dx-toolbar-button"
-        >
-          <div
-            class="dx-item-content dx-toolbar-item-content"
-          >
-            <div
-              aria-label="button1"
-              class="dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-text"
-              role="button"
-              tabindex="0"
-            >
-              <div
-                class="dx-button-content"
-              >
-                <span
-                  class="dx-button-text"
-                >
-                  button1
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      />
       <div
         class="dx-toolbar-center"
         role="presentation"
       />
       <div
         class="dx-toolbar-after"
         role="presentation"
-      >
-        <div
-          class="dx-item dx-toolbar-item dx-toolbar-button"
-        >
-          <div
-            class="dx-item-content dx-toolbar-item-content"
-          >
-            <div
-              aria-label="button2"
-              class="dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-text"
-              role="button"
-              tabindex="0"
-            >
-              <div
-                class="dx-button-content"
-              >
-                <span
-                  class="dx-button-text"
-                >
-                  button2
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`render empty toolbar 1`] = `
+exports[`Options visilbe when it is 'false' Toolbar should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Options visilbe when it is 'true' Toolbar should be visible 1`] = `
 <div>
   <div
     class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"

diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts
@@ -1,15 +1,19 @@
 /* eslint-disable @typescript-eslint/no-dynamic-delete */
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable spellcheck/spell-checker */
-import type { MaybeSubscribable, Subscribable, SubsGets } from '@ts/core/reactive/index';
+import type {
+  MaybeSubscribable, Subscribable, Subscription, SubsGets,
+} from '@ts/core/reactive/index';
 import { computed, state, toSubscribable } from '@ts/core/reactive/index';
 
 import { OptionsController } from '../options_controller/options_controller';
-import { normalizeToolbarItems } from '../utils';
 import { DEFAULT_TOOLBAR_ITEMS } from './defaults';
 import type { PredefinedToolbarItem, ToolbarItem, ToolbarItems } from './types';
+import { normalizeToolbarItems } from './utils';
 
 export class ToolbarController {
+  private readonly itemSubscriptions: Record<string, Subscription> = {};
+
   private readonly defaultItems = state<Record<string, PredefinedToolbarItem>>({});
 
   private readonly userItems: Subscribable<ToolbarItems | undefined>;
@@ -35,7 +39,11 @@ export class ToolbarController {
   public addDefaultItem(
     item: MaybeSubscribable<PredefinedToolbarItem>,
   ): void {
-    toSubscribable(item).subscribe((item) => {
+    const itemObs = toSubscribable(item);
+    // @ts-expect-error
+    const { name } = itemObs.unreactive_get();
+
+    this.itemSubscriptions[name] = itemObs.subscribe((item) => {
       this.defaultItems.updateFunc((oldDefaultItems) => ({
         ...oldDefaultItems,
         [item.name]: item,
@@ -49,5 +57,6 @@ export class ToolbarController {
       delete defaultItems[name];
       return defaultItems;
     });
+    this.itemSubscriptions[name].unsubscribe();
   }
 }
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx
@@ -2,9 +2,5 @@
  * used for defining default toolbar items and their default order in header panel
  */
 export const DEFAULT_TOOLBAR_ITEMS = [
-  'saveButton',
-  'revertButton',
-  'editButton',
-  'columnsChooserButton',
   'searchPanel',
 ] as const;
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ exports[`common initial render should be successfull 1`] = ` @@
     <div
       class="dx-widget dx-cardview"
     >
       This is cardView
     </div>
     `;