From 6bc221f828c6a1684a68ad03e5075d4e3d8df821 Mon Sep 17 00:00:00 2001 From: Neil Gabbadon Date: Sat, 6 Feb 2016 01:22:14 -0500 Subject: [PATCH] Remove style-propable mixin from popover components --- src/popover/popover-animation-from-top.jsx | 79 ++++++-------- src/popover/popover-default-animation.jsx | 118 +++++++++------------ src/popover/popover.jsx | 3 - 3 files changed, 85 insertions(+), 115 deletions(-) diff --git a/src/popover/popover-animation-from-top.jsx b/src/popover/popover-animation-from-top.jsx index 3fc230145fe932..339f2857d4364d 100644 --- a/src/popover/popover-animation-from-top.jsx +++ b/src/popover/popover-animation-from-top.jsx @@ -1,9 +1,35 @@ -import Transitions from '../styles/transitions'; import React from 'react'; -import PropTypes from '../utils/prop-types'; -import StylePropable from '../mixins/style-propable'; -import getMuiTheme from '../styles/getMuiTheme'; import Paper from '../paper'; +import Transitions from '../styles/transitions'; +import getMuiTheme from '../styles/getMuiTheme'; +import PropTypes from '../utils/prop-types'; + +function getStyles(props, state) { + const { + targetOrigin, + } = props; + + const { + open, + muiTheme: { + zIndex, + }, + } = state; + + const horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); + + return { + root: { + opacity: open ? 1 : 0, + transform: open ? 'scaleY(1)' : 'scaleY(0)', + transformOrigin: `${horizontal} ${targetOrigin.vertical}`, + position: 'fixed', + zIndex: zIndex.popover, + transition: Transitions.easeOut('450ms', ['transform', 'opacity']), + maxHeight: '100%', + }, + }; +} const PopoverAnimationFromTop = React.createClass({ @@ -24,15 +50,10 @@ const PopoverAnimationFromTop = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [ - StylePropable, - ], - getDefaultProps() { return { style: {}, @@ -58,56 +79,24 @@ const PopoverAnimationFromTop = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({ open: nextProps.open, - muiTheme: newMuiTheme, + muiTheme: nextContext.muiTheme || this.state.muiTheme, }); }, - getStyles() { - let {targetOrigin} = this.props; - let horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); - - return { - base: { - opacity: 0, - transform: 'scaleY(0)', - transformOrigin: `${horizontal} ${targetOrigin.vertical}`, - position: 'fixed', - zIndex: this.state.muiTheme.zIndex.popover, - transition: Transitions.easeOut('450ms', ['transform', 'opacity']), - maxHeight: '100%', - }, - - }; - }, - - getOpenStyles() { - return { - base: { - opacity: 1, - transform: 'scaleY(1)', - }, - }; - }, - render() { - let { + const { className, style, zDepth, } = this.props; - let styles = this.getStyles(); - let openStyles = {}; - if (this.state.open) - openStyles = this.getOpenStyles(); + const styles = getStyles(this.props, this.state); return ( diff --git a/src/popover/popover-default-animation.jsx b/src/popover/popover-default-animation.jsx index 4d5b3ea5635870..86a8bf325a0017 100644 --- a/src/popover/popover-default-animation.jsx +++ b/src/popover/popover-default-animation.jsx @@ -1,10 +1,50 @@ import Transitions from '../styles/transitions'; import React from 'react'; import PropTypes from '../utils/prop-types'; -import StylePropable from '../mixins/style-propable'; import getMuiTheme from '../styles/getMuiTheme'; import Paper from '../paper'; +function getStyles(props, state) { + const { + targetOrigin, + } = props; + + const { + open, + muiTheme: { + zIndex, + }, + } = state; + + const horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); + + return { + root: { + opacity: open ? 1 : 0, + transform: open ? 'scale(1, 1)' : 'scale(0, 0)', + transformOrigin: `${horizontal} ${targetOrigin.vertical}`, + position: 'fixed', + zIndex: zIndex.popover, + transition: Transitions.easeOut('250ms', ['transform', 'opacity']), + maxHeight: '100%', + }, + horizontal: { + maxHeight: '100%', + overflowY: 'auto', + transform: open ? 'scaleX(1)' : 'scaleX(0)', + opacity: open ? 1 : 0, + transformOrigin: `${horizontal} ${targetOrigin.vertical}`, + transition: Transitions.easeOut('250ms', ['transform', 'opacity']), + }, + vertical: { + opacity: open ? 1 : 0, + transform: open ? 'scaleY(1)' : 'scaleY(0)', + transformOrigin: `${horizontal} ${targetOrigin.vertical}`, + transition: Transitions.easeOut('500ms', ['transform', 'opacity']), + }, + }; +} + const PopoverDefaultAnimation = React.createClass({ propTypes: { @@ -28,15 +68,10 @@ const PopoverDefaultAnimation = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [ - StylePropable, - ], - getDefaultProps() { return { style: {}, @@ -62,84 +97,33 @@ const PopoverDefaultAnimation = React.createClass({ }, componentWillReceiveProps(nextProps, nextContext) { - let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; - this.setState({ open: nextProps.open, - muiTheme: newMuiTheme, + muiTheme: nextContext.muiTheme || this.state.muiTheme, }); }, - - getStyles() { - let {targetOrigin} = this.props; - let horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); - - return { - base: { - opacity: 0, - transform: 'scale(0, 0)', - transformOrigin: `${horizontal} ${targetOrigin.vertical}`, - position: 'fixed', - zIndex: this.state.muiTheme.zIndex.popover, - transition: Transitions.easeOut('250ms', ['transform', 'opacity']), - maxHeight: '100%', - - }, - horizontal: { - maxHeight: '100%', - overflowY: 'auto', - transform: 'scaleX(0)', - opacity: 0, - transformOrigin: `${horizontal} ${targetOrigin.vertical}`, - transition: Transitions.easeOut('250ms', ['transform', 'opacity']), - }, - vertical: { - opacity: 0, - transform: 'scaleY(0)', - transformOrigin: `${horizontal} ${targetOrigin.vertical}`, - transition: Transitions.easeOut('500ms', ['transform', 'opacity']), - }, - }; - }, - - getOpenStyles() { - return { - base: { - opacity: 1, - transform: 'scale(1, 1)', - }, - horizontal: { - opacity: 1, - transform: 'scaleX(1)', - }, - vertical: { - opacity: 1, - transform: 'scaleY(1)', - }, - }; - }, - render() { - let { + const { className, style, zDepth, } = this.props; - let styles = this.getStyles(); - let openStyles = {}; - if (this.state.open) - openStyles = this.getOpenStyles(); + const { + prepareStyles, + } = this.state.muiTheme; + + const styles = getStyles(this.props, this.state); return ( -
-
+
+
{this.props.children}
diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx index 18dee25ecba08f..604f6223c5ed5e 100644 --- a/src/popover/popover.jsx +++ b/src/popover/popover.jsx @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import WindowListenable from '../mixins/window-listenable'; import RenderToLayer from '../render-to-layer'; -import StylePropable from '../mixins/style-propable'; import PropTypes from '../utils/prop-types'; import Paper from '../paper'; import throttle from 'lodash.throttle'; @@ -104,13 +103,11 @@ const Popover = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, mixins: [ - StylePropable, WindowListenable, ],