Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

@@ -0,0 +1,37 @@
import * as React from 'react';
import { StandardProps } from '..';
import { ModalProps, ModalClassKey } from '../internal/Modal';
import { TransitionDuration } from '../internal/transition';
export interface DialogProps extends StandardProps<
ModalProps,
DialogClassKey,
'onBackdropClick' | 'onEscapeKeyUp'
> {
fullScreen?: boolean;
ignoreBackdropClick?: boolean;
ignoreEscapeKeyUp?: boolean;
transitionDuration?: TransitionDuration;
maxWidth?: 'xs' | 'sm' | 'md';
fullWidth?: boolean;
onBackdropClick?: Function;
onEscapeKeyUp?: Function;
onRequestClose?: React.EventHandler<any>;
open?: boolean;
transition?: React.ReactType;
}
export type DialogClassKey =
| ModalClassKey
| 'root'
| 'paper'
| 'paperWidthXs'
| 'paperWidthSm'
| 'paperWidthMd'
| 'fullWidth'
| 'fullScreen'
;
declare const Dialog: React.ComponentType<DialogProps>;
export default Dialog;

View File

@@ -0,0 +1,295 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
var _helpers = require('../utils/helpers');
var _Modal = require('../internal/Modal');
var _Modal2 = _interopRequireDefault(_Modal);
var _Fade = require('../transitions/Fade');
var _Fade2 = _interopRequireDefault(_Fade);
var _transitions = require('../styles/transitions');
var _Paper = require('../Paper');
var _Paper2 = _interopRequireDefault(_Paper);
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_ComponentType = require('prop-types').func;
var babelPluginFlowReactPropTypes_proptype_TransitionCallback = require('../internal/transition').babelPluginFlowReactPropTypes_proptype_TransitionCallback || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_TransitionDuration = require('../internal/transition').babelPluginFlowReactPropTypes_proptype_TransitionDuration || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
justifyContent: 'center',
alignItems: 'center'
},
paper: {
display: 'flex',
margin: theme.spacing.unit * 4,
flexDirection: 'column',
flex: '0 1 auto',
position: 'relative',
maxHeight: '90vh',
overflowY: 'auto', // Fix IE11 issue, to remove at some point.
'&:focus': {
outline: 'none'
}
},
paperWidthXs: {
maxWidth: theme.breakpoints.values.xs
},
paperWidthSm: {
maxWidth: theme.breakpoints.values.sm
},
paperWidthMd: {
maxWidth: theme.breakpoints.values.md
},
fullWidth: {
width: '100%'
},
fullScreen: {
margin: 0,
width: '100%',
maxWidth: '100%',
height: '100%',
maxHeight: '100%',
borderRadius: 0
}
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Dialog children, usually the included sub-components.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* If `true`, it will be full-screen
*/
fullScreen: require('prop-types').bool,
/**
* If `true`, clicking the backdrop will not fire the `onRequestClose` callback.
*/
ignoreBackdropClick: require('prop-types').bool,
/**
* If `true`, hitting escape will not fire the `onRequestClose` callback.
*/
ignoreEscapeKeyUp: require('prop-types').bool,
/**
* 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),
/**
* 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: require('prop-types').oneOf(['xs', 'sm', 'md']),
/**
* If specified, stretches dialog to max width.
*/
fullWidth: require('prop-types').bool,
/**
* Callback fired when the backdrop is clicked.
*/
onBackdropClick: require('prop-types').func,
/**
* Callback fired before the dialog enters.
*/
onEnter: typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback),
/**
* Callback fired when the dialog is entering.
*/
onEntering: typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback),
/**
* Callback fired when the dialog has entered.
*/
onEntered: typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback),
/**
* Callback fires when the escape key is released and the modal is in focus.
*/
onEscapeKeyUp: require('prop-types').func,
/**
* Callback fired before the dialog exits.
*/
onExit: typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback),
/**
* Callback fired when the dialog is exiting.
*/
onExiting: typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback),
/**
* Callback fired when the dialog has exited.
*/
onExited: typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback),
/**
* 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 Dialog is open.
*/
open: require('prop-types').bool,
/**
* Transition component.
*/
transition: typeof babelPluginFlowReactPropTypes_proptype_ComponentType === 'function' ? babelPluginFlowReactPropTypes_proptype_ComponentType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ComponentType)
};
/**
* Dialogs are overlaid modal paper based components with a backdrop.
*/
function Dialog(props) {
var _classNames;
var children = props.children,
classes = props.classes,
className = props.className,
fullScreen = props.fullScreen,
ignoreBackdropClick = props.ignoreBackdropClick,
ignoreEscapeKeyUp = props.ignoreEscapeKeyUp,
transitionDuration = props.transitionDuration,
maxWidth = props.maxWidth,
fullWidth = props.fullWidth,
open = props.open,
onBackdropClick = props.onBackdropClick,
onEscapeKeyUp = props.onEscapeKeyUp,
onEnter = props.onEnter,
onEntering = props.onEntering,
onEntered = props.onEntered,
onExit = props.onExit,
onExiting = props.onExiting,
onExited = props.onExited,
onRequestClose = props.onRequestClose,
TransitionProp = props.transition,
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'fullScreen', 'ignoreBackdropClick', 'ignoreEscapeKeyUp', 'transitionDuration', 'maxWidth', 'fullWidth', 'open', 'onBackdropClick', 'onEscapeKeyUp', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'onRequestClose', 'transition']);
return _react2.default.createElement(
_Modal2.default,
(0, _extends3.default)({
className: (0, _classnames2.default)(classes.root, className),
BackdropTransitionDuration: transitionDuration,
ignoreBackdropClick: ignoreBackdropClick,
ignoreEscapeKeyUp: ignoreEscapeKeyUp,
onBackdropClick: onBackdropClick,
onEscapeKeyUp: onEscapeKeyUp,
onRequestClose: onRequestClose,
show: open
}, other),
_react2.default.createElement(
TransitionProp,
{
appear: true,
'in': open,
timeout: transitionDuration,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited
},
_react2.default.createElement(
_Paper2.default,
{
elevation: 24,
className: (0, _classnames2.default)(classes.paper, classes['paperWidth' + (0, _helpers.capitalizeFirstLetter)(maxWidth)], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.fullScreen, fullScreen), (0, _defineProperty3.default)(_classNames, classes.fullWidth, fullWidth), _classNames))
},
children
)
)
);
}
Dialog.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
transition: typeof babelPluginFlowReactPropTypes_proptype_ComponentType === 'function' ? babelPluginFlowReactPropTypes_proptype_ComponentType.isRequired ? babelPluginFlowReactPropTypes_proptype_ComponentType.isRequired : babelPluginFlowReactPropTypes_proptype_ComponentType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ComponentType).isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'fullScreen', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'ignoreBackdropClick', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'ignoreEscapeKeyUp', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'transitionDuration', typeof babelPluginFlowReactPropTypes_proptype_TransitionDuration === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionDuration : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionDuration)), (0, _defineProperty3.default)(_ref, 'maxWidth', require('prop-types').oneOf(['xs', 'sm', 'md'])), (0, _defineProperty3.default)(_ref, 'fullWidth', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'onBackdropClick', require('prop-types').func), (0, _defineProperty3.default)(_ref, 'onEnter', typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback)), (0, _defineProperty3.default)(_ref, 'onEntering', typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback)), (0, _defineProperty3.default)(_ref, 'onEntered', typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback)), (0, _defineProperty3.default)(_ref, 'onEscapeKeyUp', require('prop-types').func), (0, _defineProperty3.default)(_ref, 'onExit', typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback)), (0, _defineProperty3.default)(_ref, 'onExiting', typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback)), (0, _defineProperty3.default)(_ref, 'onExited', typeof babelPluginFlowReactPropTypes_proptype_TransitionCallback === 'function' ? babelPluginFlowReactPropTypes_proptype_TransitionCallback : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_TransitionCallback)), (0, _defineProperty3.default)(_ref, 'onRequestClose', require('prop-types').func), (0, _defineProperty3.default)(_ref, 'open', require('prop-types').bool), (0, _defineProperty3.default)(_ref, 'transition', typeof babelPluginFlowReactPropTypes_proptype_ComponentType === 'function' ? babelPluginFlowReactPropTypes_proptype_ComponentType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ComponentType)), _ref) : {};
Dialog.defaultProps = {
fullScreen: false,
ignoreBackdropClick: false,
ignoreEscapeKeyUp: false,
transitionDuration: {
enter: _transitions.duration.enteringScreen,
exit: _transitions.duration.leavingScreen
},
maxWidth: 'sm',
fullWidth: false,
open: false,
transition: _Fade2.default
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDialog' })(Dialog);

View File

@@ -0,0 +1,231 @@
// @flow
import React from 'react';
import type { ComponentType, Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { capitalizeFirstLetter } from '../utils/helpers';
import Modal from '../internal/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) => ({
root: {
justifyContent: 'center',
alignItems: 'center',
},
paper: {
display: 'flex',
margin: theme.spacing.unit * 4,
flexDirection: 'column',
flex: '0 1 auto',
position: 'relative',
maxHeight: '90vh',
overflowY: 'auto', // Fix IE11 issue, to remove at some point.
'&:focus': {
outline: 'none',
},
},
paperWidthXs: {
maxWidth: theme.breakpoints.values.xs,
},
paperWidthSm: {
maxWidth: theme.breakpoints.values.sm,
},
paperWidthMd: {
maxWidth: theme.breakpoints.values.md,
},
fullWidth: {
width: '100%',
},
fullScreen: {
margin: 0,
width: '100%',
maxWidth: '100%',
height: '100%',
maxHeight: '100%',
borderRadius: 0,
},
});
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) {
const {
children,
classes,
className,
fullScreen,
ignoreBackdropClick,
ignoreEscapeKeyUp,
transitionDuration,
maxWidth,
fullWidth,
open,
onBackdropClick,
onEscapeKeyUp,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited,
onRequestClose,
transition: TransitionProp,
...other
} = props;
return (
<Modal
className={classNames(classes.root, className)}
BackdropTransitionDuration={transitionDuration}
ignoreBackdropClick={ignoreBackdropClick}
ignoreEscapeKeyUp={ignoreEscapeKeyUp}
onBackdropClick={onBackdropClick}
onEscapeKeyUp={onEscapeKeyUp}
onRequestClose={onRequestClose}
show={open}
{...other}
>
<TransitionProp
appear
in={open}
timeout={transitionDuration}
onEnter={onEnter}
onEntering={onEntering}
onEntered={onEntered}
onExit={onExit}
onExiting={onExiting}
onExited={onExited}
>
<Paper
data-mui-test="Dialog"
elevation={24}
className={classNames(
classes.paper,
classes[`paperWidth${capitalizeFirstLetter(maxWidth)}`],
{
[classes.fullScreen]: fullScreen,
[classes.fullWidth]: fullWidth,
},
)}
>
{children}
</Paper>
</TransitionProp>
</Modal>
);
}
Dialog.defaultProps = {
fullScreen: false,
ignoreBackdropClick: false,
ignoreEscapeKeyUp: false,
transitionDuration: {
enter: duration.enteringScreen,
exit: duration.leavingScreen,
},
maxWidth: 'sm',
fullWidth: false,
open: false,
transition: Fade,
};
export default withStyles(styles, { name: 'MuiDialog' })(Dialog);

