fix: Remove the Trigger and Close from the Popover because of gesture…

… conflict (#3683)
OneKeyHQ · Oct 23, 2023 · bfefba4 · bfefba4
1 parent 128a880
commit bfefba4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 37 deletions.
diff --git a/packages/components/src/Popover/index.tsx b/packages/components/src/Popover/index.tsx
@@ -26,6 +26,7 @@ export function Popover({
   renderContent,
   floatingPanelProps,
   sheetProps,
+  onOpenChange,
   ...props
 }: PopoverProps) {
   const { bottom } = useSafeAreaInsets();
@@ -67,7 +68,13 @@ export function Popover({
   }
 
   return (
-    <TMPopover offset={8} allowFlip placement="bottom-end" {...props}>
+    <TMPopover
+      offset={8}
+      allowFlip
+      placement="bottom-end"
+      onOpenChange={onOpenChange}
+      {...props}
+    >
       <TMPopover.Trigger asChild>{renderTrigger}</TMPopover.Trigger>
 
       {/* floating panel */}
@@ -131,13 +138,12 @@ export function Popover({
               <Text variant="$headingXl" color="$text">
                 {title}
               </Text>
-              <TMPopover.Close asChild>
-                <IconButton
-                  icon="CrossedSmallOutline"
-                  size="small"
-                  $platform-native={{ hitSlop: 8 }}
-                />
-              </TMPopover.Close>
+              <IconButton
+                icon="CrossedSmallOutline"
+                size="small"
+                $platform-native={{ hitSlop: 8 }}
+                onPress={() => onOpenChange(false)}
+              />
             </XStack>
 
             {/* divider */}

diff --git a/packages/kit/src/views/Components/stories/Popover.tsx b/packages/kit/src/views/Components/stories/Popover.tsx
@@ -1,35 +1,45 @@
+import { useState } from 'react';
+
 import { Button, Popover, Stack, Text } from '@onekeyhq/components';
 
 import { Layout } from './utils/Layout';
 
-const PopoverGallery = () => (
-  <Layout
-    description=".."
-    suggestions={['...']}
-    boundaryConditions={['...']}
-    elements={[
-      {
-        title: 'Default',
-        element: (
-          <Popover
-            title="Popover Demo"
-            renderTrigger={<Button>Open</Button>}
-            renderContent={
-              <Stack space="$4" p="$5">
-                <Text>
-                  Non exercitation ea laborum cupidatat sunt amet aute
-                  exercitation occaecat minim incididunt non est est voluptate.
-                </Text>
-                <Popover.Close>
-                  <Button variant="primary">Button</Button>
-                </Popover.Close>
-              </Stack>
-            }
-          />
-        ),
-      },
-    ]}
-  />
-);
+const PopoverGallery = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Layout
+      description=".."
+      suggestions={['...']}
+      boundaryConditions={['...']}
+      elements={[
+        {
+          title: 'Default',
+          element: (
+            <Popover
+              title="Popover Demo"
+              open={isOpen}
+              onOpenChange={setIsOpen}
+              renderTrigger={
+                <Button onPress={() => setIsOpen(true)}>Open</Button>
+              }
+              renderContent={
+                <Stack space="$4" p="$5">
+                  <Text>
+                    Non exercitation ea laborum cupidatat sunt amet aute
+                    exercitation occaecat minim incididunt non est est
+                    voluptate.
+                  </Text>
+                  <Button variant="primary" onPress={() => setIsOpen(false)}>
+                    Button
+                  </Button>
+                </Stack>
+              }
+            />
+          ),
+        },
+      ]}
+    />
+  );
+};
 
 export default PopoverGallery;