UNPKG

d2-ui

Version:
107 lines (90 loc) 2.32 kB
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;