View File

@@ -0,0 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogActionsProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
DialogActionsClassKey
> {}
export type DialogActionsClassKey =
| 'root'
| 'action'
| 'button'
;
declare const DialogActions: React.ComponentType<DialogActionsProps>;
export default DialogActions;

View File

@@ -0,0 +1,104 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
require('../Button');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
// So we don't have any override priority issue.
var styles = exports.styles = function styles(theme) {
return {
root: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
margin: theme.spacing.unit + 'px ' + theme.spacing.unit / 2 + 'px',
flex: '0 0 auto'
},
action: {
margin: '0 ' + theme.spacing.unit / 2 + 'px'
},
button: {
minWidth: 64
}
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The content of the component.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string
};
function DialogActions(props) {
var children = props.children,
classes = props.classes,
className = props.className,
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className']);
return _react2.default.createElement(
'div',
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
_react2.default.Children.map(children, function (button) {
return _react2.default.isValidElement(button) && _react2.default.createElement(
'div',
{ className: classes.action },
_react2.default.cloneElement(button, {
className: (0, _classnames2.default)(classes.button, button.props.className)
})
);
})
);
}
DialogActions.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), _ref) : {};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDialogActions' })(DialogActions);

View File

@@ -0,0 +1,64 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import '../Button'; // So we don't have any override priority issue.
export const styles = (theme: Object) => ({
root: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
flex: '0 0 auto',
},
action: {
margin: `0 ${theme.spacing.unit / 2}px`,
},
button: {
minWidth: 64,
},
});
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* The content of the component.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
};
function DialogActions(props: ProvidedProps & Props) {
const { children, classes, className, ...other } = props;
return (
<div data-mui-test="DialogActions" className={classNames(classes.root, className)} {...other}>
{React.Children.map(
children,
button =>
React.isValidElement(button) && (
<div className={classes.action}>
{React.cloneElement(button, {
className: classNames(classes.button, button.props.className),
})}
</div>
),
)}
</div>
);
}
export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions);

