| 10 | import {NpmLogo} from '@react-spectrum/s2-docs/src/icons/NpmLogo'; |
| 11 | |
| 12 | export default function HomeHeader() { |
| 13 | const [searchOpen, setSearchOpen] = useState(false); |
| 14 | const searchMenuId = useId(); |
| 15 | let renderCallback = useRef<(() => void) | null>(null); |
| 16 | let iconRef = useRef<HTMLDivElement | null>(null); |
| 17 | let labelRef = useRef<HTMLDivElement | null>(null); |
| 18 | let searchRef = useRef<HTMLDivElement | null>(null); |
| 19 | |
| 20 | let openSearchMenu = async () => { |
| 21 | if (!document.startViewTransition) { |
| 22 | setSearchOpen(prev => !prev); |
| 23 | return; |
| 24 | } |
| 25 | |
| 26 | // Preload SearchMenu so it is ready to render immediately. |
| 27 | await preloadSearchMenu(); |
| 28 | |
| 29 | // Don't transition the entire page. |
| 30 | document.documentElement.style.viewTransitionName = 'none'; |
| 31 | if (window.scrollY === 0) { |
| 32 | iconRef.current!.style.viewTransitionName = 'search-menu-icon'; |
| 33 | labelRef.current!.style.viewTransitionName = 'search-menu-label'; |
| 34 | searchRef.current!.style.viewTransitionName = 'search-menu-search-field'; |
| 35 | } |
| 36 | |
| 37 | let viewTransition = document.startViewTransition(() => { |
| 38 | // Wait until next render. Using flushSync causes flickering. |
| 39 | return new Promise<void>(resolve => { |
| 40 | iconRef.current!.style.viewTransitionName = ''; |
| 41 | labelRef.current!.style.viewTransitionName = ''; |
| 42 | searchRef.current!.style.viewTransitionName = ''; |
| 43 | renderCallback.current = resolve; |
| 44 | setSearchOpen(prev => !prev); |
| 45 | }); |
| 46 | }); |
| 47 | |
| 48 | viewTransition.finished.then(() => { |
| 49 | document.documentElement.style.viewTransitionName = ''; |
| 50 | }); |
| 51 | }; |
| 52 | |
| 53 | let closeSearchMenu = () => { |
| 54 | if (!document.startViewTransition) { |
| 55 | setSearchOpen(false); |
| 56 | return; |
| 57 | } |
| 58 | |
| 59 | document.documentElement.style.viewTransitionName = 'none'; |
| 60 | let viewTransition = document.startViewTransition(() => { |
| 61 | return new Promise<void>(resolve => { |
| 62 | renderCallback.current = resolve; |
| 63 | setSearchOpen(false); |
| 64 | |
| 65 | if (window.scrollY === 0) { |
| 66 | iconRef.current!.style.viewTransitionName = 'search-menu-icon'; |
| 67 | labelRef.current!.style.viewTransitionName = 'search-menu-label'; |
| 68 | searchRef.current!.style.viewTransitionName = 'search-menu-search-field'; |
| 69 | } |