Skip to content

Commit

Permalink
Merge pull request #601 from pomerantsev/paper-single-div
Browse files Browse the repository at this point in the history 
Use a single div for Paper
  • Loading branch information
@hai-cea
hai-cea committed May 10, 2015
2 parents c4406e8 + cb1fbd3 commit 19e16d9
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 90 deletions.
60 changes: 16 additions & 44 deletions docs/src/app/components/pages/components/paper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,6 @@ class PaperPage extends React.Component {
header: 'default: false',
desc: 'Set to true to generate a circlular paper container.'
},
{
name: 'innerClassName',
type: 'string',
header: 'optional',
desc: 'The paper container consists of an outer div and inner div. ' +
'This one done in order to achieve Material Design\'s shadows. ' +
'It\'s sometimes helpful to assign an className to the inner ' +
'div for styling. This property is the className for the inner ' +
'div.'
},
{
name: 'innerStyle',
type: 'string',
header: 'optional',
desc: 'Similiar to innerClassName. Overrides the inline-style of ' +
'the inner div.'
},
{
name: 'rounded',
type: 'bool',
Expand All @@ -96,8 +79,7 @@ class PaperPage extends React.Component {
name: 'style',
type: 'object',
header: 'optional',
desc: 'Override the inline-styles of Paper\'s root element (its ' +
'outer div).'
desc: 'Override the inline-styles of Paper\'s root element.'
},
{
name: 'zDepth',
Expand All @@ -106,16 +88,6 @@ class PaperPage extends React.Component {
desc: 'This number represents the zDepth of the paper shadow.'
}
]
},
{
name: 'Methods',
infoArray: [
{
name: 'getInnerContainer',
header: 'Paper.getInnerContainer()',
desc: 'Returns a reference to the inner container div.'
}
]
}
];

Expand All @@ -134,55 +106,55 @@ class PaperPage extends React.Component {

<div className="paper-examples">
<div className="paper-examples-group">
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1}>
<Paper style={styles} className="mui-paper-container" zDepth={1}>
<p>zDepth=1</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2}>
<Paper style={styles} className="mui-paper-container" zDepth={2}>
<p>zDepth=2</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3}>
<Paper style={styles} className="mui-paper-container" zDepth={3}>
<p>zDepth=3</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4}>
<Paper style={styles} className="mui-paper-container" zDepth={4}>
<p>zDepth=4</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5}>
<Paper style={styles} className="mui-paper-container" zDepth={5}>
<p>zDepth=5</p>
</Paper>
</div>

<div className="paper-examples-group">
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1} rounded={false}>
<Paper style={styles} className="mui-paper-container" zDepth={1} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2} rounded={false}>
<Paper style={styles} className="mui-paper-container" zDepth={2} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3} rounded={false}>
<Paper style={styles} className="mui-paper-container" zDepth={3} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4} rounded={false}>
<Paper style={styles} className="mui-paper-container" zDepth={4} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5} rounded={false}>
<Paper style={styles} className="mui-paper-container" zDepth={5} rounded={false}>
<p>rounded=false</p>
</Paper>
</div>

<div className="paper-examples-group">
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1} circle={true}>
<Paper style={styles} className="mui-paper-container" zDepth={1} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2} circle={true}>
<Paper style={styles} className="mui-paper-container" zDepth={2} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3} circle={true}>
<Paper style={styles} className="mui-paper-container" zDepth={3} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4} circle={true}>
<Paper style={styles} className="mui-paper-container" zDepth={4} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5} circle={true}>
<Paper style={styles} className="mui-paper-container" zDepth={5} circle={true}>
<p>circle=true</p>
</Paper>
</div>
Expand Down
54 changes: 8 additions & 46 deletions src/paper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ var Paper = React.createClass({

getDefaultProps: function() {
return {
innerClassName: '',
rounded: true,
zDepth: 1
};
Expand All @@ -34,21 +33,10 @@ var Paper = React.createClass({
boxSizing: 'border-box',
fontFamily: this.context.muiTheme.contentFontFamily,
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
boxShadow: this._getZDepthShadows(this.props.zDepth).boxShadow,
boxShadow: this._getZDepthShadows(this.props.zDepth),
borderRadius: this.props.circle ? '50%' :
this.props.rounded ? '2px' :
'0px'
},
inner: {
width: '100%',
height: '100%',
boxSizing: 'border-box',
fontFamily: this.context.muiTheme.contentFontFamily,
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
boxShadow: this._getZDepthShadows(this.props.zDepth).bottomBoxShadow,
borderRadius: this.props.circle ? '50%' :
this.props.rounded ? '2px' :
'0px'
}
};
return styles;
Expand All @@ -57,9 +45,7 @@ var Paper = React.createClass({
render: function() {
var {
className,
innerClassName,
style,
innerStyle,
circle,
rounded,
zDepth,
Expand All @@ -69,43 +55,19 @@ var Paper = React.createClass({

return (
<div {...other} className={this.props.className} style={this.mergeAndPrefix(styles.root, this.props.style)}>
<div ref="innerContainer" className={this.props.innerClassName} style={this.mergeAndPrefix(styles.inner, this.props.innerStyle)}>
{this.props.children}
</div>
{this.props.children}
</div>
);
},

getInnerContainer: function() {
return this.refs.innerContainer;
},

_getZDepthShadows: function(zDepth) {
var shadows = [
{
boxShadow: '',
bottomBoxShadow: '',
},
{
boxShadow: '0 1px 4px rgba(0, 0, 0, 0.24)',
bottomBoxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
},
{
boxShadow: '0 3px 10px rgba(0, 0, 0, 0.23)',
bottomBoxShadow: '0 3px 10px rgba(0, 0, 0, 0.16)',
},
{
boxShadow: '0 6px 10px rgba(0, 0, 0, 0.23)',
bottomBoxShadow: '0 10px 30px rgba(0, 0, 0, 0.19)',
},
{
boxShadow: '0 10px 18px rgba(0, 0, 0, 0.22)',
bottomBoxShadow: '0 14px 45px rgba(0, 0, 0, 0.25)',
},
{
boxShadow: '0 15px 20px rgba(0, 0, 0, 0.22)',
bottomBoxShadow: '0 19px 60px rgba(0, 0, 0, 0.30)',
},
'',
'0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)',
'0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)',
'0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23)',
'0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22)',
'0 19px 60px rgba(0, 0, 0, 0.30), 0 15px 20px rgba(0, 0, 0, 0.22)'
];

return shadows[zDepth];
Expand Down

0 comments on commit 19e16d9

Please sign in to comment.