CardView: Implement Toolbar (#28693)

Co-authored-by: Alyar <>

Author: Alyar666

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts

@@ -2,12 +2,12 @@
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import { getPathParts } from '@js/core/utils/data';
-import { extend } from '@js/core/utils/extend';
-import { isDefined, isString } from '@js/core/utils/type';
+import { isDefined } from '@js/core/utils/type';
 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/toolbar/utils';
 
 import type { ModuleType } from '../m_types';
 import { ColumnsView } from '../views/m_columns_view';
@@ -72,7 +72,11 @@ export class HeaderPanel extends ColumnsView {
     };
 
     const userItems = userToolbarOptions?.items;
-    options.toolbarOptions.items = this._normalizeToolbarItems(options.toolbarOptions.items, userItems);
+    options.toolbarOptions.items = normalizeToolbarItems(
+      options.toolbarOptions.items,
+      userItems,
+      DEFAULT_TOOLBAR_ITEM_NAMES,
+    );
 
     this.executeAction('onToolbarPreparing', options);
 
@@ -84,51 +88,6 @@ export class HeaderPanel extends ColumnsView {
     return options.toolbarOptions;
   }
 
-  private _normalizeToolbarItems(defaultItems, userItems) {
-    defaultItems.forEach((button) => {
-      if (!DEFAULT_TOOLBAR_ITEM_NAMES.includes(button.name)) {
-        throw new Error(`Default toolbar item '${button.name}' is not added to DEFAULT_TOOLBAR_ITEM_NAMES`);
-      }
-    });
-
-    const defaultProps = {
-      location: 'after',
-    };
-
-    const isArray = Array.isArray(userItems);
-
-    if (!isDefined(userItems)) {
-      return defaultItems;
-    }
-
-    if (!isArray) {
-      userItems = [userItems];
-    }
-
-    const defaultButtonsByNames = {};
-    defaultItems.forEach((button) => {
-      defaultButtonsByNames[button.name] = button;
-    });
-
-    const normalizedItems = userItems.map((button) => {
-      if (isString(button)) {
-        button = { name: button };
-      }
-
-      if (isDefined(button.name)) {
-        if (isDefined(defaultButtonsByNames[button.name])) {
-          button = extend(true, {}, defaultButtonsByNames[button.name], button);
-        } else if (DEFAULT_TOOLBAR_ITEM_NAMES.includes(button.name)) {
-          button = { ...button, visible: false };
-        }
-      }
-
-      return extend(true, {}, defaultProps, button);
-    });
-
-    return isArray ? normalizedItems : normalizedItems[0];
-  }
-
   protected _renderCore() {
     if (!this._toolbar) {
       const $headerPanel = this.element();
@@ -217,7 +176,11 @@ export class HeaderPanel extends ColumnsView {
           this._invalidate();
         } else if (parts.length === 3) {
           // `toolbar.items[i]` case
-          const normalizedItem = this._normalizeToolbarItems(this._getToolbarItems(), args.value);
+          const normalizedItem = normalizeToolbarItems(
+            this._getToolbarItems(),
+            [args.value],
+            DEFAULT_TOOLBAR_ITEM_NAMES,
+          )[0];
           this._toolbar?.option(optionName, normalizedItem);
         } else if (parts.length >= 4) {
           // `toolbar.items[i].prop` case

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>
 `;

packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx

@@ -1,30 +1,42 @@
 /* eslint-disable spellcheck/spell-checker */
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
-import { state } from '@ts/core/reactive/index';
+import { combined } from '@ts/core/reactive/index';
 import { View } from '@ts/grids/new/grid_core/core/view';
+import { ToolbarView } from '@ts/grids/new/grid_core/toolbar/view';
+import type { ComponentType } from 'inferno';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface MainViewProps {
-
+  Toolbar: ComponentType;
 }
 
 // eslint-disable-next-line no-empty-pattern
 function MainViewComponent({
-
+  Toolbar,
 }: MainViewProps): JSX.Element {
   return (<>
+    {/* @ts-expect-error */}
+    <Toolbar/>
     This is cardView
   </>);
 }
 
 export class MainView extends View<MainViewProps> {
   protected override component = MainViewComponent;
 
-  public static dependencies = [] as const;
+  public static dependencies = [ToolbarView] as const;
+
+  constructor(
+    private readonly toolbar: ToolbarView,
+  ) {
+    super();
+  }
 
   // eslint-disable-next-line max-len
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
   protected override getProps() {
-    return state({});
+    return combined({
+      Toolbar: this.toolbar.asInferno(),
+    });
   }
 }

packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import '@js/ui/button';
+import '@js/ui/check_box';
+
+import dxToolbar from '@js/ui/toolbar';
+
+import type { ToolbarProps } from '../toolbar/types';
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Toolbar extends InfernoWrapper<ToolbarProps, dxToolbar> {
+  protected getComponentFabric(): typeof dxToolbar {
+    return dxToolbar;
+  }
+
+  protected updateComponentOptions(prevProps: ToolbarProps, props: ToolbarProps): void {
+    if (
+      Array.isArray(props.items)
+      && Array.isArray(prevProps.items)
+      && props.items.length === prevProps.items.length
+    ) {
+      props.items?.forEach((item, index) => {
+        if (props.items![index] !== prevProps.items![index]) {
+          const prevItem = prevProps.items![index];
+
+          Object.keys(item).forEach((key) => {
+            if (item[key] !== prevItem[key]) {
+              this.component?.option(`items[${index}].${key}`, props.items![index][key]);
+            }
+          });
+        }
+      });
+
+      const { items, ...propsToUpdate } = props;
+
+      super.updateComponentOptions(prevProps, propsToUpdate);
+    } else {
+      super.updateComponentOptions(prevProps, props);
+    }
+  }
+}

packages/devextreme/js/__internal/grids/new/grid_core/options.ts

@@ -4,6 +4,7 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 
 import * as columnsController from './columns_controller/index';
 import * as dataController from './data_controller/index';
+import type * as toolbar from './toolbar';
 import type { GridCoreNew } from './widget';
 
 /**
@@ -12,7 +13,8 @@ import type { GridCoreNew } from './widget';
 export type Options =
   & WidgetOptions<GridCoreNew>
   & dataController.Options
-  & columnsController.Options;
+  & columnsController.Options
+  & toolbar.Options;
 
 export const defaultOptions = {
   ...dataController.defaultOptions,