-
Notifications
You must be signed in to change notification settings - Fork 323
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix resize animations in Dialog (#11643)
This PR fixes the Resize animations in Dialog component: 1. Removes resize for initial mount / fullscreen dialogs 2. Fixes measuring the content size 3. Fixes bugs in `useMeasure` hook 4. Adds memoization for Text and Loader components (because of react-compiler and because this components accept only primitive values)
- Loading branch information
1 parent
b5f1106
commit 0c7e79c
Showing
18 changed files
with
786 additions
and
368 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { useSuspenseQuery } from '@tanstack/react-query' | ||
| import { useLayoutEffect, useRef } from 'react' | ||
| import { DialogTrigger } from 'react-aria-components' | ||
| import { Button } from '../Button' | ||
| import { Dialog, type DialogProps } from './Dialog' | ||
|
|
||
| type Story = StoryObj<DialogProps> | ||
|
|
||
| export default { | ||
| title: 'AriaComponents/Dialog', | ||
| component: Dialog, | ||
| render: (args) => ( | ||
| <DialogTrigger defaultOpen> | ||
| <Button>Open Dialog</Button> | ||
|
|
||
| <Dialog {...args} /> | ||
| </DialogTrigger> | ||
| ), | ||
| args: { | ||
| type: 'modal', | ||
| title: 'Dialog Title', | ||
| children: 'Dialog Content', | ||
| }, | ||
| } as Meta<DialogProps> | ||
|
|
||
| export const Default = {} | ||
|
|
||
| // Use a random query key to avoid caching | ||
| const QUERY_KEY = Math.random().toString() | ||
|
|
||
| function SuspenseContent({ delay = 10_000 }: { delay?: number }): React.ReactNode { | ||
| useSuspenseQuery({ | ||
| queryKey: [QUERY_KEY], | ||
| gcTime: 0, | ||
| initialDataUpdatedAt: 0, | ||
| queryFn: () => | ||
| new Promise((resolve) => { | ||
| setTimeout(() => { | ||
| resolve('resolved') | ||
| }, delay) | ||
| }), | ||
| }) | ||
|
|
||
| return ( | ||
| <div className="flex h-[250px] flex-col items-center justify-center text-center"> | ||
| Unsuspended content | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const Suspened = { | ||
| args: { | ||
| children: <SuspenseContent delay={10_000_000_000} />, | ||
| }, | ||
| } | ||
|
|
||
| function BrokenContent(): React.ReactNode { | ||
| throw new Error('💣') | ||
| } | ||
|
|
||
| export const Broken = { | ||
| args: { | ||
| children: <BrokenContent />, | ||
| }, | ||
| } | ||
|
|
||
| function ResizableContent() { | ||
| const divRef = useRef<HTMLDivElement>(null) | ||
|
|
||
| useLayoutEffect(() => { | ||
| const getRandomHeight = () => Math.floor(Math.random() * 250 + 100) | ||
|
|
||
| if (divRef.current) { | ||
| divRef.current.style.height = `${getRandomHeight()}px` | ||
|
|
||
| setInterval(() => { | ||
| if (divRef.current) { | ||
| divRef.current.style.height = `${getRandomHeight()}px` | ||
| } | ||
| }, 2_000) | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div ref={divRef} className="flex flex-none items-center justify-center text-center"> | ||
| This dialog should resize with animation | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const AnimateSize: Story = { | ||
| args: { | ||
| children: <ResizableContent />, | ||
| }, | ||
| parameters: { | ||
| chromatic: { disableSnapshot: true }, | ||
| }, | ||
| } | ||
|
|
||
| export const Fullscreen = { | ||
| args: { | ||
| type: 'fullscreen', | ||
| }, | ||
| } |
Oops, something went wrong.