diff options
author | Nolan Lawson <nolan@nolanlawson.com> | 2017-10-16 00:36:15 -0700 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-10-16 09:36:15 +0200 |
commit | fa0be3f834b54bb276eb5233195181fa3760710f (patch) | |
tree | c1367d2304a220262d440034e1927097ed1678da /app/javascript/mastodon/features/ui/util | |
parent | 981e20b03a67ecc01826ef32c5fc9fd28ed2917b (diff) |
Add option to reduce motion (#5393)
* Add option to reduce motion * Use HOC to wrap all Motion calls * fix case-sensitive issue * Avoid updating too frequently * Get rid of unnecessary change to _simple_status.html.haml
Diffstat (limited to 'app/javascript/mastodon/features/ui/util')
-rw-r--r-- | app/javascript/mastodon/features/ui/util/optional_motion.js | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/ui/util/optional_motion.js b/app/javascript/mastodon/features/ui/util/optional_motion.js new file mode 100644 index 000000000..4276eeaa4 --- /dev/null +++ b/app/javascript/mastodon/features/ui/util/optional_motion.js @@ -0,0 +1,34 @@ +// Like react-motion's Motion, but checks to see if the user prefers +// reduced motion and uses a cross-fade in those cases. + +import Motion from 'react-motion/lib/Motion'; +import { connect } from 'react-redux'; + +const stylesToKeep = ['opacity', 'backgroundOpacity']; + +const extractValue = (value) => { + // This is either an object with a "val" property or it's a number + return (typeof value === 'object' && value && 'val' in value) ? value.val : value; +}; + +const mapStateToProps = (state, ownProps) => { + const reduceMotion = state.getIn(['meta', 'reduce_motion']); + + if (reduceMotion) { + const { style, defaultStyle } = ownProps; + + Object.keys(style).forEach(key => { + if (stylesToKeep.includes(key)) { + return; + } + // If it's setting an x or height or scale or some other value, we need + // to preserve the end-state value without actually animating it + style[key] = defaultStyle[key] = extractValue(style[key]); + }); + + return { style, defaultStyle }; + } + return {}; +}; + +export default connect(mapStateToProps)(Motion); |