96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
import React, {Component} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import propTypes from '../utils/propTypes';
|
|
import transitions from '../styles/transitions';
|
|
|
|
function getStyles(props, context) {
|
|
const {
|
|
rounded,
|
|
circle,
|
|
transitionEnabled,
|
|
zDepth,
|
|
} = props;
|
|
|
|
const {
|
|
baseTheme,
|
|
paper,
|
|
borderRadius,
|
|
} = context.muiTheme;
|
|
|
|
return {
|
|
root: {
|
|
color: paper.color,
|
|
backgroundColor: paper.backgroundColor,
|
|
transition: transitionEnabled && transitions.easeOut(),
|
|
boxSizing: 'border-box',
|
|
fontFamily: baseTheme.fontFamily,
|
|
WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
|
|
boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers
|
|
borderRadius: circle ? '50%' : rounded ? borderRadius : '0px',
|
|
},
|
|
};
|
|
}
|
|
|
|
class Paper extends Component {
|
|
static propTypes = {
|
|
/**
|
|
* Children passed into the paper element.
|
|
*/
|
|
children: PropTypes.node,
|
|
/**
|
|
* Set to true to generate a circlular paper container.
|
|
*/
|
|
circle: PropTypes.bool,
|
|
/**
|
|
* By default, the paper container will have a border radius.
|
|
* Set this to false to generate a container with sharp corners.
|
|
*/
|
|
rounded: PropTypes.bool,
|
|
/**
|
|
* Override the inline-styles of the root element.
|
|
*/
|
|
style: PropTypes.object,
|
|
/**
|
|
* Set to false to disable CSS transitions for the paper element.
|
|
*/
|
|
transitionEnabled: PropTypes.bool,
|
|
/**
|
|
* This number represents the zDepth of the paper shadow.
|
|
*/
|
|
zDepth: propTypes.zDepth,
|
|
};
|
|
|
|
static defaultProps = {
|
|
circle: false,
|
|
rounded: true,
|
|
transitionEnabled: true,
|
|
zDepth: 1,
|
|
};
|
|
|
|
static contextTypes = {
|
|
muiTheme: PropTypes.object.isRequired,
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
children,
|
|
circle, // eslint-disable-line no-unused-vars
|
|
rounded, // eslint-disable-line no-unused-vars
|
|
style,
|
|
transitionEnabled, // eslint-disable-line no-unused-vars
|
|
zDepth, // eslint-disable-line no-unused-vars
|
|
...other
|
|
} = this.props;
|
|
|
|
const {prepareStyles} = this.context.muiTheme;
|
|
const styles = getStyles(this.props, this.context);
|
|
|
|
return (
|
|
<div {...other} style={prepareStyles(Object.assign(styles.root, style))}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Paper;
|