@gm-pc/react 1.26.1-beta.1 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.26.1-beta.1",
+  "version": "1.27.0",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.26.1-beta.1",
+    "@gm-pc/locales": "^1.27.0",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "f099578979fed42106b76ad690796d07dfd5cd15"
+  "gitHead": "8382eb70be310e125ec7e14a918c2ae359dc075a"
 }

package/src/component/pagination/left.tsx

@@ -5,18 +5,22 @@ import { PaginationProps } from './types'
 import _ from 'lodash'
 import { getLocale } from '@gm-pc/locales'
 
-function getLimitData(limit: number) {
+function getLimitData(limit: number, pageSizeOptions?: string[]) {
   const limitData = [
     { value: limit, text: limit + '' },
     { value: 10, text: '10' },
     { value: 20, text: '20' },
     { value: 50, text: '50' },
+    ...(pageSizeOptions?.map((v) => ({ value: Number(v), text: v })) || []),
   ]
 
-  return _.uniqBy(limitData, (v) => v.value)
+  return _.orderBy(
+    _.uniqBy(limitData, (v) => v.value),
+    ['value']
+  )
 }
 
-const Left: FC<PaginationProps> = ({ paging, onChange }) => {
+const Left: FC<PaginationProps> = ({ paging, pageSizeOptions, onChange }) => {
   const { need_count, count, limit } = paging
 
   const handleChange = (limit: number) => {
@@ -39,7 +43,7 @@ const Left: FC<PaginationProps> = ({ paging, onChange }) => {
       )}
       <span>{getLocale('每页')}&nbsp;</span>
       <Select
-        data={getLimitData(limit)}
+        data={getLimitData(limit, pageSizeOptions)}
         value={limit}
         onChange={handleChange}
         style={{ width: '60px' }}

package/src/component/pagination/pagination.tsx

@@ -6,10 +6,10 @@ import PageWithoutCount from './page_without_count'
 import { PaginationProps } from './types'
 import { Flex } from '../flex'
 
-const Pagination: FC<PaginationProps> = ({ paging, onChange }) => {
+const Pagination: FC<PaginationProps> = ({ paging, pageSizeOptions, onChange }) => {
   return (
     <Flex wrap className='gm-pagination'>
-      <Left paging={paging} onChange={onChange} />
+      <Left pageSizeOptions={pageSizeOptions} paging={paging} onChange={onChange} />
       {paging.need_count ? (
         <PageWithCount paging={paging} onChange={onChange} />
       ) : (

package/src/component/pagination/stories.tsx

@@ -50,6 +50,7 @@ export const ComPagination = () => (
     <div>without count</div>
     <Pagination
       paging={oStore.paging}
+      pageSizeOptions={['100']}
       onChange={(paging) => {
         oStore.setPaging(paging)
       }}

package/src/component/pagination/types.ts

@@ -10,6 +10,8 @@ interface PaginationPaging {
 
 interface PaginationProps {
   paging: PaginationPaging
+  // 指定每页可以显示多少条
+  pageSizeOptions?: string[]
   onChange(paging: PaginationPaging): void
 }