feat(react-grid): add components for the Grid plugin (#553)

DevExpress · Dec 7, 2017 · 314f0d8 · 314f0d8
1 parent 6788ba6
commit 314f0d8
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 64 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/grid.jsx b/packages/dx-react-grid-bootstrap3/src/grid.jsx
@@ -14,6 +14,8 @@ export const Grid = ({ children, ...props }) => (
   </GridBase>
 );
 
+Grid.Root = Root;
+
 Grid.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-export const Root = ({ children }) => (
-  <div className="panel panel-default">
+export const Root = ({ children, className, ...restProps }) => (
+  <div className={classNames('panel panel-default', className)}{...restProps}>
     {children}
   </div>
 );
@@ -12,14 +13,23 @@ Root.propTypes = {
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  className: PropTypes.string,
 };
 
 Root.defaultProps = {
   children: undefined,
+  className: undefined,
 };
 
 export const Header = ({ children }) =>
-  children && <div className="panel-heading" style={{ paddingBottom: '5px' }}>{children}</div>;
+  !!children && (
+    <div
+      className="panel-heading"
+      style={{ paddingBottom: '5px' }}
+    >
+      {children}
+    </div>
+  );
 
 Header.propTypes = {
   children: PropTypes.oneOfType([
@@ -33,7 +43,8 @@ Header.defaultProps = {
 };
 
 export const Footer = ({ children }) =>
-  children && <div className="panel-footer">{children}</div>;
+  !!children &&
+    <div className="panel-footer">{children}</div>;
 
 Footer.propTypes = {
   children: PropTypes.oneOfType([

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Root } from './layout';
+
+describe('Layout', () => {
+  describe('Root', () => {
+    it('should pass className to the root element', () => {
+      const tree = shallow((
+        <Root className="custom-class" />
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-default'))
+        .toBeTruthy();
+    });
+
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Root data={{ a: 1 }} />
+      ));
+
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
+    });
+  });
+});
diff --git a/packages/dx-react-grid-material-ui/src/grid.jsx b/packages/dx-react-grid-material-ui/src/grid.jsx
@@ -14,6 +14,8 @@ export const Grid = ({ children, ...props }) => (
   </GridBase>
 );
 
+Grid.Root = Root;
+
 Grid.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),

diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
@@ -14,8 +14,8 @@ const styles = theme => ({
   },
 });
 
-export const Root = ({ children }) => (
-  <div>{children}</div>
+export const Root = ({ children, ...restProps }) => (
+  <div {...restProps}>{children}</div>
 );
 
 Root.propTypes = {
@@ -30,7 +30,8 @@ Root.defaultProps = {
 };
 
 const HeaderBase = ({ children, classes }) =>
-  children && <div className={classes.headingPanel}>{children}</div>;
+  !!children &&
+    <div className={classes.headingPanel}>{children}</div>;
 
 HeaderBase.propTypes = {
   children: PropTypes.oneOfType([
@@ -46,8 +47,11 @@ HeaderBase.defaultProps = {
 
 export const Header = withStyles(styles, { name: 'GridLayout' })(HeaderBase);
 
-const FooterBase = ({ children, classes }) =>
-  children && <div className={classes.footerPanel}>{children}</div>;
+const FooterBase = ({
+  children, classes,
+}) =>
+  !!children &&
+    <div className={classes.footerPanel}>{children}</div>;
 
 FooterBase.propTypes = {
   children: PropTypes.oneOfType([

diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
@@ -1,66 +1,24 @@
 import React from 'react';
-import { createMount, getClasses } from 'material-ui/test-utils';
-import { setupConsole } from '@devexpress/dx-testing';
-import { Header, Footer } from './layout';
+import { shallow } from 'enzyme';
+import { Root } from './layout';
 
 describe('Layout', () => {
-  let resetConsole;
-  beforeAll(() => {
-    resetConsole = setupConsole({ ignore: ['SheetsRegistry'] });
-  });
-  afterAll(() => {
-    resetConsole();
-  });
-
-  describe('Header', () => {
-    let mount;
-    let classes;
-    beforeAll(() => {
-      classes = getClasses((
-        <Header>
-          <div />
-        </Header>
-      ));
-      mount = createMount();
-    });
-    afterAll(() => {
-      mount.cleanUp();
-    });
-
-    it('should have a correct css class', () => {
-      const tree = mount((
-        <Header>
-          <div />
-        </Header>
+  describe('Root', () => {
+    it('should pass className to the root element', () => {
+      const tree = shallow((
+        <Root className="custom-class" />
       ));
 
-      expect(tree.find(`.${classes.headingPanel}`).exists()).toBeTruthy();
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
     });
-  });
-
-  describe('Footer', () => {
-    let mount;
-    let classes;
-    beforeAll(() => {
-      classes = getClasses((
-        <Footer>
-          <div />
-        </Footer>
-      ));
-      mount = createMount();
-    });
-    afterAll(() => {
-      mount.cleanUp();
-    });
-
-    it('should have a correct css class', () => {
-      const tree = mount((
-        <Footer>
-          <div />
-        </Footer>
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Root data={{ a: 1 }} />
       ));
 
-      expect(tree.find(`.${classes.footerPanel}`).exists()).toBeTruthy();
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
     });
   });
 });
diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
@@ -53,6 +53,14 @@ Field | Type | Description
 ------|------|------------
 children? | ReactElement | A React element to be placed in the footer.
 
+## Plugin Components
+
+Name | Properties | Description
+-----|------------|------------
+Grid.Root | [GridRootProps](#gridrootprops) | A component that renders the grid root layout.
+
+If you specify additional properties, they are added to the component's root element.
+
 ## Plugin Developer Reference
 
 ### Exports