Completely updated React, fixed #11, (hopefully)

This commit is contained in:
2018-03-04 19:11:49 -05:00
parent 6e0afd6e2a
commit 34e5f5139a
13674 changed files with 333464 additions and 473223 deletions

View File

@@ -2,16 +2,11 @@ import * as React from 'react';
import { StandardProps } from '..';
import { PaperProps, PaperClassKey } from '../Paper';
export interface CardProps extends StandardProps<
PaperProps,
CardClassKey
> {
export interface CardProps extends StandardProps<PaperProps, CardClassKey> {
raised?: boolean;
}
export type CardClassKey =
| PaperClassKey
;
export type CardClassKey = PaperClassKey;
declare const Card: React.ComponentType<CardProps>;

View File

@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
@@ -20,39 +16,35 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Paper = require('../Paper');
var _Paper2 = _interopRequireDefault(_Paper);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// @inheritedComponent Paper
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* @ignore
*/
className: require('prop-types').string,
/**
* If `true`, the card will use raised styling.
*/
raised: require('prop-types').bool
};
function Card(props) {
var raised = props.raised,
other = (0, _objectWithoutProperties3.default)(props, ['raised']);
return _react2.default.createElement(_Paper2.default, (0, _extends3.default)({ elevation: raised ? 8 : 2 }, other));
}
} // @inheritedComponent Paper
Card.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* If `true`, the card will use raised styling.
*/
raised: _propTypes2.default.bool
} : {};
Card.propTypes = process.env.NODE_ENV !== "production" ? (0, _defineProperty3.default)({
raised: require('prop-types').bool.isRequired,
className: require('prop-types').string
}, 'raised', require('prop-types').bool) : {};
Card.defaultProps = {
raised: false
};

View File

@@ -1,30 +1,26 @@
// @flow
// @inheritedComponent Paper
import React from 'react';
import PropTypes from 'prop-types';
import Paper from '../Paper';
type ProvidedProps = {
raised: boolean,
};
export type Props = {
/**
* @ignore
*/
className?: string,
/**
* If `true`, the card will use raised styling.
*/
raised?: boolean,
};
function Card(props: ProvidedProps & Props) {
function Card(props) {
const { raised, ...other } = props;
return <Paper elevation={raised ? 8 : 2} {...other} />;
}
Card.propTypes = {
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the card will use raised styling.
*/
raised: PropTypes.bool,
};
Card.defaultProps = {
raised: false,
};

View File

@@ -1,17 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface CardActionsProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
CardActionClassKey
> {
export interface CardActionsProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardActionsClassKey> {
disableActionSpacing?: boolean;
}
export type CardActionClassKey =
| 'root'
| 'actionSpacing'
;
export type CardActionsClassKey = 'root' | 'action';
declare const CardActions: React.ComponentType<CardActionsProps>;

View File

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
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);
@@ -17,12 +13,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
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);
@@ -35,43 +33,19 @@ var _reactHelpers = require('../utils/reactHelpers');
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 = {
root: {
height: 52,
display: 'flex',
alignItems: 'center',
padding: '2px 4px'
padding: '2px 4px',
boxSizing: 'border-box'
},
actionSpacing: {
action: {
margin: '0 4px'
}
};
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 card actions do not have additional margin.
*/
disableActionSpacing: require('prop-types').bool
};
function CardActions(props) {
var disableActionSpacing = props.disableActionSpacing,
children = props.children,
@@ -83,15 +57,29 @@ function CardActions(props) {
return _react2.default.createElement(
'div',
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
disableActionSpacing ? children : (0, _reactHelpers.cloneChildrenWithClassName)(children, classes.actionSpacing)
disableActionSpacing ? children : (0, _reactHelpers.cloneChildrenWithClassName)(children, classes.action)
);
}
CardActions.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
disableActionSpacing: require('prop-types').bool.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, 'disableActionSpacing', require('prop-types').bool), _ref) : {};
CardActions.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: _propTypes2.default.node,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* If `true`, the card actions do not have additional margin.
*/
disableActionSpacing: _propTypes2.default.bool
} : {};
CardActions.defaultProps = {
disableActionSpacing: false
};

View File

