Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Divider/Divider.js.flow

@@ -1,24 +1,24 @@
-// @flow
-
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
+import { fade } from '../styles/colorManipulator';
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     height: 1,
     margin: 0, // Reset browser default style.
     border: 'none',
     flexShrink: 0,
   },
-  default: {
-    backgroundColor: theme.palette.text.divider,
-  },
   inset: {
     marginLeft: 72,
   },
+  default: {
+    backgroundColor: theme.palette.divider,
+  },
   light: {
-    backgroundColor: theme.palette.text.lightDivider,
+    backgroundColor: fade(theme.palette.divider, 0.08),
   },
   absolute: {
     position: 'absolute',
@@ -28,48 +28,58 @@ export const styles = (theme: Object) => ({
   },
 });
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  absolute?: boolean,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * If `true`, the divider will be indented.
-   */
-  inset?: boolean,
-  /**
-   * If `true`, the divider will have a lighter color.
-   */
-  light?: boolean,
-};
-
-function Divider(props: ProvidedProps & Props) {
-  const { absolute, classes, className: classNameProp, inset, light, ...other } = props;
+function Divider(props) {
+  const {
+    absolute,
+    classes,
+    className: classNameProp,
+    component: Component,
+    inset,
+    light,
+    ...other
+  } = props;
 
   const className = classNames(
     classes.root,
     {
       [classes.absolute]: absolute,
       [classes.inset]: inset,
-      [light ? classes.light : classes.default]: true,
     },
+    light ? classes.light : classes.default,
     classNameProp,
   );
 
-  return <hr className={className} {...other} />;
+  return <Component className={className} {...other} />;
 }
 
+Divider.propTypes = {
+  absolute: PropTypes.bool,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * 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]),
+  /**
+   * If `true`, the divider will be indented.
+   */
+  inset: PropTypes.bool,
+  /**
+   * If `true`, the divider will have a lighter color.
+   */
+  light: PropTypes.bool,
+};
+
 Divider.defaultProps = {
   absolute: false,
+  component: 'hr',
   inset: false,
   light: false,
 };