feat(pagination): add size api (#3047) (#3048)

* feat(pagination): 设置尺寸(#3047) * chore(pagination): 规范代码结构(#3047) * chore(table): 规范代码结构(#3047) --------- Co-authored-by: wanjinping <wanjinping@xiaomi.com>
XiaoMi · Nov 19, 2024 · cc8c3a2 · cc8c3a2
1 parent f634a2c
commit cc8c3a2
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 8 deletions.
diff --git a/.changeset/brown-clouds-deny.md b/.changeset/brown-clouds-deny.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/pagination": minor
+"@hi-ui/hiui": minor
+---
+
+feat(pagination): add size api(#3047)
diff --git a/packages/ui/pagination/src/DefaultPagination.tsx b/packages/ui/pagination/src/DefaultPagination.tsx
@@ -38,6 +38,7 @@ export const DefaultPagination = forwardRef<HTMLDivElement | null, PaginationPro
       type = 'default',
       autoHide = false,
       pageSizeOptionsOverlay,
+      size = 'md',
       ...rest
     },
     ref
@@ -189,6 +190,7 @@ export const DefaultPagination = forwardRef<HTMLDivElement | null, PaginationPro
             pageSizeOptions={_pageSizeOptions as { id: number; title: string }[]}
             pageSizeOptionsOverlay={pageSizeOptionsOverlay}
             onPageSizeChange={trySetPageSize}
+            size={size}
           />
         ) : null}
         {showJumper ? (
@@ -200,6 +202,7 @@ export const DefaultPagination = forwardRef<HTMLDivElement | null, PaginationPro
               onJump?.(page)
             }}
             maxJump={calculatePageCount(total, pageSize)}
+            size={size}
           />
         ) : null}
       </div>
@@ -271,6 +274,10 @@ export interface PaginationProps extends HiBaseHTMLProps<'div'> {
    * 	每页显示条数改变的回调函数
    */
   onPageSizeChange?: (pageSize: number, current: number) => void
+  /**
+   * 设置尺寸
+   */
+  size?: 'sm' | 'md'
 }
 
 if (__DEV__) {

diff --git a/packages/ui/pagination/src/PageJumper.tsx b/packages/ui/pagination/src/PageJumper.tsx
@@ -2,7 +2,13 @@ import React, { useCallback, useState } from 'react'
 import { Input } from '@hi-ui/input'
 import { __DEV__ } from '@hi-ui/env'
 
-export const PageJumper: React.FC<PageJumperProps> = ({ pageText, prefixCls, onJump, maxJump }) => {
+export const PageJumper: React.FC<PageJumperProps> = ({
+  pageText,
+  prefixCls,
+  onJump,
+  maxJump,
+  size = 'md',
+}) => {
   const [jumpPage, setJumpPage] = useState<string>('')
   const onJumperChange = useCallback((e) => {
     setJumpPage(e.target.value)
@@ -41,6 +47,7 @@ export const PageJumper: React.FC<PageJumperProps> = ({ pageText, prefixCls, onJ
           }
         }}
         onChange={onJumperChange}
+        size={size}
       />
       {pageText[1]}
     </div>
@@ -55,6 +62,10 @@ export interface PageJumperProps {
   prefixCls?: string
   onJump: (page: number) => void
   maxJump: number
+  /**
+   * 设置尺寸
+   */
+  size?: 'sm' | 'md'
 }
 
 if (__DEV__) {

diff --git a/packages/ui/pagination/src/PageOption.tsx b/packages/ui/pagination/src/PageOption.tsx
@@ -13,6 +13,7 @@ export const PageOption: React.FC<PageOptionProps> = ({
   pageSizeOptionsOverlay,
   onPageSizeChange,
   pageSize,
+  size = 'md',
 }) => {
   const cls = cx(`${prefixCls}__option`)
 
@@ -24,6 +25,7 @@ export const PageOption: React.FC<PageOptionProps> = ({
       data={pageSizeOptions}
       value={pageSize}
       clearable={false}
+      size={size}
       onChange={onPageSizeChange as (value: React.ReactText) => void}
       overlay={pageSizeOptionsOverlay}
     />
@@ -55,6 +57,10 @@ export interface PageOptionProps {
    * 	每页条数
    */
   pageSize: number
+  /**
+   * 设置尺寸
+   */
+  size?: 'sm' | 'md'
 }
 
 if (__DEV__) {

diff --git a/packages/ui/pagination/src/Pagination.tsx b/packages/ui/pagination/src/Pagination.tsx
@@ -14,15 +14,16 @@ export const Pagination = forwardRef<HTMLDivElement | null, PaginationProps>(
       type = 'default',
       className,
       children,
+      size = 'md',
       ...rest
     },
     ref
   ) => {
-    const cls = cx(prefixCls, className)
+    const cls = cx(prefixCls, className, `${prefixCls}--size-${size}`)
     if (type === 'default') {
-      return <DefaultPagination ref={ref} className={cls} {...rest} />
+      return <DefaultPagination ref={ref} className={cls} size={size} {...rest} />
     }
-    return <ShrinkPagination ref={ref} className={cls} {...rest} />
+    return <ShrinkPagination ref={ref} className={cls} size={size} {...rest} />
   }
 )
 

diff --git a/packages/ui/pagination/src/ShrinkPagination.tsx b/packages/ui/pagination/src/ShrinkPagination.tsx
@@ -68,6 +68,7 @@ export const ShrinkPagination = forwardRef<HTMLDivElement | null, ShrinkPaginati
       max: maxPage,
       onChange: proxyTrySetCurrent,
       focusOnStep: false,
+      size,
     })
 
     // 优化数据在第一页且数据一页内时，不展示 pagination 配置项
@@ -86,7 +87,7 @@ export const ShrinkPagination = forwardRef<HTMLDivElement | null, ShrinkPaginati
         {showJumper ? (
           <>
             {/* @ts-ignore */}
-            <Input {...getInputProps()} appearance="filled" />
+            <Input {...getInputProps()} appearance="filled" size={size} />
             {showTotal ? <span className={`${prefixCls}__total`}>{`/ ${maxPage}`}</span> : null}
           </>
         ) : null}
@@ -130,7 +131,7 @@ export interface ShrinkPaginationProps extends HiBaseHTMLProps<'div'> {
   /**
    * 设置尺寸
    */
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md'
   /**
    * 	只有一页时是否隐藏分页器
    */

diff --git a/packages/ui/pagination/src/styles/pagination.scss b/packages/ui/pagination/src/styles/pagination.scss
@@ -5,7 +5,6 @@ $prefix: '#{$component-prefix}-pagination' !default;
 .#{$prefix},
 .#{$prefix}-mini {
   display: flex;
-  font-size: use-text-size('normal');
   align-items: center;
   color: use-color('gray', 600);
   user-select: none;
@@ -121,6 +120,27 @@ $prefix: '#{$component-prefix}-pagination' !default;
       }
     }
   }
+
+  &--size-sm {
+    font-size: use-text-size('sm');
+    line-height: use-text-lineheight('sm');
+
+    .#{$prefix}__btn {
+      min-width: use-height-size(6);
+      height: use-height-size(6);
+    }
+
+    .#{$prefix}__item {
+      min-width: use-height-size(6);
+      height: use-height-size(6);
+      line-height: use-height-size(6);
+    }
+  }
+
+  &--size-md {
+    font-size: use-text-size('normal');
+    line-height: use-text-lineheight('normal');
+  }
 }
 
 $input-pagination-prefix: '#{$component-prefix}-pagination-mini' !default;
