feat: React config component composition (#27899)

Co-authored-by: alexlavrov <[email protected]>
DevExpress · Oct 25, 2024 · 7c8dee5 · 7c8dee5
1 parent c58ae9a
commit 7c8dee5
Show file tree

Hide file tree

Showing 95 changed files with 16,581 additions and 12,264 deletions.
diff --git a/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx b/apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from "react";
+
+import DataGrid, {
+  Column,
+  Grouping,
+  GroupPanel,
+  Pager,
+  Paging,
+  SearchPanel
+} from "devextreme-react/data-grid";
+import TabPanel, { Item } from "devextreme-react/tab-panel";
+import ODataStore from "devextreme/data/odata/store";
+
+const meta: Meta<typeof DataGrid> = {
+  title: 'Example/Common/Custom Configuration Components',
+  component: DataGrid,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/configure/story-layout
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataGrid>;
+
+const pageSizes = [10, 25, 50, 100];
+
+const dataSourceOptions = {
+  store: new ODataStore({
+    version: 2,
+    url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
+    key: 'Id',
+    beforeSend(request) {
+      const year = new Date().getFullYear() - 1;
+      request.params.startDate = `${year}-05-10`;
+      request.params.endDate = `${year}-5-15`;
+    },
+  }),
+};
+
+const CustomerData = () => (
+  <>
+    <Column dataField="Region" dataType="string" />
+    <Column dataField="Customer" dataType="string" width={150} />
+  </>
+);
+
+const CommonSettings = () => (
+  <>
+    <GroupPanel visible={true} />
+    <SearchPanel visible={true} highlightCaseSensitive={true} />
+    <Grouping autoExpandAll={false} />
+    <Pager allowedPageSizes={pageSizes} showPageSizeSelector={true} />
+    <Paging defaultPageSize={10} />
+  </>
+);
+
+const CommonColumns = () => (
+  <>
+    <Column dataField="SaleDate" dataType="date" />
+    <Column dataField="Product" />
+  </>
+);
+
+const BriefGrid = () => (
+  <DataGrid
+    dataSource={dataSourceOptions}
+    style={{ padding: '10px' }}
+  >
+    <CommonSettings />
+    <CommonColumns />
+    <CustomerData />
+  </DataGrid>
+);
+
+const DetailGrid = () => (
+  <DataGrid
+    dataSource={dataSourceOptions}
+    style={{ padding: '10px' }}
+  >
+    <CommonSettings />
+    <CommonColumns />
+    <Column
+      dataField="Amount"
+      caption="Sale Amount"
+      dataType="number"
+      format="currency"
+      alignment="right"
+    />
+    <Column
+      dataField="Discount"
+      caption="Discount %"
+      dataType="number"
+      format="percent"
+      alignment="right"
+      allowGrouping={false}
+      cssClass="bullet"
+    />
+    <Column caption='Customer Data'>
+      <CustomerData />
+      <Column dataField="Sector" dataType="string" />
+      <Column dataField="Channel" dataType="string" />
+    </Column>
+  </DataGrid>
+);
+
+export const Overview: Story = {
+  render: () => {
+    return (
+      <TabPanel>
+        <Item title="Brief">
+          <BriefGrid />
+        </Item>
+        <Item title="Detailed">
+          <DetailGrid />
+        </Item>
+      </TabPanel>
+    );
+  }
+}
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "axe-core": "4.10.0",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0-beta.5",
+    "devextreme-internal-tools": "16.0.0-beta.6",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

diff --git a/packages/devextreme-react/src/accordion.ts b/packages/devextreme-react/src/accordion.ts
@@ -6,7 +6,7 @@ import dxAccordion, {
     Properties
 } from "devextreme/ui/accordion";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxAccordionItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, ItemTitleClickEvent } from "devextreme/ui/accordion";
@@ -124,25 +124,28 @@ type IItemProps = React.PropsWithChildren<{
   titleRender?: (...params: any) => React.ReactNode;
   titleComponent?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }, {
-    tmplOption: "titleTemplate",
-    render: "titleRender",
-    component: "titleComponent"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }, {
+        tmplOption: "titleTemplate",
+        render: "titleRender",
+        component: "titleComponent"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default Accordion;
 export {

diff --git a/packages/devextreme-react/src/action-sheet.ts b/packages/devextreme-react/src/action-sheet.ts
@@ -6,7 +6,7 @@ import dxActionSheet, {
     Properties
 } from "devextreme/ui/action_sheet";
 
-import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
 import type { dxActionSheetItem, CancelClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/action_sheet";
@@ -106,21 +106,24 @@ type IItemProps = React.PropsWithChildren<{
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
 }>
-const _componentItem = memo(
-  (props: IItemProps) => {
-    return React.createElement(NestedOption<IItemProps>, { ...props });
-  }
-);
-
-const Item: typeof _componentItem & IElementDescriptor = Object.assign(_componentItem, {
-  OptionName: "items",
-  IsCollectionItem: true,
-  TemplateProps: [{
-    tmplOption: "template",
-    render: "render",
-    component: "component"
-  }],
-})
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
 
 export default ActionSheet;
 export {