@uppy/dashboard: refactor to stable lifecycle method

[aduh95]

No description provided.

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/components/Slide.js b/packages/@uppy/dashboard/lib/components/Slide.js
index eeb0572..0f24d3f 100644
--- a/packages/@uppy/dashboard/lib/components/Slide.js
+++ b/packages/@uppy/dashboard/lib/components/Slide.js
@@ -1,71 +1,63 @@
 import classNames from "classnames";
-import { cloneElement, Component, toChildArray } from "preact";
+import { cloneElement, toChildArray } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
 const transitionName = "uppy-transition-slideDownUp";
 const duration = 250;
-class Slide extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      cachedChildren: null,
-      className: "",
-    };
-  }
-  componentWillUpdate(nextProps) {
-    const {
-      cachedChildren,
-    } = this.state;
-    const child = toChildArray(nextProps.children)[0];
-    if (cachedChildren === child) return null;
-    const patch = {
-      cachedChildren: child,
-    };
+function Slide(_ref) {
+  let {
+    children,
+  } = _ref;
+  const [cachedChildren, setCachedChildren] = useState(null);
+  const [className, setClassName] = useState("");
+  const enterTimeoutRef = useRef();
+  const leaveTimeoutRef = useRef();
+  const animationFrameRef = useRef();
+  const handleEnterTransition = () => {
+    setClassName(`${transitionName}-enter`);
+    cancelAnimationFrame(animationFrameRef.current);
+    clearTimeout(leaveTimeoutRef.current);
+    leaveTimeoutRef.current = undefined;
+    animationFrameRef.current = requestAnimationFrame(() => {
+      setClassName(`${transitionName}-enter ${transitionName}-enter-active`);
+      enterTimeoutRef.current = setTimeout(() => {
+        setClassName("");
+      }, duration);
+    });
+  };
+  const handleLeaveTransition = () => {
+    setClassName(`${transitionName}-leave`);
+    cancelAnimationFrame(animationFrameRef.current);
+    clearTimeout(enterTimeoutRef.current);
+    enterTimeoutRef.current = undefined;
+    animationFrameRef.current = requestAnimationFrame(() => {
+      setClassName(`${transitionName}-leave ${transitionName}-leave-active`);
+      leaveTimeoutRef.current = setTimeout(() => {
+        setCachedChildren(null);
+        setClassName("");
+      }, duration);
+    });
+  };
+  useEffect(() => {
+    const child = toChildArray(children)[0];
+    if (cachedChildren === child) return;
     if (child && !cachedChildren) {
-      patch.className = `${transitionName}-enter`;
-      cancelAnimationFrame(this.animationFrame);
-      clearTimeout(this.leaveTimeout);
-      this.leaveTimeout = undefined;
-      this.animationFrame = requestAnimationFrame(() => {
-        this.setState({
-          className: `${transitionName}-enter ${transitionName}-enter-active`,
-        });
-        this.enterTimeout = setTimeout(() => {
-          this.setState({
-            className: "",
-          });
-        }, duration);
-      });
+      handleEnterTransition();
+    } else if (cachedChildren && !child && !leaveTimeoutRef.current) {
+      handleLeaveTransition();
     }
-    if (cachedChildren && !child && this.leaveTimeout === undefined) {
-      patch.cachedChildren = cachedChildren;
-      patch.className = `${transitionName}-leave`;
-      cancelAnimationFrame(this.animationFrame);
-      clearTimeout(this.enterTimeout);
-      this.enterTimeout = undefined;
-      this.animationFrame = requestAnimationFrame(() => {
-        this.setState({
-          className: `${transitionName}-leave ${transitionName}-leave-active`,
-        });
-        this.leaveTimeout = setTimeout(() => {
-          this.setState({
-            cachedChildren: null,
-            className: "",
-          });
-        }, duration);
-      });
-    }
-    this.setState(patch);
-  }
-  render() {
-    const {
-      cachedChildren,
-      className,
-    } = this.state;
-    if (!cachedChildren) {
-      return null;
-    }
-    return cloneElement(cachedChildren, {
-      className: classNames(className, cachedChildren.props.className),
-    });
-  }
+    setCachedChildren(child);
+  }, [children, cachedChildren]);
+  useEffect(() => {
+    return () => {
+      clearTimeout(enterTimeoutRef.current);
+      clearTimeout(leaveTimeoutRef.current);
+      cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, []);
+  if (!cachedChildren) return null;
+  return cloneElement(cachedChildren, {
+    className: classNames(className, cachedChildren.props.className),
+  });
 }
+
 export default Slide;