Fix crash migrating to react 19 (#167)

aeharding · Jan 4, 2025 · 4bcc9d6 · 4bcc9d6
1 parent 5a10b0e
commit 4bcc9d6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 69 deletions.
diff --git a/src/features/location/Location.tsx b/src/features/location/Location.tsx
@@ -9,8 +9,8 @@ import * as storage from "../user/storage";
 
 export const Button = styled.button`
   font-size: 1.7em;
-  width: 2.5em;
-  height: 2.5em;
+  width: 3rem;
+  height: 3rem;
   padding: 0;
 
   appearance: none;

diff --git a/src/features/rap/Scrubber.tsx b/src/features/rap/Scrubber.tsx
@@ -254,6 +254,7 @@ export default function Scrubber({ scrollViewRef, children }: ScrubberProps) {
         classNames={transitionName}
         unmountOnExit
         in={enabled}
+        nodeRef={scrubberTargetRef}
       >
         <ScrubberTarget
           ref={scrubberTargetRef}

diff --git a/src/features/rap/extra/discussion/definition/DefinitionDialog.tsx b/src/features/rap/extra/discussion/definition/DefinitionDialog.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { DefinitionTooltipProps, definitionStyles } from "./Definition";
 import linkifyHtml from "linkify-html";
 import { linkifyOptions } from "../Discussion";
@@ -51,7 +51,6 @@ const Takeover = styled.div`
 
       > ${() => TakeoverContents} {
         scale: 1;
-
       }
     }
     &-exit-active {
@@ -63,6 +62,7 @@ const Takeover = styled.div`
         transition: 200ms scale;
       }
     }
+  }
 `;
 
 const ClickBlock = styled.div`
@@ -106,6 +106,7 @@ export default function DefinitionDialog({
 }: DefinitionTooltipProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [clickBlock, setClickBlock] = useState(false);
+  const takeoverRef = useRef<HTMLDivElement>(null);
 
   function open() {
     setIsOpen(true);
@@ -128,8 +129,9 @@ export default function DefinitionDialog({
         timeout={200}
         classNames="takeover"
         unmountOnExit
+        nodeRef={takeoverRef}
       >
-        <Takeover onTouchStart={close}>
+        <Takeover onTouchStart={close} ref={takeoverRef}>
           <TakeoverContents>
             <Term>{term}</Term>
             <DefinitionText

diff --git a/src/search/Search.tsx b/src/search/Search.tsx
@@ -33,8 +33,7 @@ const Form = styled.form`
 
   display: flex;
   position: relative;
-
-  padding-right: 4em;
+  align-items: center;
 `;
 
 const Input = styled.input`

diff --git a/src/search/SubmitButton.tsx b/src/search/SubmitButton.tsx
@@ -2,56 +2,12 @@ import Location, { Button } from "../features/location/Location";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
-import { css } from "@emotion/react";
 import Spinner from "../shared/Spinner";
 import styled from "@emotion/styled";
 
-const transitionName = "submit-loading";
-
-const transitionStyles = css`
-  position: absolute;
-  right: 0;
-  top: 50%;
-
-  transition-duration: 150ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease-out;
-
-  transform: translate(0, -50%);
-
-  // enter from
-  &.${transitionName}-enter {
-    opacity: 0;
-
-    transform: translate(-0.25em, -50%);
-  }
-
-  // enter to
-  &.${transitionName}-enter-active {
-    opacity: 1;
-
-    transform: translate(0, -50%);
-  }
-
-  // exit from
-  &.${transitionName}-exit {
-    opacity: 1;
-
-    transform: translate(0, -50%);
-  }
-
-  // exit to
-  &.${transitionName}-exit-active {
-    opacity: 0;
-
-    transform: translate(0.25em, -50%);
-  }
-`;
-
 const SpinnerContainer = styled.div`
-  width: 2.5em;
-  height: 2.5em;
+  width: 3rem;
+  height: 3rem;
   font-size: 1.7em;
 
   display: flex;
@@ -77,33 +33,21 @@ export default function SubmitButton({
   const contents = (() => {
     switch (state) {
       case State.Location:
-        return (
-          <Location css={transitionStyles} onLocationFail={onLocationFail} />
-        );
+        return <Location onLocationFail={onLocationFail} />;
       case State.Submit:
         return (
-          <Button css={transitionStyles} type="submit">
+          <Button type="submit">
             <FontAwesomeIcon icon={faChevronRight} />
           </Button>
         );
       case State.Loading:
         return (
-          <SpinnerContainer css={transitionStyles}>
+          <SpinnerContainer>
             <Spinner />
           </SpinnerContainer>
         );
     }
   })();
 
-  return (
-    <TransitionGroup>
-      <CSSTransition
-        key={`${state === State.Location}`}
-        timeout={150}
-        classNames={transitionName}
-      >
-        {contents}
-      </CSSTransition>
-    </TransitionGroup>
-  );
+  return contents;
 }