Merge pull request #277 from gluestack/fix/popover

Fix/popover

Author: Viraj-10

example/storybook/src/components/Overlay/Popover/Popover.stories.tsx

@@ -18,17 +18,17 @@ const PopoverMeta: ComponentMeta<typeof Popover> = {
       control: 'select',
       options: [
         'bottom',
-        'bottom-end',
-        'bottom-start',
+        'bottom left',
+        'bottom right',
         'top',
-        'top-end',
-        'top-start',
+        'top left',
+        'top right',
         'left',
-        'left-end',
-        'left-start',
+        'left bottom',
+        'left right',
         'right',
-        'right-end',
-        'right-start',
+        'right bottom',
+        'right top',
       ],
     },
   },

example/storybook/src/components/Overlay/Popover/Popover.tsx

@@ -1,61 +1,76 @@
 import React from 'react';
 import {
   Text,
-  Pressable,
-  Popover,
   Button,
+  Popover,
   CloseIcon,
   Icon,
   Box,
+  Center,
 } from '../../../ui-components';
 
 import Wrapper from '../../Wrapper';
 
-export const PopoverStory = () => {
+export const PopoverStory = ({ placement }: any) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
   return (
     <Wrapper>
-      <Popover
-        placement={'bottom'}
-        trigger={(triggerProps: any) => {
-          return (
-            <Pressable
-              bgColor={'$red500'}
-              borderRadius={'$md'}
-              {...triggerProps}
-            >
-              <Text color={'white'} padding="$3">
-                Popover
+      <Center w={1200} h={800}>
+        <Popover
+          isOpen={isOpen}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          offset={30}
+          placement={placement}
+          trigger={(triggerProps: any) => {
+            return (
+              <Button {...triggerProps}>
+                <Button.Text>Popover</Button.Text>
+              </Button>
+            );
+          }}
+        >
+          <Popover.Backdrop />
+          <Popover.Content>
+            <Popover.Header>
+              <Text>Delete Customer</Text>
+              <Popover.CloseButton>
+                <Icon as={CloseIcon} sx={{ w: 16, h: 16 }} />
+              </Popover.CloseButton>
+            </Popover.Header>
+
+            <Popover.Body>
+              <Text>
+                This will remove all data relating to Alex. This action cannot
+                be reversed. Deleted data can not be recovered.
               </Text>
-            </Pressable>
-          );
-        }}
-      >
-        <Popover.Content>
-          <Popover.Header>
-            <Text>Delete Customer</Text>
-            <Popover.CloseButton>
-              <Icon as={CloseIcon} sx={{ w: 16, h: 16 }} />
-            </Popover.CloseButton>
-          </Popover.Header>
-          <Popover.Body>
-            <Text>
-              This will remove all data relating to Alex. This action cannot be
-              reversed. Deleted data can not be recovered.
-            </Text>
-          </Popover.Body>
-          <Popover.Footer>
-            {/* @ts-ignore */}
-            <Button variant="outline" mr={'$2'}>
-              <Button.Text>Cancel</Button.Text>
-            </Button>
-            <Button>
-              <Button.Text color={'white'}>Delete</Button.Text>
-            </Button>
-          </Popover.Footer>
-        </Popover.Content>
-      </Popover>
+            </Popover.Body>
+
+            <Popover.Footer>
+              {/* @ts-ignore */}
+              <Button variant="outline" mr={'$2'} onPress={handleClose}>
+                <Button.Text>Cancel</Button.Text>
+              </Button>
+              <Button>
+                <Button.Text color={'white'} onPress={handleClose}>
+                  Delete
+                </Button.Text>
+              </Button>
+            </Popover.Footer>
+          </Popover.Content>
+        </Popover>
+      </Center>
     </Wrapper>
   );
 };
 
-export { Text, Pressable, Popover, Button, CloseIcon, Box };
+export { Text, Popover, Button, CloseIcon, Box };