diff --git a/packages/ui/app/src/api-page/endpoints/AnimatedTitle.tsx b/packages/ui/app/src/api-page/endpoints/AnimatedTitle.tsx index 0bfdd0c665..f42f71cef1 100644 --- a/packages/ui/app/src/api-page/endpoints/AnimatedTitle.tsx +++ b/packages/ui/app/src/api-page/endpoints/AnimatedTitle.tsx @@ -1,58 +1,57 @@ -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; export const AnimatedTitle: FC<{ children: string }> = ({ children: nextChild }) => { - // const [displayText, setDisplayText] = useState(nextChild); - // const [prevChild, setPrevChild] = useState(nextChild); + const [displayText, setDisplayText] = useState(nextChild); + const [prevChild, setPrevChild] = useState(nextChild); - // useEffect(() => { - // if (prevChild !== nextChild) { - // const commonPrefix = getCommonPrefix(prevChild, nextChild); - // const contractText = prevChild.slice(commonPrefix.length); - // const expandText = nextChild.slice(commonPrefix.length); + useEffect(() => { + if (prevChild !== nextChild) { + const commonPrefix = getCommonPrefix(prevChild, nextChild); + const contractText = prevChild.slice(commonPrefix.length); + const expandText = nextChild.slice(commonPrefix.length); - // let currentIndex = 0; - // const intervalId = setInterval(() => { - // setDisplayText((prevText) => { - // if (currentIndex >= contractText.length) { - // clearInterval(intervalId); - // animateExpand(commonPrefix, expandText); - // return prevText; - // } - // currentIndex++; - // return commonPrefix + contractText.slice(0, -currentIndex); - // }); - // }, 50); + let currentIndex = 0; + const intervalId = setInterval(() => { + setDisplayText((prevText) => { + if (currentIndex >= contractText.length) { + clearInterval(intervalId); + animateExpand(commonPrefix, expandText); + return prevText; + } + currentIndex++; + return commonPrefix + contractText.slice(0, -currentIndex); + }); + }, 50); - // return () => { - // clearInterval(intervalId); - // }; - // } - // return; - // }, [nextChild, prevChild]); + return () => { + clearInterval(intervalId); + }; + } + return; + }, [nextChild, prevChild]); - // const animateExpand = (commonPrefix: string, expandText: string) => { - // let currentIndex = 0; - // const intervalId = setInterval(() => { - // setDisplayText(() => { - // if (currentIndex >= expandText.length) { - // clearInterval(intervalId); - // setPrevChild(commonPrefix + expandText); - // return commonPrefix + expandText; - // } - // currentIndex++; - // return commonPrefix + expandText.slice(0, currentIndex); - // }); - // }, 50); - // }; + const animateExpand = (commonPrefix: string, expandText: string) => { + let currentIndex = 0; + const intervalId = setInterval(() => { + setDisplayText(() => { + if (currentIndex >= expandText.length) { + clearInterval(intervalId); + setPrevChild(commonPrefix + expandText); + return commonPrefix + expandText; + } + currentIndex++; + return commonPrefix + expandText.slice(0, currentIndex); + }); + }, 50); + }; - // return <>{displayText}; - return <>{nextChild}; + return <>{displayText}; }; -// const getCommonPrefix = (str1: string, str2: string): string => { -// let i = 0; -// while (i < str1.length && i < str2.length && str1[i] === str2[i]) { -// i++; -// } -// return str1.slice(0, i); -// }; +const getCommonPrefix = (str1: string, str2: string): string => { + let i = 0; + while (i < str1.length && i < str2.length && str1[i] === str2[i]) { + i++; + } + return str1.slice(0, i); +}; diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx index 9f45adf151..7b2926d04e 100644 --- a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx +++ b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx @@ -28,7 +28,6 @@ import { import { ApiPageDescription } from "../ApiPageDescription"; import { JsonPropertyPath } from "../examples/JsonPropertyPath"; import { CodeExample, generateCodeExamples } from "../examples/code-example"; -import { AnimatedTitle } from "./AnimatedTitle"; import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag"; import { EndpointContentLeft, convertNameToAnchorPart } from "./EndpointContentLeft"; import { EndpointStreamingEnabledToggle } from "./EndpointStreamingEnabledToggle"; @@ -279,7 +278,8 @@ const UnmemoizedEndpointContent: React.FC = ({

- {endpoint.title} + {/* {endpoint.title} */} + {endpoint.title}

{endpoint.availability != null && (