Skip to content

Commit 8f9f2e5

Browse files
coding-iceiceweb1999afc163
authored
feat: simple prop extend to object (#591)
* feat: simple prop extend to object * Update src/interface.ts Co-authored-by: afc163 <afc163@gmail.com> * docs: update .md * type: optimize any * refactor: remove dead code * fix: code * Update src/Pagination.tsx Co-authored-by: afc163 <afc163@gmail.com> --------- Co-authored-by: iceweb1999 <1999iceweb@polyhedra.network> Co-authored-by: afc163 <afc163@gmail.com>
1 parent 8cfa2f0 commit 8f9f2e5

File tree

8 files changed

+117
-15
lines changed

8 files changed

+117
-15
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ ReactDOM.render(<Pagination />, container);
7171
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
7272
| showTotal | show total records and range | Function(total, [from, to]) | - |
7373
| className | className of pagination | String | - |
74-
| simple | when set, show simple pager | Object | null |
74+
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
7575
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
7676
| style | the style of pagination | Object | {} |
7777
| showLessItems | show less page items | Bool | false |

‎assets/index.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@
210210
}
211211

212212
&-slash {
213-
margin: 0 10px 0 5px;
213+
margin: 0 10px 0 12px;
214214
}
215215

216216
&-options {
@@ -262,14 +262,14 @@
262262
}
263263

264264
&-simple &-simple-pager {
265-
display: inline-block;
265+
display: flex;
266+
align-items: center;
266267
height: @pagination-item-size-sm;
267268
margin-right: 8px;
268269

269270
input {
270271
box-sizing: border-box;
271272
height: 100%;
272-
margin-right: 8px;
273273
padding: 0 6px;
274274
text-align: center;
275275
background-color: @pagination-item-input-bg;

‎docs/examples/simple.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@ export default () => {
1616
onChange={setPageIndex}
1717
/>
1818
<br />
19+
<Pagination
20+
simple={{ readOnly: true }}
21+
current={pageIndex}
22+
total={50}
23+
onChange={setPageIndex}
24+
/>
25+
<br />
1926
<Pagination simple defaultCurrent={1} total={50} />
2027
<br />
2128
<Pagination

‎src/Pagination.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
345345

346346
// ================== Simple ==================
347347
// FIXME: ts type
348+
const isReadOnly = typeof simple === 'object' ? simple.readOnly : !simple;
348349
let gotoButton: any = goButton;
349350
let simplePager: React.ReactNode = null;
350351

@@ -380,16 +381,20 @@ const Pagination: React.FC<PaginationProps> = (props) => {
380381
title={showTitle ? `${current}/${allPages}` : null}
381382
className={`${prefixCls}-simple-pager`}
382383
>
383-
<input
384-
type="text"
385-
value={internalInputVal}
386-
disabled={disabled}
387-
onKeyDown={handleKeyDown}
388-
onKeyUp={handleKeyUp}
389-
onChange={handleKeyUp}
390-
onBlur={handleBlur}
391-
size={3}
392-
/>
384+
{isReadOnly ? (
385+
internalInputVal
386+
) : (
387+
<input
388+
type="text"
389+
value={internalInputVal}
390+
disabled={disabled}
391+
onKeyDown={handleKeyDown}
392+
onKeyUp={handleKeyUp}
393+
onChange={handleKeyUp}
394+
onBlur={handleBlur}
395+
size={3}
396+
/>
397+
)}
393398
<span className={`${prefixCls}-slash`}>/</span>
394399
{allPages}
395400
</li>

‎src/interface.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export interface PaginationData {
3737
showPrevNextJumpers: boolean;
3838
showQuickJumper: boolean | object;
3939
showTitle: boolean;
40-
simple: boolean;
40+
simple: boolean | { readOnly?: boolean; };
4141
disabled: boolean;
4242

4343
locale: PaginationLocale;

‎tests/__snapshots__/demo.test.tsx.snap‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3375,6 +3375,46 @@ exports[`Example simple 1`] = `
33753375
</li>
33763376
</ul>
33773377
<br />
3378+
<ul
3379+
class="rc-pagination rc-pagination-simple"
3380+
>
3381+
<li
3382+
aria-disabled="true"
3383+
class="rc-pagination-prev rc-pagination-disabled"
3384+
title="上一页"
3385+
>
3386+
<button
3387+
aria-label="prev page"
3388+
class="rc-pagination-item-link"
3389+
disabled=""
3390+
type="button"
3391+
/>
3392+
</li>
3393+
<li
3394+
class="rc-pagination-simple-pager"
3395+
title="1/5"
3396+
>
3397+
1
3398+
<span
3399+
class="rc-pagination-slash"
3400+
>
3401+
/
3402+
</span>
3403+
5
3404+
</li>
3405+
<li
3406+
aria-disabled="false"
3407+
class="rc-pagination-next"
3408+
title="下一页"
3409+
>
3410+
<button
3411+
aria-label="next page"
3412+
class="rc-pagination-item-link"
3413+
type="button"
3414+
/>
3415+
</li>
3416+
</ul>
3417+
<br />
33783418
<ul
33793419
class="rc-pagination rc-pagination-simple"
33803420
>

‎tests/__snapshots__/simple.test.tsx.snap‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,48 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j
6767
</span>
6868
</div>
6969
`;
70+
71+
exports[`simple Pagination should support simple is readOnly value 1`] = `
72+
<div>
73+
<ul
74+
class="rc-pagination rc-pagination-simple"
75+
>
76+
<li
77+
aria-disabled="true"
78+
class="rc-pagination-prev rc-pagination-disabled"
79+
title="上一页"
80+
>
81+
<button
82+
aria-label="prev page"
83+
class="rc-pagination-item-link"
84+
disabled=""
85+
type="button"
86+
/>
87+
</li>
88+
<li
89+
class="rc-pagination-simple-pager"
90+
title="1/0"
91+
>
92+
1
93+
<span
94+
class="rc-pagination-slash"
95+
>
96+
/
97+
</span>
98+
0
99+
</li>
100+
<li
101+
aria-disabled="true"
102+
class="rc-pagination-next rc-pagination-disabled"
103+
title="下一页"
104+
>
105+
<button
106+
aria-label="next page"
107+
class="rc-pagination-item-link"
108+
disabled=""
109+
type="button"
110+
/>
111+
</li>
112+
</ul>
113+
</div>
114+
`;

‎tests/simple.test.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,4 +299,9 @@ describe('simple Pagination', () => {
299299
expect(quickJumper).toMatchSnapshot();
300300
});
301301
});
302+
303+
it('should support simple is readOnly value', () => {
304+
const { container } = render(<Pagination simple={{ readOnly: true }} />);
305+
expect(container).toMatchSnapshot();
306+
});
302307
});

0 commit comments

Comments
 (0)