d2-ui
Version:
107 lines (90 loc) • 2.32 kB
JSX
import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ReactTransitionGroup from 'react-addons-transition-group';
import StylePropable from '../mixins/style-propable';
import ScaleInChild from './scale-in-child';
import getMuiTheme from '../styles/getMuiTheme';
const ScaleIn = React.createClass({
propTypes: {
childStyle: React.PropTypes.object,
children: React.PropTypes.node,
enterDelay: React.PropTypes.number,
maxScale: React.PropTypes.number,
minScale: React.PropTypes.number,
/**
* Override the inline-styles of the root element.
*/
style: React.PropTypes.object,
},
contextTypes: {
muiTheme: React.PropTypes.object,
},
//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [
PureRenderMixin,
StylePropable,
],
getDefaultProps() {
return {
enterDelay: 0,
};
},
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) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},
render() {
const {
children,
childStyle,
enterDelay,
maxScale,
minScale,
style,
...other,
} = this.props;
const mergedRootStyles = this.mergeStyles({
position: 'relative',
overflow: 'hidden',
height: '100%',
}, style);
const newChildren = React.Children.map(children, (child) => {
return (
<ScaleInChild
key={child.key}
enterDelay={enterDelay}
maxScale={maxScale}
minScale={minScale}
style={childStyle}
>
{child}
</ScaleInChild>
);
});
return (
<ReactTransitionGroup
{...other}
style={this.prepareStyles(mergedRootStyles)}
component="div"
>
{newChildren}
</ReactTransitionGroup>
);
},
});
export default ScaleIn;