Merge pull request #1169 from j-hertzog/fix/update-react-prose

#724 Update react-pose(deprecated) to framer-motion

package.json

@@ -68,6 +68,7 @@
     "final-form-arrays": "^3.0.2",
     "final-form-calculate": "^1.3.2",
     "firebase": "^8.6.3",
+    "framer-motion": "^4.1.17",
     "fuse.js": "^6.4.6",
     "is-url": "^1.2.4",
     "leaflet": "^1.5.1",
@@ -97,7 +98,6 @@
     "react-linkify": "^0.2.2",
     "react-player": "^1.15.3",
     "react-portal": "^4.2.0",
-    "react-pose": "^4.0.8",
     "react-router": "^5.2.0",
     "react-router-breadcrumbs-hoc": "^3.2.0",
     "react-router-dom": "^5.2.0",

src/components/Animations/FadeInOut.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import posed, { PoseGroup } from 'react-pose'
+import { motion } from 'framer-motion'
 
 interface IProps {
   show: boolean
@@ -8,10 +8,17 @@ interface IState {
   show: boolean
 }
 
-const AnimationContainer = posed.div({
-  enter: { opacity: 1 },
-  exit: { y: 5, opacity: 0 },
-})
+const AnimationContainer = (props?: React.ReactNode) => {
+  return (
+    <motion.div layout
+      key={'animationContainer'}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ y: 5, opacity: 0 }}>
+      { props }
+    </motion.div>
+  )
+}
 
 export class FadeInOut extends React.Component<IProps, IState> {
   constructor(props: IProps) {
@@ -25,14 +32,6 @@ export class FadeInOut extends React.Component<IProps, IState> {
   }
 
   render() {
-    return (
-      <PoseGroup>
-        {this.state.show && (
-          <AnimationContainer key="animationContainer">
-            {this.props.children}
-          </AnimationContainer>
-        )}
-      </PoseGroup>
-    )
+      return this.state.show ? AnimationContainer(this.props.children) : AnimationContainer();
   }
 }

src/pages/Howto/Content/Common/Howto.form.tsx

@@ -18,7 +18,7 @@ import Flex from 'src/components/Flex'
 import { TagsSelectField } from 'src/components/Form/TagsSelect.field'
 import { ImageInputField } from 'src/components/Form/ImageInput.field'
 import { FileInputField } from 'src/components/Form/FileInput.field'
-import posed, { PoseGroup } from 'react-pose'
+import { motion, AnimatePresence } from 'framer-motion'
 import { inject, observer } from 'mobx-react'
 import { stripSpecialCharacters } from 'src/utils/helpers'
 import { PostingGuidelines } from './PostingGuidelines'
@@ -48,29 +48,32 @@ interface IInjectedProps extends IProps {
   howtoStore: HowtoStore
 }
 
-const AnimationContainer = posed.div({
-  // use flip pose to prevent default spring action on list item removed
-  flip: {
-    transition: {
-      // type: 'tween',
-      // ease: 'linear',
+const AnimationContainer = (props: any) => {
+  const variants = {
+    pre: { 
+      opacity: 0
     },
-  },
-  // use a pre-enter pose as otherwise default will be the exit state and so will animate
-  // horizontally as well
-  preEnter: {
-    opacity: 0,
-  },
-  enter: {
-    opacity: 1,
-    duration: 200,
-    applyAtStart: { display: 'block' },
-  },
-  exit: {
-    applyAtStart: { display: 'none' },
-    duration: 200,
-  },
-})
+    enter: {
+      opacity: 1,
+      duration: .200,
+      display: "block",
+    },
+    post: {
+      display: "none",
+      duration: .200,
+      top: '-100%',
+    },
+  }
+  return (
+    <motion.div layout
+      initial="pre"
+      animate="enter"
+      exit="post"
+      variants={variants}>
+        { props.children }
+    </motion.div>
+  )
+}
 
 const FormContainer = styled.form`
   width: 100%;
@@ -376,7 +379,7 @@ export class HowtoForm extends React.PureComponent<IProps, IState> {
                       <FieldArray name="steps" isEqual={COMPARISONS.step}>
                         {({ fields }) => (
                           <>
-                            <PoseGroup preEnterPose="preEnter">
+                            <AnimatePresence>
                               {fields.map((name, index: number) => (
                                 <AnimationContainer
                                   key={fields.value[index]._animationKey}
@@ -397,7 +400,7 @@ export class HowtoForm extends React.PureComponent<IProps, IState> {
                                   />
                                 </AnimationContainer>
                               ))}
-                            </PoseGroup>
+                            </AnimatePresence>
                             <Flex>
                               <Button
                                 icon={'add'}

src/pages/common/Header/Header.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import Profile from 'src/pages/common/Header/Menu/Profile/Profile'
 import MenuDesktop from 'src/pages/common/Header/Menu/MenuDesktop'
 import MenuMobilePanel from 'src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel'
-import posed, { PoseGroup } from 'react-pose'
+import { motion } from 'framer-motion'
 import Logo from 'src/pages/common/Header/Menu/Logo/Logo'
 import theme from 'src/themes/styled.theme'
 import HamburgerMenu from 'react-hamburger-menu'
@@ -40,18 +40,27 @@ const DesktopMenuWrapper = styled(Flex)`
   }
 `
 
-const AnimationContainer = posed.div({
-  enter: {
-    duration: 250,
-    position: 'relative',
-    top: '0',
-  },
-  exit: {
-    duration: 250,
-    position: 'relative',
-    top: '-100%',
-  },
-})
+const AnimationContainer = (props: any) => {
+  const variants = {
+    visible: {
+      duration: .250,
+      top: '0',
+    },
+    hidden: {
+      duration: .250,
+      top: '-100%',
+    },
+  }
+  return (
+    <motion.div layout
+      style={{ position: "relative" }}
+      initial="hidden"
+      animate="visible"
+      variants={variants}>
+      { props.children }
+    </motion.div>
+  )
+}
 
 @inject('mobileMenuStore')
 @observer
@@ -102,15 +111,13 @@ export class Header extends Component<IProps> {
             </Flex>
           </MobileMenuWrapper>
         </Flex>
-        <PoseGroup>
           {menu.showMobilePanel && (
             <AnimationContainer key={'mobilePanelContainer'}>
               <MobileMenuWrapper>
                 <MenuMobilePanel />
               </MobileMenuWrapper>
             </AnimationContainer>
           )}
-        </PoseGroup>
       </>
     )
   }