mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
fix:pagination simple mode supports small size & add test case
This commit is contained in:
yujinghan
parent
8115016854
commit
0ed629ccf5
@ -35,7 +35,7 @@ order: 73
|
||||
|
||||
## 微型模式
|
||||
|
||||
> `3.6.0`及以上版本
|
||||
> `6.0.0`及以上版本
|
||||
|
||||
配置`"size": "sm"`可实现微型模式
|
||||
|
||||
@ -67,7 +67,7 @@ order: 73
|
||||
|
||||
## 简洁模式
|
||||
|
||||
配置`"mode": "simple"`可实现简洁模式
|
||||
配置`"mode": "simple"`可实现简洁模式，支持input框输入指定页码跳转，input框中也可以通过键盘上下键进行页码跳转
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
@ -86,8 +86,8 @@ order: 73
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------- | ---------------------------------------- | --------------------------------------------------------- |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ---------------- | -------------------------- | ---------------------------------------- | --------------------------------------------------------- | --- |
|
||||
| type | `string` | `"pagination"` | 指定为 Pagination 渲染器 |
|
||||
| mode | `normal` \| `simple` | `normal` | 迷你版本/简易版本 只显示左右箭头，配合 hasNext 使用 |
|
||||
| layout | `string` \| `string[]` | `["pager"]` | 通过控制 layout 属性的顺序，调整分页结构布局 |
|
||||
@ -96,8 +96,8 @@ order: 73
|
||||
| activePage | `number` \| `string` | `1` | 当前页数 |
|
||||
| perPage | `number` \| `string` | `10` | 每页显示多条数据 |
|
||||
| showPerPage | `boolean` | false | 是否展示 perPage 切换器 layout 和 showPerPage 都可以控制 |
|
||||
| size | `'sm' \| 'md'` | `md` | 组件尺寸，支持`md`、`sm`设置 |
|
||||
| ellipsisPageGap | `number` \| `string` | 5 | 多页跳转页数，页数较多出现`...`时点击省略号时每次前进/后退的页数，默认为5 |
|
||||
| size | `'sm' \| 'md'` | `md` | 组件尺寸，支持`md`、`sm`设置 |`6.0.0`后支持变量
|
||||
| ellipsisPageGap | `number` \| `string` | 5 | 多页跳转页数，页数较多出现`...`时点击省略号时每次前进/后退的页数，默认为5 | `6.0.0`后支持变量
|
||||
| perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 |
|
||||
| showPageInput | `boolean` | false | 是否显示快速跳转输入框 layout 和 showPageInput 都可以控制 |
|
||||
| disabled | `boolean` | false | 是否禁用 |
|
||||
|
||||
@ -289,19 +289,18 @@ export class PaginationPlugin extends BasePlugin {
|
||||
name: 'size',
|
||||
label: '尺寸',
|
||||
value: '',
|
||||
pipeIn: defaultValue('default'),
|
||||
pipeIn: defaultValue('md'),
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: 'default'
|
||||
value: 'md'
|
||||
},
|
||||
|
||||
{
|
||||
label: '微型',
|
||||
value: 'small'
|
||||
value: 'sm'
|
||||
}
|
||||
],
|
||||
visibleOn: 'data.mode === "normal"'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -218,6 +218,9 @@
|
||||
line-height: px2rem(30px);
|
||||
|
||||
.#{$ns}Pagination-item {
|
||||
&.#{$ns}Pagination-perpage {
|
||||
margin-left: px2rem(8px);
|
||||
}
|
||||
&:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -272,7 +275,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Pagination-inputGroup {
|
||||
.#{$ns}Pagination-inputGroup, .#{$ns}Pagination-simplego {
|
||||
height: var(--Pagination-height-sm);
|
||||
&-input {
|
||||
min-width: px2rem(40px);
|
||||
@ -287,9 +290,17 @@
|
||||
line-height: var(--Pagination-height-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Pagination-simplego {
|
||||
&-input {
|
||||
min-width: px2rem(32px);
|
||||
width: px2rem(32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Pagination-perpage {
|
||||
margin-left: px2rem(4px);
|
||||
padding: 0 px2rem(6px);
|
||||
min-height: px2rem(24px);
|
||||
vertical-align: baseline;
|
||||
|
||||
@ -328,13 +328,14 @@ export class Pagination extends React.Component<
|
||||
| React.ChangeEvent<HTMLInputElement>
|
||||
) {
|
||||
const lastPage = this.getLastPage();
|
||||
const key = (e as React.KeyboardEvent<HTMLInputElement>).key;
|
||||
let v: number = parseInt(e.currentTarget.value, 10);
|
||||
// handle keyboard up and down events value
|
||||
switch ((e as React.KeyboardEvent<HTMLInputElement>).key) {
|
||||
case KeyCode.UP:
|
||||
switch (key) {
|
||||
case KeyCode.DOWN:
|
||||
v = isNaN(v) || v < 2 ? 1 : v - 1;
|
||||
break;
|
||||
case KeyCode.DOWN:
|
||||
case KeyCode.UP:
|
||||
v = v + 1;
|
||||
break;
|
||||
default:
|
||||
@ -350,11 +351,7 @@ export class Pagination extends React.Component<
|
||||
this.setState({internalPageNum: ''});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
([KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER] as string[]).includes(
|
||||
(e as React.KeyboardEvent<HTMLInputElement>).key
|
||||
)
|
||||
) {
|
||||
if (([KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER] as string[]).includes(key)) {
|
||||
this.handlePageNumChange(v, this.props.perPage);
|
||||
}
|
||||
}
|
||||
@ -416,6 +413,7 @@ export class Pagination extends React.Component<
|
||||
<div
|
||||
className={cx(
|
||||
'Pagination-wrap',
|
||||
`Pagination-wrap-size--${size}`,
|
||||
'Pagination-simple',
|
||||
{disabled: disabled},
|
||||
className
|
||||
|
||||
@ -126,6 +126,19 @@ test('Renderer:Pagination with simple mode', async () => {
|
||||
await wait(200);
|
||||
expect(pageChange.mock.calls[0]).toEqual([3, 10, 'forward']);
|
||||
|
||||
// keyboard up & down
|
||||
const simplego = container.querySelector('.cxd-Pagination-simplego-input')! as HTMLInputElement;
|
||||
fireEvent.focus(simplego);
|
||||
await wait(500);
|
||||
|
||||
fireEvent.keyUp(simplego, {key: "ArrowUp", code: 38});
|
||||
expect(simplego.value).toBe('2');
|
||||
expect(pageChange).toBeCalled();
|
||||
|
||||
fireEvent.keyUp(simplego, {key: "ArrowDown", code: 40});
|
||||
expect(simplego.value).toBe('1');
|
||||
await wait(500);
|
||||
|
||||
rerender(
|
||||
amisRender(
|
||||
{
|
||||
@ -396,17 +409,38 @@ test('pagination: Pagination with ellipsisPageGap', async () => {
|
||||
amisRender(
|
||||
{
|
||||
type: 'service',
|
||||
id: 'service_01',
|
||||
data: {
|
||||
page: 1
|
||||
},
|
||||
api: '/api/mock2/crud/table',
|
||||
body: [
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: 'total,perPage,pager,go',
|
||||
layout: 'pager',
|
||||
mode: 'normal',
|
||||
activePage: 1,
|
||||
lastPage: 99999,
|
||||
total: 999,
|
||||
activePage: "${page}",
|
||||
lastPage: 10,
|
||||
total: 10,
|
||||
perPage: 1,
|
||||
maxButtons: 7,
|
||||
ellipsisPageGap: 7,
|
||||
onPageChange: pageChange
|
||||
onPageChange: pageChange,
|
||||
onEvent: {
|
||||
change: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'service_01',
|
||||
args: {
|
||||
value: {
|
||||
page: '${event.data.page}'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -419,4 +453,6 @@ test('pagination: Pagination with ellipsisPageGap', async () => {
|
||||
fireEvent.click(ellipsisEL!);
|
||||
await wait(200);
|
||||
expect(pageChange).toBeCalled();
|
||||
const active = container.querySelector('.is-active a');
|
||||
expect(active).toHaveTextContent('8');
|
||||
});
|
||||
@ -1065,7 +1065,7 @@ exports[`Renderer:Pagination with simple mode 1`] = `
|
||||
class="cxd-Service"
|
||||
>
|
||||
<div
|
||||
class="cxd-Pagination-wrap cxd-Pagination-simple"
|
||||
class="cxd-Pagination-wrap cxd-Pagination-wrap-size--md cxd-Pagination-simple"
|
||||
>
|
||||
<ul
|
||||
class="cxd-Pagination cxd-Pagination--sm cxd-Pagination-pager-items cxd-Pagination-item"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user