Completely updated React, fixed #11, (hopefully)

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

@@ -1,33 +1,42 @@
 import * as React from 'react';
 import { StandardProps } from '..';
-import { ModalProps, ModalClassKey } from '../internal/Modal';
-import { TransitionDuration } from '../internal/transition';
+import { ModalProps, ModalClassKey } from '../Modal';
 import { SlideProps } from '../transitions/Slide';
+import { PaperProps } from '../Paper';
 import { Theme } from '../styles/createMuiTheme';
+import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
 
-export interface DrawerProps extends StandardProps<
-  ModalProps,
-  DrawerClassKey
-> {
+export interface DrawerProps
+  extends StandardProps<
+      ModalProps & Partial<TransitionHandlerProps>,
+      DrawerClassKey,
+      'open' | 'children'
+    > {
   anchor?: 'left' | 'top' | 'right' | 'bottom';
+  children?: React.ReactNode;
   elevation?: number;
-  transitionDuration?: TransitionDuration;
+  ModalProps?: Partial<ModalProps>;
   open?: boolean;
-  SlideProps?: SlideProps;
+  PaperProps?: Partial<PaperProps>;
+  SlideProps?: Partial<SlideProps>;
   theme?: Theme;
-  type?: 'permanent' | 'persistent' | 'temporary';
+  transitionDuration?: TransitionProps['timeout'];
+  variant?: 'permanent' | 'persistent' | 'temporary';
 }
 
 export type DrawerClassKey =
   | ModalClassKey
-  | 'paper'
-  | 'anchorLeft'
-  | 'anchorRight'
-  | 'anchorTop'
-  | 'anchorBottom'
   | 'docked'
-  | 'modal'
-  ;
+  | 'paper'
+  | 'paperAnchorLeft'
+  | 'paperAnchorRight'
+  | 'paperAnchorTop'
+  | 'paperAnchorBottom'
+  | 'paperAnchorDockedLeft'
+  | 'paperAnchorDockedTop'
+  | 'paperAnchorDockedRight'
+  | 'paperAnchorDockedBottom'
+  | 'modal';
 
 declare const Drawer: React.ComponentType<DrawerProps>;
 

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

@@ -1,18 +1,17 @@
-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 Modal
 
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Modal from '../internal/Modal';
+import Modal from '../Modal';
 import withStyles from '../styles/withStyles';
 import Slide from '../transitions/Slide';
 import Paper from '../Paper';
-import { capitalizeFirstLetter } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
 import { duration } from '../styles/transitions';
 
-
 function getSlideDirection(anchor) {
   if (anchor === 'left') {
     return 'right';
@@ -36,14 +35,17 @@ export const styles = theme => ({
     flexDirection: 'column',
     height: '100vh',
     flex: '1 0 auto',
+    zIndex: theme.zIndex.drawer,
+    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    // temporary style
     position: 'fixed',
     top: 0,
-    zIndex: theme.zIndex.navDrawer,
-    willChange: 'transform',
+    // We disable the focus ring for mouse, touch and keyboard users.
+    // At some point, it would be better to keep it for keyboard users.
+    // :focus-ring CSS pseudo-class will help.
     '&:focus': {
       outline: 'none'
-    },
-    WebkitOverflowScrolling: 'touch' // Add iOS momentum scrolling.
+    }
   },
   paperAnchorLeft: {
     left: 0,
@@ -70,10 +72,16 @@ export const styles = theme => ({
     maxHeight: '100vh'
   },
   paperAnchorDockedLeft: {
-    borderRight: `1px solid ${theme.palette.text.divider}`
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  paperAnchorDockedTop: {
+    borderBottom: `1px solid ${theme.palette.divider}`
   },
   paperAnchorDockedRight: {
-    borderLeft: `1px solid ${theme.palette.text.divider}`
+    borderLeft: `1px solid ${theme.palette.divider}`
+  },
+  paperAnchorDockedBottom: {
+    borderTop: `1px solid ${theme.palette.divider}`
   },
   modal: {} // Just here so people can override the style.
 });
@@ -104,36 +112,35 @@ class Drawer extends React.Component {
       classes,
       className,
       elevation,
-      transitionDuration,
       ModalProps,
-      onRequestClose,
+      onClose,
       open,
+      PaperProps,
       SlideProps,
       theme,
-      type
+      transitionDuration,
+      variant
     } = _props,
-          other = _objectWithoutProperties(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'transitionDuration', 'ModalProps', 'onRequestClose', 'open', 'SlideProps', 'theme', 'type']);
+          other = _objectWithoutProperties(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'ModalProps', 'onClose', 'open', 'PaperProps', 'SlideProps', 'theme', 'transitionDuration', 'variant']);
 
-    const rtl = theme.direction === 'rtl';
     let anchor = anchorProp;
-    if (rtl && ['left', 'right'].includes(anchor)) {
+    if (theme.direction === 'rtl' && ['left', 'right'].includes(anchor)) {
       anchor = anchor === 'left' ? 'right' : 'left';
     }
 
     const drawer = React.createElement(
       Paper,
-      {
-        elevation: type === 'temporary' ? elevation : 0,
+      _extends({
+        elevation: variant === 'temporary' ? elevation : 0,
         square: true,
-        className: classNames(classes.paper, {
-          [classes[`paperAnchor${capitalizeFirstLetter(anchor)}`]]: type !== 'permanent',
-          [classes[`paperAnchorDocked${capitalizeFirstLetter(anchor)}`]]: type !== 'temporary'
+        className: classNames(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
+          [classes[`paperAnchorDocked${capitalize(anchor)}`]]: variant !== 'temporary'
         })
-      },
+      }, PaperProps),
       children
     );
 
-    if (type === 'permanent') {
+    if (variant === 'permanent') {
       return React.createElement(
         'div',
         _extends({ className: classNames(classes.docked, className) }, other),
@@ -152,7 +159,7 @@ class Drawer extends React.Component {
       drawer
     );
 
-    if (type === 'persistent') {
+    if (variant === 'persistent') {
       return React.createElement(
         'div',
         _extends({ className: classNames(classes.docked, className) }, other),
@@ -160,28 +167,86 @@ class Drawer extends React.Component {
       );
     }
 
-    // type === temporary
+    // variant === temporary
     return React.createElement(
       Modal,
       _extends({
-        BackdropTransitionDuration: transitionDuration,
+        BackdropProps: {
+          transitionDuration
+        },
         className: classNames(classes.modal, className),
-        show: open,
-        onRequestClose: onRequestClose
+        open: open,
+        onClose: onClose
       }, other, ModalProps),
       slidingDrawer
     );
   }
 }
 
+Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Side from which the drawer will appear.
+   */
+  anchor: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
+  /**
+   * The contents of the drawer.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The elevation of the drawer.
+   */
+  elevation: PropTypes.number,
+  /**
+   * Properties applied to the `Modal` element.
+   */
+  ModalProps: PropTypes.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * If `true`, the drawer is open.
+   */
+  open: PropTypes.bool,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * Properties applied to the `Slide` element.
+   */
+  SlideProps: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })]),
+  /**
+   * The type of drawer.
+   */
+  variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
+} : {};
+
 Drawer.defaultProps = {
   anchor: 'left',
   elevation: 16,
-  transitionDuration: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  },
   open: false,
-  type: 'temporary' // Mobile first.
+  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
+  variant: 'temporary' // Mobile first.
 };
-export default withStyles(styles, { flip: false, withTheme: true, name: 'MuiDrawer' })(Drawer);
+
+export default withStyles(styles, { name: 'MuiDrawer', flip: false, withTheme: true })(Drawer);