From 48c6f0b2cb86a95b95ed287e5c8b974230ed1e77 Mon Sep 17 00:00:00 2001
From: drl990114 <drl990114@gmail.com>
Date: Sat, 13 Apr 2024 23:29:34 +0800
Subject: [PATCH] feat: popover demo

---
 src/Popover/PopoverWrapper.tsx | 22 ----------------
 src/Popover/demo/basic.tsx     | 10 ++++++++
 src/Popover/index.md           | 15 +++++++++++
 src/Popover/index.tsx          | 46 +++++++++++++++++++++-------------
 src/Popover/styles.tsx         | 32 +++++++++++++++++++++++
 5 files changed, 86 insertions(+), 39 deletions(-)
 delete mode 100644 src/Popover/PopoverWrapper.tsx
 create mode 100644 src/Popover/demo/basic.tsx
 create mode 100644 src/Popover/index.md
 create mode 100644 src/Popover/styles.tsx

diff --git a/src/Popover/PopoverWrapper.tsx b/src/Popover/PopoverWrapper.tsx
deleted file mode 100644
index 9fd14bc..0000000
--- a/src/Popover/PopoverWrapper.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Popover as AkPopover } from '@ariakit/react'
-import type { IStyledComponent } from 'styled-components';
-import styled from 'styled-components'
-
-export const PopoverWrapper: IStyledComponent<'web', typeof AkPopover> = styled(AkPopover)`
-  display: flex;
-  max-width: min(calc(100vw - 16px), 320px);
-  flex-direction: column;
-  border-radius: ${props => props.theme.smallBorderRadius};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${(props) => props.theme.borderColor};
-  background-color: ${(props) => props.theme.bgColor};
-  padding: ${props => props.theme.spaceXs};
-  color: ${(props) => props.theme.primaryFontColor};
-  outline: none;
-
-  .arrow {
-    stroke: ${(props) => props.theme.borderColor} !important;
-    stroke-width: 4 !important;
-  }
-`
diff --git a/src/Popover/demo/basic.tsx b/src/Popover/demo/basic.tsx
new file mode 100644
index 0000000..79e4924
--- /dev/null
+++ b/src/Popover/demo/basic.tsx
@@ -0,0 +1,10 @@
+import { Popover } from 'zens';
+
+export default () => {
+
+  return (
+    <Popover title='Popover'>
+      actions
+    </Popover>
+  );
+};
diff --git a/src/Popover/index.md b/src/Popover/index.md
new file mode 100644
index 0000000..6b4e54d
--- /dev/null
+++ b/src/Popover/index.md
@@ -0,0 +1,15 @@
+---
+title: Popover 弹出
+nav:
+  title: 组件
+  order: 2
+group:
+  title: 反馈
+  order: 1
+---
+
+# Popover 弹出
+
+### 基本用法
+
+<code src="./demo/basic.tsx"></code>
diff --git a/src/Popover/index.tsx b/src/Popover/index.tsx
index 712564a..9be7166 100644
--- a/src/Popover/index.tsx
+++ b/src/Popover/index.tsx
@@ -1,37 +1,49 @@
 // @ts-nocheck
-import type { PopoverProps as AkPopoverProps, PopoverProviderProps } from '@ariakit/react'
-import { PopoverArrow, PopoverProvider, PopoverDisclosure, PopoverHeading } from '@ariakit/react'
-import { PopoverWrapper } from './PopoverWrapper'
-import { Box } from '../Box'
+import type { PopoverProps as AkPopoverProps, PopoverProviderProps } from '@ariakit/react';
+import { PopoverDisclosure, PopoverProvider } from '@ariakit/react';
+import { Box } from '../Box';
+import { PopoverArrow, PopoverHeading, PopoverWrapper } from './styles';
 
 type PopoverOptions = Pick<PopoverProviderProps, 'placement' | 'open'> &
-  Pick<AkPopoverProps, 'onClose'>
+  Pick<AkPopoverProps, 'onClose'>;
 
 interface PopoverProps extends BaseComponentProps, PopoverOptions {
-  arrow?: boolean
-  title?: string
-  customContent?: React.ReactNode
-  placement?: PopoverProviderProps['placement']
-  children?: BaseComponentProps['children']
+  arrow?: boolean;
+  title?: string;
+  customContent?: React.ReactNode;
+  toggleOnClick?: boolean;
+  placement?: PopoverProviderProps['placement'];
+  children?: BaseComponentProps['children'];
 }
 
 const Popover: React.FC<PopoverProps> = (props) => {
-  const { arrow = true, title, children, customContent, placement, ...rest } = props
+  const {
+    arrow = true,
+    title,
+    toggleOnClick = true,
+    children,
+    customContent,
+    placement,
+    ...rest
+  } = props;
 
   return (
     <PopoverProvider placement={placement}>
-      <PopoverDisclosure toggleOnClick={false} render={(p) => <Box style={{ display: 'inline-block' }} {...p} />}>
+      <PopoverDisclosure
+        toggleOnClick={toggleOnClick}
+        render={(p) => <Box style={{ display: 'inline-block' }} {...p} />}
+      >
         {children}
       </PopoverDisclosure>
       <PopoverWrapper render={<Box />} {...rest}>
         {arrow ? (
-          <PopoverArrow style={{ width: '18px', height: '18px' }} className='arrow' />
+          <PopoverArrow />
         ) : null}
-        {title ? <PopoverHeading className='heading'>{title}</PopoverHeading> : null}
+        {title ? <PopoverHeading>{title}</PopoverHeading> : null}
         {customContent}
       </PopoverWrapper>
     </PopoverProvider>
-  )
-}
+  );
+};
 
-export default Popover
+export default Popover;
diff --git a/src/Popover/styles.tsx b/src/Popover/styles.tsx
new file mode 100644
index 0000000..6b091e7
--- /dev/null
+++ b/src/Popover/styles.tsx
@@ -0,0 +1,32 @@
+import * as Ariakit from '@ariakit/react';
+import type { IStyledComponent } from 'styled-components';
+import styled from 'styled-components';
+
+export const PopoverWrapper: IStyledComponent<'web', typeof Ariakit.Popover> = styled(
+  Ariakit.Popover,
+)`
+  display: flex;
+  max-width: min(calc(100vw - 16px), 320px);
+  flex-direction: column;
+  border-radius: ${(props) => props.theme.smallBorderRadius};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${(props) => props.theme.borderColor};
+  background-color: ${(props) => props.theme.bgColor};
+  padding: ${(props) => props.theme.spaceXs};
+  color: ${(props) => props.theme.primaryFontColor};
+  outline: none;
+`;
+
+export const PopoverArrow = styled(Ariakit.PopoverArrow)`
+  font-size: 18px !important;
+  stroke: ${(props) => props.theme.borderColor} !important;
+  fill: ${(props) => props.theme.bgColor} !important;
+  stroke-width: 4 !important;
+`;
+
+export const PopoverHeading = styled(Ariakit.PopoverHeading)`
+  font-size: ${(props) => props.theme.fontBase};
+  font-weight: 'bold';
+  margin: ${(props) => props.theme.spaceXs} 0;
+`;