Skip to content

Commit 93482f7

Browse files
jdkahnjdkahn
committed
fix(*): pagination dropdown position
- add scroll when calculating element location - add popup props to pagination to set dropdown align
1 parent 0cc89a6 commit 93482f7

File tree

7 files changed

+102
-3
lines changed

7 files changed

+102
-3
lines changed

‎docs/overlay/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
7272
| safeNode | 安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组 | any | - |
7373
| wrapperClassName | 弹层的根节点的样式类 | String | - |
7474
| wrapperStyle | 弹层的根节点的内联样式 | Object | - |
75-
| animation | 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名 | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
75+
| animation | 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名 | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
7676

7777
### Overlay.Popup
7878

‎docs/pagination/demo/dropdown-direction.md

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# 每页显示
2+
3+
- order: 9
4+
5+
使用`popupProps` prop中的`align`属性设置下拉位置。
6+
7+
:::lang=en-us
8+
# Every Page Display
9+
10+
- order: 9
11+
12+
Set dropdown location using `align` property in `popupProps` prop.
13+
14+
:::
15+
---
16+
17+
````jsx
18+
import { Pagination } from '@alifd/next';
19+
20+
const handlePageSizeChange = size => console.log(size);
21+
22+
const containerStyle = {
23+
height: '300px',
24+
padding: 0,
25+
width: '100%',
26+
};
27+
28+
const boxStyle = {
29+
overflow: 'auto',
30+
position: 'relative',
31+
width: '100%',
32+
height: '200px',
33+
border: '1px solid black'
34+
};
35+
36+
const tempStyle = {
37+
height: '200px',
38+
display: 'flex',
39+
'justify-content': 'center',
40+
'align-items': 'center',
41+
};
42+
43+
const parentStyle = {
44+
display: 'flex',
45+
'justify-content': 'space-between',
46+
};
47+
48+
const popupProps = {
49+
align: 'bl tl'
50+
};
51+
52+
ReactDOM.render(
53+
<div>
54+
<h3>default align - 'tl bl'</h3>
55+
<Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange}/>
56+
<h3>custom align - 'bl tl'</h3>
57+
<Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>
58+
<h3>Inside parent with "overlflow: auto"</h3>
59+
<div style={containerStyle}>
60+
<div style={boxStyle}>
61+
<div style={tempStyle}>scroll down to see the example</div>
62+
<div style={parentStyle}>
63+
<div>
64+
<h3>default align - 'tl bl'</h3>
65+
<Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange}/>
66+
</div>
67+
<div>
68+
<h3>custom align - 'bl tl'</h3>
69+
<Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>,
75+
mountNode
76+
);
77+
78+
79+
````
80+
81+

‎docs/pagination/index.en-us.md

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ When there is a lot of content to show when paged load processing is needed.
3838
| hideOnlyOnePage | Whether to hide the pager when the number of pages is 1 | Boolean | false |
3939
| showJump | When the number of pagination is 1, if the hidden pager type is set to normal, after the page number exceeds 5 pages, the jump input box and button will be displayed. When showJump is set to false, the jump zone is no longer displayed. | Boolean | true |
4040
| link | Set the jump link url of the page number button. Its value is a template string containing {page}, such as：<http://xxx.com/{page}> | String | - |
41+
| popupProps | Props for Popup | Object | - |
4142

4243
## ARIA and KeyBoard
4344

‎docs/pagination/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
| hideOnlyOnePage | 当分页数为1时，是否隐藏分页器 | Boolean | false |
4040
| showJump | type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域 | Boolean | true |
4141
| link | 设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：<http://xxx.com/{page}> | String | - |
42+
| popupProps | 弹层组件属性，透传给Popup | Object | - |
4243

4344
## ARIA and KeyBoard
4445

‎src/overlay/overlay.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export default class Overlay extends Component {
178178
*/
179179
wrapperStyle: PropTypes.object,
180180
/**
181-
* 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画
181+
* 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名
182182
* @default { in: 'expandInDown', out: 'expandOutUp' }
183183
*/
184184
animation: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),

‎src/overlay/utils/position.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const getPageY = () => window.pageYOffset || document.documentElement.scrollTop;
1414
*/
1515
function _getElementRect(elem) {
1616
let offsetTop = 0,
17-
offsetLeft = 0;
17+
offsetLeft = 0,
18+
scrollTop = 0,
19+
scrollLeft = 0;
1820

1921
const offsetHeight = elem.offsetHeight;
2022
const offsetWidth = elem.offsetWidth;
@@ -26,14 +28,22 @@ function _getElementRect(elem) {
2628
if (!isNaN(elem.offsetLeft)) {
2729
offsetLeft += elem.offsetLeft;
2830
}
31+
if (!isNaN(elem.scrollTop)) {
32+
scrollTop += elem.scrollTop;
33+
}
34+
if (!isNaN(elem.scrollLeft)) {
35+
scrollLeft += elem.scrollLeft;
36+
}
2937
} while ((elem = elem.offsetParent) !== null);
3038

3139
return {
3240
top:
3341
offsetTop -
42+
scrollTop -
3443
(document.documentElement.scrollTop || document.body.scrollTop),
3544
left:
3645
offsetLeft -
46+
scrollLeft -
3747
(document.documentElement.scrollLeft || document.body.scrollLeft),
3848
height: offsetHeight,
3949
width: offsetWidth,

‎src/pagination/pagination.jsx

+6
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,10 @@ class Pagination extends Component {
122122
*/
123123
link: PropTypes.string,
124124
selectPopupContiner: PropTypes.func,
125+
/**
126+
* 弹层组件属性，透传给Popup
127+
*/
128+
popupProps: PropTypes.object,
125129
};
126130

127131
static defaultProps = {
@@ -532,6 +536,7 @@ class Pagination extends Component {
532536
pageSizeList,
533537
selectPopupContiner,
534538
locale,
539+
popupProps,
535540
} = this.props;
536541
const { currentPageSize } = this.state;
537542

@@ -540,6 +545,7 @@ class Pagination extends Component {
540545
className={`${prefix}pagination-size-selector-dropdown`}
541546
popupClassName={`${prefix}pagination-size-selector-popup`}
542547
popupContainer={selectPopupContiner}
548+
popupProps={popupProps}
543549
aria-label={locale.selectAriaLabel}
544550
autoWidth
545551
size={size}

0 commit comments

Comments
 (0)