Skip to content

Commit 9eff527

Browse files
ankit-tailorankit-tailor
authored
Merge pull request #2298 from gluestack/release/@gluestack-ui/toast@1.0.7
Release/@gluestack UI/toast@1.0.7
2 parents 50bafb5 + 40f7cbd commit 9eff527

File tree

18 files changed

+497
-70
lines changed

18 files changed

+497
-70
lines changed

‎example/storybook-nativewind/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@gluestack-style/animation-resolver": "^1.0.4",
3333
"@gluestack-style/react": "^1.0.57",
3434
"@gluestack-ui/config": "^1.1.19",
35-
"@gluestack-ui/themed": "^1.1.36",
35+
"@gluestack-ui/themed": "^1.1.37",
3636
"@gluestack/design-system": "^0.5.36",
3737
"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
3838
"@legendapp/motion": "^2.2.0",

‎example/storybook-nativewind/src/components/Portal/Portal.stories.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { ComponentMeta } from '@storybook/react-native';
2+
import Portal from './Portal';
3+
4+
const PortalMeta: ComponentMeta<typeof Portal> = {
5+
title: 'stories/Portal',
6+
component: Portal,
7+
// metaInfo is required for figma generation
8+
// @ts-ignore
9+
metaInfo: {
10+
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.`,
11+
},
12+
argTypes: {},
13+
args: {
14+
disabled: false,
15+
},
16+
};
17+
18+
export default PortalMeta;
19+
20+
export { Portal };

‎example/storybook-nativewind/src/components/Portal/Portal.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import { Portal } from '@/components/ui/portal';
3+
import { HStack } from '@/components/ui/hstack';
4+
import { Text } from '@/components/ui/text';
5+
import { Button, ButtonText, ButtonIcon } from '@/components/ui/button';
6+
import { CloseIcon } from '@/components/ui/icon';
7+
const PortalBasic = ({ ...props }: any) => {
8+
const [visible, setVisible] = React.useState(false);
9+
const handleClose = () => setVisible(false);
10+
return (
11+
<>
12+
<Portal
13+
isOpen={visible}
14+
{...props}
15+
className="justify-center items-center overflow-hidden"
16+
>
17+
<HStack className="border-2 w-1/3 py-10 gap-4 rounded-lg flex-row justify-center items-center bg-background-0">
18+
<Text className="text-typography-950">Portal Content</Text>
19+
<Button
20+
size="xs"
21+
className="h-6 px-1 absolute top-2 right-2"
22+
variant="outline"
23+
onPress={handleClose}
24+
>
25+
<ButtonIcon as={CloseIcon} />
26+
</Button>
27+
</HStack>
28+
</Portal>
29+
<Button onPress={() => setVisible(!visible)}>
30+
<ButtonText>Toggle Portal</ButtonText>
31+
</Button>
32+
</>
33+
);
34+
};
35+
36+
PortalBasic.description =
37+
'This is a basic Portal component example. Portal components are used to show a loading state of a component or page.';
38+
39+
export default PortalBasic;
40+
41+
export { Portal, HStack, Text };

‎example/storybook-nativewind/src/components/Portal/index.nw.stories.mdx‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
---
2+
title: gluestack-ui Portal Component | Installation, Usage, and API
3+
4+
description: A portal component renders its children outside the parent component's DOM hierarchy.
5+
6+
pageTitle: Portal
7+
8+
pageDescription: A portal component renders its children outside the parent component's DOM hierarchy.
9+
10+
showHeader: true
11+
---
12+
13+
import { Meta } from '@storybook/addon-docs';
14+
15+
<Meta title="with-nativewind/Components/Overlay/Portal" />
16+
17+
import {
18+
VStack,
19+
Box,
20+
Text,
21+
HStack,
22+
Button,
23+
ButtonText,
24+
ButtonIcon,
25+
Portal,
26+
CloseIcon
27+
} from '../../core-components/nativewind';
28+
29+
import { transformedCode } from '../../utils';
30+
import {
31+
AppProvider,
32+
CodePreview,
33+
Table,
34+
TableContainer,
35+
InlineCode,
36+
CollapsibleCode,
37+
Tabs
38+
} from '@gluestack/design-system';
39+
40+
import Wrapper from '../../core-components/nativewind/Wrapper';
41+
42+
This is an illustration of **Pressable** component.
43+
44+
<Wrapper>
45+
<CodePreview
46+
_rendererWrapper={{ px: '$2.5' }}
47+
showComponentRenderer={true}
48+
showArgsController={false}
49+
metaData={{
50+
code: `
51+
function App(){
52+
const [visible, setVisible] = React.useState(false);
53+
const handleClose = () => setVisible(false);
54+
return (
55+
<>
56+
<Portal
57+
isOpen={visible}
58+
className="justify-center items-center"
59+
>
60+
<HStack className="border-2 w-1/3 py-10 gap-4 rounded-lg flex-row justify-center items-center bg-background-0">
61+
<Text className="text-typography-950">Portal Content</Text>
62+
<Button
63+
size="xs"
64+
className="h-6 px-1 absolute top-2 right-2"
65+
variant="outline"
66+
onPress={handleClose}
67+
>
68+
<ButtonIcon as={CloseIcon} />
69+
</Button>
70+
</HStack>
71+
</Portal>
72+
<Button onPress={() => setVisible(!visible)}>
73+
<ButtonText>Toggle Portal</ButtonText>
74+
</Button>
75+
</>
76+
);
77+
}
78+
`,
79+
transformCode: (code) => {
80+
return transformedCode(code, 'function', 'App');
81+
},
82+
scope: {
83+
HStack,
84+
Text,
85+
Wrapper,
86+
Portal,
87+
Button,
88+
ButtonText,
89+
ButtonIcon,
90+
CloseIcon
91+
},
92+
argsType: {
93+
},
94+
}}
95+
/>
96+
</Wrapper>
97+
98+
<br />
99+
100+
101+
>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`.
102+
103+
## Installation
104+
105+
<Tabs value="cli" type="section">
106+
<Tabs.TabList>
107+
<Tabs.Tab value="cli">
108+
<Tabs.TabTitle>CLI</Tabs.TabTitle>
109+
</Tabs.Tab>
110+
<Tabs.Tab value="manual">
111+
<Tabs.TabTitle>Manual</Tabs.TabTitle>
112+
</Tabs.Tab>
113+
</Tabs.TabList>
114+
<Tabs.TabPanels>
115+
<Tabs.TabPanel value="cli">
116+
<>
117+
118+
### Run the following command:
119+
```bash
120+
npx gluestack-ui add portal
121+
```
122+
</>
123+
</Tabs.TabPanel>
124+
<Tabs.TabPanel value="manual">
125+
<>
126+
127+
### Step 1: Install the following dependencies:
128+
129+
```bash
130+
131+
npm i @gluestack-ui/overlay
132+
133+
```
134+
135+
### Step 2: Copy and paste the following code into your project.
136+
137+
<CollapsibleCode>
138+
139+
```jsx
140+
%%-- File: core-components/nativewind/portal/index.tsx --%%
141+
```
142+
143+
</CollapsibleCode>
144+
145+
### Step 3: Update the import paths to match your project setup.
146+
</>
147+
</Tabs.TabPanel>
148+
</Tabs.TabPanels>
149+
</Tabs>
150+
151+
## API Reference
152+
153+
To use this component in your project, include the following import statement in your file.
154+
155+
```jsx
156+
import { Portal } from '@/components/ui/portal';
157+
```
158+
159+
```jsx
160+
export default () => <Portal />;
161+
```
162+
163+
### Component Props
164+
165+
This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
166+
167+
#### Portal
168+
169+
170+
<>
171+
<TableContainer>
172+
<Table>
173+
<Table.THead>
174+
<Table.TR>
175+
<Table.TH>
176+
<Table.TText>Prop</Table.TText>
177+
</Table.TH>
178+
<Table.TH>
179+
<Table.TText>Type</Table.TText>
180+
</Table.TH>
181+
<Table.TH>
182+
<Table.TText>Default</Table.TText>
183+
</Table.TH>
184+
<Table.TH>
185+
<Table.TText>Description</Table.TText>
186+
</Table.TH>
187+
</Table.TR>
188+
</Table.THead>
189+
<Table.TBody>
190+
<Table.TR>
191+
<Table.TD>
192+
<Table.TText>
193+
<InlineCode>isOpen</InlineCode>
194+
</Table.TText>
195+
</Table.TD>
196+
<Table.TD>
197+
<Table.TText>boolean</Table.TText>
198+
</Table.TD>
199+
<Table.TD>
200+
<Table.TText>-</Table.TText>
201+
</Table.TD>
202+
<Table.TD>
203+
<Table.TText>
204+
If true, the portal will open.
205+
</Table.TText>
206+
</Table.TD>
207+
</Table.TR>
208+
<Table.TR>
209+
<Table.TD>
210+
<Table.TText>
211+
<InlineCode>isKeyboardDismissable</InlineCode>
212+
</Table.TText>
213+
</Table.TD>
214+
<Table.TD>
215+
<Table.TText>boolean</Table.TText>
216+
</Table.TD>
217+
<Table.TD>
218+
<Table.TText>-</Table.TText>
219+
</Table.TD>
220+
<Table.TD>
221+
<Table.TText>
222+
If true, the keyboard can dismiss the portal.
223+
</Table.TText>
224+
</Table.TD>
225+
</Table.TR>
226+
<Table.TR>
227+
<Table.TD>
228+
<Table.TText>
229+
<InlineCode>useRNModal</InlineCode>
230+
</Table.TText>
231+
</Table.TD>
232+
<Table.TD>
233+
<Table.TText>boolean</Table.TText>
234+
</Table.TD>
235+
<Table.TD>
236+
<Table.TText>false</Table.TText>
237+
</Table.TD>
238+
<Table.TD>
239+
<Table.TText>
240+
If true, renders react-native native modal.
241+
</Table.TText>
242+
</Table.TD>
243+
</Table.TR>
244+
<Table.TR>
245+
<Table.TD>
246+
<Table.TText>
247+
<InlineCode>useRNModalOnAndroid</InlineCode>
248+
</Table.TText>
249+
</Table.TD>
250+
<Table.TD>
251+
<Table.TText>boolean</Table.TText>
252+
</Table.TD>
253+
<Table.TD>
254+
<Table.TText>false</Table.TText>
255+
</Table.TD>
256+
<Table.TD>
257+
<Table.TText>
258+
If true, renders react-native native modal only in android.
259+
</Table.TText>
260+
</Table.TD>
261+
</Table.TR>
262+
<Table.TR>
263+
<Table.TD>
264+
<Table.TText>
265+
<InlineCode>onRequestClose</InlineCode>
266+
</Table.TText>
267+
</Table.TD>
268+
<Table.TD>
269+
<Table.TText>{`((event: NativeSyntheticEvent<any>) => void) | undefined`}</Table.TText>
270+
</Table.TD>
271+
<Table.TD>
272+
<Table.TText>-</Table.TText>
273+
</Table.TD>
274+
<Table.TD>
275+
<Table.TText>
276+
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.
277+
Only applicable when `useRNModal` or is true.
278+
</Table.TText>
279+
</Table.TD>
280+
</Table.TR>
281+
<Table.TR>
282+
<Table.TD>
283+
<Table.TText>
284+
<InlineCode>animationPreset</InlineCode>
285+
</Table.TText>
286+
</Table.TD>
287+
<Table.TD>
288+
<Table.TText>{`"fade" | "slide" | "none"`}</Table.TText>
289+
</Table.TD>
290+
<Table.TD>
291+
<Table.TText>"fade"</Table.TText>
292+
</Table.TD>
293+
<Table.TD>
294+
<Table.TText>
295+
The animation preset for the portal.
296+
</Table.TText>
297+
</Table.TD>
298+
</Table.TR>
299+
</Table.TBody>
300+
</Table>
301+
</TableContainer>
302+
</>
303+
304+
>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.

‎example/storybook-nativewind/src/core-components/nativewind/button/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -406,8 +406,8 @@ const ButtonIcon = React.forwardRef(
406406
size,
407407
...props
408408
}: IButtonIcon & {
409-
className?: any;
410-
as?: any;
409+
className?: string | undefined;
410+
as?: React.ReactNode;
411411
},
412412
ref?: any
413413
) => {

0 commit comments

Comments
 (0)