use the componentPropType everywhere

packages/material-ui-lab/src/Slider/Slider.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import withStyles from '@material-ui/core/styles/withStyles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { fade } from '@material-ui/core/styles/colorManipulator';
-import componentProp from '@material-ui/utils/componentProp';
+import { componentPropType } from '@material-ui/utils';
 import clamp from '../utils/clamp';
 
 export const styles = theme => {
@@ -558,7 +558,7 @@ Slider.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentProp,
+  component: componentPropType,
   /**
    * If `true`, the slider will be disabled.
    */

packages/material-ui-utils/src/componentProp.js → packages/material-ui-utils/src/componentPropType.js

@@ -9,7 +9,12 @@ import * as ReactIs from 'react-is';
  *                             that will throw if nullish values are passed
  */
 function createComponentProp(isRequired) {
-  return function componentProp(props, key, componentName, location, propFullName) {
+  /* istanbul ignore if */
+  if (process.env.NODE_ENV === 'production') {
+    return () => null;
+  }
+
+  return function componentPropType(props, key, componentName, location, propFullName) {
     const prop = props[key];
     const propName = propFullName || key;
     let message;
@@ -37,7 +42,7 @@ function createComponentProp(isRequired) {
   };
 }
 
-const componentProp = createComponentProp(false);
-componentProp.isRequired = createComponentProp(true);
+const componentPropType = createComponentProp(false);
+componentPropType.isRequired = createComponentProp(true);
 
-export default componentProp;
+export default componentPropType;

packages/material-ui-utils/src/componentProp.test.js → packages/material-ui-utils/src/componentPropType.test.js

@@ -2,9 +2,9 @@ import { assert } from 'chai';
 import PropTypes from 'prop-types';
 import React from 'react';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
-import componentProp from './componentProp';
+import componentPropType from './componentPropType';
 
-describe('componentProp', () => {
+describe('componentPropType', () => {
   function testPropType(value, validator, expectedError) {
     const propName = 'children';
     const componentName = 'ComponentName';
@@ -41,7 +41,7 @@ describe('componentProp', () => {
     it('rejectes null', () => {
       testPropType(
         undefined,
-        componentProp.isRequired,
+        componentPropType.isRequired,
         'The prop `children` is marked as required in `ComponentName`, ' +
           'but its value is `undefined`.',
       );
@@ -50,15 +50,15 @@ describe('componentProp', () => {
     it('rejects undefined', () => {
       testPropType(
         null,
-        componentProp.isRequired,
+        componentPropType.isRequired,
         'The prop `children` is marked as required in `ComponentName`, but its value is `object`.',
       );
     });
   });
 
   it('supports optional props', () => {
-    testPropType(undefined, componentProp, null);
-    testPropType(null, componentProp, null);
+    testPropType(undefined, componentPropType, null);
+    testPropType(null, componentPropType, null);
   });
 
   it('accepts strings, class and functional components', () => {
@@ -69,23 +69,23 @@ describe('componentProp', () => {
       }
     }
 
-    testPropType(ClassComponent, componentProp, null);
-    testPropType(() => null, componentProp, null);
-    testPropType('will accept any string though', componentProp, null);
+    testPropType(ClassComponent, componentPropType, null);
+    testPropType(() => null, componentPropType, null);
+    testPropType('will accept any string though', componentPropType, null);
   });
 
   it('rejects other types with their type hint', () => {
     testPropType(
       1,
-      componentProp,
+      componentPropType,
       'Invalid prop `children` of type `number` supplied to `ComponentName`, expected a component',
     );
   });
 
   it('rejects objects', () => {
     testPropType(
       {},
-      componentProp,
+      componentPropType,
       'Invalid prop `children` of type `object` supplied to `ComponentName`, expected a component',
     );
   });

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

@@ -1,4 +1,4 @@
-export { default as componentProp } from './componentProp';
+export { default as componentPropType } from './componentPropType';
 export { default as exactProp } from './exactProp';
 export { default as getDisplayName } from './getDisplayName';
 export { default as ponyfillGlobal } from './ponyfillGlobal';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -121,7 +122,7 @@ Avatar.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * Attributes applied to the `img` element if the component
    * is used to display an image.

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 
@@ -116,7 +117,7 @@ Badge.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the badge will be invisible.
    */

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

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
@@ -305,7 +306,7 @@ Button.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the button will be disabled.
    */

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import keycode from 'keycode';
+import { componentPropType } from '@material-ui/utils';
 import ownerWindow from '../utils/ownerWindow';
 import withStyles from '../styles/withStyles';
 import NoSsr from '../NoSsr';
@@ -350,7 +351,7 @@ ButtonBase.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the base button will be disabled.
    */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -34,7 +35,7 @@ CardContent.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
 };
 
 CardContent.defaultProps = {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
@@ -116,7 +117,7 @@ CardHeader.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the children won't be wrapped by a Typography component.
    * This can be useful to render an alternative Typography variant by wrapping

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -62,7 +63,7 @@ CardMedia.propTypes = {
    * Component for rendering image.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * Image to be displayed as a background image.
    * Either `image` or `src` prop must be specified.

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode';
 import warning from 'warning';
+import { componentPropType } from '@material-ui/utils';
 import CancelIcon from '../internal/svg-icons/Cancel';
 import withStyles from '../styles/withStyles';
 import { emphasize, fade } from '../styles/colorManipulator';
@@ -426,7 +427,7 @@ Chip.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * Override the default delete icon element. Shown only if `onDelete` is set.
    */

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

@@ -4,6 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { duration } from '../styles/transitions';
 import { getTransitionProps } from '../transitions/utils';
@@ -203,7 +204,7 @@ Collapse.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the component will transition in.
    */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import chainPropTypes from '../utils/chainPropTypes';
@@ -83,7 +84,7 @@ Divider.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the divider will be indented.
    * __WARNING__: `inset` is deprecated.

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

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 import { capitalize } from '../utils/helpers';
@@ -166,7 +167,7 @@ Fab.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the button will be disabled.
    */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import { isFilled, isAdornedStart } from '../InputBase/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
@@ -173,7 +174,7 @@ FormControl.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the label, input and helper text should be displayed in a disabled state.
    */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
 import withStyles from '../styles/withStyles';
@@ -103,7 +104,7 @@ FormHelperText.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the helper text should be displayed in a disabled state.
    */

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
 import withStyles from '../styles/withStyles';
@@ -109,7 +110,7 @@ FormLabel.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the label should be displayed in a disabled state.
    */

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

@@ -12,6 +12,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
 import requirePropFactory from '../utils/requirePropFactory';
@@ -274,7 +275,7 @@ Grid.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -93,7 +94,7 @@ GridList.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  component: componentPropType,
   /**
    * Number of px for the spacing between tiles.
    */