Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/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/Drawer/Drawer.js

@@ -41,11 +41,15 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _Modal = require('../internal/Modal');
+var _Modal = require('../Modal');
 
 var _Modal2 = _interopRequireDefault(_Modal);
 
@@ -67,10 +71,6 @@ var _transitions = require('../styles/transitions');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
-
-var babelPluginFlowReactPropTypes_proptype_TransitionDuration = require('../internal/transition').babelPluginFlowReactPropTypes_proptype_TransitionDuration || require('prop-types').any;
-
 function getSlideDirection(anchor) {
   if (anchor === 'left') {
     return 'right';
@@ -82,7 +82,7 @@ function getSlideDirection(anchor) {
 
   // (anchor === 'bottom')
   return 'up';
-}
+} // @inheritedComponent Modal
 
 var styles = exports.styles = function styles(theme) {
   return {
@@ -95,14 +95,17 @@ var styles = exports.styles = function 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,
@@ -129,84 +132,21 @@ var styles = exports.styles = function 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.
   };
 };
 
-var babelPluginFlowReactPropTypes_proptype_Anchor = require('prop-types').oneOf(['left', 'top', 'right', 'bottom']);
-
-var babelPluginFlowReactPropTypes_proptype_Type = require('prop-types').oneOf(['permanent', 'persistent', 'temporary']);
-
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * Side from which the drawer will appear.
-   */
-  anchor: require('prop-types').oneOf(['left', 'top', 'right', 'bottom']),
-
-  /**
-   * The contents of the drawer.
-   */
-  children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * The elevation of the drawer.
-   */
-  elevation: require('prop-types').number,
-
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  transitionDuration: typeof babelPluginFlowReactPropTypes_proptype_TransitionDuration === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionDuration : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionDuration),
-
-  /**
-   * Properties applied to the `Modal` element.
-   */
-  ModalProps: require('prop-types').object,
-
-  /**
-   * Callback fired when the component requests to be closed.
-   *
-   * @param {object} event The event source of the callback
-   */
-  onRequestClose: require('prop-types').func,
-
-  /**
-   * If `true`, the drawer is open.
-   */
-  open: require('prop-types').bool,
-
-  /**
-   * @igonre
-   */
-  theme: require('prop-types').object.isRequired,
-
-  /**
-   * Properties applied to the `Slide` element.
-   */
-  SlideProps: require('prop-types').object,
-
-  /**
-   * The type of drawer.
-   */
-  type: require('prop-types').oneOf(['permanent', 'persistent', 'temporary'])
-};
-
 var Drawer = function (_React$Component) {
   (0, _inherits3.default)(Drawer, _React$Component);
 
@@ -239,41 +179,39 @@ var Drawer = function (_React$Component) {
   }, {
     key: 'render',
     value: function render() {
-      var _classNames;
-
       var _props = this.props,
           anchorProp = _props.anchor,
           children = _props.children,
           classes = _props.classes,
           className = _props.className,
           elevation = _props.elevation,
-          transitionDuration = _props.transitionDuration,
           ModalProps = _props.ModalProps,
-          onRequestClose = _props.onRequestClose,
+          onClose = _props.onClose,
           open = _props.open,
+          PaperProps = _props.PaperProps,
           SlideProps = _props.SlideProps,
           theme = _props.theme,
-          type = _props.type,
-          other = (0, _objectWithoutProperties3.default)(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'transitionDuration', 'ModalProps', 'onRequestClose', 'open', 'SlideProps', 'theme', 'type']);
+          transitionDuration = _props.transitionDuration,
+          variant = _props.variant,
+          other = (0, _objectWithoutProperties3.default)(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'ModalProps', 'onClose', 'open', 'PaperProps', 'SlideProps', 'theme', 'transitionDuration', 'variant']);
 
 
-      var rtl = theme.direction === 'rtl';
       var anchor = anchorProp;
-      if (rtl && ['left', 'right'].includes(anchor)) {
+      if (theme.direction === 'rtl' && ['left', 'right'].includes(anchor)) {
         anchor = anchor === 'left' ? 'right' : 'left';
       }
 
       var drawer = _react2.default.createElement(
         _Paper2.default,
-        {
-          elevation: type === 'temporary' ? elevation : 0,
+        (0, _extends3.default)({
+          elevation: variant === 'temporary' ? elevation : 0,
           square: true,
-          className: (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['paperAnchor' + (0, _helpers.capitalizeFirstLetter)(anchor)], type !== 'permanent'), (0, _defineProperty3.default)(_classNames, classes['paperAnchorDocked' + (0, _helpers.capitalizeFirstLetter)(anchor)], type !== 'temporary'), _classNames))
-        },
+          className: (0, _classnames2.default)(classes.paper, classes['paperAnchor' + (0, _helpers.capitalize)(anchor)], (0, _defineProperty3.default)({}, classes['paperAnchorDocked' + (0, _helpers.capitalize)(anchor)], variant !== 'temporary'))
+        }, PaperProps),
         children
       );
 
