Merge branch 'next-polls' into 'next'

Next: convert Polls to TSX

See merge request soapbox-pub/soapbox-fe!1155

app/soapbox/containers/poll_container.ts

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+
+import Poll from 'soapbox/components/poll';
+
+import type { RootState } from 'soapbox/store';
+
+interface IPollContainer {
+  pollId: string,
+}
+
+const mapStateToProps = (state: RootState, { pollId }: IPollContainer) => ({
+  poll: state.polls.get(pollId),
+  me: state.me,
+});
+
+
+export default connect(mapStateToProps)(Poll);

app/soapbox/features/ui/util/optional_motion.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Motion, MotionProps } from 'react-motion';
+
+import { useSettings } from 'soapbox/hooks';
+
+import ReducedMotion from './reduced_motion';
+
+const OptionalMotion = (props: MotionProps) => {
+  const reduceMotion = useSettings().get('reduceMotion');
+
+  return (
+    reduceMotion ? <ReducedMotion {...props} /> : <Motion {...props} />
+  );
+};
+
+export default OptionalMotion;

app/soapbox/features/ui/util/reduced_motion.tsx

@@ -0,0 +1,31 @@
+// 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, MotionProps } from 'react-motion';
+
+const stylesToKeep = ['opacity', 'backgroundOpacity'];
+
+const extractValue = (value: any) => {
+  // 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 ReducedMotion: React.FC<MotionProps> = ({ style = {}, defaultStyle = {}, children }) => {
+
+  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 (
+    <Motion style={style} defaultStyle={defaultStyle}>
+      {children}
+    </Motion>
+  );
+};
+
+export default ReducedMotion;

package.json

@@ -72,6 +72,7 @@
     "@types/lodash": "^4.14.180",
     "@types/qrcode.react": "^1.0.2",
     "@types/react-helmet": "^6.1.5",
+    "@types/react-motion": "^0.0.32",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-toggle": "^4.0.3",
     "@types/semver": "^7.3.9",

yarn.lock

@@ -2109,6 +2109,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-motion@^0.0.32":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@types/react-motion/-/react-motion-0.0.32.tgz#c7355cca054664f1aeadd7388f6890e9355e1783"
+  integrity sha512-xePjDdhy6/6AX3CUQCeQ2GSF0RwF+lXSpUSrm8tmdUXRf5Ps/dULwouTJ8YHhDvX7WlwYRKZjHXatadz/x3HXA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.16":
   version "7.1.18"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.18.tgz#2bf8fd56ebaae679a90ebffe48ff73717c438e04"