Repository: DevExpress/devextreme-react
Pull request #677 (2022-06-10 12:18:03)

Add children type for base component
cherry picked from #676


Patch:
diff --git a/packages/devextreme-react-generator/src/component-generator.ts b/packages/devextreme-react-generator/src/component-generator.ts
index db07772..1cd7e04 100644
--- a/packages/devextreme-react-generator/src/component-generator.ts
+++ b/packages/devextreme-react-generator/src/component-generator.ts
@@ -351,7 +351,7 @@ const renderComponent: (model: {
   useRequestAnimationFrameFlag?: boolean;
   typeParams: string[] | undefined;
 }) => string = createTempate(
-  `class <#= it.className #>${TYPE_PARAMS_WITH_DEFAULTS} extends BaseComponent<<#= it.optionsName #>${TYPE_PARAMS}> {
+  `class <#= it.className #>${TYPE_PARAMS_WITH_DEFAULTS} extends BaseComponent<React.PropsWithChildren<<#= it.optionsName #>${TYPE_PARAMS}>> {
 
   public get instance(): <#= it.widgetName #>${TYPE_PARAMS} {
     return this._instance;


Test patch:
diff --git a/packages/devextreme-react-generator/src/component-generator.test.ts b/packages/devextreme-react-generator/src/component-generator.test.ts
index 3b3d185..132a0b9 100644
--- a/packages/devextreme-react-generator/src/component-generator.test.ts
+++ b/packages/devextreme-react-generator/src/component-generator.test.ts
@@ -12,7 +12,7 @@ import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -47,7 +47,7 @@ import dxCLASS_NAME, {
 
 import { ExtensionComponent as BaseComponent } from "EXTENSION_COMPONENT_PATH";
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -89,7 +89,7 @@ type ICLASS_NAMEOptions<T1 = any, T2 = any> = React.PropsWithChildren<Properties
   dataSource?: Properties<T1, T2>["dataSource"];
 }>
 
-class CLASS_NAME<T1 = any, T2 = any> extends BaseComponent<ICLASS_NAMEOptions<T1, T2>> {
+class CLASS_NAME<T1 = any, T2 = any> extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions<T1, T2>>> {
 
   public get instance(): dxCLASS_NAME<T1, T2> {
     return this._instance;
@@ -150,7 +150,7 @@ type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   optionKeyFn?: (data: any) => string;
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -202,7 +202,7 @@ type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   anotherOptionKeyFn?: (data: any) => string;
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -256,7 +256,7 @@ type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   keyFn?: (data: any) => string;
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -306,7 +306,7 @@ type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   onOption1Change?: (value: someType) => void;
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -357,7 +357,7 @@ type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   onOption2Change?: (value: anotherType) => void;
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -408,7 +408,7 @@ type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   onOption1Change?: (value: someType) => void;
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -460,7 +460,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -574,7 +574,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -642,7 +642,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -727,7 +727,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -803,7 +803,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -876,7 +876,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -969,7 +969,7 @@ import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -1017,7 +1017,7 @@ import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -1069,7 +1069,7 @@ import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -1120,7 +1120,7 @@ import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -1187,7 +1187,7 @@ import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;
@@ -1235,7 +1235,7 @@ import NestedOption from "CONFIG_COMPONENT_PATH";
 type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
 }>
 
-class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
+class CLASS_NAME extends BaseComponent<React.PropsWithChildren<ICLASS_NAMEOptions>> {
 
   public get instance(): dxCLASS_NAME {
     return this._instance;