extract HOC for animations

Author: csepulv

src/AnimatedVisibility.js

@@ -6,12 +6,13 @@ function AnimatedVisibility({
  visible,
  children,
  animationOutDuration,
+ disappearOffset,
  ...rest
 }) {
  const [noDisplay, setNoDisplay] = useState(!visible);
  useEffect(() => {
  if (!visible) {
- const delay = animationOutDuration - 350;
+ const delay = animationOutDuration - disappearOffset;
  setTimeout(() => setNoDisplay(true), delay);
  } else setNoDisplay(false);
  }, [visible]);
@@ -26,6 +27,7 @@ function AnimatedVisibility({
 
 AnimatedVisibility.defaultProps = {
  animationOutDuration: 1000,
+ disappearOffset: 350,
  visible: true
 };
 
@@ -35,7 +37,41 @@ AnimatedVisibility.propTypes = {
  PropTypes.node
  ]),
  animationOutDuration: PropTypes.number,
+ disappearOffset: PropTypes.number,
  visible: PropTypes.bool
 };
 
+function makeAnimated(
+ Component,
+ animationIn,
+ animationOut,
+ animationInDuration,
+ animationOutDuration,
+ disappearOffset
+) {
+ return function({ open, className, ...props }) {
+ return (
+ <AnimatedVisibility
+ visible={open}
+ animationIn={animationIn}
+ animationOut={animationOut}
+ animationInDuration={animationInDuration}
+ animationOutDuration={animationOutDuration}
+ disappearOffset={disappearOffset}
+ className={className}
+ >
+ <Component {...props} />
+ </AnimatedVisibility>
+ );
+ };
+}
+
+export function makeAnimationSlideLeft(Component) {
+ return makeAnimated(Component, "slideInLeft", "slideOutLeft", 400, 500, 200);
+}
+
+export function makeAnimationSlideUpDown(Component) {
+ return makeAnimated(Component, "slideInDown", "slideOutUp", 400, 500, 200);
+}
+
 export default AnimatedVisibility;

src/App.js

@@ -1,5 +1,5 @@
-import React, { Fragment, useState } from "react";
-import AnimatedVisibility from "./AnimatedVisibility";
+import React, {Fragment, useState} from "react";
+import {makeAnimationSlideLeft, makeAnimationSlideUpDown} from "./AnimatedVisibility";
 import Boxes from "./Boxes";
 import "./App.css";
 
@@ -16,45 +16,31 @@ function ToggleButton({ label, isOpen, onClick }) {
  );
 }
 
-function Navbar({ open }) {
+function Navbar() {
  return (
- <AnimatedVisibility
- visible={open}
- animationIn="slideInDown"
- animationOut="slideOutUp"
- animationInDuration={300}
- animationOutDuration={600}
- >
- <nav className="bar nav">
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- </nav>
- </AnimatedVisibility>
+ <nav className="bar nav">
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3</li>
+ </nav>
  );
 }
 
-function Sidebar({ open }) {
+function Sidebar() {
  return (
- <AnimatedVisibility
- visible={open}
- animationIn="slideInLeft"
- animationOut="slideOutLeft"
- animationInDuration={500}
- animationOutDuration={600}
- className="on-top"
- >
- <div className="sidebar">
- <ul>
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- </ul>
- </div>
- </AnimatedVisibility>
+ <div className="sidebar">
+ <ul>
+ <li>Item 1</li>
+ <li>Item 2</li>
+ <li>Item 3</li>
+ </ul>
+ </div>
  );
 }
 
+const AnimatedSidebar = makeAnimationSlideLeft(Sidebar);
+const AnimatedNavbar = makeAnimationSlideUpDown(Navbar);
+
 function App() {
  const [navIsOpen, setNavOpen] = useState(false);
  const [sidebarIsOpen, setSidebarOpen] = useState(false);
@@ -78,10 +64,10 @@ function App() {
  />
  <ToggleButton label="Navbar" isOpen={navIsOpen} onClick={toggleNav} />
  </header>
- <Navbar open={navIsOpen} />
+  <AnimatedNavbar open={navIsOpen} />
  <Boxes />
  </main>
- <Sidebar open={sidebarIsOpen} />
+ <AnimatedSidebar open={sidebarIsOpen} className="on-top"/>
  </Fragment>
  );
 }