[Dialog] Add a PaperComponent property & draggable demo (#13879)

* [Dialog] Add react-draggable demo

* Run prettier

* Replace colon by full stop chart

* Update docs. Bump pooper bundle size limit

* some refactorization

.size-limit.js

@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.2 KB',
+    limit: '95.3 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',

docs/src/modules/components/AppContent.js

@@ -14,12 +14,12 @@ const styles = theme => ({
     [theme.breakpoints.up('sm')]: {
       paddingLeft: theme.spacing.unit * 4,
       paddingRight: theme.spacing.unit * 4,
-      maxWidth: 'calc(100% - 162px)',
+      maxWidth: 'calc(100% - 167px)',
     },
     [theme.breakpoints.up('lg')]: {
       paddingLeft: theme.spacing.unit * 5,
       paddingRight: theme.spacing.unit * 9,
-      maxWidth: 'calc(100% - 240px - 162px)',
+      maxWidth: 'calc(100% - 240px - 167px)',
     },
   },
 });

docs/src/modules/components/AppTableOfContents.js

@@ -40,15 +40,15 @@ const styles = theme => ({
     top: 70,
     // Fix IE 11 position sticky issue.
     marginTop: 70,
-    width: 162,
+    width: 167,
     flexShrink: 0,
     order: 2,
     position: 'sticky',
     wordBreak: 'break-word',
     height: 'calc(100vh - 70px)',
     overflowY: 'auto',
     padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit *
-      2}px 0`,
+      2}px 5px`,
     display: 'none',
     [theme.breakpoints.up('sm')]: {
       display: 'block',

docs/src/pages/demos/dialogs/DraggableDialog.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Paper from '@material-ui/core/Paper';
+import Draggable from 'react-draggable';
+
+function PaperComponent(props) {
+  return (
+    <Draggable>
+      <Paper {...props} />
+    </Draggable>
+  );
+}
+
+class DraggableDialog extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open form dialog
+        </Button>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          PaperComponent={PaperComponent}
+          aria-labelledby="draggable-dialog-title"
+        >
+          <DialogTitle id="draggable-dialog-title">Subscribe</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              To subscribe to this website, please enter your email address here. We will send
+              updates occasionally.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleClose} color="primary">
+              Subscribe
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default DraggableDialog;

docs/src/pages/demos/dialogs/dialogs.md

@@ -104,3 +104,11 @@ When dialogs become too long for the user’s viewport or device, they scroll.
 Try the demo below to see what we mean:
 
 {{"demo": "pages/demos/dialogs/ScrollDialog.js"}}
+
+## Draggable dialog
+
+You can create a draggable dialog by using [react-draggable](https://github.com/mzabriskie/react-draggable).
+To do so, you can pass the the imported `Draggable` component as the `PaperComponent` of the `Dialog` component.
+This will make the entire dialog draggable.
+
+{{"demo": "pages/demos/dialogs/DraggableDialog.js"}}

package.json

@@ -135,6 +135,7 @@
     "react-autosuggest": "^9.3.2",
     "react-docgen": "^3.0.0-beta10",
     "react-dom": "^16.7.0-alpha.0",
+    "react-draggable": "^3.0.5",
     "react-final-form": "^4.0.2",
     "react-frame-component": "^4.0.2",
     "react-inspector": "^2.2.2",

packages/material-ui-lab/package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@babel/runtime": "7.1.2",
+    "@material-ui/utils": "^3.0.0-alpha.0",
     "classnames": "^2.2.5",
     "keycode": "^2.1.9"
   },

packages/material-ui-lab/src/SpeedDial/SpeedDial.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keycode from 'keycode';
 import warning from 'warning';
+import { componentPropType } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import Zoom from '@material-ui/core/Zoom';
 import { duration } from '@material-ui/core/styles/transitions';
@@ -340,9 +341,9 @@ SpeedDial.propTypes = {
    */
   openIcon: PropTypes.node,
   /**
-   * Transition component.
+   * The component used for the transition.
    */
-  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  TransitionComponent: componentPropType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

packages/material-ui-utils/src/componentPropType.js

@@ -1,4 +1,4 @@
-import * as ReactIs from 'react-is';
+const ReactIs = require('react-is');
 
 /**
  * A factory that returns a propTypes validator that only accepts values that

packages/material-ui/src/Dialog/Dialog.js

@@ -5,6 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 import Modal from '../Modal';
@@ -152,6 +153,7 @@ class Dialog extends React.Component {
       onExited,
       onExiting,
       open,
+      PaperComponent,
       PaperProps,
       scroll,
       TransitionComponent,
@@ -193,7 +195,7 @@ class Dialog extends React.Component {
             onClick={this.handleBackdropClick}
             role="document"
           >
-            <Paper
+            <PaperComponent
               elevation={24}
               className={classNames(classes.paper, classes[`paperScroll${capitalize(scroll)}`], {
                 [classes[`paperWidth${maxWidth ? capitalize(maxWidth) : ''}`]]: maxWidth,
@@ -203,7 +205,7 @@ class Dialog extends React.Component {
               {...PaperProps}
             >
               {children}
-            </Paper>
+            </PaperComponent>
           </div>
         </TransitionComponent>
       </Modal>
@@ -296,6 +298,10 @@ Dialog.propTypes = {
    * If `true`, the Dialog is open.
    */
   open: PropTypes.bool.isRequired,
+  /**
+   * The component used to render the body of the dialog.
+   */
+  PaperComponent: componentPropType,
   /**
    * Properties applied to the [`Paper`](/api/paper/) element.
    * If you want to add a class to the `Paper` component use
@@ -318,9 +324,9 @@ Dialog.propTypes = {
    */
   scroll: PropTypes.oneOf(['body', 'paper']),
   /**
-   * Transition component.
+   * The component used for the transition.
    */
-  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  TransitionComponent: componentPropType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -341,6 +347,7 @@ Dialog.defaultProps = {
   fullScreen: false,
   fullWidth: false,
   maxWidth: 'sm',
+  PaperComponent: Paper,
   scroll: 'paper',
   TransitionComponent: Fade,
   transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },

packages/material-ui/src/FilledInput/FilledInput.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import withStyles from '../styles/withStyles';
 
@@ -202,7 +203,7 @@ FilledInput.propTypes = {
    * The component used for the native input.
    * Either a string to use a DOM element or a component.
    */
-  inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  inputComponent: componentPropType,
   /**
    * Attributes applied to the `input` element.
    */

packages/material-ui/src/Input/Input.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import withStyles from '../styles/withStyles';
 
@@ -171,7 +172,7 @@ Input.propTypes = {
    * The component used for the native input.
    * Either a string to use a DOM element or a component.
    */
-  inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  inputComponent: componentPropType,
   /**
    * Attributes applied to the `input` element.
    */

packages/material-ui/src/InputBase/InputBase.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import formControlState from '../FormControl/formControlState';
 import FormControlContext from '../FormControl/FormControlContext';
 import withFormControlContext from '../FormControl/withFormControlContext';
@@ -477,7 +478,7 @@ InputBase.propTypes = {
    * The component used for the native input.
    * Either a string to use a DOM element or a component.
    */
-  inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  inputComponent: componentPropType,
   /**
    * Attributes applied to the `input` element.
    */

packages/material-ui/src/ListItem/ListItem.js

@@ -199,7 +199,7 @@ ListItem.propTypes = {
   /**
    * The container component used when a `ListItemSecondaryAction` is rendered.
    */
-  ContainerComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  ContainerComponent: componentPropType,
   /**
    * Properties applied to the container element when the component
    * is used to display a `ListItemSecondaryAction`.

packages/material-ui/src/Modal/Modal.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
 import keycode from 'keycode';
+import { componentPropType } from '@material-ui/utils';
 import ownerDocument from '../utils/ownerDocument';
 import RootRef from '../RootRef';
 import Portal from '../Portal';
@@ -318,7 +319,7 @@ Modal.propTypes = {
   /**
    * A backdrop component. This property enables custom backdrop rendering.
    */
-  BackdropComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  BackdropComponent: componentPropType,
   /**
    * Properties applied to the [`Backdrop`](/api/backdrop/) element.
    */

packages/material-ui/src/NativeSelect/NativeSelect.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { componentPropType } from '@material-ui/utils';
 import NativeSelectInput from './NativeSelectInput';
 import withStyles from '../styles/withStyles';
 import formControlState from '../FormControl/formControlState';
@@ -128,7 +129,7 @@ NativeSelect.propTypes = {
   /**
    * The icon that displays the arrow.
    */
-  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  IconComponent: componentPropType,
   /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
    */

packages/material-ui/src/NativeSelect/NativeSelectInput.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 
 /**
  * @ignore - internal component.
@@ -68,7 +69,7 @@ NativeSelectInput.propTypes = {
   /**
    * The icon that displays the arrow.
    */
-  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  IconComponent: componentPropType,
   /**
    * Use that property to pass a ref callback to the native select element.
    */

packages/material-ui/src/OutlinedInput/OutlinedInput.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { componentPropType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import NotchedOutline from './NotchedOutline';
 import withStyles from '../styles/withStyles';
@@ -165,7 +166,7 @@ OutlinedInput.propTypes = {
    * The component used for the native input.
    * Either a string to use a DOM element or a component.
    */
-  inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  inputComponent: componentPropType,
   /**
    * Attributes applied to the `input` element.
    */

packages/material-ui/src/Popover/Popover.js

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import warning from 'warning';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 import EventListener from 'react-event-listener';
+import { componentPropType } from '@material-ui/utils';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { createChainedFunction } from '../utils/helpers';
@@ -500,9 +501,9 @@ Popover.propTypes = {
       .isRequired,
   }),
   /**
-   * Transition component.
+   * The component used for the transition.
    */
-  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  TransitionComponent: componentPropType,
   /**
    * Set to 'auto' to automatically calculate transition time based on height.
    */

packages/material-ui/src/Select/Select.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { componentPropType } from '@material-ui/utils';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
 import withFormControlContext from '../FormControl/withFormControlContext';
@@ -104,7 +105,7 @@ Select.propTypes = {
   /**
    * The icon that displays the arrow.
    */
-  IconComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
+  IconComponent: componentPropType,
   /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
    */