feat(pop-confirm): add placement api (#2640)

XiaoMi · Oct 25, 2023 · 7742c02 · 7742c02
1 parent 804f531
commit 7742c02
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 4 deletions.
diff --git a/.changeset/sharp-pots-clap.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+    </>
+  )
+}