@material-ui/core
Version:
React components that implement Google's Material Design.
89 lines (80 loc) • 2.45 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/objectSpread";
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import warning from 'warning';
import withStyles from '../styles/withStyles';
export const styles = theme => {
const elevations = {};
theme.shadows.forEach((shadow, index) => {
elevations[`elevation${index}`] = {
boxShadow: shadow
};
});
return _objectSpread({
/* Styles applied to the root element. */
root: {
backgroundColor: theme.palette.background.paper
},
/* Styles applied to the root element if `square={false}`. */
rounded: {
borderRadius: theme.shape.borderRadius
}
}, elevations);
};
function Paper(props) {
const {
classes,
className: classNameProp,
component: Component,
square,
elevation
} = props,
other = _objectWithoutProperties(props, ["classes", "className", "component", "square", "elevation"]);
process.env.NODE_ENV !== "production" ? warning(elevation >= 0 && elevation < 25, `Material-UI: this elevation \`${elevation}\` is not implemented.`) : void 0;
const className = classNames(classes.root, classes[`elevation${elevation}`], {
[classes.rounded]: !square
}, classNameProp);
return React.createElement(Component, _extends({
className: className
}, other));
}
Paper.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
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, PropTypes.object]),
/**
* Shadow depth, corresponds to `dp` in the spec.
* It's accepting values between 0 and 24 inclusive.
*/
elevation: PropTypes.number,
/**
* If `true`, rounded corners are disabled.
*/
square: PropTypes.bool
} : {};
Paper.defaultProps = {
component: 'div',
elevation: 2,
square: false
};
export default withStyles(styles, {
name: 'MuiPaper'
})(Paper);