Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch

gluestack · Jul 12, 2024 · a1c0f1e · a1c0f1e
2 parents 89f546d + 7a68b0e
commit a1c0f1e
Show file tree

Hide file tree

Showing 23 changed files with 366 additions and 279 deletions.
diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
@@ -95,7 +95,7 @@ export const parameters = {
           'Recipes',
           ['Linear Gradient'],
           'More',
-          ['FAQ', 'Releases', 'Roadmap', 'Troubleshooting'],
+          ['FAQs', 'Releases', 'Roadmap', 'Troubleshooting'],
         ],
       ],
       icons: [

diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -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.34",
+    "@gluestack-ui/themed": "^1.1.35",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

diff --git a/example/storybook-nativewind/public/images/benchmarks-v2.png b/example/storybook-nativewind/public/images/benchmarks-v2.png
diff --git a/example/storybook-nativewind/src/components/Toast/Toast.tsx b/example/storybook-nativewind/src/components/Toast/Toast.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Icon, CloseIcon } from '@/components/ui/icon';
 import { VStack } from '@/components/ui/vstack';
 import { Pressable } from '@/components/ui/pressable';
@@ -26,31 +26,46 @@ const ToastFigmaStory = ({ _placement = 'top', _colorMode, ...props }: any) => {
   );
 };
 
-const ToastBasic = ({ placement = 'top', ...props }: any) => {
+const ToastBasic = ({ ...props }: any) => {
   const toast = useToast();
+  const [toastId, setToastId] = useState<number>(0);
+
+  const handleToast = () => {
+    if (!toast.isActive(toastId)) {
+      showNewToast();
+    }
+  };
+
+  const showNewToast = () => {
+    const newId = Math.random();
+    setToastId(newId);
+
+    toast.show({
+      id: newId,
+      placement: props.placement,
+      duration: 3000,
+      // duration: null,
+      render: ({ id }) => {
+        const uniqueToastId = `toast-${id}`;
+        return (
+          <Toast nativeID={uniqueToastId} {...props} className="flex-row gap-3">
+            <VStack space="xs">
+              <ToastTitle>Hello World Toast</ToastTitle>
+              <ToastDescription>
+                Please create a support ticket from the support page
+              </ToastDescription>
+            </VStack>
+            <Pressable onPress={() => toast.close(id)}>
+              <Icon as={CloseIcon} className="stroke-background-200" />
+            </Pressable>
+          </Toast>
+        );
+      },
+    });
+  };
+
   return (
-    <Button
-      onPress={() => {
-        toast.show({
-          placement: placement,
-          duration: 3000,
-          // duration: null,
-          render: ({ id }) => {
-            const toastId = `toast-${id}`;
-            return (
-              <>
-                <Toast nativeID={toastId} {...props}>
-                  <ToastTitle>Toast Heading</ToastTitle>
-                  <ToastDescription>
-                    Lorem ipsum dolor sit amet consectetur.
-                  </ToastDescription>
-                </Toast>
-              </>
-            );
-          },
-        });
-      }}
-    >
+    <Button onPress={handleToast}>
       <ButtonText>Press Me</ButtonText>
     </Button>
   );