CardView: Add human readable story for toolbar (aqaMoxJ3) (DevExpress#29802)

Author: wdevfx

…ybook/stories/card_view/Card.stories.tsx …stories/card_view/parts/Card.stories.tsxapps/react-storybook/stories/card_view/Card.stories.tsx renamed to apps/react-storybook/stories/card_view/parts/Card.stories.tsx apps/react-storybook/stories/card_view/Card.stories.tsx renamed to apps/react-storybook/stories/card_view/parts/Card.stories.tsx

@@ -1,7 +1,7 @@
 import type {Meta, StoryObj} from "@storybook/react";
 
 import dxCardView from "devextreme/ui/card_view";
-import {wrapDxWithReact} from "../utils";
+import { wrapDxWithReact } from "../../utils";
 import Button from "devextreme/ui/button";
 
 const CardView = wrapDxWithReact(dxCardView);
@@ -15,6 +15,8 @@ interface HumanReadableProps {
   headerShowDeleteButton: boolean;
   headerShowCardTitle: boolean;
   image: ImageType;
+  imageRatio: string;
+  imageMaxHeight: number;
   cardFields: Record<string, string>,
   showCardFooterTemplate: boolean,
 }
@@ -61,21 +63,35 @@ const CARD_FOOTER_TEMPLATE = () => {
 const setImageProps = (
   props: Record<string, any>,
   image: ImageType,
+  ratio: string,
+  maxHeight: number,
 ): void => {
+  const baseCardCoverOptions = {aspectRatio: ratio, maxHeight};
+
   switch (image) {
     case 'placeholder':
-      props.cardCover = {imageExpr: 'image'};
+      props.cardCover = {
+        imageExpr: 'image',
+        ...baseCardCoverOptions,
+      };
       return;
     case 'small':
-      props.cardCover = {imageExpr: () => 'images/card_view/cat_small_crop.jpg'};
+      props.cardCover = {
+        imageExpr: () => 'images/card_view/cat_small_crop.jpg',
+        ...baseCardCoverOptions,
+      };
       return;
     case 'wide':
       props.cardCover = {
         imageExpr: () => 'images/card_view/cat_wide.jpg',
+        ...baseCardCoverOptions,
       };
       return;
     case 'tall':
-      props.cardCover = {imageExpr: () => 'images/card_view/cat_tall.jpg'};
+      props.cardCover = {
+        imageExpr: () => 'images/card_view/cat_tall.jpg',
+        ...baseCardCoverOptions,
+      };
       return;
     case 'none':
     default:
@@ -95,6 +111,8 @@ const mergeProps = (
     headerShowDeleteButton,
     headerShowCardTitle,
     image,
+    imageRatio,
+    imageMaxHeight,
     cardFields,
     showCardFooterTemplate
   } = humanReadableProps;
@@ -121,7 +139,7 @@ const mergeProps = (
     }
     : undefined;
 
-  setImageProps(result, image);
+  setImageProps(result, image, imageRatio, imageMaxHeight);
 
   result.cardFooterTemplate = showCardFooterTemplate
     ? CARD_FOOTER_TEMPLATE
@@ -138,7 +156,7 @@ const CardViewHumanReadableWrapper = (
 }
 
 const meta: Meta<typeof CardView> = {
-  title: "Grids/CardView/Card",
+  title: "Grids/CardView/Parts",
   component: CardViewHumanReadableWrapper,
   argTypes: {
     headerShowCheckBox: {
@@ -157,6 +175,12 @@ const meta: Meta<typeof CardView> = {
       control: 'select',
       options: imageTypes,
     },
+    imageRatio: {
+      control: 'text',
+    },
+    imageMaxHeight: {
+      control: 'number',
+    },
     cardFields: {
       control: 'object',
     },
@@ -170,13 +194,15 @@ export default meta;
 
 type Story = StoryObj<typeof CardView>;
 
-export const Playground: Story = {
+export const Card: Story = {
   args: {
     headerShowCheckBox: true,
     headerShowEditingButton: true,
     headerShowDeleteButton: true,
     headerShowCardTitle: true,
     image: 'none',
+    imageRatio: '1/1',
+    imageMaxHeight: 0,
     cardFields: {
       id: 0,
       firstName: 'John',

apps/react-storybook/stories/card_view/parts/Toolbar.stories.tsx

@@ -0,0 +1,163 @@
+import type {Meta, StoryObj} from "@storybook/react";
+
+import dxCardView from "devextreme/ui/card_view";
+import { wrapDxWithReact } from "../../utils";
+import {generatedData} from "../generatedData";
+import Button from "devextreme/ui/button";
+
+const CardView = wrapDxWithReact(dxCardView);
+
+interface HumanReadableProps {
+  showToolbar: boolean;
+  disableToolbar: boolean;
+  multilineToolbar: boolean;
+  showCustomToolbarButton: boolean;
+  showSelectionButtons: boolean;
+  showSearch: boolean;
+  showColumnChooser: boolean;
+  showAddCardButton: boolean;
+}
+
+const DEFAULT_PROPS = {
+  keyExpr: 'id',
+  dataSource: generatedData,
+}
+
+const TOOLBAR_CUSTOM_BUTTON_TEMPLATE = () => {
+  const button = document.createElement('div');
+  new Button(button, {text: 'Custom button', icon: 'edit' });
+
+  return button;
+}
+
+const TOOLBAR_CUSTOM_BUTTON_ITEM = {
+  location: 'before',
+  template: TOOLBAR_CUSTOM_BUTTON_TEMPLATE,
+}
+
+const setToolbarProps = (
+  props: Record<string, any>,
+  humanReadableProps: HumanReadableProps,
+): void => {
+  const {
+    showToolbar,
+    disableToolbar,
+    multilineToolbar,
+    showCustomToolbarButton,
+    showSelectionButtons,
+    showSearch,
+    showColumnChooser,
+    showAddCardButton,
+  } = humanReadableProps;
+
+  props.toolbar = {
+    visible: showToolbar,
+    disabled: disableToolbar,
+    multiline: multilineToolbar,
+    items: null,
+  };
+
+  if (showCustomToolbarButton) {
+    const customItems: any[] = [];
+
+    showSelectionButtons
+      && customItems.push('selectAllButton')
+      && customItems.push('clearSelectionButton');
+    showSearch && customItems.push('searchPanel');
+    showColumnChooser && customItems.push('columnChooserButton');
+    showAddCardButton && customItems.push('addCardButton');
+    showCustomToolbarButton && customItems.push(TOOLBAR_CUSTOM_BUTTON_ITEM);
+
+    props.toolbar.items = customItems;
+  }
+}
+
+const mergeProps = (
+  humanReadableProps: HumanReadableProps,
+  defaultProps: Record<PropertyKey, any>,
+): Record<PropertyKey, any> => {
+  const result = {...defaultProps};
+  const {
+    showSelectionButtons,
+    showSearch,
+    showColumnChooser,
+    showAddCardButton,
+  } = humanReadableProps;
+
+  setToolbarProps(result, humanReadableProps);
+
+  result.selection = showSelectionButtons
+    ? { mode: 'multiple' }
+    : undefined;
+
+  result.searchPanel = showSearch
+    ? { visible: true }
+    : undefined;
+
+  result.columnChooser = showColumnChooser
+    ? { enabled: true }
+    : undefined;
+
+  result.editing = showAddCardButton
+    ? { allowAdding: true }
+    : undefined;
+
+  return result;
+}
+
+const CardViewHumanReadableWrapper = (
+  humanReadableProps: HumanReadableProps,
+) => {
+  const props = mergeProps(humanReadableProps, DEFAULT_PROPS);
+  return CardView(props);
+}
+
+const meta: Meta<typeof CardView> = {
+  title: "Grids/CardView/Parts",
+  component: CardViewHumanReadableWrapper,
+  argTypes: {
+    showToolbar: {
+      control: 'boolean',
+    },
+    disableToolbar: {
+      control: 'boolean',
+    },
+    multilineToolbar: {
+      control: 'boolean',
+    },
+    // TODO Toolbar: Custom items bug -> uncomment after fix
+    showCustomToolbarButton: {
+      control: 'boolean',
+    },
+    showSelectionButtons: {
+      control: 'boolean',
+    },
+    showSearch: {
+      control: 'boolean',
+    },
+    showColumnChooser: {
+      control: 'boolean',
+    },
+    showAddCardButton: {
+      control: 'boolean',
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardView>;
+
+export const Toolbar: Story = {
+  args: {
+    showToolbar: true,
+    disableToolbar: false,
+    multilineToolbar: false,
+    showCustomToolbarButton: false,
+    showSelectionButtons: true,
+    showSearch: true,
+    showColumnChooser: false,
+    showAddCardButton: true,
+  }
+}
+

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

@@ -32,7 +32,8 @@ export class Toolbar extends InfernoWrapper<ToolbarProps, dxToolbar> {
                 const prevOptions = prevItem[key];
                 const currentOptions = item[key];
                 Object.keys(currentOptions).forEach((option) => {
-                  const isOptionChanged = currentOptions[option] !== prevOptions[option];
+                  const isOptionChanged = !prevOptions?.[option]
+                    || currentOptions?.[option] !== prevOptions[option];
                   const isExcludedOption = excludedStateOptions.includes(option);
                   if (isOptionChanged && !isExcludedOption) {
                     this.component?.option(`items[${index}].${key}.${option}`, props.items![index][key][option]);