diff options
author | Samuel Newman <mozzius@protonmail.com> | 2024-10-09 21:30:42 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-10-09 11:30:42 -0700 |
commit | cca344a3d1cdca3d4e63806a9bd5f7867f8961d4 (patch) | |
tree | 999d7dffe5d53989b7e217db13f451c6d019ff57 /src/view/screens/Storybook/Dialogs.tsx | |
parent | b3ade19bbe3da3caf07bf9561cebb11dac4b6afc (diff) | |
download | voidsky-cca344a3d1cdca3d4e63806a9bd5f7867f8961d4.tar.zst |
Allow nested sheets without boilerplate (#5660)
Co-authored-by: Hailey <me@haileyok.com>
Diffstat (limited to 'src/view/screens/Storybook/Dialogs.tsx')
-rw-r--r-- | src/view/screens/Storybook/Dialogs.tsx | 66 |
1 files changed, 28 insertions, 38 deletions
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index e6fcef555..343d7f07b 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -8,13 +8,10 @@ import {atoms as a} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import * as Menu from '#/components/Menu' -import {createPortalGroup} from '#/components/Portal' import * as Prompt from '#/components/Prompt' import {H3, P, Text} from '#/components/Typography' import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army' -const Portal = createPortalGroup() - export function Dialogs() { const scrollable = Dialog.useDialogControl() const basic = Dialog.useDialogControl() @@ -201,41 +198,34 @@ export function Dialogs() { </Dialog.Outer> <Dialog.Outer control={withMenu}> - <Portal.Provider> - <Dialog.Inner label="test"> - <H3 nativeID="dialog-title">Dialog with Menu</H3> - <Menu.Root> - <Menu.Trigger label="Open menu"> - {({props}) => ( - <Button - style={a.mt_2xl} - label="Open menu" - color="primary" - variant="solid" - size="large" - {...props}> - <ButtonText>Open Menu</ButtonText> - </Button> - )} - </Menu.Trigger> - <Menu.Outer Portal={Portal.Portal}> - <Menu.Group> - <Menu.Item - label="Item 1" - onPress={() => console.log('item 1')}> - <Menu.ItemText>Item 1</Menu.ItemText> - </Menu.Item> - <Menu.Item - label="Item 2" - onPress={() => console.log('item 2')}> - <Menu.ItemText>Item 2</Menu.ItemText> - </Menu.Item> - </Menu.Group> - </Menu.Outer> - </Menu.Root> - </Dialog.Inner> - <Portal.Outlet /> - </Portal.Provider> + <Dialog.Inner label="test"> + <H3 nativeID="dialog-title">Dialog with Menu</H3> + <Menu.Root> + <Menu.Trigger label="Open menu"> + {({props}) => ( + <Button + style={a.mt_2xl} + label="Open menu" + color="primary" + variant="solid" + size="large" + {...props}> + <ButtonText>Open Menu</ButtonText> + </Button> + )} + </Menu.Trigger> + <Menu.Outer> + <Menu.Group> + <Menu.Item label="Item 1" onPress={() => console.log('item 1')}> + <Menu.ItemText>Item 1</Menu.ItemText> + </Menu.Item> + <Menu.Item label="Item 2" onPress={() => console.log('item 2')}> + <Menu.ItemText>Item 2</Menu.ItemText> + </Menu.Item> + </Menu.Group> + </Menu.Outer> + </Menu.Root> + </Dialog.Inner> </Dialog.Outer> <Dialog.Outer control={scrollable}> |