Repository: DevExpress/devextreme-react
Pull request #672 (2022-06-01 13:21:22)

Add children to interfaces


Patch:
diff --git a/packages/devextreme-react-generator/src/component-generator.ts b/packages/devextreme-react-generator/src/component-generator.ts
index b586650..db07772 100644
--- a/packages/devextreme-react-generator/src/component-generator.ts
+++ b/packages/devextreme-react-generator/src/component-generator.ts
@@ -249,7 +249,7 @@ const renderNestedComponent: (model: {
     + '// <#= owner #>\n'
 + '<#~#>'
 
-+ 'interface <#= it.propsType #> <#= it.renderedType #>\n'
++ 'type <#= it.propsType #> = React.PropsWithChildren<<#= it.renderedType #>>\n'
 
 + 'class <#= it.className #> extends NestedOption<<#= it.propsType #>> {'}${
     L1}public static OptionName = "<#= it.optionName #>";`
@@ -314,7 +314,7 @@ const renderOptionsInterface: (model: {
     type: string;
   }>;
 }) => string = createTempate(
-  `interface <#= it.optionsName #>${TYPE_PARAMS_WITH_DEFAULTS} extends Properties${TYPE_PARAMS}, IHtmlOptions {\n`
+  `type <#= it.optionsName #>${TYPE_PARAMS_WITH_DEFAULTS} = React.PropsWithChildren<Properties${TYPE_PARAMS} & IHtmlOptions & {\n`
 
 + '<#? it.typeParams #>'
     + `  dataSource?: Properties${TYPE_PARAMS}["dataSource"];\n`
@@ -334,7 +334,7 @@ const renderOptionsInterface: (model: {
     + '  <#= prop.name #>?: <#= prop.type #>;\n'
 + '<#~#>'
 
-+ '}',
++ '}>',
 );
 
 const renderComponent: (model: {


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 5e0f9a8..3b3d185 100644
--- a/packages/devextreme-react-generator/src/component-generator.test.ts
+++ b/packages/devextreme-react-generator/src/component-generator.test.ts
@@ -9,8 +9,8 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -85,9 +85,9 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions<T1 = any, T2 = any> extends Properties<T1, T2>, IHtmlOptions {
+type ICLASS_NAMEOptions<T1 = any, T2 = any> = React.PropsWithChildren<Properties<T1, T2> & IHtmlOptions & {
   dataSource?: Properties<T1, T2>["dataSource"];
-}
+}>
 
 class CLASS_NAME<T1 = any, T2 = any> extends BaseComponent<ICLASS_NAMEOptions<T1, T2>> {
 
@@ -144,11 +144,11 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   optionRender?: (...params: any) => React.ReactNode;
   optionComponent?: React.ComponentType<any>;
   optionKeyFn?: (data: any) => string;
-}
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -193,14 +193,14 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   optionRender?: (...params: any) => React.ReactNode;
   optionComponent?: React.ComponentType<any>;
   optionKeyFn?: (data: any) => string;
   anotherOptionRender?: (...params: any) => React.ReactNode;
   anotherOptionComponent?: React.ComponentType<any>;
   anotherOptionKeyFn?: (data: any) => string;
-}
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -250,11 +250,11 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   render?: (...params: any) => React.ReactNode;
   component?: React.ComponentType<any>;
   keyFn?: (data: any) => string;
-}
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -301,10 +301,10 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   defaultOption1?: someType;
   onOption1Change?: (value: someType) => void;
-}
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -350,12 +350,12 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   defaultOption1?: someType;
   defaultOption2?: anotherType;
   onOption1Change?: (value: someType) => void;
   onOption2Change?: (value: anotherType) => void;
-}
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -403,10 +403,10 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
   defaultOption1?: someType;
   onOption1Change?: (value: someType) => void;
-}
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -457,8 +457,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -472,7 +472,7 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
   sub_opt_2?: TYPE_1;
   sub_opt_3?: TYPE_SUB_3 | {
     sub_sub_opt_4?: TYPE_2;
@@ -480,16 +480,16 @@ interface IOpt_1_ComponentProps {
       sub_sub_sub_opt_6?: TYPE_3;
     };
   };
-}
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
 }
 
 // owners:
 // Opt_1_Component
-interface IOpt_6_SubComponentProps {
+type IOpt_6_SubComponentProps = React.PropsWithChildren<{
   sub_sub_sub_opt_8?: TYPE_4;
-}
+}>
 class Opt_6_SubComponent extends NestedOption<IOpt_6_SubComponentProps> {
   public static OptionName = "sub_sub_opt_7";
 }
@@ -571,8 +571,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -586,9 +586,9 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
   sub_opt_2?: TYPE_1;
-}
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
   public static IsCollectionItem = true;
@@ -639,8 +639,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -654,14 +654,14 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
   sub_opt_2?: TYPE_1;
   sub_opt_3?: {
     sub_sub_opt_4?: TYPE_2;
   };
   defaultSub_opt_2?: TYPE_1;
   onSub_opt_2Change?: (value: TYPE_1) => void;
-}
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
   public static DefaultsProps = {
@@ -724,8 +724,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -739,12 +739,12 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
   optionTemplate?: TYPE_1;
   optionRender?: (...params: any) => React.ReactNode;
   optionComponent?: React.ComponentType<any>;
   optionKeyFn?: (data: any) => string;
-}
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
   public static TemplateProps = [{
@@ -800,8 +800,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -815,9 +815,9 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
   sub_opt_2?: TYPE_1;
-}
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
   public static IsCollectionItem = true;
@@ -873,8 +873,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -888,13 +888,13 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
   sub_opt_2?: TYPE_1;
   sub_opt_3?: {
     subsub_1?: TYPE_3;
     subsub_2?: TYPE_4;
   }[];
-}
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
   public static IsCollectionItem = true;
@@ -966,8 +966,8 @@ import dxCLASS_NAME, {
 import * as PropTypes from "prop-types";
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -1014,8 +1014,8 @@ import dxCLASS_NAME, {
 import * as PropTypes from "prop-types";
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -1066,8 +1066,8 @@ import dxCLASS_NAME, {
 import * as PropTypes from "prop-types";
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -1117,8 +1117,8 @@ import dxCLASS_NAME, {
 import * as PropTypes from "prop-types";
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -1184,8 +1184,8 @@ import dxCLASS_NAME, {
 
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -1232,8 +1232,8 @@ import dxCLASS_NAME, {
 import { Component as BaseComponent, IHtmlOptions } from "BASE_COMPONENT_PATH";
 import NestedOption from "CONFIG_COMPONENT_PATH";
 
-interface ICLASS_NAMEOptions extends Properties, IHtmlOptions {
-}
+type ICLASS_NAMEOptions = React.PropsWithChildren<Properties & IHtmlOptions & {
+}>
 
 class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
@@ -1247,8 +1247,8 @@ class CLASS_NAME extends BaseComponent<ICLASS_NAMEOptions> {
 
 // owners:
 // CLASS_NAME
-interface IOpt_1_ComponentProps {
-}
+type IOpt_1_ComponentProps = React.PropsWithChildren<{
+}>
 class Opt_1_Component extends NestedOption<IOpt_1_ComponentProps> {
   public static OptionName = "opt_1";
   public static ExpectedChildren = {