feat(pagination): add simple prop

Conflux-Chain · Sep 28, 2020 · a7cb7eb · a7cb7eb
1 parent ff4a869
commit a7cb7eb
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 20 deletions.
diff --git a/components/date-picker/__tests__/__snapshots__/range-picker-spec.test.tsx.snap b/components/date-picker/__tests__/__snapshots__/range-picker-spec.test.tsx.snap
diff --git a/components/date-picker/__tests__/__snapshots__/range-picker.test.tsx.snap b/components/date-picker/__tests__/__snapshots__/range-picker.test.tsx.snap
diff --git a/components/pagination/__tests__/pagination.test.tsx b/components/pagination/__tests__/pagination.test.tsx
@@ -382,7 +382,7 @@ describe('pagination on mobile', () => {
   })
 
   it('should render correctly on mobile', async () => {
-    const wrapper = mount(<Pagination total={200} showQuickJumper />)
+    const wrapper = mount(<Pagination total={200} showQuickJumper simple />)
     expect(wrapper.html()).toMatchSnapshot()
   })
 })
diff --git a/components/pagination/pagination-context.ts b/components/pagination/pagination-context.ts
@@ -12,6 +12,7 @@ export interface PaginationConfig {
   variant?: PaginationVariants
   page?: number
   pageSize?: number
+  simple?: boolean
 }
 
 export interface PaginationHandles {

diff --git a/components/pagination/pagination-pageSize.tsx b/components/pagination/pagination-pageSize.tsx
@@ -4,7 +4,6 @@ import { NormalSizes } from '../utils/prop-types'
 import useTheme from '../styles/use-theme'
 import { getPageCount } from './utils'
 import { usePaginationContext } from './pagination-context'
-import useMediaQuery from '../use-media-query'
 interface Props {
   pageSizeOptions: string[]
   pageSize: number
@@ -32,8 +31,7 @@ const PaginationNext: React.FC<PaginationPageSizeProps> = ({
   onPageSizeChange,
 }: PaginationPageSizeProps & typeof defaultProps) => {
   const theme = useTheme()
-  const isXS = useMediaQuery('xs')
-  const { updatePage, updatePageSize, page } = usePaginationContext()
+  const { updatePage, updatePageSize, page, simple } = usePaginationContext()
   const changeHandler = (val: string) => {
     const pageSize = Number(val)
     const newPageCount = getPageCount(total, pageSize)
@@ -57,10 +55,11 @@ const PaginationNext: React.FC<PaginationPageSizeProps> = ({
 
   return (
     <div className="pagination-pagesize">
-      {!isXS && <div className="text before">{labelPageSizeBefore}</div>}
+      {!simple && <div className="text before">{labelPageSizeBefore}</div>}
       <Select
         variant="line"
         size={size}
+        disableMatchWidth
         onChange={changeHandler}
         defaultValue={pageSize.toString()}>
         {mergedOptions?.map(pageSize => {
@@ -71,7 +70,7 @@ const PaginationNext: React.FC<PaginationPageSizeProps> = ({
           )
         })}
       </Select>
-      {!isXS && <div className="text after">{labelPageSizeAfter}</div>}
+      {!simple && <div className="text after">{labelPageSizeAfter}</div>}
       <style jsx>
         {`
           .pagination-pagesize {

diff --git a/components/pagination/pagination-quickjumper.tsx b/components/pagination/pagination-quickjumper.tsx
@@ -3,7 +3,6 @@ import Input from '../input'
 import { NormalSizes } from '../utils/prop-types'
 import useTheme from '../styles/use-theme'
 import { usePaginationContext } from './pagination-context'
-import useMediaQuery from '../use-media-query'
 interface Props {
   count: number
   size?: NormalSizes
@@ -25,8 +24,7 @@ const PaginationNext: React.FC<PaginationQuickJumperProps> = ({
 }: PaginationQuickJumperProps & typeof defaultProps) => {
   const theme = useTheme()
   const inputRef = useRef<HTMLInputElement>(null)
-  const { variant, updatePage } = usePaginationContext()
-  const isXS = useMediaQuery('xs')
+  const { variant, updatePage, simple } = usePaginationContext()
   const blurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
     if (e.target.value) {
       let val = Number(e.target.value)
@@ -45,10 +43,10 @@ const PaginationNext: React.FC<PaginationQuickJumperProps> = ({
       <Input
         onBlur={blurHandler}
         variant={variant}
-        width={isXS ? '4rem' : '4.7143rem'}
+        width={simple ? '4rem' : '4.7143rem'}
         size={size}
         ref={inputRef}></Input>
-      {!isXS && <div className="text after">{labelJumperAfter}</div>}
+      {!simple && <div className="text after">{labelJumperAfter}</div>}
       <style jsx>
         {`
           .pagination-quickjumper {

diff --git a/components/pagination/pagination.tsx b/components/pagination/pagination.tsx
@@ -15,7 +15,6 @@ import {
 import useMergedState from '../utils/use-merged-state'
 import { NormalSizes, PaginationVariants } from '../utils/prop-types'
 import usePaginationHandle from './use-pagination-handle'
-import useMediaQuery from '../use-media-query'
 /**
  * styles
  */
@@ -53,6 +52,7 @@ interface Props {
   labelJumperAfter?: ReactNode | string
   showQuickJumper?: boolean
   showPageSizeChanger?: boolean
+  simple?: boolean
   onPageChange?: (val: number, pageSize: number) => void
   onPageSizeChange?: (current: number, pageSize: number) => void
 }
@@ -70,6 +70,7 @@ const defaultProps = {
   labelJumperAfter: 'PAGE',
   showQuickJumper: false,
   showPageSizeChanger: false,
+  simple: false,
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type PaginationProps = React.PropsWithChildren<Props & NativeAttrs>
@@ -92,14 +93,14 @@ const Pagination = forwardRef<PaginationHandles, React.PropsWithChildren<Paginat
       labelJumperAfter,
       showQuickJumper,
       showPageSizeChanger,
+      simple,
       onPageSizeChange,
       onPageChange,
     }: PaginationProps & typeof defaultProps,
     ref: RefObject<PaginationHandles>,
   ) => {
     const theme = useTheme()
-    const isXS = useMediaQuery('xs')
-    const customSize = isXS ? 'small' : size
+    const customSize = simple ? 'small' : size
     const [page, setPage] = useMergedState(defaultPage, {
       value: customPage,
       onChange: (page): any => onPageChange && onPageChange(page, pageSize),
@@ -164,8 +165,9 @@ const Pagination = forwardRef<PaginationHandles, React.PropsWithChildren<Paginat
         variant,
         page,
         pageSize,
+        simple,
       }),
-      [page, pageSize, updatePage, updatePageSize, variant],
+      [page, pageSize, updatePage, updatePageSize, variant, simple],
     )
 
     useEffect(() => {
@@ -199,7 +201,7 @@ const Pagination = forwardRef<PaginationHandles, React.PropsWithChildren<Paginat
           <div className="right">
             <section>
               {prevItem}
-              {isXS ? (
+              {simple ? (
                 <PaginationItem key={`pagination-item-${page}`} active={true}>
                   {page}
                 </PaginationItem>

diff --git a/pages/en-us/components/pagination.mdx b/pages/en-us/components/pagination.mdx
@@ -161,6 +161,18 @@ A long list can be divided into several pages, and only one page will be loaded
 `}
 />
 
+<Playground
+  title="Simple"
+  desc="Whether to use simple mode,you can use this mode on mobile"
+  scope={{ Pagination }}
+  width="750px"
+  code={`
+<>
+  <Pagination total={40} showPageSizeChanger showQuickJumper simple />
+</>
+`}
+/>
+
 <Attributes edit="/pages/en-us/components/pagination.mdx">
 <Attributes.Title>Pagination.Props</Attributes.Title>
 
@@ -181,6 +193,7 @@ A long list can be divided into several pages, and only one page will be loaded
 | **labelJumperAfter**    | Customize the label after quickJumper                                                                     | `ReactNode` / `string`                   | -                                         | `PAGE`                    |
 | **showQuickJumper**     | Determine whether you can jump to pages directly                                                          | `boolean`                                | -                                         | false                     |
 | **showPageSizeChanger** | Determine whether to show pageSize select                                                                 | `boolean`                                | -                                         | false                     |
+| **simple**              | Determine whether to show simple mode                                                                     | `boolean`                                | -                                         | false                     |
 | **onPageChange**        | Called when the page number changes, and it takes the resulting page number and pageSize as its arguments | `(page: number,pageSize:number) => void` | -                                         | -                         |
 | **onPageSizeChange**    | Called when pageSize is changed                                                                           | `(page: number,pageSize:number) => void` | -                                         | -                         |
 | ...                     | Native props                                                                                              | `HTMLAttributes`                         | `'id', 'className', ...`                  | -                         |

diff --git a/pages/zh-cn/components/pagination.mdx b/pages/zh-cn/components/pagination.mdx
@@ -160,6 +160,18 @@ export const meta = {
 `}
 />
 
+<Playground
+  title="简单分页"
+  desc="当添加该属性时，显示为简单分页，适合在移动端使用"
+  scope={{ Pagination }}
+  width="750px"
+  code={`
+<>
+  <Pagination total={40} showPageSizeChanger showQuickJumper simple />
+</>
+`}
+/>
+
 <Attributes edit="/pages/zh-cn/components/pagination.mdx">
 <Attributes.Title>Pagination.Props</Attributes.Title>
 
@@ -180,6 +192,7 @@ export const meta = {
 | **labelJumperAfter**    | 自定义quickJumper组件之后的文本         | `ReactNode` / `string`                   | -                                         | `PAGE`                    |
 | **showQuickJumper**     | 是否展示快速跳转至某页                  | `boolean`                                | -                                         | false                     |
 | **showPageSizeChanger** | 是否展示 pageSize 切换器               | `boolean`                                | -                                         | false                     |
+| **simple**              | 是否展示 简单分页                      | `boolean`                                | -                                         | false                     |
 | **onPageChange**        | 分页器的事件                           | `(page: number,pageSize:number) => void` | -                                         | -                         |
 | **onPageSizeChange**    | pageSize 变化的回调                   | `(page: number,pageSize:number) => void`  | -                                         | -                         |
 | ...                     | 原生属性                              | `HTMLAttributes`                          | `'id', 'className', ...`                 | -                         |