-      if (type === 'permanent') {
+      if (variant === 'permanent') {
         return _react2.default.createElement(
           'div',
           (0, _extends3.default)({ className: (0, _classnames2.default)(classes.docked, className) }, other),
@@ -292,7 +230,7 @@ var Drawer = function (_React$Component) {
         drawer
       );
 
-      if (type === 'persistent') {
+      if (variant === 'persistent') {
         return _react2.default.createElement(
           'div',
           (0, _extends3.default)({ className: (0, _classnames2.default)(classes.docked, className) }, other),
@@ -300,14 +238,16 @@ var Drawer = function (_React$Component) {
         );
       }
 
-      // type === temporary
+      // variant === temporary
       return _react2.default.createElement(
         _Modal2.default,
         (0, _extends3.default)({
-          BackdropTransitionDuration: transitionDuration,
+          BackdropProps: {
+            transitionDuration: transitionDuration
+          },
           className: (0, _classnames2.default)(classes.modal, className),
-          show: open,
-          onRequestClose: onRequestClose
+          open: open,
+          onClose: onClose
         }, other, ModalProps),
         slidingDrawer
       );
@@ -316,14 +256,70 @@ var Drawer = function (_React$Component) {
   return Drawer;
 }(_react2.default.Component);
 
+Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Side from which the drawer will appear.
+   */
+  anchor: _propTypes2.default.oneOf(['left', 'top', 'right', 'bottom']),
+  /**
+   * The contents of the drawer.
+   */
+  children: _propTypes2.default.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The elevation of the drawer.
+   */
+  elevation: _propTypes2.default.number,
+  /**
+   * Properties applied to the `Modal` element.
+   */
+  ModalProps: _propTypes2.default.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: _propTypes2.default.func,
+  /**
+   * If `true`, the drawer is open.
+   */
+  open: _propTypes2.default.bool,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: _propTypes2.default.object,
+  /**
+   * Properties applied to the `Slide` element.
+   */
+  SlideProps: _propTypes2.default.object,
+  /**
+   * @ignore
+   */
+  theme: _propTypes2.default.object.isRequired,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })]),
+  /**
+   * The type of drawer.
+   */
+  variant: _propTypes2.default.oneOf(['permanent', 'persistent', 'temporary'])
+} : {};
+
 Drawer.defaultProps = {
   anchor: 'left',
   elevation: 16,
-  transitionDuration: {
-    enter: _transitions.duration.enteringScreen,
-    exit: _transitions.duration.leavingScreen
-  },
   open: false,
-  type: 'temporary' // Mobile first.
+  transitionDuration: { enter: _transitions.duration.enteringScreen, exit: _transitions.duration.leavingScreen },
+  variant: 'temporary' // Mobile first.
 };
-exports.default = (0, _withStyles2.default)(styles, { flip: false, withTheme: true, name: 'MuiDrawer' })(Drawer);
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDrawer', flip: false, withTheme: true })(Drawer);

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

@@ -1,15 +1,14 @@
-// @flow
+// @inheritedComponent Modal
 
 import React from 'react';