@@ -1,7 +1,5 @@
// @flow
import React from 'react';
import type { Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { cloneChildrenWithClassName } from '../utils/reactHelpers';
@@ -12,48 +10,42 @@ export const styles = {
display: 'flex',
alignItems: 'center',
padding: '2px 4px',
boxSizing: 'border-box',
},
actionSpacing: {
action: {
margin: '0 4px',
},
};
type ProvidedProps = {
classes: Object,
disableActionSpacing: boolean,
};
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 card actions do not have additional margin.
*/
disableActionSpacing?: boolean,
};
function CardActions(props: ProvidedProps & Props) {
function CardActions(props) {
const { disableActionSpacing, children, classes, className, ...other } = props;
return (
<div className={classNames(classes.root, className)} {...other}>
{disableActionSpacing
? children
: cloneChildrenWithClassName(children, classes.actionSpacing)}
{disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.action)}
</div>
);
}
CardActions.propTypes = {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the card actions do not have additional margin.
*/
disableActionSpacing: PropTypes.bool,
};
CardActions.defaultProps = {
disableActionSpacing: false,
};

View File

@@ -1,14 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface CardContentProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
CardContentClassKey
> {}
export interface CardContentProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardContentClassKey> {
component?: React.ReactType<CardContentProps>;
}
export type CardContentClassKey =
| 'root'
;
export type CardContentClassKey = 'root';
declare const CardContent: React.ComponentType<CardContentProps>;

