fix(react-core): remove redundant markup elements (#544)

BREAKING CHANGES: To get rid of redundant 'div' elements in markup, we have updated the minimum React version the grid requires to 16.2.0.
DevExpress · Dec 4, 2017 · f5e24a6 · f5e24a6
1 parent 35729d1
commit f5e24a6
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 84 deletions.
diff --git a/packages/dx-react-core/package.json b/packages/dx-react-core/package.json
@@ -65,9 +65,9 @@
     "eslint-plugin-react": "^7.4.0",
     "jest": "^21.2.1",
     "raf": "^3.4.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "react-test-renderer": "^16.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "rollup": "0.50.0",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-license": "^0.5.0",
@@ -78,7 +78,7 @@
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
-    "react": "^15.6.1 || ^16.0.0",
-    "react-dom": "^15.6.1 || ^16.0.0"
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   }
 }
diff --git a/packages/dx-react-core/src/plugged/plugin-host.jsx b/packages/dx-react-core/src/plugged/plugin-host.jsx
@@ -20,13 +20,13 @@ export class PluginHost extends React.PureComponent {
     const { children } = this.props;
 
     return (
-      <div>
+      <React.Fragment>
         <PluginIndexer>
           <Template name="root" />
           {children}
         </PluginIndexer>
         <TemplatePlaceholder name="root" />
-      </div>
+      </React.Fragment>
     );
   }
 }

diff --git a/packages/dx-react-core/src/plugged/plugin-indexer.jsx b/packages/dx-react-core/src/plugged/plugin-indexer.jsx
@@ -8,7 +8,7 @@ export const PluginIndexer = (
   { children },
   { positionContext },
 ) => (
-  <div style={{ display: 'none' }}>
+  <React.Fragment>
     {
       React.Children.map(children, (child, index) => {
         if (!child || !child.type) return child;
@@ -32,7 +32,7 @@ export const PluginIndexer = (
         );
       })
     }
-  </div>
+  </React.Fragment>
 );
 
 PluginIndexer.propTypes = {

diff --git a/packages/dx-react-core/src/plugged/template-placeholder.test.jsx b/packages/dx-react-core/src/plugged/template-placeholder.test.jsx
@@ -65,8 +65,7 @@ describe('TemplatePlaceholder', () => {
     const tree = mount(<Test text="old" />);
 
     tree.setProps({ text: 'new' });
-
-    expect(tree.render().find('h1').text())
+    expect(tree.find('h1').text())
       .toBe('new');
   });
 

diff --git a/packages/dx-react-demos/package.json b/packages/dx-react-demos/package.json
@@ -38,9 +38,9 @@
     "material-ui": "1.0.0-beta.20",
     "material-ui-icons": "1.0.0-beta.17",
     "prop-types": "^15.6.0",
-    "react": "^16.1.1",
+    "react": "^16.2.0",
     "react-bootstrap": "^0.31.5",
-    "react-dom": "^16.1.1",
+    "react-dom": "^16.2.0",
     "react-frame-component": "^2.0.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
@@ -70,7 +70,7 @@
     "jest": "^21.2.1",
     "node-static": "^0.7.10",
     "raf": "^3.4.0",
-    "react-test-renderer": "^16.1.1",
+    "react-test-renderer": "^16.2.0",
     "source-map-loader": "^0.2.3",
     "style-loader": "^0.19.0",
     "webpack": "^3.8.1",

diff --git a/packages/dx-react-grid-bootstrap3/package.json b/packages/dx-react-grid-bootstrap3/package.json
@@ -72,10 +72,10 @@
     "eslint-plugin-react": "^7.4.0",
     "jest": "^21.2.1",
     "raf": "^3.4.0",
-    "react": "^16.1.1",
+    "react": "^16.2.0",
     "react-bootstrap": "^0.31.5",
-    "react-dom": "^16.1.1",
-    "react-test-renderer": "^16.1.1",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "rollup": "0.50.0",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-license": "^0.5.0",
@@ -88,7 +88,7 @@
     "@devexpress/dx-grid-core": "1.0.0-beta.1",
     "@devexpress/dx-react-core": "1.0.0-beta.1",
     "@devexpress/dx-react-grid": "1.0.0-beta.1",
-    "react": "^15.6.1 || ^16.0.0",
+    "react": "^16.2.0",
     "react-bootstrap": "^0.31.5"
   }
 }
diff --git a/packages/dx-react-grid-material-ui/package.json b/packages/dx-react-grid-material-ui/package.json
@@ -77,9 +77,9 @@
     "material-ui": "1.0.0-beta.20",
     "material-ui-icons": "1.0.0-beta.17",
     "raf": "^3.4.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "react-test-renderer": "^16.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "rollup": "0.50.0",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-license": "^0.5.0",
@@ -95,6 +95,6 @@
     "@devexpress/dx-react-grid": "1.0.0-beta.1",
     "material-ui": "1.0.0-beta.20",
     "material-ui-icons": "1.0.0-beta.17",
-    "react": "^15.6.1 || ^16.0.0"
+    "react": "^16.2.0"
   }
 }
