UNPKG

d2-ui

Version:
136 lines (108 loc) 3.03 kB
import React from 'react'; import ReactDOM from 'react-dom'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import StylePropable from '../mixins/style-propable'; import autoPrefix from '../styles/auto-prefix'; import Transitions from '../styles/transitions'; import getMuiTheme from '../styles/getMuiTheme'; const ScaleInChild = React.createClass({ propTypes: { 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: function() { return { enterDelay: 0, maxScale: 1, minScale: 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}); }, componentWillAppear(callback) { this._initializeAnimation(callback); }, componentWillEnter(callback) { this._initializeAnimation(callback); }, componentDidAppear() { this._animate(); }, componentDidEnter() { this._animate(); }, componentWillLeave(callback) { let style = ReactDOM.findDOMNode(this).style; style.opacity = '0'; autoPrefix.set(style, 'transform', 'scale(' + this.props.minScale + ')', this.state.muiTheme); setTimeout(() => { if (this.isMounted()) callback(); }, 450); }, _animate() { let style = ReactDOM.findDOMNode(this).style; style.opacity = '1'; autoPrefix.set(style, 'transform', 'scale(' + this.props.maxScale + ')', this.state.muiTheme); }, _initializeAnimation(callback) { let style = ReactDOM.findDOMNode(this).style; style.opacity = '0'; autoPrefix.set(style, 'transform', 'scale(0)', this.state.muiTheme); setTimeout(() => { if (this.isMounted()) callback(); }, this.props.enterDelay); }, render() { const { children, enterDelay, style, ...other, } = this.props; const mergedRootStyles = this.mergeStyles({ position: 'absolute', height: '100%', width: '100%', top: 0, left: 0, transition: Transitions.easeOut(null, ['transform', 'opacity']), }, style); return ( <div {...other} style={this.prepareStyles(mergedRootStyles)}> {children} </div> ); }, }); export default ScaleInChild;