Skip to content

Commit

Permalink
feat: Add sizeChangerRender instead of selectComponentClass (#631)
Browse files Browse the repository at this point in the history
* chore: init docs

* docs: all cover

* test: fix index test

* test: fix test

* fix: type

* test: fix test

* chore: update demo

* docs: back

* test: fix test

* test: fix test

* chore: fix lint

* test: update snapshot
  • Loading branch information
zombieJ authored Dec 10, 2024
1 parent 8f26e36 commit 1784380
Show file tree
Hide file tree
Showing 29 changed files with 753 additions and 601 deletions.
2 changes: 1 addition & 1 deletion docs/examples/align.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../../assets/index.less';
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';

const App = () => (
<>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/basic.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../../assets/index.less';
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';

const App = () => (
<>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/controlled.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';
import '../../assets/index.less';
import 'rc-select/assets/index.less';

Expand Down
2 changes: 1 addition & 1 deletion docs/examples/itemRender.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../../assets/index.less';
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';

const itemRender = (current, type, element) => {
if (type === 'page') {
Expand Down
19 changes: 9 additions & 10 deletions docs/examples/jumper.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/* eslint func-names: 0, no-console: 0 */
import React from 'react';
import Select from 'rc-select';
import Pagination from 'rc-pagination';
import '../../assets/index.less';
import 'rc-select/assets/index.less';
import PaginationWithSizeChanger from './utils/commonUtil';

function onShowSizeChange(current, pageSize) {
console.log(current);
Expand All @@ -18,8 +17,8 @@ function onChange(current, pageSize) {
const App = () => (
<>
<h3>默认</h3>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showQuickJumper
showSizeChanger
defaultPageSize={20}
Expand All @@ -29,8 +28,8 @@ const App = () => (
total={450}
/>
<h3>禁用</h3>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showQuickJumper
showSizeChanger
defaultPageSize={20}
Expand All @@ -41,17 +40,17 @@ const App = () => (
disabled
/>
<h3>单页默认隐藏</h3>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showQuickJumper
showSizeChanger
onShowSizeChange={onShowSizeChange}
onChange={onChange}
total={8}
/>
<br />
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showQuickJumper
showSizeChanger
onShowSizeChange={onShowSizeChange}
Expand Down
8 changes: 4 additions & 4 deletions docs/examples/jumperWithGoButton.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/* eslint func-names: 0, no-console: 0 */
import React from 'react';
import Select from 'rc-select';
import Pagination from 'rc-pagination';
import Pagination from '../../src';
import '../../assets/index.less';
import 'rc-select/assets/index.less';
import PaginationWithSizeChanger from './utils/commonUtil';

class App extends React.Component {
onShowSizeChange = (current, pageSize) => {
Expand All @@ -20,8 +20,8 @@ class App extends React.Component {
return (
<>
<p> customize node </p>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showSizeChanger
showQuickJumper={{ goButton: <button type="button">确定</button> }}
defaultPageSize={20}
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/lessPages.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint func-names: 0, no-console: 0 */
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';
import '../../assets/index.less';

const arrowPath =
Expand Down
7 changes: 3 additions & 4 deletions docs/examples/locale.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/* eslint func-names: 0, no-console: 0 */
import React from 'react';
import Select from 'rc-select';
import Pagination from 'rc-pagination';
import localeInfo from '../../src/locale/en_US';
import '../../assets/index.less';
import 'rc-select/assets/index.less';
import PaginationWithSizeChanger from './utils/commonUtil';

function onShowSizeChange(current, pageSize) {
console.log(current);
Expand All @@ -17,8 +16,8 @@ function onChange(current, pageSize) {
}

const App = () => (
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showQuickJumper
showSizeChanger
defaultPageSize={20}
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/more.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../../assets/index.less';
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';

const App = () => (
<Pagination className="ant-pagination" defaultCurrent={3} total={450} />
Expand Down
31 changes: 15 additions & 16 deletions docs/examples/showSizeChanger.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import Pagination from 'rc-pagination';
import Select from 'rc-select';
import '../../assets/index.less';
import PaginationWithSizeChanger from './utils/commonUtil';

export default () => {
const onPageSizeOnChange = (value) => {
Expand All @@ -10,31 +9,31 @@ export default () => {

return (
<>
<Pagination
<PaginationWithSizeChanger
defaultCurrent={1}
total={50}
selectComponentClass={Select}
// selectComponentClass={Select}
showSizeChanger={false}
/>
<Pagination
<PaginationWithSizeChanger
defaultCurrent={1}
total={50}
selectComponentClass={Select}
// selectComponentClass={Select}
showSizeChanger
/>
<Pagination
<PaginationWithSizeChanger
defaultCurrent={1}
total={50}
selectComponentClass={Select}
showSizeChanger={{
showSizeChanger
// selectComponentClass={Select}
sizeChangerProps={{
options: [
{ value: '10', label: '10 条每页' },
{ value: '25', label: '25 条每页' },
{ value: '100', label: '100 条每页' },
{ value: 10, label: '10 条每页' },
{ value: 25, label: '25 条每页' },
{ value: 100, label: '100 条每页' },
],
className: 'my-select',
showSearch: true,
onChange: onPageSizeOnChange,
// className: 'my-select',
// showSearch: true,
// onChange: onPageSizeOnChange,
}}
/>
</>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/showTitle.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint func-names: 0, no-console: 0 */
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';
import '../../assets/index.less';

class App extends React.Component {
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/showTotal.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';
import '../../assets/index.less';

const App = () => (
Expand Down
12 changes: 6 additions & 6 deletions docs/examples/simple.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import Pagination from 'rc-pagination';
import Select from 'rc-select';
import Pagination from '../../src';
import '../../assets/index.less';
import PaginationWithSizeChanger from './utils/commonUtil';

export default () => {
const [pageIndex, setPageIndex] = useState(1);
Expand Down Expand Up @@ -32,24 +32,24 @@ export default () => {
showTotal={(total) => `Total ${total} items`}
/>
<br />
<Pagination
<PaginationWithSizeChanger
simple
defaultCurrent={1}
total={50}
showSizeChanger
selectComponentClass={Select}
// selectComponentClass={Select}
/>
<hr />
<a href="https://github.com/ant-design/ant-design/issues/46671">
Antd #46671
</a>
<Pagination
<PaginationWithSizeChanger
simple
defaultCurrent={1}
total={50}
showSizeChanger
showQuickJumper
selectComponentClass={Select}
// selectComponentClass={Select}
/>
</>
);
Expand Down
19 changes: 9 additions & 10 deletions docs/examples/sizer.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/* eslint func-names: 0, no-console: 0 */
import React from 'react';
import Select from 'rc-select';
import Pagination from 'rc-pagination';
import '../../assets/index.less';
import 'rc-select/assets/index.less';
import PaginationWithSizeChanger from './utils/commonUtil';

class App extends React.Component {
state = {
Expand All @@ -19,30 +18,30 @@ class App extends React.Component {
const { pageSize } = this.state;
return (
<div style={{ margin: 10 }}>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showSizeChanger
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
defaultCurrent={3}
total={40}
/>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
defaultCurrent={3}
total={50}
/>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
defaultCurrent={3}
total={60}
/>
<Pagination
selectComponentClass={Select}
<PaginationWithSizeChanger
// selectComponentClass={Select}
showSizeChanger={false}
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/styles.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../../assets/index.less';
import React from 'react';
import Pagination from 'rc-pagination';
import Pagination from '../../src';

export default () => (
<Pagination defaultCurrent={2} total={25} style={{ margin: '100px' }} />
Expand Down
49 changes: 49 additions & 0 deletions docs/examples/utils/commonUtil.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import type { PaginationProps } from 'rc-pagination';
import Pagination from '../../../src';
import Select from 'rc-select';
import React from 'react';

export const getSizeChangerRender = (selectProps?: any) => {
const render: PaginationProps['sizeChangerRender'] = ({
disabled,
size: pageSize,
onSizeChange,
'aria-label': ariaLabel,
className,
options,
}) => (
<Select
disabled={disabled}
// prefixCls={selectPrefixCls}
showSearch={false}
// optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
// popupMatchSelectWidth={false}
dropdownMatchSelectWidth={false}
value={pageSize || options[0].value}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
aria-label={ariaLabel}
defaultOpen={false}
// {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
className={className}
options={options}
onChange={onSizeChange}
{...selectProps}
/>
);

return render;
};

export default function PaginationWithSizeChanger({
sizeChangerProps,
...props
}: Omit<PaginationProps, 'sizeChangerRender'> & {
sizeChangerProps?: any;
}) {
return (
<Pagination
{...props}
sizeChangerRender={getSizeChangerRender(sizeChangerProps)}
/>
);
}
2 changes: 0 additions & 2 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
const pkg = require('./package.json');
module.exports = {
setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts'],
moduleNameMapper: {
[pkg.name]: '<rootDir>/src/index.ts',
'\\.less$': 'identity-obj-proxy',
},
collectCoverageFrom: ['src/**', '!src/locale/**'],
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"lint-staged": "^15.0.2",
"np": "^10.0.5",
"prettier": "^3.1.0",
"rc-select": "^14.1.2",
"rc-select": "^14.16.4",
"rc-test": "^7.0.15",
"react": "^18.2.0",
"react-dom": "^18.2.0"
Expand Down
Loading

0 comments on commit 1784380

Please sign in to comment.