From fea335836897ca9d16a4c3e1ea1a604f38cdef6d Mon Sep 17 00:00:00 2001 From: Neil Gabbadon Date: Sun, 7 Feb 2016 22:33:20 -0500 Subject: [PATCH] Remove style propable from progress components --- src/circular-progress.jsx | 161 +++++++++++++++++++------------------- src/linear-progress.jsx | 161 +++++++++++++++++++------------------- src/refresh-indicator.jsx | 77 +++++++++--------- 3 files changed, 199 insertions(+), 200 deletions(-) diff --git a/src/circular-progress.jsx b/src/circular-progress.jsx index da26ae7497bc01..fff5d5a99fd1fa 100644 --- a/src/circular-progress.jsx +++ b/src/circular-progress.jsx @@ -1,10 +1,74 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -import StylePropable from './mixins/style-propable'; import autoPrefix from './styles/auto-prefix'; import Transitions from './styles/transitions'; import getMuiTheme from './styles/getMuiTheme'; +function getRelativeValue(value, min, max) { + const clampedValue = Math.min(Math.max(min, value), max); + const rangeValue = max - min; + const relValue = Math.round(clampedValue / rangeValue * 10000) / 10000; + return relValue * 100; +} + +function getStyles(props, state) { + const { + max, + min, + size, + value, + } = props; + + const { + baseTheme: { + palette, + }, + } = state.muiTheme; + + const zoom = size * 1.4 ; + const baseSize = 50; + let margin = Math.round( ((50 * zoom) - 50) / 2 ); + + if (margin < 0) margin = 0; + + let styles = { + root: { + position: 'relative', + margin: margin, + display: 'inline-block', + width: baseSize, + height: baseSize, + }, + wrapper: { + width: baseSize, + height: baseSize, + display: 'inline-block', + transition: Transitions.create('transform', '20s', null, 'linear'), + transitionTimingFunction: 'linear', + }, + svg: { + height: baseSize, + position: 'relative', + transform: `scale(${zoom})`, + width: baseSize, + }, + path: { + strokeDasharray: '89,200', + strokeDashoffset: 0, + stroke: props.color || palette.primary1Color, + strokeLinecap: 'round', + transition: Transitions.create('all', '1.5s', null, 'ease-in-out'), + }, + }; + + if (props.mode === 'determinate') { + const relVal = getRelativeValue(value, min, max); + styles.path.transition = Transitions.create('all', '0.3s', null, 'linear'); + styles.path.strokeDasharray = `${Math.round(relVal * 1.25)},200`; + } + + return styles; +} + const CircularProgress = React.createClass({ propTypes: { @@ -54,13 +118,10 @@ const CircularProgress = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [StylePropable], - getDefaultProps() { return { mode: 'indeterminate', @@ -84,18 +145,14 @@ const CircularProgress = React.createClass({ }, componentDidMount() { - let wrapper = ReactDOM.findDOMNode(this.refs.wrapper); - let path = ReactDOM.findDOMNode(this.refs.path); - - this._scalePath(path); - this._rotateWrapper(wrapper); + this._scalePath(this.refs.path); + this._rotateWrapper(this.refs.wrapper); }, - //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}); + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, componentWillUnmount() { @@ -103,17 +160,6 @@ const CircularProgress = React.createClass({ clearTimeout(this.rotateWrapperTimer); }, - _getRelativeValue() { - let value = this.props.value; - let min = this.props.min; - let max = this.props.max; - - let clampedValue = Math.min(Math.max(min, value), max); - let rangeValue = max - min; - let relValue = Math.round(clampedValue / rangeValue * 10000) / 10000; - return relValue * 100; - }, - scalePathTimer: undefined, rotateWrapperTimer: undefined, @@ -155,58 +201,6 @@ const CircularProgress = React.createClass({ this.rotateWrapperTimer = setTimeout(() => this._rotateWrapper(wrapper), 10050); }, - getTheme() { - return this.state.muiTheme.rawTheme.palette; - }, - - getStyles(zoom) { - zoom *= 1.4; - let size = '50px'; - - let margin = Math.round( ((50 * zoom) - 50) / 2 ); - - if (margin < 0) margin = 0; - - let styles = { - root: { - position: 'relative', - margin: margin, - display: 'inline-block', - width: size, - height: size, - }, - wrapper: { - width: size, - height: size, - display: 'inline-block', - transition: Transitions.create('transform', '20s', null, 'linear'), - }, - svg: { - height: size, - position: 'relative', - transform: `scale(${zoom})`, - width: size, - }, - path: { - strokeDasharray: '89,200', - strokeDashoffset: 0, - stroke: this.props.color || this.getTheme().primary1Color, - strokeLinecap: 'round', - transition: Transitions.create('all', '1.5s', null, 'ease-in-out'), - }, - }; - - autoPrefix.set(styles.wrapper, 'transitionTimingFunction', 'linear', this.state.muiTheme); - - if (this.props.mode === 'determinate') { - let relVal = this._getRelativeValue(); - styles.path.transition = Transitions.create('all', '0.3s', null, 'linear'); - styles.path.strokeDasharray = `${Math.round(relVal * 1.25)},200`; - } - - return styles; - }, - render() { let { style, @@ -215,15 +209,18 @@ const CircularProgress = React.createClass({ ...other, } = this.props; + const { + prepareStyles, + } = this.state.muiTheme; - let styles = this.getStyles(size || 1); + const styles = getStyles(this.props, this.state); return ( -
-
- +
+
+ diff --git a/src/linear-progress.jsx b/src/linear-progress.jsx index 536153211f050a..5ece5c897f66c9 100644 --- a/src/linear-progress.jsx +++ b/src/linear-progress.jsx @@ -1,9 +1,72 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -import StylePropable from './mixins/style-propable'; import Transitions from './styles/transitions'; import getMuiTheme from './styles/getMuiTheme'; +function getRelativeValue(value, min, max) { + const clampedValue = Math.min(Math.max(min, value), max); + const rangeValue = max - min; + const relValue = Math.round(clampedValue / rangeValue * 10000) / 10000; + return relValue * 100; +} + +function getStyles(props, state) { + const { + max, + min, + value, + } = props; + + const { + baseTheme: { + palette, + }, + } = state.muiTheme; + + const styles = { + root: { + position: 'relative', + height: 4, + display: 'block', + width: '100%', + backgroundColor: palette.primary3Color, + borderRadius: 2, + margin: 0, + overflow: 'hidden', + }, + bar: { + height: '100%', + }, + barFragment1: {}, + barFragment2: {}, + }; + + if (props.mode === 'indeterminate') { + styles.barFragment1 = { + position: 'absolute', + backgroundColor: props.color || palette.primary1Color, + top: 0, + left: 0, + bottom: 0, + transition: Transitions.create('all', '840ms', null, 'cubic-bezier(0.650, 0.815, 0.735, 0.395)'), + }; + + styles.barFragment2 = { + position: 'absolute', + backgroundColor: props.color || palette.primary1Color, + top: 0, + left: 0, + bottom: 0, + transition: Transitions.create('all', '840ms', null, 'cubic-bezier(0.165, 0.840, 0.440, 1.000)'), + }; + } else { + styles.bar.backgroundColor = props.color || palette.primary1Color; + styles.bar.transition = Transitions.create('width', '.3s', null, 'linear'); + styles.bar.width = `${getRelativeValue(value, min, max)}%`; + } + + return styles; +} + const LinearProgress = React.createClass({ propTypes: { /** @@ -43,15 +106,10 @@ const LinearProgress = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [ - StylePropable, - ], - getDefaultProps() { return { mode: 'indeterminate', @@ -74,27 +132,23 @@ const LinearProgress = React.createClass({ }, componentDidMount() { - let bar1 = ReactDOM.findDOMNode(this.refs.bar1); - let bar2 = ReactDOM.findDOMNode(this.refs.bar2); - - this.timers.bar1 = this._barUpdate('bar1', 0, bar1, [ + this.timers.bar1 = this._barUpdate('bar1', 0, this.refs.bar1, [ [-35, 100], [100, -90], ]); this.timers.bar2 = setTimeout(() => { - this._barUpdate('bar2', 0, bar2, [ + this._barUpdate('bar2', 0, this.refs.bar2, [ [-200, 100], [107, -8], ]); }, 850); }, - //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}); + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, componentWillUnmount() { @@ -130,80 +184,23 @@ const LinearProgress = React.createClass({ this.timers[id] = setTimeout(() => this._barUpdate(id, step + 1, barElement, stepValues), 420); }, - getTheme() { - return this.state.muiTheme.rawTheme.palette; - }, - - getStyles() { - let styles = { - root: { - position: 'relative', - height: 4, - display: 'block', - width: '100%', - backgroundColor: this.getTheme().primary3Color, - borderRadius: 2, - margin: 0, - overflow: 'hidden', - }, - bar: { - height: '100%', - }, - barFragment1: {}, - barFragment2: {}, - }; - - if (this.props.mode === 'indeterminate') { - styles.barFragment1 = { - position: 'absolute', - backgroundColor: this.props.color || this.getTheme().primary1Color, - top: 0, - left: 0, - bottom: 0, - transition: Transitions.create('all', '840ms', null, 'cubic-bezier(0.650, 0.815, 0.735, 0.395)'), - }; - - styles.barFragment2 = { - position: 'absolute', - backgroundColor: this.props.color || this.getTheme().primary1Color, - top: 0, - left: 0, - bottom: 0, - transition: Transitions.create('all', '840ms', null, 'cubic-bezier(0.165, 0.840, 0.440, 1.000)'), - }; - } else { - styles.bar.backgroundColor = this.props.color || this.getTheme().primary1Color; - styles.bar.transition = Transitions.create('width', '.3s', null, 'linear'); - styles.bar.width = `${this._getRelativeValue()}%`; - } - - return styles; - }, - - _getRelativeValue() { - let value = this.props.value; - let min = this.props.min; - let max = this.props.max; - - let clampedValue = Math.min(Math.max(min, value), max); - let rangeValue = max - min; - let relValue = Math.round(clampedValue / rangeValue * 10000) / 10000; - return relValue * 100; - }, - render() { let { style, ...other, } = this.props; - let styles = this.getStyles(); + const { + prepareStyles, + } = this.state.muiTheme; + + const styles = getStyles(this.props, this.state); return ( -
-
-
-
+
+
+
+
); diff --git a/src/refresh-indicator.jsx b/src/refresh-indicator.jsx index 1c0d502039d5b4..86f886a3be14e5 100644 --- a/src/refresh-indicator.jsx +++ b/src/refresh-indicator.jsx @@ -1,12 +1,29 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -import StylePropable from './mixins/style-propable'; import autoPrefix from './styles/auto-prefix'; import Transitions from './styles/transitions'; import Paper from './paper'; import getMuiTheme from './styles/getMuiTheme'; const VIEWBOX_SIZE = 32; + +function getStyles(props) { + const padding = props.size * 0.1; // same implementation of `this._getPaddingSize()` + return { + root: { + position: 'absolute', + zIndex: 2, + width: props.size, + height: props.size, + padding: padding, + top: -10000, + left: -10000, + transform: `translate3d(${10000 + props.left}px, ${10000 + props.top}px, 0)`, + opacity: props.status === 'hide' ? 0 : 1, + transition: props.status === 'hide' ? Transitions.create('all', '.3s', 'ease-out') : 'none', + }, + }; +} + const RefreshIndicator = React.createClass({ propTypes: { @@ -61,15 +78,10 @@ const RefreshIndicator = React.createClass({ muiTheme: React.PropTypes.object, }, - //for passing default theme context to children childContextTypes: { muiTheme: React.PropTypes.object, }, - mixins: [ - StylePropable, - ], - getDefaultProps() { return { percentage: 0, @@ -94,16 +106,15 @@ const RefreshIndicator = React.createClass({ this.componentDidUpdate(); }, - //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}); + this.setState({ + muiTheme: nextContext.muiTheme || this.state.muiTheme, + }); }, componentDidUpdate() { - this._scalePath(ReactDOM.findDOMNode(this.refs.path), 0); - this._rotateWrapper(ReactDOM.findDOMNode(this.refs.wrapper)); + this._scalePath(this.refs.path, 0); + this._rotateWrapper(this.refs.wrapper); }, componentWillUnmount() { @@ -117,12 +128,17 @@ const RefreshIndicator = React.createClass({ rotateWrapperSecondTimer: undefined, _renderChildren() { + + const { + prepareStyles, + } = this.state.muiTheme; + const paperSize = this._getPaperSize(); let childrenCmp = null; if (this.props.status !== 'ready') { const circleStyle = this._getCircleStyle(paperSize); childrenCmp = ( -
@@ -154,12 +170,12 @@ const RefreshIndicator = React.createClass({ viewBox={`0 0 ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`} > @@ -206,22 +222,6 @@ const RefreshIndicator = React.createClass({ return p1; }, - _getRootStyle() { - const padding = this._getPaddingSize(); - return { - position: 'absolute', - zIndex: 2, - width: this.props.size, - height: this.props.size, - padding: padding, - top: -10000, - left: -10000, - transform: `translate3d(${10000 + this.props.left}px, ${10000 + this.props.top}px, 0)`, - opacity: this.props.status === 'hide' ? 0 : 1, - transition: this.props.status === 'hide' ? Transitions.create('all', '.3s', 'ease-out') : 'none', - }; - }, - _getCircleStyle() { const isLoading = this.props.status === 'loading'; const p1 = isLoading ? 1 : this._getFactor(); @@ -332,11 +332,16 @@ const RefreshIndicator = React.createClass({ }, render() { - const rootStyle = this._getRootStyle(); + const { + style, + } = this.props; + + const styles = getStyles(this.props, this.state); + return ( {this._renderChildren()}