View File

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
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);
@@ -17,12 +13,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
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);
@@ -44,29 +42,34 @@ var styles = exports.styles = function styles(theme) {
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string
};
function CardContent(props) {
var classes = props.classes,
className = props.className,
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className']);
Component = props.component,
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'component']);
return _react2.default.createElement('div', (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other));
return _react2.default.createElement(Component, (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other));
}
CardContent.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), _ref) : {};
CardContent.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
} : {};
CardContent.defaultProps = {
component: 'div'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCardContent' })(CardContent);

View File

@@ -1,10 +1,9 @@
// @flow
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
padding: theme.spacing.unit * 2,
'&:last-child': {
@@ -13,25 +12,30 @@ export const styles = (theme: Object) => ({
},
});
type ProvidedProps = {
classes: Object,
};
function CardContent(props) {
const { classes, className, component: Component, ...other } = props;
export type Props = {
return <Component className={classNames(classes.root, className)} {...other} />;
}
CardContent.propTypes = {
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className?: string,
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
};
function CardContent(props: ProvidedProps & Props) {
const { classes, className, ...other } = props;
return <div className={classNames(classes.root, className)} {...other} />;
}
CardContent.defaultProps = {
component: 'div',
};
export default withStyles(styles, { name: 'MuiCardContent' })(CardContent);

View File

@@ -1,24 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
import { CardContentProps, CardContentClassKey } from './CardContent';
import { CardContentProps } from './CardContent';
export interface CardHeaderProps extends StandardProps<
CardContentProps,
CardHeaderClassKey,
'title'
> {
export interface CardHeaderProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey, 'title'> {
action?: React.ReactNode;
avatar?: React.ReactNode;
component?: React.ReactType<CardHeaderProps>;
subheader?: React.ReactNode;
title?: React.ReactNode;
}
export type CardHeaderClassKey =
| CardContentClassKey
| 'avatar'
| 'content'
| 'title'
| 'subheader'
;
export type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader';
declare const CardHeader: React.ComponentType<CardHeaderProps>;

View File

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
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);
@@ -17,13 +13,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
// @inheritedComponent CardContent
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);
@@ -36,24 +33,25 @@ var _Typography = require('../Typography');
var _Typography2 = _interopRequireDefault(_Typography);
var _CardContent = require('./CardContent');
var _CardContent2 = _interopRequireDefault(_CardContent);
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: {
display: 'flex',
alignItems: 'center'
alignItems: 'center',
padding: theme.spacing.unit * 2
},
avatar: {
flex: '0 0 auto',
marginRight: theme.spacing.unit * 2
},
action: {
flex: '0 0 auto',
alignSelf: 'flex-start',
marginTop: theme.spacing.unit * -1,
marginRight: theme.spacing.unit * -2
},
content: {
flex: '1 1 auto'
},
@@ -62,52 +60,20 @@ var styles = exports.styles = function styles(theme) {
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The Avatar for the Card Header.
*/
avatar: 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,
/**
* The content of the component.
*/
subheader: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* The content of the Card Title.
*/
title: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
};
function CardHeader(props) {
var avatar = props.avatar,
var action = props.action,
avatar = props.avatar,
classes = props.classes,
classNameProp = props.className,
Component = props.component,
subheader = props.subheader,
title = props.title,
other = (0, _objectWithoutProperties3.default)(props, ['avatar', 'classes', 'className', 'subheader', 'title']);
other = (0, _objectWithoutProperties3.default)(props, ['action', 'avatar', 'classes', 'className', 'component', 'subheader', 'title']);
var className = (0, _classnames2.default)(classes.root, classNameProp);
// Adjustments that depend on the presence of an avatar
var titleType = avatar ? 'body2' : 'headline';
var subheaderType = avatar ? 'body2' : 'body1';
return _react2.default.createElement(
_CardContent2.default,
(0, _extends3.default)({ className: className }, other),
Component,
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, classNameProp) }, other),
avatar && _react2.default.createElement(
'div',
{ className: classes.avatar },
@@ -118,25 +84,66 @@ function CardHeader(props) {
{ className: classes.content },
_react2.default.createElement(
_Typography2.default,
{ type: titleType, component: 'span', className: classes.title },
{
variant: avatar ? 'body2' : 'headline',
component: 'span',
className: classes.title
},
title
),
_react2.default.createElement(
subheader && _react2.default.createElement(
_Typography2.default,
{
type: subheaderType,
variant: avatar ? 'body2' : 'body1',
component: 'span',
color: 'secondary',
color: 'textSecondary',
className: classes.subheader
},
subheader
)
),
action && _react2.default.createElement(
'div',
{ className: classes.action },
action
)
);
}
CardHeader.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
avatar: 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, 'subheader', typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)), (0, _defineProperty3.default)(_ref, 'title', typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)), _ref) : {};
CardHeader.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The action to display in the card header.
*/
action: _propTypes2.default.node,
/**
* The Avatar for the Card Header.
*/
avatar: _propTypes2.default.node,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/**
* The content of the component.
*/
subheader: _propTypes2.default.node,
/**
* The content of the Card Title.
*/
title: _propTypes2.default.node
} : {};
CardHeader.defaultProps = {
component: 'div'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCardHeader' })(CardHeader);

View File

@@ -1,22 +1,25 @@
// @flow
// @inheritedComponent CardContent
import React from 'react';
import type { Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import CardContent from './CardContent';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing.unit * 2,
},
avatar: {
flex: '0 0 auto',
marginRight: theme.spacing.unit * 2,
},
action: {
flex: '0 0 auto',
alignSelf: 'flex-start',
marginTop: theme.spacing.unit * -1,
marginRight: theme.spacing.unit * -2,
},
content: {
flex: '1 1 auto',
},
@@ -24,60 +27,79 @@ export const styles = (theme: Object) => ({
subheader: {},
});
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* The Avatar for the Card Header.
*/
avatar?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* The content of the component.
*/
subheader?: Node,
/**
* The content of the Card Title.
*/
title?: Node,
};
function CardHeader(props: ProvidedProps & Props) {
const { avatar, classes, className: classNameProp, subheader, title, ...other } = props;
const className = classNames(classes.root, classNameProp);
// Adjustments that depend on the presence of an avatar
const titleType = avatar ? 'body2' : 'headline';
const subheaderType = avatar ? 'body2' : 'body1';
function CardHeader(props) {
const {
action,
avatar,
classes,
className: classNameProp,
component: Component,
subheader,
title,
...other
} = props;
return (
<CardContent className={className} {...other}>
<Component className={classNames(classes.root, classNameProp)} {...other}>
{avatar && <div className={classes.avatar}>{avatar}</div>}
<div className={classes.content}>
<Typography type={titleType} component="span" className={classes.title}>
<Typography
variant={avatar ? 'body2' : 'headline'}
component="span"
className={classes.title}
>
{title}
</Typography>
<Typography
type={subheaderType}
component="span"
color="secondary"
className={classes.subheader}
>
{subheader}
</Typography>
{subheader && (
<Typography
variant={avatar ? 'body2' : 'body1'}
component="span"
color="textSecondary"
className={classes.subheader}
>
{subheader}
</Typography>
)}
</div>
</CardContent>
{action && <div className={classes.action}>{action}</div>}
</Component>
);
}
CardHeader.propTypes = {
/**
* The action to display in the card header.
*/
action: PropTypes.node,
/**
* The Avatar for the Card Header.
*/
avatar: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* The content of the component.
*/
subheader: PropTypes.node,
/**
* The content of the Card Title.
*/
title: PropTypes.node,
};
CardHeader.defaultProps = {
component: 'div',
};
export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader);

