Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Hidden/HiddenCss.js.flow

@@ -1,45 +1,29 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
-
 import React from 'react';
-import type { Node } from 'react';
+import PropTypes from 'prop-types';
 import warning from 'warning';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
-import { capitalizeFirstLetter } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
 import withStyles from '../styles/withStyles';
-import type { HiddenProps } from './types';
 
-export type Props = HiddenProps & {
-  /**
-   * The content of the component.
-   */
-  children: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: Object,
-};
-
-function generateStyles(theme) {
+const styles = theme => {
   const hidden = {
     display: 'none',
   };
 
-  return breakpointKeys.reduce((styles, key) => {
-    styles[`only${capitalizeFirstLetter(key)}`] = {
+  return breakpointKeys.reduce((acc, key) => {
+    acc[`only${capitalize(key)}`] = {
       [theme.breakpoints.only(key)]: hidden,
     };
-    styles[`${key}Up`] = {
+    acc[`${key}Up`] = {
       [theme.breakpoints.up(key)]: hidden,
     };
-    styles[`${key}Down`] = {
+    acc[`${key}Down`] = {
       [theme.breakpoints.down(key)]: hidden,
     };
 
-    return styles;
+    return acc;
   }, {});
-}
-
-const styles = (theme: Object) => generateStyles(theme);
+};
 
 /**
  * @ignore - internal component.
@@ -48,17 +32,18 @@ function HiddenCss(props: Props) {
   const {
     children,
     classes,
-    only,
-    xsUp,
-    smUp,
-    mdUp,
+    className,
+    lgDown,
     lgUp,
+    mdDown,
+    mdUp,
+    only,
+    smDown,
+    smUp,
+    xlDown,
     xlUp,
     xsDown,
-    smDown,
-    mdDown,
-    lgDown,
-    xlDown,
+    xsUp,
     ...other
   } = props;
 
@@ -70,7 +55,11 @@ function HiddenCss(props: Props) {
     )} by \`<Hidden />\`.`,
   );
 
-  const className = [];
+  const classNames = [];
+
+  if (className) {
+    classNames.push(className);
+  }
 
   for (let i = 0; i < breakpointKeys.length; i += 1) {
     const breakpoint = breakpointKeys[i];
@@ -78,18 +67,88 @@ function HiddenCss(props: Props) {
     const breakpointDown = props[`${breakpoint}Down`];
 
     if (breakpointUp) {
-      className.push(classes[`${breakpoint}Up`]);
+      classNames.push(classes[`${breakpoint}Up`]);
     }
     if (breakpointDown) {
-      className.push(classes[`${breakpoint}Down`]);
+      classNames.push(classes[`${breakpoint}Down`]);
     }
   }
 
   if (only) {
-    className.push(classes[`only${capitalizeFirstLetter(only)}`]);
+    const onlyBreakpoints = Array.isArray(only) ? only : [only];
+    onlyBreakpoints.forEach(breakpoint => {
+      classNames.push(classes[`only${capitalize(breakpoint)}`]);
+    });
   }
 
-  return <span className={className}>{children}</span>;
+  return <div className={classNames.join(' ')}>{children}</div>;
 }
 
+HiddenCss.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Specify which implementation to use.  'js' is the default, 'css' works better for server
+   * side rendering.
+   */
+  implementation: PropTypes.oneOf(['js', 'css']),
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  lgDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  lgUp: PropTypes.bool,
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  mdDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  mdUp: PropTypes.bool,
+  /**
+   * Hide the given breakpoint(s).
+   */
+  only: PropTypes.oneOfType([
+    PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+    PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])),
+  ]),
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  smDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  smUp: PropTypes.bool,
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  xlDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  xlUp: PropTypes.bool,
+  /**
+   * If true, screens this size and down will be hidden.
+   */
+  xsDown: PropTypes.bool,
+  /**
+   * If true, screens this size and up will be hidden.
+   */
+  xsUp: PropTypes.bool,
+};
+
 export default withStyles(styles, { name: 'MuiHiddenCss' })(HiddenCss);