View File

@@ -0,0 +1,15 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogContentProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
DialogContentClassKey
> {}
export type DialogContentClassKey =
| 'root'
;
declare const DialogContent: React.ComponentType<DialogContentProps>;
export default DialogContent;

View File

@@ -0,0 +1,88 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
var spacing = theme.spacing.unit * 3;
return {
root: {
flex: '1 1 auto',
overflowY: 'auto',
padding: '0 ' + spacing + 'px ' + spacing + 'px ' + spacing + 'px',
'&:first-child': {
paddingTop: spacing
}
}
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The content of the component.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string
};
function DialogContent(props) {
var classes = props.classes,
children = props.children,
className = props.className,
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'children', 'className']);
return _react2.default.createElement(
'div',
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
children
);
}
DialogContent.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), _ref) : {};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDialogContent' })(DialogContent);

View File

@@ -0,0 +1,51 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = (theme: Object) => {
const spacing = theme.spacing.unit * 3;
return {
root: {
flex: '1 1 auto',
overflowY: 'auto',
padding: `0 ${spacing}px ${spacing}px ${spacing}px`,
'&:first-child': {
paddingTop: spacing,
},
},
};
};
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* The content of the component.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
};
function DialogContent(props: ProvidedProps & Props) {
const { classes, children, className, ...other } = props;
return (
<div className={classNames(classes.root, className)} {...other}>
{children}
</div>
);
}
export default withStyles(styles, { name: 'MuiDialogContent' })(DialogContent);

