d2-ui
Version:
116 lines (96 loc) • 2.72 kB
JSX
import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import StylePropable from './mixins/style-propable';
import PropTypes from './utils/prop-types';
import Transitions from './styles/transitions';
import getMuiTheme from './styles/getMuiTheme';
const Paper = React.createClass({
propTypes: {
/**
* Children passed into the paper element.
*/
children: React.PropTypes.node,
/**
* Set to true to generate a circlular paper container.
*/
circle: React.PropTypes.bool,
/**
* By default, the paper container will have a border radius.
* Set this to false to generate a container with sharp corners.
*/
rounded: React.PropTypes.bool,
/**
* Override the inline-styles of the root element.
*/
style: React.PropTypes.object,
/**
* Set to false to disable CSS transitions for the paper element.
*/
transitionEnabled: React.PropTypes.bool,
/**
* This number represents the zDepth of the paper shadow.
*/
zDepth: PropTypes.zDepth,
},
contextTypes: {
muiTheme: React.PropTypes.object,
},
//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [
PureRenderMixin,
StylePropable,
],
getDefaultProps() {
return {
circle: false,
rounded: true,
transitionEnabled: true,
zDepth: 1,
};
},
getInitialState() {
return {
muiTheme: this.context.muiTheme || getMuiTheme(),
};
},
getChildContext() {
return {
muiTheme: this.state.muiTheme,
};
},
//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},
render() {
const {
children,
circle,
rounded,
style,
transitionEnabled,
zDepth,
...other,
} = this.props;
const styles = {
backgroundColor: this.state.muiTheme.paper.backgroundColor,
transition: transitionEnabled && Transitions.easeOut(),
boxSizing: 'border-box',
fontFamily: this.state.muiTheme.rawTheme.fontFamily,
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
boxShadow: this.state.muiTheme.paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers
borderRadius: circle ? '50%' : rounded ? '2px' : '0px',
};
return (
<div {...other} style={this.prepareStyles(styles, style)}>
{children}
</div>
);
},
});
export default Paper;