Merge pull request #6820 from oliviertassinari/hidden-component

[Hidden] Remove one degree of freedom

docs/src/pages/layout/hidden/BreakpointDown.js

@@ -42,26 +42,21 @@ function BreakpointDown(props) {
       <Typography type="subheading" className={classes.typography}>
         Current width: {props.width}
       </Typography>
-      <Hidden
-        xsDown
-        component={<Paper className={classes.paper}>xsDown</Paper>}
-      />
-      <Hidden
-        smDown
-        component={<Paper className={classes.paper}>smDown</Paper>}
-      />
-      <Hidden
-        mdDown
-        component={<Paper className={classes.paper}>mdDown</Paper>}
-      />
-      <Hidden
-        lgDown
-        component={<Paper className={classes.paper}>lgDown</Paper>}
-      />
-      <Hidden
-        xlDown
-        component={<Paper className={classes.paper}>xlDown</Paper>}
-      />
+      <Hidden xsDown>
+        <Paper className={classes.paper}>xsDown</Paper>
+      </Hidden>
+      <Hidden smDown>
+        <Paper className={classes.paper}>smDown</Paper>
+      </Hidden>
+      <Hidden mdDown>
+        <Paper className={classes.paper}>mdDown</Paper>
+      </Hidden>
+      <Hidden lgDown>
+        <Paper className={classes.paper}>lgDown</Paper>
+      </Hidden>
+      <Hidden xlDown>
+        <Paper className={classes.paper}>xlDown</Paper>
+      </Hidden>
     </div>
   );
 }

docs/src/pages/layout/hidden/BreakpointOnly.js

@@ -42,18 +42,15 @@ function BreakpointOnly(props) {
       <Typography type="subheading" className={classes.typography}>
         Current width: {props.width}
       </Typography>
-      <Hidden
-        only="lg"
-        component={<Paper className={classes.paper}>Hidden on lg</Paper>}
-      />
-      <Hidden
-        only="sm"
-        component={<Paper className={classes.paper}>Hidden on sm</Paper>}
-      />
-      <Hidden
-        only={['sm', 'lg']}
-        component={<Paper className={classes.paper}>Hidden on sm and lg</Paper>}
-      />
+      <Hidden only="lg">
+        <Paper className={classes.paper}>Hidden on lg</Paper>
+      </Hidden>
+      <Hidden only="sm">
+        <Paper className={classes.paper}>Hidden on sm</Paper>
+      </Hidden>
+      <Hidden only={['sm', 'lg']}>
+        <Paper className={classes.paper}>Hidden on sm and lg</Paper>
+      </Hidden>
     </div>
   );
 }

docs/src/pages/layout/hidden/BreakpointUp.js

@@ -42,26 +42,21 @@ function BreakpointUp(props) {
       <Typography type="subheading" className={classes.typography}>
         Current width: {props.width}
       </Typography>
-      <Hidden
-        xsUp
-        component={<Paper className={classes.paper}>xsUp</Paper>}
-      />
-      <Hidden
-        smUp
-        component={<Paper className={classes.paper}>smUp</Paper>}
-      />
-      <Hidden
-        mdUp
-        component={<Paper className={classes.paper}>mdUp</Paper>}
-      />
-      <Hidden
-        lgUp
-        component={<Paper className={classes.paper}>lgUp</Paper>}
-      />
-      <Hidden
-        xlUp
-        component={<Paper className={classes.paper}>xlUp</Paper>}
-      />
+      <Hidden xsUp>
+        <Paper className={classes.paper}>xsUp</Paper>
+      </Hidden>
+      <Hidden smUp>
+        <Paper className={classes.paper}>smUp</Paper>
+      </Hidden>
+      <Hidden mdUp>
+        <Paper className={classes.paper}>mdUp</Paper>
+      </Hidden>
+      <Hidden lgUp>
+        <Paper className={classes.paper}>lgUp</Paper>
+      </Hidden>
+      <Hidden xlUp>
+        <Paper className={classes.paper}>xlUp</Paper>
+      </Hidden>
     </div>
   );
 }