View File

@@ -0,0 +1,15 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogContentTextProps extends StandardProps<
React.HTMLAttributes<HTMLParagraphElement>,
DialogContentTextClassKey
> {}
export type DialogContentTextClassKey =
| 'root'
;
declare const DialogContentText: React.ComponentType<DialogContentTextProps>;
export default DialogContentText;

View File

@@ -0,0 +1,83 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: (0, _extends3.default)({}, theme.typography.subheading, {
color: theme.palette.text.secondary,
margin: 0
})
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The content of the component.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string
};
function DialogContentText(props) {
var children = props.children,
classes = props.classes,
className = props.className,
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className']);
return _react2.default.createElement(
'p',
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
children
);
}
DialogContentText.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), _ref) : {};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDialogContentText' })(DialogContentText);

View File

@@ -0,0 +1,45 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = (theme: Object) => ({
root: {
...theme.typography.subheading,
color: theme.palette.text.secondary,
margin: 0,
},
});
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* The content of the component.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
};
function DialogContentText(props: ProvidedProps & Props) {
const { children, classes, className, ...other } = props;
return (
<p className={classNames(classes.root, className)} {...other}>
{children}
</p>
);
}
export default withStyles(styles, { name: 'MuiDialogContentText' })(DialogContentText);

View File