@@ -132,7 +152,6 @@ $input-pagination-prefix: '#{$component-prefix}-pagination-mini' !default;
   height: auto;
   min-height: 24px;
   box-sizing: border-box;
-  font-size: use-text-size('normal');
   outline: none;
 
   $this: &;

diff --git a/packages/ui/pagination/stories/index.stories.tsx b/packages/ui/pagination/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './page-size-options.stories'
 export * from './simple.stories'
 export * from './mini-input.stories'
 export * from './custom.stories'
+export * from './size.stories'
 
 export default {
   title: 'Navigation/Pagination',

diff --git a/packages/ui/pagination/stories/size.stories.tsx b/packages/ui/pagination/stories/size.stories.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import Pagination from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+  return (
+    <>
+      <h1>不同尺寸</h1>
+      <div className="button-basic__wrap">
+        <div style={{ marginBottom: 20 }}>
+          <Pagination
+            total={200}
+            pageSize={10}
+            showTotal
+            showJumper
+            showPagers
+            size="sm"
+            onChange={(cur, prev, pageSize) => {
+              console.log('onChange', cur, prev, pageSize)
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: 20 }}>
+          <Pagination
+            type="shrink"
+            total={200}
+            pageSize={10}
+            size={'sm'}
+            onChange={(cur) => {
+              console.log('onChange', cur)
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: 20 }}>
+          <Pagination
+            total={200}
+            pageSize={10}
+            showTotal
+            showJumper
+            showPagers
+            size="md"
+            onChange={(cur, prev, pageSize) => {
+              console.log('onChange', cur, prev, pageSize)
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: 20 }}>
+          <Pagination
+            type="shrink"
+            total={200}
+            pageSize={10}
+            size="md"
+            onChange={(cur) => {
+              console.log('onChange', cur)
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: 24 }}></div>
+      </div>
+    </>
+  )
+}