-import type { Node } 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';
-import type { TransitionDuration } from '../internal/transition';
 
 function getSlideDirection(anchor) {
   if (anchor === 'left') {
@@ -24,7 +23,7 @@ function getSlideDirection(anchor) {
   return 'up';
 }
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   docked: {
     flex: '0 0 auto',
   },
@@ -34,14 +33,17 @@ export const styles = (theme: Object) => ({
     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,
@@ -68,96 +70,21 @@ export const styles = (theme: Object) => ({
     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.
 });
 
-export type Anchor = 'left' | 'top' | 'right' | 'bottom';
-export type Type = 'permanent' | 'persistent' | 'temporary';
-
-type ProvidedProps = {
-  anchor: Anchor,
-  classes: Object,
-  elevation: number,
-  transitionDuration: TransitionDuration,
-  open: boolean,
-  type: Type,
-};
-
-export type Props = {
-  /**
-   * Side from which the drawer will appear.
-   */
-  anchor?: Anchor,
-  /**
-   * The contents of the drawer.
-   */
-  children: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * The elevation of the drawer.
-   */
-  elevation?: number,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  transitionDuration?: TransitionDuration,
-  /**
-   * Properties applied to the `Modal` element.
-   */
-  ModalProps?: Object,
-  /**
-   * Callback fired when the component requests to be closed.
-   *
-   * @param {object} event The event source of the callback
-   */
-  onRequestClose?: Function,
-  /**
-   * If `true`, the drawer is open.
-   */
-  open?: boolean,
-  /**
-   * @igonre
-   */
-  theme: Object,
-  /**
-   * Properties applied to the `Slide` element.
-   */
-  SlideProps?: Object,
-  /**
-   * The type of drawer.
-   */
-  type?: Type,
-};
-
-type State = {
-  firstMount: boolean,
-};
-
-class Drawer extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    anchor: 'left',
-    elevation: 16,
-    transitionDuration: {
-      enter: duration.enteringScreen,
-      exit: duration.leavingScreen,
-    },
-    open: false,
-    type: 'temporary', // Mobile first.
-  };
-
+class Drawer extends React.Component {
   state = {
     // Let's assume that the Drawer will always be rendered on user space.
     // We use that state is order to skip the appear transition during the
@@ -178,36 +105,36 @@ class Drawer extends React.Component<ProvidedProps & Props, State> {
       classes,
       className,
       elevation,
-      transitionDuration,
       ModalProps,
-      onRequestClose,
+      onClose,
       open,
+      PaperProps,
       SlideProps,
       theme,
-      type,
+      transitionDuration,
+      variant,
       ...other
     } = this.props;
 
-    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 = (
       <Paper
-        elevation={type === 'temporary' ? elevation : 0}
+        elevation={variant === 'temporary' ? elevation : 0}
         square
-        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}
       </Paper>
     );
 
-    if (type === 'permanent') {
+    if (variant === 'permanent') {
       return (
         <div className={classNames(classes.docked, className)} {...other}>
           {drawer}
@@ -227,7 +154,7 @@ class Drawer extends React.Component<ProvidedProps & Props, State> {
       </Slide>
     );
 
-    if (type === 'persistent') {
+    if (variant === 'persistent') {
       return (
         <div className={classNames(classes.docked, className)} {...other}>
           {slidingDrawer}
@@ -235,13 +162,15 @@ class Drawer extends React.Component<ProvidedProps & Props, State> {
       );
     }
 
-    // type === temporary
+    // variant === temporary
     return (
       <Modal
-        BackdropTransitionDuration={transitionDuration}
+        BackdropProps={{
+          transitionDuration,
+        }}
         className={classNames(classes.modal, className)}
-        show={open}
-        onRequestClose={onRequestClose}
+        open={open}
+        onClose={onClose}
         {...other}
         {...ModalProps}
       >
@@ -251,4 +180,73 @@ class Drawer extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
-export default withStyles(styles, { flip: false, withTheme: true, name: 'MuiDrawer' })(Drawer);
+Drawer.propTypes = {
+  /**
+   * 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,
+  open: false,
+  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
+  variant: 'temporary', // Mobile first.
+};
+
+export default withStyles(styles, { name: 'MuiDrawer', flip: false, withTheme: true })(Drawer);

goTorrentWebUI/node_modules/material-ui/Drawer/index.js.flow

@@ -1,3 +1 @@
-// @flow
-
 export { default } from './Drawer';