View File

@@ -1,18 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface CardMediaProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
CardMediaClassKey
> {
export interface CardMediaProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardMediaClassKey> {
component?: React.ReactType<CardMediaProps>;
image?: string;
src?: string;
component?: React.ReactType;
}
export type CardMediaClassKey =
| 'root'
;
export type CardMediaClassKey = 'root';
declare const CardMedia: React.ComponentType<CardMediaProps>;

View File

@@ -17,12 +17,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
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);
@@ -37,8 +39,6 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
var styles = exports.styles = {
root: {
backgroundSize: 'cover',
@@ -50,74 +50,65 @@ var styles = exports.styles = {
}
};
var mediaComponents = ['video', 'audio', 'picture', 'iframe', 'img'];
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image: require('prop-types').string,
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src: require('prop-types').string,
/**
* @ignore
*/
style: require('prop-types').object,
/**
* Component for rendering image.
*/
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType)
};
var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
function CardMedia(props) {
var _classNames;
var classes = props.classes,
className = props.className,
Component = props.component,
image = props.image,
style = props.style,
src = props.src,
ComponentProp = props.component,
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'image', 'style', 'src', 'component']);
style = props.style,
other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'component', 'image', 'src', 'style']);
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(Boolean(image || src), 'Material-UI: either `image` or `src` property must be specified.') : void 0;
var isMediaComponent = mediaComponents.indexOf(ComponentProp) !== -1;
var isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
var composedStyle = !isMediaComponent && image ? (0, _extends3.default)({ backgroundImage: 'url(' + image + ')' }, style) : style;
var composedClassName = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.root, !isMediaComponent), (0, _defineProperty3.default)(_classNames, classes.rootMedia, isMediaComponent), _classNames), className);
return _react2.default.createElement(ComponentProp, (0, _extends3.default)({
return _react2.default.createElement(Component, (0, _extends3.default)({
className: composedClassName,
style: composedStyle,
src: isMediaComponent ? image || src : undefined
}, other));
}
CardMedia.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType.isRequired ? babelPluginFlowReactPropTypes_proptype_ElementType.isRequired : babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType).isRequired
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'image', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'src', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'style', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'component', typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType)), _ref) : {};
CardMedia.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* Component for rendering image.
* Either a string to use a DOM element or a component.
*/
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image: _propTypes2.default.string,
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src: _propTypes2.default.string,
/**
* @ignore
*/
style: _propTypes2.default.object
} : {};
CardMedia.defaultProps = {
component: 'div'
};

View File

@@ -1,9 +1,7 @@
// @flow
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import warning from 'warning';
import type { ElementType } from 'react';
import withStyles from '../styles/withStyles';
export const styles = {
@@ -17,53 +15,17 @@ export const styles = {
},
};
const mediaComponents = ['video', 'audio', 'picture', 'iframe', 'img'];
const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
type ProvidedProps = {
classes: Object,
component: ElementType,
};
export type Props = {
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image?: string,
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src?: string,
/**
* @ignore
*/
style?: Object,
/**
* Component for rendering image.
*/
component?: ElementType,
};
function CardMedia(props: ProvidedProps & Props) {
const { classes, className, image, style, src, component: ComponentProp, ...other } = props;
function CardMedia(props) {
const { classes, className, component: Component, image, src, style, ...other } = props;
warning(
Boolean(image || src),
'Material-UI: either `image` or `src` property must be specified.',
);
const isMediaComponent = mediaComponents.indexOf(ComponentProp) !== -1;
const isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
const composedStyle =
!isMediaComponent && image ? { backgroundImage: `url(${image})`, ...style } : style;
const composedClassName = classNames(
@@ -75,7 +37,7 @@ function CardMedia(props: ProvidedProps & Props) {
);
return (
<ComponentProp
<Component
className={composedClassName}
style={composedStyle}
src={isMediaComponent ? image || src : undefined}
@@ -84,6 +46,38 @@ function CardMedia(props: ProvidedProps & Props) {
);
}
CardMedia.propTypes = {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Component for rendering image.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image: PropTypes.string,
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src: PropTypes.string,
/**
* @ignore
*/
style: PropTypes.object,
};
CardMedia.defaultProps = {
component: 'div',
};

View File

@@ -1,5 +1,3 @@
// @flow
export { default } from './Card';
export { default as CardContent } from './CardContent';
export { default as CardActions } from './CardActions';