@@ -0,0 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogTitleProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
DialogTitleClassKey
> {
disableTypography?: boolean;
}
export type DialogTitleClassKey =
| 'root'
;
declare const DialogTitle: React.ComponentType<DialogTitleProps>;
export default DialogTitle;

View File

@@ -0,0 +1,103 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
var _Typography = require('../Typography');
var _Typography2 = _interopRequireDefault(_Typography);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
margin: 0,
padding: theme.spacing.unit * 3 + 'px ' + theme.spacing.unit * 3 + 'px 20px ' + theme.spacing.unit * 3 + 'px',
flex: '0 0 auto'
}
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The content of the component.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* If `true`, the children won't be wrapped by a typography component.
* For instance, that can be useful to can render an h4 instead of a
*/
disableTypography: require('prop-types').bool
};
function DialogTitle(props) {
var children = props.children,
classes = props.classes,
className = props.className,
disableTypography = props.disableTypography,
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'disableTypography']);
return _react2.default.createElement(
'div',
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
disableTypography ? children : _react2.default.createElement(
_Typography2.default,
{ type: 'title' },
children
)
);
}
DialogTitle.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'disableTypography', require('prop-types').bool), _ref) : {};
DialogTitle.defaultProps = {
disableTypography: false
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDialogTitle' })(DialogTitle);

View File

@@ -0,0 +1,56 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
export const styles = (theme: Object) => ({
root: {
margin: 0,
padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \
20px ${theme.spacing.unit * 3}px`,
flex: '0 0 auto',
},
});
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* The content of the component.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* If `true`, the children won't be wrapped by a typography component.
* For instance, that can be useful to can render an h4 instead of a
*/
disableTypography?: boolean,
};
function DialogTitle(props: ProvidedProps & Props) {
const { children, classes, className, disableTypography, ...other } = props;
return (
<div data-mui-test="DialogTitle" className={classNames(classes.root, className)} {...other}>
{disableTypography ? children : <Typography type="title">{children}</Typography>}
</div>
);
}
DialogTitle.defaultProps = {
disableTypography: false,
};
export default withStyles(styles, { name: 'MuiDialogTitle' })(DialogTitle);

View File

@@ -0,0 +1,14 @@
export { default } from './Dialog';
export * from './Dialog';
export { default as DialogActions } from './DialogActions';
export * from './DialogActions';
export { default as DialogTitle } from './DialogTitle';
export * from './DialogTitle';
export { default as DialogContent } from './DialogContent';
export * from './DialogContent';
export { default as DialogContentText } from './DialogContentText';
export * from './DialogContentText';
export {
default as withMobileDialog,
} from './withMobileDialog';
export * from './withMobileDialog';

View File

@@ -0,0 +1,61 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Dialog = require('./Dialog');
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Dialog).default;
}
});
var _DialogActions = require('./DialogActions');
Object.defineProperty(exports, 'DialogActions', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_DialogActions).default;
}
});
var _DialogTitle = require('./DialogTitle');
Object.defineProperty(exports, 'DialogTitle', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_DialogTitle).default;
}
});
var _DialogContent = require('./DialogContent');
Object.defineProperty(exports, 'DialogContent', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_DialogContent).default;
}
});
var _DialogContentText = require('./DialogContentText');
Object.defineProperty(exports, 'DialogContentText', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_DialogContentText).default;
}
});
var _withMobileDialog = require('./withMobileDialog');
Object.defineProperty(exports, 'withMobileDialog', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_withMobileDialog).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

View File

@@ -0,0 +1,8 @@
// @flow
export { default } from './Dialog';
export { default as DialogActions } from './DialogActions';
export { default as DialogTitle } from './DialogTitle';
export { default as DialogContent } from './DialogContent';
export { default as DialogContentText } from './DialogContentText';
export { default as withMobileDialog } from './withMobileDialog';

View File

@@ -0,0 +1,12 @@
import { Breakpoint } from '../styles/createBreakpoints';
import { WithWidthProps } from '../utils/withWidth';
export interface WithMobileDialogOptions {
breakpoint: Breakpoint;
}
export default function withMobileDialog<P = {}>(
options: WithMobileDialogOptions
): (
component: React.ComponentType<P & Partial<WithWidthProps>>
) => React.ComponentClass<P & Partial<WithWidthProps>>;

View File

@@ -0,0 +1,63 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _wrapDisplayName = require('recompose/wrapDisplayName');
var _wrapDisplayName2 = _interopRequireDefault(_wrapDisplayName);
var _withWidth = require('../utils/withWidth');
var _withWidth2 = _interopRequireDefault(_withWidth);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_HigherOrderComponent = require('react-flow-types').babelPluginFlowReactPropTypes_proptype_HigherOrderComponent || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_Breakpoint = require('../styles/createBreakpoints').babelPluginFlowReactPropTypes_proptype_Breakpoint || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_InjectedProps = {
/**
* If isWidthDown(options.breakpoint), return true.
*/
fullScreen: require('prop-types').bool.isRequired
};
/**
* Dialog will responsively be full screen *at or below* the given breakpoint
* (defaults to 'sm' for mobile devices).
* Notice that this Higher-order Component is incompatible with server side rendering.
*/
var withMobileDialog = function withMobileDialog() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { breakpoint: 'sm' };
return function (Component) {
var breakpoint = options.breakpoint;
function WithMobileDialog(props) {
return _react2.default.createElement(Component, (0, _extends3.default)({ fullScreen: (0, _withWidth.isWidthDown)(breakpoint, props.width) }, props));
}
WithMobileDialog.propTypes = process.env.NODE_ENV !== "production" ? {
width: require('prop-types').string.isRequired
} : {};
if (process.env.NODE_ENV !== 'production') {
WithMobileDialog.displayName = (0, _wrapDisplayName2.default)(Component, 'withMobileDialog');
}
return (0, _withWidth2.default)()(WithMobileDialog);
};
};
exports.default = withMobileDialog;

View File

@@ -0,0 +1,39 @@
// @flow
import React from 'react';
import type { HigherOrderComponent } from 'react-flow-types';
import wrapDisplayName from 'recompose/wrapDisplayName';
import withWidth, { isWidthDown } from '../utils/withWidth';
import type { Breakpoint } from '../styles/createBreakpoints';
type Options = { breakpoint: Breakpoint };
export type InjectedProps = {
/**
* If isWidthDown(options.breakpoint), return true.
*/
fullScreen: boolean,
};
/**
* Dialog will responsively be full screen *at or below* the given breakpoint
* (defaults to 'sm' for mobile devices).
* Notice that this Higher-order Component is incompatible with server side rendering.
*/
const withMobileDialog = (
options: Options = { breakpoint: 'sm' },
): HigherOrderComponent<{}, InjectedProps> => (Component: any): any => {
const { breakpoint } = options;
function WithMobileDialog(props: { width: string }) {
return <Component fullScreen={isWidthDown(breakpoint, props.width)} {...props} />;
}
if (process.env.NODE_ENV !== 'production') {
WithMobileDialog.displayName = wrapDisplayName(Component, 'withMobileDialog');
}
return withWidth()(WithMobileDialog);
};
export default withMobileDialog;