Skip to content

feat: simple prop extend to object #591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 22, 2024
Merged

feat: simple prop extend to object #591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eeed9bb
feat: simple prop extend to object
iceweb1999 Jun 20, 2024
b36129e
Update src/interface.ts
coding-ice Jun 20, 2024
7d69b23
docs: update .md
iceweb1999 Jun 20, 2024
a4d3a9d
type: optimize any
iceweb1999 Jun 20, 2024
f51160b
refactor: remove dead code
iceweb1999 Jun 20, 2024
280c68d
fix: code
iceweb1999 Jun 20, 2024
f84a6f0
Update src/Pagination.tsx
coding-ice Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ ReactDOM.render(<Pagination />, container);
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
| showTotal | show total records and range | Function(total, [from, to]) | - |
| className | className of pagination | String | - |
| simple | when set, show simple pager | Object | null |
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
| style | the style of pagination | Object | {} |
| showLessItems | show less page items | Bool | false |
Expand Down
6 changes: 3 additions & 3 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@
}

&-slash {
margin: 0 10px 0 5px;
margin: 0 10px 0 12px;
}

&-options {
Expand Down Expand Up @@ -262,14 +262,14 @@
}

&-simple &-simple-pager {
display: inline-block;
display: flex;
align-items: center;
height: @pagination-item-size-sm;
margin-right: 8px;

input {
box-sizing: border-box;
height: 100%;
margin-right: 8px;
padding: 0 6px;
text-align: center;
background-color: @pagination-item-input-bg;
Expand Down
7 changes: 7 additions & 0 deletions docs/examples/simple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ export default () => {
onChange={setPageIndex}
/>
<br />
<Pagination
simple={{ readOnly: true }}
current={pageIndex}
total={50}
onChange={setPageIndex}
/>
<br />
<Pagination simple defaultCurrent={1} total={50} />
<br />
<Pagination
Expand Down
25 changes: 15 additions & 10 deletions src/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {

// ================== Simple ==================
// FIXME: ts type
const isReadOnly = typeof simple === 'object' ? simple.readOnly : !simple;
let gotoButton: any = goButton;
let simplePager: React.ReactNode = null;

Expand Down Expand Up @@ -380,16 +381,20 @@ const Pagination: React.FC<PaginationProps> = (props) => {
title={showTitle ? `${current}/${allPages}` : null}
className={`${prefixCls}-simple-pager`}
>
<input
type="text"
value={internalInputVal}
disabled={disabled}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onChange={handleKeyUp}
onBlur={handleBlur}
size={3}
/>
{isReadOnly ? (
internalInputVal
) : (
<input
type="text"
value={internalInputVal}
disabled={disabled}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onChange={handleKeyUp}
onBlur={handleBlur}
size={3}
/>
)}
<span className={`${prefixCls}-slash`}>/</span>
{allPages}
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export interface PaginationData {
showPrevNextJumpers: boolean;
showQuickJumper: boolean | object;
showTitle: boolean;
simple: boolean;
simple: boolean | { readOnly?: boolean; };
disabled: boolean;

locale: PaginationLocale;
Expand Down
40 changes: 40 additions & 0 deletions tests/__snapshots__/demo.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3375,6 +3375,46 @@ exports[`Example simple 1`] = `
</li>
</ul>
<br />
<ul
class="rc-pagination rc-pagination-simple"
>
<li
aria-disabled="true"
class="rc-pagination-prev rc-pagination-disabled"
title="上一页"
>
<button
aria-label="prev page"
class="rc-pagination-item-link"
disabled=""
type="button"
/>
</li>
<li
class="rc-pagination-simple-pager"
title="1/5"
>
1
<span
class="rc-pagination-slash"
>
/
</span>
5
</li>
<li
aria-disabled="false"
class="rc-pagination-next"
title="下一页"
>
<button
aria-label="next page"
class="rc-pagination-item-link"
type="button"
/>
</li>
</ul>
<br />
<ul
class="rc-pagination rc-pagination-simple"
>
Expand Down
45 changes: 45 additions & 0 deletions tests/__snapshots__/simple.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,48 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j
</span>
</div>
`;

exports[`simple Pagination should support simple is readOnly value 1`] = `
<div>
<ul
class="rc-pagination rc-pagination-simple"
>
<li
aria-disabled="true"
class="rc-pagination-prev rc-pagination-disabled"
title="上一页"
>
<button
aria-label="prev page"
class="rc-pagination-item-link"
disabled=""
type="button"
/>
</li>
<li
class="rc-pagination-simple-pager"
title="1/0"
>
1
<span
class="rc-pagination-slash"
>
/
</span>
0
</li>
<li
aria-disabled="true"
class="rc-pagination-next rc-pagination-disabled"
title="下一页"
>
<button
aria-label="next page"
class="rc-pagination-item-link"
disabled=""
type="button"
/>
</li>
</ul>
</div>
`;
5 changes: 5 additions & 0 deletions tests/simple.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,4 +299,9 @@ describe('simple Pagination', () => {
expect(quickJumper).toMatchSnapshot();
});
});

it('should support simple is readOnly value', () => {
const { container } = render(<Pagination simple={{ readOnly: true }} />);
expect(container).toMatchSnapshot();
});
});
Loading