Completely updated React, fixed #11, (hopefully)

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);