From 7742c022a55f3908684d21e6e7d7bf07e3de1f5e Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 25 Oct 2023 16:14:05 +0800
Subject: [PATCH] feat(pop-confirm): add placement api (#2640)

---
 .changeset/sharp-pots-clap.md                 |   5 +
 .changeset/thirty-oranges-brush.md            |   5 +
 .../dropdown-column-render.stories.tsx        |   2 +-
 .../dropdown-column-render.stories.tsx        |   2 +-
 .../ui/pop-confirm/src/use-pop-confirm.ts     |   4 +-
 .../ui/pop-confirm/stories/index.stories.tsx  |   1 +
 .../pop-confirm/stories/placement.stories.tsx | 136 ++++++++++++++++++
 7 files changed, 151 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/sharp-pots-clap.md
 create mode 100644 .changeset/thirty-oranges-brush.md
 create mode 100644 packages/ui/pop-confirm/stories/placement.stories.tsx

diff --git a/.changeset/sharp-pots-clap.md b/.changeset/sharp-pots-clap.md
new file mode 100644
index 000000000..cbb5091e4
--- /dev/null
+++ b/.changeset/sharp-pots-clap.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/pop-confirm": minor
+---
+
+feat: add placement api (透传 Popper 参数)
diff --git a/.changeset/thirty-oranges-brush.md b/.changeset/thirty-oranges-brush.md
new file mode 100644
index 000000000..6d1f690d6
--- /dev/null
+++ b/.changeset/thirty-oranges-brush.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+PopConfirm feat: add placement api (透传 Popper 参数)
diff --git a/packages/ui/cascader/stories/dropdown-column-render.stories.tsx b/packages/ui/cascader/stories/dropdown-column-render.stories.tsx
index 5df155ff6..32f0791e6 100644
--- a/packages/ui/cascader/stories/dropdown-column-render.stories.tsx
+++ b/packages/ui/cascader/stories/dropdown-column-render.stories.tsx
@@ -114,7 +114,7 @@ export const DropdownColumnRender = () => {
                 >
                   header
                 </header>
-                {React.cloneElement(menu, { style: { height: 198 } })}
+                {React.cloneElement(menu, { style: { height: 186 } })}
                 <footer
                   style={{
                     lineHeight: '20px',
diff --git a/packages/ui/check-cascader/stories/dropdown-column-render.stories.tsx b/packages/ui/check-cascader/stories/dropdown-column-render.stories.tsx
index 90b572989..42fa99626 100644
--- a/packages/ui/check-cascader/stories/dropdown-column-render.stories.tsx
+++ b/packages/ui/check-cascader/stories/dropdown-column-render.stories.tsx
@@ -131,7 +131,7 @@ export const DropdownColumnRender = () => {
                 >
                   header
                 </header>
-                {React.cloneElement(menu, { style: { height: 198 } })}
+                {React.cloneElement(menu, { style: { height: 186 } })}
                 <footer
                   style={{
                     lineHeight: '20px',
diff --git a/packages/ui/pop-confirm/src/use-pop-confirm.ts b/packages/ui/pop-confirm/src/use-pop-confirm.ts
index bc193daa1..272ae49fa 100644
--- a/packages/ui/pop-confirm/src/use-pop-confirm.ts
+++ b/packages/ui/pop-confirm/src/use-pop-confirm.ts
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'
 import { useLatestCallback } from '@hi-ui/use-latest'
 import { mockDefaultHandlers } from '@hi-ui/dom-utils'
 import { withDefaultProps, mergeRefs } from '@hi-ui/react-utils'
-import { omitPopperOverlayProps } from '@hi-ui/popper'
+import { PopperOverlayProps, omitPopperOverlayProps } from '@hi-ui/popper'
 import { useUncontrolledToggle } from '@hi-ui/use-toggle'
 
 export const usePopConfirm = ({
@@ -86,7 +86,7 @@ export const usePopConfirm = ({
   }
 }
 
-export interface UsePopConfirmProps {
+export interface UsePopConfirmProps extends PopperOverlayProps {
   /**
    *  是否显示确认框
    */
diff --git a/packages/ui/pop-confirm/stories/index.stories.tsx b/packages/ui/pop-confirm/stories/index.stories.tsx
index 959df58a8..0e71cbe7e 100644
--- a/packages/ui/pop-confirm/stories/index.stories.tsx
+++ b/packages/ui/pop-confirm/stories/index.stories.tsx
@@ -5,6 +5,7 @@ export * from './basic.stories'
 export * from './custom-icon.stories'
 export * from './async.stories'
 export * from './gutter-gap.stories'
+export * from './placement.stories'
 
 export default {
   title: 'FeedBack/PopConfirm',
diff --git a/packages/ui/pop-confirm/stories/placement.stories.tsx b/packages/ui/pop-confirm/stories/placement.stories.tsx
new file mode 100644
index 000000000..491d63ae8
--- /dev/null
+++ b/packages/ui/pop-confirm/stories/placement.stories.tsx
@@ -0,0 +1,136 @@
+import Button from '@hi-ui/button'
+import React from 'react'
+import PopConfirm from '../src'
+import { PopperJS } from '@hi-ui/popper'
+
+/**
+ * @title 不同方位
+ */
+export const Placement = () => {
+  const [placement, setPlacement] = React.useState<undefined | PopperJS.Placement>()
+
+  const handleClick = (newPlacement) => () => {
+    setPlacement(newPlacement)
+  }
+
+  const title = <span>文字提示</span>
+
+  return (
+    <>
+      <h1>Placement</h1>
+      <div className="pop-confirm-placement__wrap">
+        <table className="placement-table" cellSpacing="5">
+          <tbody>
+            <tr>
+              <td></td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('top-start')}>
+                    topStart
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('top')}>
+                    top
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('top-end')}>
+                    topEnd
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('left-start')}>
+                    leftStart
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('right-start')}>
+                    rightStart
+                  </Button>
+                </PopConfirm>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('left')}>
+                    left
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('right')}>
+                    right
+                  </Button>
+                </PopConfirm>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('left-end')}>
+                    leftEnd
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('right-end')}>
+                    rightEnd
+                  </Button>
+                </PopConfirm>
+              </td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('bottom-start')}>
+                    bottomStart
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('bottom')}>
+                    bottom
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td>
+                <PopConfirm placement={placement} title={title}>
+                  <Button style={{ width: 100 }} onClick={handleClick('bottom-end')}>
+                    bottomEnd
+                  </Button>
+                </PopConfirm>
+              </td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </>
+  )
+}