diff --git a/packages/dx-react-grid/package.json b/packages/dx-react-grid/package.json
@@ -70,9 +70,9 @@
     "eslint-plugin-react": "^7.4.0",
     "jest": "^21.2.1",
     "raf": "^3.4.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "react-test-renderer": "^16.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "rollup": "0.50.0",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-license": "^0.5.0",
@@ -85,7 +85,7 @@
   "peerDependencies": {
     "@devexpress/dx-core": "1.0.0-beta.1",
     "@devexpress/dx-react-core": "1.0.0-beta.1",
-    "react": "^15.6.1 || ^16.0.0",
-    "react-dom": "^15.6.1 || ^16.0.0"
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   }
 }
diff --git a/packages/dx-react-grid/src/plugins/drag-drop-context.jsx b/packages/dx-react-grid/src/plugins/drag-drop-context.jsx
@@ -43,26 +43,24 @@ export class DragDropContext extends React.PureComponent {
         pluginName="DragDropContext"
       >
         <Template name="root">
-          <div>
-            <DragDropContextCore
-              onChange={this.change}
-            >
-              <TemplatePlaceholder />
-            </DragDropContextCore>
-            {payload && (
-              <TemplateConnector>
-                {getters => (
-                  <TemplateRenderer
-                    template={containerTemplate}
-                    params={getContainerTemplateArgs(
-                      { payload, clientOffset, columnTemplate },
-                      getters,
-                    )}
-                  />
-                )}
-              </TemplateConnector>
-            )}
-          </div>
+          <DragDropContextCore
+            onChange={this.change}
+          >
+            <TemplatePlaceholder />
+          </DragDropContextCore>
+          {payload && (
+            <TemplateConnector>
+              {getters => (
+                <TemplateRenderer
+                  template={containerTemplate}
+                  params={getContainerTemplateArgs(
+                    { payload, clientOffset, columnTemplate },
+                    getters,
+                  )}
+                />
+              )}
+            </TemplateConnector>
+          )}
         </Template>
       </PluginContainer>
     );

diff --git a/packages/dx-react-grid/src/plugins/grouping-panel.jsx b/packages/dx-react-grid/src/plugins/grouping-panel.jsx
@@ -50,23 +50,21 @@ export class GroupingPanel extends React.PureComponent {
         ]}
       >
         <Template name="header">
-          <div>
-            <TemplateConnector>
-              {(getters, actions) => (
-                <TemplateRenderer
-                  template={groupPanelTemplate}
-                  params={getGroupPanelTemplateArgs(
-                    {
-                      allowDragging, allowSorting, allowUngroupingByClick, getMessage,
-                    },
-                    getters,
-                    actions,
-                  )}
-                />
-              )}
-            </TemplateConnector>
-            <TemplatePlaceholder />
-          </div>
+          <TemplateConnector>
+            {(getters, actions) => (
+              <TemplateRenderer
+                template={groupPanelTemplate}
+                params={getGroupPanelTemplateArgs(
+                  {
+                    allowDragging, allowSorting, allowUngroupingByClick, getMessage,
+                  },
+                  getters,
+                  actions,
+                )}
+              />
+            )}
+          </TemplateConnector>
+          <TemplatePlaceholder />
         </Template>
       </PluginContainer>
     );

diff --git a/packages/dx-react-grid/src/plugins/paging-panel.jsx b/packages/dx-react-grid/src/plugins/paging-panel.jsx
@@ -36,17 +36,15 @@ export class PagingPanel extends React.PureComponent {
         dependencies={pluginDependencies}
       >
         <Template name="footer">
-          <div>
-            <TemplatePlaceholder />
-            <TemplateConnector>
-              {(getters, actions) => (
-                <TemplateRenderer
-                  template={pagerTemplate}
-                  params={getPagerTemplateArgs({ allowedPageSizes, getMessage }, getters, actions)}
-                />
-              )}
-            </TemplateConnector>
-          </div>
+          <TemplatePlaceholder />
+          <TemplateConnector>
+            {(getters, actions) => (
+              <TemplateRenderer
+                template={pagerTemplate}
+                params={getPagerTemplateArgs({ allowedPageSizes, getMessage }, getters, actions)}
+              />
+            )}
+          </TemplateConnector>
         </Template>
       </PluginContainer>
     );

diff --git a/yarn.lock b/yarn.lock
@@ -6246,9 +6246,9 @@ react-bootstrap@^0.31.5:
     uncontrollable "^4.1.0"
     warning "^3.0.0"
 
-react-dom@^16.1.1:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
+react-dom@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6350,9 +6350,9 @@ react-scrollbar-size@^2.0.2:
     prop-types "^15.5.10"
     react-event-listener "^0.5.0"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.1.1.tgz#a05184688d564be799f212449262525d1e350537"
+react-test-renderer@^16.0.0-0, react-test-renderer@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
@@ -6379,9 +6379,9 @@ react@^15.5.4:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react@^16.1.1:
-  version "16.1.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
+react@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"