Add allowRenderToDetachedTable flag (#784)

* Revert "Support npm >= 7 (#658)"

This reverts commit 5d35a0e.

* Add allowRenderToDetachedTable flag

* Update version

* Small fix

Author: dxvladislavvolkov

packages/devextreme-react-generator/package-lock.json

@@ -1,7 +1,7 @@
 {
   "author": "Developer Express Inc.",
   "name": "devextreme-react-generator",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "DevExtreme React UI and Visualization Components",
   "repository": {
     "type": "git",

packages/devextreme-react-generator/package.json

@@ -98,6 +98,11 @@ const USE_REQUEST_ANIMATION_FRAME: Set<string> = new Set([
   'dxDataGrid',
 ]);
 
+const USE_DETACHED_TABLE: Set<string> = new Set([
+  'dxDataGrid',
+  'dxTreeList',
+]);
+
 function getIndent(indent: number) {
   return Array(indent * 2 + 1).join(' ');
 }
@@ -353,6 +358,7 @@ const renderComponent: (model: {
   renderedPropTypings?: string[];
   isPortalComponent?: boolean;
   useRequestAnimationFrameFlag?: boolean;
+  allowRenderToDetachedTable?: boolean;
   typeParams: string[] | undefined;
 }) => string = createTempate(
   `class <#= it.className #>${TYPE_PARAMS_WITH_DEFAULTS} extends BaseComponent<React.PropsWithChildren<<#= it.optionsName #>${TYPE_PARAMS}>> {
@@ -367,6 +373,10 @@ const renderComponent: (model: {
   L1}protected useRequestAnimationFrameFlag = true;\n`
 + '<#?#>'
 
++ `<#? it.allowRenderToDetachedTable #>${
+  L1}protected allowRenderToDetachedTable = true;\n`
++ '<#?#>'
+
 + `<#? it.isPortalComponent #>${
   L1}protected isPortalComponent = true;\n`
 + '<#?#>'
@@ -600,6 +610,7 @@ function generate(component: IComponent): string {
       renderedPropTypings,
       expectedChildren: component.expectedChildren,
       useRequestAnimationFrameFlag: USE_REQUEST_ANIMATION_FRAME.has(widgetName),
+      allowRenderToDetachedTable: USE_DETACHED_TABLE.has(widgetName),
       isPortalComponent: PORTAL_COMPONENTS.has(widgetName),
       typeParams: component.optionsTypeParams?.length ? component.optionsTypeParams : undefined,
     }),

packages/devextreme-react-generator/src/component-generator.ts

@@ -67,6 +67,8 @@ abstract class ComponentBase<P extends IHtmlOptions> extends React.PureComponent
 
   protected useRequestAnimationFrameFlag = false;
 
+  protected allowRenderToDetachedTable = false;
+
   protected useDeferUpdateForTemplates = false;
 
   constructor(props: P) {
@@ -116,11 +118,18 @@ abstract class ComponentBase<P extends IHtmlOptions> extends React.PureComponent
     element = element || this._element;
 
     const config = this._getConfig();
+    const initialOptions = this._optionsManager.getInitialOptions(config);
+    const hasDetachedFlag = Object.keys(initialOptions).includes('allowRenderToDetachedTable');
+
+    if (!hasDetachedFlag && this.allowRenderToDetachedTable) {
+      initialOptions.allowRenderToDetachedTable = true;
+    }
+
     this._instance = new this._WidgetClass(
       element,
       {
         templatesRenderAsynchronously: true,
-        ...this._optionsManager.getInitialOptions(config),
+        ...initialOptions,
       },
     );