Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/AppBar/AppBar.d.ts

@@ -1,23 +1,20 @@
 import { PropTypes, StandardProps } from '..';
-import { PaperProps, PaperClassKey } from '../Paper/Paper';
+import { PaperProps, PaperClassKey } from '../Paper';
 
-export interface AppBarProps extends StandardProps<
-  PaperProps,
-  AppBarClassKey
-> {
+export interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
   color?: PropTypes.Color;
-  position?: 'static' | 'fixed' | 'absolute';
+  position?: 'fixed' | 'absolute' | 'sticky' | 'static';
 }
 
 export type AppBarClassKey =
   | PaperClassKey
   | 'positionFixed'
   | 'positionAbsolute'
+  | 'positionSticky'
   | 'positionStatic'
   | 'colorDefault'
   | 'colorPrimary'
-  | 'colorAccent'
-  ;
+  | 'colorSecondary';
 
 declare const AppBar: React.ComponentType<AppBarProps>;
 

goTorrentWebUI/node_modules/material-ui/es/AppBar/AppBar.js

@@ -1,61 +1,68 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 // @inheritedComponent Paper
 
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { capitalizeFirstLetter } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
 import Paper from '../Paper';
 
-export const styles = theme => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
-    zIndex: theme.zIndex.appBar,
-    flexShrink: 0
-  },
-  positionFixed: {
-    position: 'fixed',
-    top: 0,
-    left: 'auto',
-    right: 0
-  },
-  positionAbsolute: {
-    position: 'absolute',
-    top: 0,
-    left: 'auto',
-    right: 0
-  },
-  positionStatic: {
-    position: 'static',
-    flexShrink: 0
-  },
-  colorDefault: {
-    backgroundColor: theme.palette.background.appBar,
-    color: theme.palette.getContrastText(theme.palette.background.appBar)
-  },
-  colorPrimary: {
-    backgroundColor: theme.palette.primary[500],
-    color: theme.palette.getContrastText(theme.palette.primary[500])
-  },
-  colorAccent: {
-    backgroundColor: theme.palette.secondary.A200,
-    color: theme.palette.getContrastText(theme.palette.secondary.A200)
-  }
-});
+export const styles = theme => {
+  const backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
+
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
+      zIndex: theme.zIndex.appBar,
+      flexShrink: 0
+    },
+    positionFixed: {
+      position: 'fixed',
+      top: 0,
+      left: 'auto',
+      right: 0
+    },
+    positionAbsolute: {
+      position: 'absolute',
+      top: 0,
+      left: 'auto',
+      right: 0
+    },
+    positionSticky: {
+      position: 'sticky',
+      top: 0,
+      left: 'auto',
+      right: 0
+    },
+    positionStatic: {
+      position: 'static'
+    },
+    colorDefault: {
+      backgroundColor: backgroundColorDefault,
+      color: theme.palette.getContrastText(backgroundColorDefault)
+    },
+    colorPrimary: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText
+    },
+    colorSecondary: {
+      backgroundColor: theme.palette.secondary.main,
+      color: theme.palette.secondary.contrastText
+    }
+  };
+};
 
 function AppBar(props) {
   const { children, classes, className: classNameProp, color, position } = props,
         other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'position']);
 
-  const className = classNames(classes.root, classes[`position${capitalizeFirstLetter(position)}`], {
-    [classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'inherit',
+  const className = classNames(classes.root, classes[`position${capitalize(position)}`], {
+    [classes[`color${capitalize(color)}`]]: color !== 'inherit',
     'mui-fixed': position === 'fixed' // Useful for the Dialog
   }, classNameProp);
 
@@ -66,6 +73,31 @@ function AppBar(props) {
   );
 }
 
+AppBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']),
+  /**
+   * The positioning type. The behavior of the different options is described
+   * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
+   */
+  position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static'])
+} : {};
+
 AppBar.defaultProps = {
   color: 'primary',
   position: 'fixed'