Skip to content

Commit

Permalink
Merge pull request #2298 from gluestack/release/@gluestack-ui/toast@1…
Browse files Browse the repository at this point in the history 
….0.7

Release/@gluestack UI/[email protected]
  • Loading branch information
@ankit-tailor
ankit-tailor authored Jul 12, 2024
2 parents 50bafb5 + 40f7cbd commit 9eff527
Show file tree
Hide file tree
Showing 18 changed files with 497 additions and 70 deletions.
2 changes: 1 addition & 1 deletion example/storybook-nativewind/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"@gluestack-style/animation-resolver": "^1.0.4",
"@gluestack-style/react": "^1.0.57",
"@gluestack-ui/config": "^1.1.19",
"@gluestack-ui/themed": "^1.1.36",
"@gluestack-ui/themed": "^1.1.37",
"@gluestack/design-system": "^0.5.36",
"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
"@legendapp/motion": "^2.2.0",
Expand Down
20 changes: 20 additions & 0 deletions example/storybook-nativewind/src/components/Portal/Portal.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import type { ComponentMeta } from '@storybook/react-native';
import Portal from './Portal';

const PortalMeta: ComponentMeta<typeof Portal> = {
title: 'stories/Portal',
component: Portal,
// metaInfo is required for figma generation
// @ts-ignore
metaInfo: {
componentDescription: `By providing access to hover, pressed, and focus events, Portal serves as a more flexible alternative to buttons at a lower level of abstraction. It is a useful primitive for advanced customization needs.`,
},
argTypes: {},
args: {
disabled: false,
},
};

export default PortalMeta;

export { Portal };
41 changes: 41 additions & 0 deletions example/storybook-nativewind/src/components/Portal/Portal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import { Portal } from '@/components/ui/portal';
import { HStack } from '@/components/ui/hstack';
import { Text } from '@/components/ui/text';
import { Button, ButtonText, ButtonIcon } from '@/components/ui/button';
import { CloseIcon } from '@/components/ui/icon';
const PortalBasic = ({ ...props }: any) => {
const [visible, setVisible] = React.useState(false);
const handleClose = () => setVisible(false);
return (
<>
<Portal
isOpen={visible}
{...props}
className="justify-center items-center overflow-hidden"
>
<HStack className="border-2 w-1/3 py-10 gap-4 rounded-lg flex-row justify-center items-center bg-background-0">
<Text className="text-typography-950">Portal Content</Text>
<Button
size="xs"
className="h-6 px-1 absolute top-2 right-2"
variant="outline"
onPress={handleClose}
>
<ButtonIcon as={CloseIcon} />
</Button>
</HStack>
</Portal>
<Button onPress={() => setVisible(!visible)}>
<ButtonText>Toggle Portal</ButtonText>
</Button>
</>
);
};

PortalBasic.description =
'This is a basic Portal component example. Portal components are used to show a loading state of a component or page.';

export default PortalBasic;

export { Portal, HStack, Text };
304 changes: 304 additions & 0 deletions example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,304 @@
---
title: gluestack-ui Portal Component | Installation, Usage, and API

description: A portal component renders its children outside the parent component's DOM hierarchy.

pageTitle: Portal

pageDescription: A portal component renders its children outside the parent component's DOM hierarchy.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Overlay/Portal" />

import {
VStack,
Box,
Text,
HStack,
Button,
ButtonText,
ButtonIcon,
Portal,
CloseIcon
} from '../../core-components/nativewind';

import { transformedCode } from '../../utils';
import {
AppProvider,
CodePreview,
Table,
TableContainer,
InlineCode,
CollapsibleCode,
Tabs
} from '@gluestack/design-system';

import Wrapper from '../../core-components/nativewind/Wrapper';

This is an illustration of **Pressable** component.

<Wrapper>
<CodePreview
_rendererWrapper={{ px: '$2.5' }}
showComponentRenderer={true}
showArgsController={false}
metaData={{
code: `
function App(){
const [visible, setVisible] = React.useState(false);
const handleClose = () => setVisible(false);
return (
<>
<Portal
isOpen={visible}
className="justify-center items-center"
>
<HStack className="border-2 w-1/3 py-10 gap-4 rounded-lg flex-row justify-center items-center bg-background-0">
<Text className="text-typography-950">Portal Content</Text>
<Button
size="xs"
className="h-6 px-1 absolute top-2 right-2"
variant="outline"
onPress={handleClose}
>
<ButtonIcon as={CloseIcon} />
</Button>
</HStack>
</Portal>
<Button onPress={() => setVisible(!visible)}>
<ButtonText>Toggle Portal</ButtonText>
</Button>
</>
);
}
`,
transformCode: (code) => {
return transformedCode(code, 'function', 'App');
},
scope: {
HStack,
Text,
Wrapper,
Portal,
Button,
ButtonText,
ButtonIcon,
CloseIcon
},
argsType: {
},
}}
/>
</Wrapper>

<br />


>Note: The portal component renders its children outside the parent component's DOM hierarchy. However, it is important to note that the portal component is created using React context. This means that the portal component will not work if the parent component is not wrapped in a `GluestackUIProvider` or `OverlayProvider`.
## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

### Run the following command:
```bash
npx gluestack-ui add portal
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

### Step 1: Install the following dependencies:

```bash

npm i @gluestack-ui/overlay

```

### Step 2: Copy and paste the following code into your project.

<CollapsibleCode>

```jsx
%%-- File: core-components/nativewind/portal/index.tsx --%%
```

</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Portal } from '@/components/ui/portal';
```

```jsx
export default () => <Portal />;
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Portal


<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Prop</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Type</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Default</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Description</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>isOpen</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>-</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
If true, the portal will open.
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>isKeyboardDismissable</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>-</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
If true, the keyboard can dismiss the portal.
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>useRNModal</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>false</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
If true, renders react-native native modal.
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>useRNModalOnAndroid</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>false</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
If true, renders react-native native modal only in android.
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>onRequestClose</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`((event: NativeSyntheticEvent<any>) => void) | undefined`}</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>-</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. This is required on Apple TV and Android.
Only applicable when `useRNModal` or is true.
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>animationPreset</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>{`"fade" | "slide" | "none"`}</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>"fade"</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
The animation preset for the portal.
</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

>Note: The portal component can be used to create a modal, popover, menu, tooltip, or any other component that needs to be rendered outside the parent component's DOM hierarchy. However, We recommend using our components like `Modal`, `Popover`, `Menu`, `Tooltip` for these use cases since they handle all the accessibility.
4 changes: 2 additions & 2 deletions example/storybook-nativewind/src/core-components/nativewind/button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,8 +406,8 @@ const ButtonIcon = React.forwardRef(
size,
...props
}: IButtonIcon & {
className?: any;
as?: any;
className?: string | undefined;
as?: React.ReactNode;
},
ref?: any
) => {
Expand Down
Loading

0 comments on commit 9eff527

Please sign in to comment.