scripts/build-api-docs.js

@@ -1,6 +1,7 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 /* eslint-disable no-console */
 // Track bug on imported flow type: https://github.com/reactjs/react-docgen/issues/180
+
 import fs from 'fs';
 import path from 'path';
 import * as reactDocgen from 'react-docgen';

src/AppBar/AppBar.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Avatar/Avatar.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Badge/Badge.spec.js

@@ -1,4 +1,5 @@
-// @flow weak
+// @flow
+
 import React from 'react';
 import { createShallow } from 'src/test-utils';
 import { assert } from 'chai';

src/BottomNavigation/BottomNavigation.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/BottomNavigation/BottomNavigationButton.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Button/Button.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Card/Card.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Card/CardActions.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Card/CardContent.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Card/CardHeader.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Card/CardMedia.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Checkbox/Checkbox.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import { assert } from 'chai';
 import { createShallow } from 'src/test-utils';

src/Chip/Chip.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import keycode from 'keycode';

src/Dialog/Dialog.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Dialog/DialogActions.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Dialog/DialogContent.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Dialog/DialogContentText.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Dialog/DialogTitle.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Divider/Divider.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Drawer/Drawer.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Form/FormControl.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Form/FormGroup.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Form/FormLabel.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Grid/Grid.js

@@ -274,7 +274,9 @@ function Grid(props: Props, context: any) {
 
   if (hidden) {
     return (
-      <Hidden {...hidden} component={<ComponentProp {...gridProps} />} />
+      <Hidden {...hidden}>
+        <ComponentProp {...gridProps} />
+      </Hidden>
     );
   }
 

src/Grid/Grid.spec.js

@@ -1,4 +1,4 @@
-// @flow weak
+// @flow
 
 import React from 'react';
 import { assert } from 'chai';

src/Hidden/Hidden.js

@@ -1,44 +1,34 @@
 // @flow
-import React, { Element } from 'react';
+
+import React from 'react';
 import HiddenJs from './HiddenJs';
 import type { HiddenProps } from './types';
 
 type Props = HiddenProps & {
-  /**
-   * If string or Function, component is used as the root node and all other props are passed
-   * including children.
-   * If an Element, it will be rendered as-is and no other props are propagated.
-   */
-  component?: string | Function | Element<*>,
   /**
    * Specify which implementation to use.  'js' is the default, 'css' works better for server
    * side rendering.
    */
   implementation?: 'js' | 'css'
-}
+};
 
 /**
  * Responsively hides children based on the selected implementation.
  */
 function Hidden(props: Props) {
   const {
-    component: componentProp,
     implementation,
     ...other
   } = props;
 
-  // workaround: see https://github.com/facebook/flow/issues/1660#issuecomment-297775427
-  const component = componentProp || Hidden.defaultProps.component;
-
   if (implementation === 'js') {
-    return <HiddenJs {...other} component={component} />;
+    return <HiddenJs {...other} />;
   }
 
   throw new Error('<Hidden implementation="css" /> is not yet implemented');
 }
 
 Hidden.defaultProps = {
-  component: 'div',
   implementation: 'js',
   xsUp: false,
   smUp: false,

src/Hidden/Hidden.spec.js

@@ -0,0 +1,28 @@
+// @flow
+
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from 'src/test-utils';
+import Hidden from './Hidden';
+import HiddenJs from './HiddenJs';
+
+describe('<Hidden />', () => {
+  let shallow;
+
+  before(() => {
+    shallow = createShallow();
+  });
+
+  describe('props: implementation', () => {
+    it('should use HiddenJs by default', () => {
+      const wrapper = shallow(<Hidden>{'Hello'}</Hidden>);
+      assert.strictEqual(wrapper.find(HiddenJs).length, 1);
+    });
+
+    it('should use change the implementation', () => {
+      assert.throws(() => {
+        shallow(<Hidden implementation="css">{'Hello'}</Hidden>);
+      }, 'is not yet implemented');
+    });
+  });
+});