Completely updated React, fixed #11, (hopefully)

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

@@ -1,17 +1,16 @@
-// @flow
+// @inheritedComponent Modal
 
 import React from 'react';
-import type { ComponentType, Node } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { capitalizeFirstLetter } from '../utils/helpers';
-import Modal from '../internal/Modal';
+import { capitalize } from '../utils/helpers';
+import Modal from '../Modal';
 import Fade from '../transitions/Fade';
 import { duration } from '../styles/transitions';
 import Paper from '../Paper';
-import type { TransitionDuration, TransitionCallback } from '../internal/transition';
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -29,7 +28,7 @@ export const styles = (theme: Object) => ({
     },
   },
   paperWidthXs: {
-    maxWidth: theme.breakpoints.values.xs,
+    maxWidth: Math.max(theme.breakpoints.values.xs, 360),
   },
   paperWidthSm: {
     maxWidth: theme.breakpoints.values.sm,
@@ -50,138 +49,48 @@ export const styles = (theme: Object) => ({
   },
 });
 
-type ProvidedProps = {
-  classes: Object,
-  transition: ComponentType<*>,
-};
-
-export type Props = {
-  /**
-   * Dialog children, usually the included sub-components.
-   */
-  children?: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * If `true`, it will be full-screen
-   */
-  fullScreen?: boolean,
-  /**
-   * If `true`, clicking the backdrop will not fire the `onRequestClose` callback.
-   */
-  ignoreBackdropClick?: boolean,
-  /**
-   * If `true`, hitting escape will not fire the `onRequestClose` callback.
-   */
-  ignoreEscapeKeyUp?: boolean,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  transitionDuration?: TransitionDuration,
-  /**
-   * Determine the max width of the dialog.
-   * The dialog width grows with the size of the screen, this property is useful
-   * on the desktop where you might need some coherent different width size across your
-   * application.
-   */
-  maxWidth?: 'xs' | 'sm' | 'md',
-  /**
-   * If specified, stretches dialog to max width.
-   */
-  fullWidth?: boolean,
-  /**
-   * Callback fired when the backdrop is clicked.
-   */
-  onBackdropClick?: Function,
-  /**
-   * Callback fired before the dialog enters.
-   */
-  onEnter?: TransitionCallback,
-  /**
-   * Callback fired when the dialog is entering.
-   */
-  onEntering?: TransitionCallback,
-  /**
-   * Callback fired when the dialog has entered.
-   */
-  onEntered?: TransitionCallback,
-  /**
-   * Callback fires when the escape key is released and the modal is in focus.
-   */
-  onEscapeKeyUp?: Function,
-  /**
-   * Callback fired before the dialog exits.
-   */
-  onExit?: TransitionCallback,
-  /**
-   * Callback fired when the dialog is exiting.
-   */
-  onExiting?: TransitionCallback,
-  /**
-   * Callback fired when the dialog has exited.
-   */
-  onExited?: TransitionCallback,
-  /**
-   * Callback fired when the component requests to be closed.
-   *
-   * @param {object} event The event source of the callback
-   */
-  onRequestClose?: Function,
-  /**
-   * If `true`, the Dialog is open.
-   */
-  open?: boolean,
-  /**
-   * Transition component.
-   */
-  transition?: ComponentType<*>,
-};
-
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
-function Dialog(props: ProvidedProps & Props) {
+function Dialog(props) {
   const {
     children,
     classes,
     className,
     fullScreen,
-    ignoreBackdropClick,
-    ignoreEscapeKeyUp,
-    transitionDuration,
-    maxWidth,
     fullWidth,
-    open,
+    disableBackdropClick,
+    disableEscapeKeyDown,
+    maxWidth,
     onBackdropClick,
-    onEscapeKeyUp,
+    onClose,
     onEnter,
-    onEntering,
     onEntered,
+    onEntering,
+    onEscapeKeyDown,
     onExit,
-    onExiting,
     onExited,
-    onRequestClose,
+    onExiting,
+    open,
+    PaperProps,
     transition: TransitionProp,
+    transitionDuration,
     ...other
   } = props;
 
   return (
     <Modal
       className={classNames(classes.root, className)}
-      BackdropTransitionDuration={transitionDuration}
-      ignoreBackdropClick={ignoreBackdropClick}
-      ignoreEscapeKeyUp={ignoreEscapeKeyUp}
+      BackdropProps={{
+        transitionDuration,
+      }}
+      disableBackdropClick={disableBackdropClick}
+      disableEscapeKeyDown={disableEscapeKeyDown}
       onBackdropClick={onBackdropClick}
-      onEscapeKeyUp={onEscapeKeyUp}
-      onRequestClose={onRequestClose}
-      show={open}
+      onEscapeKeyDown={onEscapeKeyDown}
+      onClose={onClose}
+      open={open}
+      role="dialog"
       {...other}
     >
       <TransitionProp
@@ -198,14 +107,12 @@ function Dialog(props: ProvidedProps & Props) {
         <Paper
           data-mui-test="Dialog"
           elevation={24}
-          className={classNames(
-            classes.paper,
-            classes[`paperWidth${capitalizeFirstLetter(maxWidth)}`],
-            {
-              [classes.fullScreen]: fullScreen,
-              [classes.fullWidth]: fullWidth,
-            },
-          )}
+          className={classNames(classes.paper, {
+            [classes[`paperWidth${maxWidth ? capitalize(maxWidth) : ''}`]]: maxWidth,
+            [classes.fullScreen]: fullScreen,
+            [classes.fullWidth]: fullWidth,
+          })}
+          {...PaperProps}
         >
           {children}
         </Paper>
@@ -214,18 +121,111 @@ function Dialog(props: ProvidedProps & Props) {
   );
 }
 
+Dialog.propTypes = {
+  /**
+   * Dialog children, usually the included sub-components.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, clicking the backdrop will not fire the `onClose` callback.
+   */
+  disableBackdropClick: PropTypes.bool,
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   */
+  disableEscapeKeyDown: PropTypes.bool,
+  /**
+   * If `true`, the dialog will be full-screen
+   */
+  fullScreen: PropTypes.bool,
+  /**
+   * If `true`, the dialog stretches to `maxWidth`.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Determine the max width of the dialog.
+   * The dialog width grows with the size of the screen, this property is useful
+   * on the desktop where you might need some coherent different width size across your
+   * application. Set to `false` to disable `maxWidth`.
+   */
+  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', false]),
+  /**
+   * Callback fired when the backdrop is clicked.
+   */
+  onBackdropClick: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the dialog enters.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the dialog has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the dialog is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired when the escape key is pressed,
+   * `disableKeyboard` is false and the modal is in focus.
+   */
+  onEscapeKeyDown: PropTypes.func,
+  /**
+   * Callback fired before the dialog exits.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the dialog has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the dialog is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * If `true`, the Dialog is open.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * Transition component.
+   */
+  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * 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 }),
+  ]),
+};
+
 Dialog.defaultProps = {
   fullScreen: false,
-  ignoreBackdropClick: false,
-  ignoreEscapeKeyUp: false,
-  transitionDuration: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen,
-  },
-  maxWidth: 'sm',
   fullWidth: false,
-  open: false,
+  disableBackdropClick: false,
+  disableEscapeKeyDown: false,
+  maxWidth: 'sm',
   transition: Fade,
+  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
 };
 
 export default withStyles(styles, { name: 'MuiDialog' })(Dialog);