From 015e798394a98bb826446ceb55bfadacc5888215 Mon Sep 17 00:00:00 2001 From: Claire Date: Tue, 11 Oct 2022 10:51:33 +0200 Subject: Move some modules from flavours/glitch/utils/ back to flavours/glitch/features/ui/util/ --- .../glitch/features/ui/util/reduced_motion.js | 44 ++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 app/javascript/flavours/glitch/features/ui/util/reduced_motion.js (limited to 'app/javascript/flavours/glitch/features/ui/util/reduced_motion.js') diff --git a/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js new file mode 100644 index 000000000..95519042b --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js @@ -0,0 +1,44 @@ +// Like react-motion's Motion, but reduces all animations to cross-fades +// for the benefit of users with motion sickness. +import React from 'react'; +import Motion from 'react-motion/lib/Motion'; +import PropTypes from 'prop-types'; + +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; +}; + +class ReducedMotion extends React.Component { + + static propTypes = { + defaultStyle: PropTypes.object, + style: PropTypes.object, + children: PropTypes.func, + } + + render() { + + const { style, defaultStyle, children } = this.props; + + 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 ( + + {children} + + ); + } + +} + +export default ReducedMotion; -- cgit