[Table] Use stable context API

packages/material-ui/src/Table/Table.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
+import TableContext from './TableContext';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -14,21 +15,15 @@ export const styles = theme => ({
   },
 });
 
-class Table extends React.Component {
-  getChildContext() {
-    // eslint-disable-line class-methods-use-this
-    return {
-      table: {
-        padding: this.props.padding,
-      },
-    };
-  }
+function Table(props) {
+  const { classes, className, component: Component, padding, ...other } = props;
+  const childContext = { padding };
 
-  render() {
-    const { classes, className, component: Component, padding, ...other } = this.props;
-
-    return <Component className={classNames(classes.root, className)} {...other} />;
-  }
+  return (
+    <TableContext.Provider value={childContext}>
+      <Component className={classNames(classes.root, className)} {...other} />
+    </TableContext.Provider>
+  );
 }
 
 Table.propTypes = {
@@ -61,8 +56,4 @@ Table.defaultProps = {
   padding: 'default',
 };
 
-Table.childContextTypes = {
-  table: PropTypes.object,
-};
-
 export default withStyles(styles, { name: 'MuiTable' })(Table);

packages/material-ui/src/Table/Table.test.js

@@ -1,29 +1,38 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { createMount, findOutermostIntrinsic, getClasses } from '../test-utils';
 import Table from './Table';
+import TableContext from './TableContext';
 
 describe('<Table />', () => {
-  let shallow;
+  let mount;
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
+    mount = createMount();
     classes = getClasses(<Table>foo</Table>);
   });
 
   it('should render a table', () => {
-    const wrapper = shallow(<Table>foo</Table>);
-    assert.strictEqual(wrapper.name(), 'table');
+    const wrapper = mount(
+      <Table>
+        <tbody />
+      </Table>,
+    );
+    assert.strictEqual(wrapper.getDOMNode().nodeName, 'TABLE');
   });
 
   it('should render a div', () => {
-    const wrapper = shallow(<Table component="div">foo</Table>);
-    assert.strictEqual(wrapper.name(), 'div');
+    const wrapper = mount(<Table component="div">foo</Table>);
+    assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV');
   });
 
   it('should spread custom props on the root node', () => {
-    const wrapper = shallow(<Table data-my-prop="woofTable">foo</Table>);
+    const wrapper = mount(
+      <Table data-my-prop="woofTable">
+        <tbody />
+      </Table>,
+    );
     assert.strictEqual(
       wrapper.props()['data-my-prop'],
       'woofTable',
@@ -32,20 +41,37 @@ describe('<Table />', () => {
   });
 
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(<Table className="woofTable">foo</Table>);
-    assert.strictEqual(wrapper.hasClass('woofTable'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const wrapper = mount(
+      <Table className="woofTable">
+        <tbody />
+      </Table>,
+    );
+    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass('woofTable'), true);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true);
   });
 
   it('should render children', () => {
     const children = <tbody className="test" />;
-    const wrapper = shallow(<Table>{children}</Table>);
-    assert.strictEqual(wrapper.childAt(0).equals(children), true);
+    const wrapper = mount(<Table>{children}</Table>);
+    assert.strictEqual(wrapper.contains(children), true);
   });
 
   it('should define table in the child context', () => {
-    const wrapper = shallow(<Table>foo</Table>);
-    assert.deepStrictEqual(wrapper.instance().getChildContext().table, {
+    let context;
+
+    mount(
+      <Table>
+        <TableContext.Consumer>
+          {value => {
+            context = value;
+
+            return <tbody />;
+          }}
+        </TableContext.Consumer>
+      </Table>,
+    );
+
+    assert.deepStrictEqual(context, {
       padding: 'default',
     });
   });

packages/material-ui/src/Table/TableContext.d.ts

@@ -0,0 +1,10 @@
+import { Context } from 'react';
+import { Padding } from './Table';
+
+interface TableContextProps {
+  padding: Padding;
+}
+
+declare const TableContext: Context<TableContextProps | undefined>;
+
+export default TableContext;

packages/material-ui/src/Table/TableContext.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+const TableContext = React.createContext();
+
+export default TableContext;

packages/material-ui/src/Table/Tablelvl2Context.d.ts

@@ -0,0 +1,9 @@
+import { Context } from 'react';
+
+interface Tablelvl2ContextProps {
+  variant: 'head' | 'body' | 'footer';
+}
+
+declare const Tablelvl2Context: Context<Tablelvl2ContextProps | undefined>;
+
+export default Tablelvl2Context;

packages/material-ui/src/Table/Tablelvl2Context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+const TableContext = React.createContext();
+
+export default TableContext;

packages/material-ui/src/Table/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Table';
 export * from './Table';
+export { default as TableContext } from './TableContext';
+export { default as Tablelvl2Context } from './Tablelvl2Context';

packages/material-ui/src/Table/index.js

@@ -1 +1,3 @@
 export { default } from './Table';
+export { default as TableContext } from './TableContext';
+export { default as Tablelvl2Context } from './Tablelvl2Context';

packages/material-ui/src/TableBody/TableBody.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
+import { Tablelvl2Context } from '../Table';
 
 export const styles = {
   /* Styles applied to the root element. */
@@ -10,28 +11,22 @@ export const styles = {
   },
 };
 
-class TableBody extends React.Component {
-  getChildContext() {
-    // eslint-disable-line class-methods-use-this
-    return {
-      tablelvl2: {
-        variant: 'body',
-      },
-    };
-  }
+function TableBody(props) {
+  const { classes, className, component: Component, ...other } = props;
+  const childContext = { variant: 'body' };
 
-  render() {
-    const { classes, className, component: Component, ...other } = this.props;
-
-    return <Component className={classNames(classes.root, className)} {...other} />;
-  }
+  return (
+    <Tablelvl2Context.Provider value={childContext}>
+      <Component className={classNames(classes.root, className)} {...other} />
+    </Tablelvl2Context.Provider>
+  );
 }
 
 TableBody.propTypes = {
   /**
    * The content of the component, normally `TableRow`.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css-api) below for more details.
@@ -52,8 +47,4 @@ TableBody.defaultProps = {
   component: 'tbody',
 };
 
-TableBody.childContextTypes = {
-  tablelvl2: PropTypes.object,
-};
-
 export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);

packages/material-ui/src/TableBody/TableBody.test.js

@@ -1,41 +1,61 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { createMount, findOutermostIntrinsic, getClasses } from '../test-utils';
 import TableBody from './TableBody';
+import { Tablelvl2Context } from '../Table';
 
 describe('<TableBody />', () => {
-  let shallow;
+  let mount;
   let classes;
 
+  function mountInTable(node) {
+    const wrapper = mount(<table>{node}</table>);
+    return wrapper.childAt(0);
+  }
+
   before(() => {
-    shallow = createShallow({ dive: true });
-    classes = getClasses(<TableBody>foo</TableBody>);
+    mount = createMount();
+
+    classes = getClasses(<TableBody />);
+  });
+
+  after(() => {
+    mount.cleanUp();
   });
 
   it('should render a tbody', () => {
-    const wrapper = shallow(<TableBody>foo</TableBody>);
-    assert.strictEqual(wrapper.name(), 'tbody');
+    const wrapper = mountInTable(<TableBody />);
+    assert.strictEqual(wrapper.getDOMNode().nodeName, 'TBODY');
   });
 
   it('should render a div', () => {
-    const wrapper = shallow(<TableBody component="div">foo</TableBody>);
-    assert.strictEqual(wrapper.name(), 'div');
+    const wrapper = mount(<TableBody component="div">foo</TableBody>);
+    assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV');
   });
 
   it('should render with the user and root class', () => {
-    const wrapper = shallow(<TableBody className="woofTableBody">foo</TableBody>);
-    assert.strictEqual(wrapper.hasClass('woofTableBody'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const wrapper = mountInTable(<TableBody className="woofTableBody" />);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass('woofTableBody'), true);
+    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true);
   });
 
   it('should render children', () => {
     const children = <tr className="test" />;
-    const wrapper = shallow(<TableBody>{children}</TableBody>);
-    assert.strictEqual(wrapper.childAt(0).equals(children), true);
+    const wrapper = mountInTable(<TableBody>{children}</TableBody>);
+    assert.strictEqual(wrapper.contains(children), true);
   });
 
   it('should define table.body in the child context', () => {
-    const wrapper = shallow(<TableBody>foo</TableBody>);
-    assert.strictEqual(wrapper.instance().getChildContext().tablelvl2.variant, 'body');
+    let context;
+    mountInTable(
+      <TableBody>
+        <Tablelvl2Context.Consumer>
+          {value => {
+            context = value;
+          }}
+        </Tablelvl2Context.Consumer>
+      </TableBody>,
+    );
+    assert.strictEqual(context.variant, 'body');
   });
 });