fix(table): 修复分页器被遮挡的问题 (#3040) (#3041)

* fix(table): 修复分页器被遮挡的问题 (#3040) * chore: 优化组件示例和文档
XiaoMi · Nov 11, 2024 · 8aa6069 · 8aa6069
1 parent fcab1d5
commit 8aa6069
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 6 deletions.
diff --git a/.changeset/kind-bees-move.md b/.changeset/kind-bees-move.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(table): 修复分页器被遮挡的问题 (#3040)
diff --git a/.changeset/silly-mirrors-turn.md b/.changeset/silly-mirrors-turn.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/pagination": minor
+---
+
+feat(pagination): Add pageSizeOptionsOverlay api (#3040)
diff --git a/packages/ui/pagination/hi-docs.config.mdx b/packages/ui/pagination/hi-docs.config.mdx
@@ -17,3 +17,14 @@
 ## Props
 
 <!-- Inject Props -->
+
+### PopperOverlayProps
+
+| 参数           | 说明                               | 类型                | 可选值                                                                                                                                                                                                     | 默认值         |
+| -------------- | ---------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| className      | 弹层类名                           | string              | -                                                                                                                                                                                                          | -              |
+| matchWidth     | 自动计算匹配吸附元素的宽度与其一致 | boolean             | true \| false                                                                                                                                                                                              | true           |
+| placement      | 相对吸附元素的位置                 | PopperPlacementEnum | "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "auto" \| "auto-start" \| "auto-end" | "bottom-start" |
+| container      | 指定 portal 的容器                 | HTMLElement         | -                                                                                                                                                                                                          | -              |
+| disabledPortal | 禁用 portal                        | boolean             | true \| false                                                                                                                                                                                              | false          |
+| arrow          | 是否展示箭头                       | boolean             | true \| false                                                                                                                                                                                              | false          |
diff --git a/packages/ui/pagination/src/DefaultPagination.tsx b/packages/ui/pagination/src/DefaultPagination.tsx
@@ -10,6 +10,7 @@ import { PageJumper } from './PageJumper'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { useLatestCallback } from '@hi-ui/use-latest'
 import { isFunction } from '@hi-ui/type-assertion'
+import { PopperOverlayProps } from '@hi-ui/popper'
 
 const _role = 'pagination'
 const _prefix = getPrefixCls(_role)
@@ -36,6 +37,7 @@ export const DefaultPagination = forwardRef<HTMLDivElement | null, PaginationPro
       showPagers = true,
       type = 'default',
       autoHide = false,
+      pageSizeOptionsOverlay,
       ...rest
     },
     ref
@@ -185,6 +187,7 @@ export const DefaultPagination = forwardRef<HTMLDivElement | null, PaginationPro
           <PageOption
             pageSize={pageSize}
             pageSizeOptions={_pageSizeOptions as { id: number; title: string }[]}
+            pageSizeOptionsOverlay={pageSizeOptionsOverlay}
             onPageSizeChange={trySetPageSize}
           />
         ) : null}
@@ -252,7 +255,10 @@ export interface PaginationProps extends HiBaseHTMLProps<'div'> {
    * 	指定每页可以显示多少条
    */
   pageSizeOptions?: number[]
-
+  /**
+   *  下拉框选择项浮层配置
+   */
+  pageSizeOptionsOverlay?: PopperOverlayProps
   /**
    * 	快速跳转时触发
    */

diff --git a/packages/ui/pagination/src/PageOption.tsx b/packages/ui/pagination/src/PageOption.tsx
@@ -2,13 +2,15 @@ import React from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { Select } from '@hi-ui/select'
 import { __DEV__ } from '@hi-ui/env'
+import { PopperOverlayProps } from '@hi-ui/popper'
 
 const _role = 'pagination'
 const _prefix = getPrefixCls(_role)
 
 export const PageOption: React.FC<PageOptionProps> = ({
   prefixCls = _prefix,
   pageSizeOptions,
+  pageSizeOptionsOverlay,
   onPageSizeChange,
   pageSize,
 }) => {
@@ -23,9 +25,7 @@ export const PageOption: React.FC<PageOptionProps> = ({
       value={pageSize}
       clearable={false}
       onChange={onPageSizeChange as (value: React.ReactText) => void}
-      overlay={{
-        disabledPortal: true,
-      }}
+      overlay={pageSizeOptionsOverlay}
     />
   )
 }
@@ -47,6 +47,10 @@ export interface PageOptionProps {
    * 指定每页可以显示多少条
    */
   pageSizeOptions: { id: React.ReactText; title: string }[]
+  /**
+   *  下拉框选择项浮层配置
+   */
+  pageSizeOptionsOverlay?: PopperOverlayProps
   /**
    * 	每页条数
    */

diff --git a/packages/ui/table/stories/pagination.stories.tsx b/packages/ui/table/stories/pagination.stories.tsx
@@ -145,6 +145,11 @@ export const Pagination = () => {
             showJumper: true,
             pageSize: paginationState.pageSize,
             pageSizeOptions: [5, 10, 20],
+            pageSizeOptionsOverlay: {
+              // 该参数用来配置分页器下拉框的挂载容器，默认是 body，设置为 true 时，会自动寻找最近的元素作为父节点
+              // 在浏览器原生的全屏模式中，需要将此值设成 true，否则无法正常显示，若无需在全屏状态下使用，则不需要做任何处理
+              disabledPortal: true,
+            },
             onPageSizeChange: (pageSize) => {
               setPaginationState((prev) => ({
                 ...prev,

diff --git a/packages/ui/table/stories/scrollbar.stories.tsx b/packages/ui/table/stories/scrollbar.stories.tsx
@@ -363,9 +363,9 @@ export const Scrollbar = () => {
               zIndex: 9,
               settings: {
                 // 垂直滑动时，让横向滚动条一直显示在容器底部
-                scrollbarXStickToBottom: true,
+                // scrollbarXStickToBottom: true,
                 // 横向滚动条距离底部的距离
-                scrollbarXStickToBottomGap: 20,
+                // scrollbarXStickToBottomGap: 20,
               },
             }
           }