fix(*): pagination dropdown position

- add scroll when calculating element location - add popup props to pagination to set dropdown align
alibaba-fusion · Apr 11, 2019 · 93482f7 · 93482f7
1 parent 0cc89a6
commit 93482f7
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 3 deletions.
diff --git a/docs/overlay/index.md b/docs/overlay/index.md
@@ -72,7 +72,7 @@ Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹
 | safeNode               | 安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组                                                                                                                                                                                                             | any            | -                                          |
 | wrapperClassName       | 弹层的根节点的样式类                                                                                                                                                                                                                                                                                                  | String         | -                                          |
 | wrapperStyle           | 弹层的根节点的内联样式                                                                                                                                                                                                                                                                                                 | Object         | -                                          |
-| animation              | 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名                                                                                                                                                                                                                             | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
+| animation              | 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名                                                                                                                                                                                                  | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
 
 ### Overlay.Popup
 

diff --git a/docs/pagination/demo/dropdown-direction.md b/docs/pagination/demo/dropdown-direction.md
@@ -0,0 +1,81 @@
+# 每页显示
+
+-   order: 9
+
+使用`popupProps` prop中的`align`属性设置下拉位置。
+
+:::lang=en-us
+# Every Page Display
+
+-   order: 9
+
+Set dropdown location using `align` property in `popupProps` prop. 
+
+:::
+---
+
+````jsx
+import { Pagination } from '@alifd/next';
+
+const handlePageSizeChange = size => console.log(size);
+
+const containerStyle = {
+    height: '300px',
+    padding: 0,
+    width: '100%',
+};
+
+const boxStyle = {
+  overflow: 'auto',
+  position: 'relative',
+  width: '100%',
+  height: '200px',
+  border: '1px solid black'
+};
+
+const tempStyle = {
+    height: '200px',
+	display: 'flex',
+    'justify-content': 'center',
+    'align-items': 'center',
+};
+
+const parentStyle = {
+    display: 'flex',
+    'justify-content': 'space-between',
+};
+
+const popupProps = {
+    align: 'bl tl'
+};
+
+ReactDOM.render(
+    <div>
+        <h3>default align - 'tl bl'</h3>
+        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange}/>
+        <h3>custom align - 'bl tl'</h3>
+        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>
+        <h3>Inside parent with "overlflow: auto"</h3>
+        <div style={containerStyle}>
+            <div style={boxStyle}>
+                <div style={tempStyle}>scroll down to see the example</div>
+                <div style={parentStyle}>
+                    <div>
+                        <h3>default align - 'tl bl'</h3>
+                        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange}/>
+                    </div>
+                    <div>
+                        <h3>custom align - 'bl tl'</h3>
+                        <Pagination pageSizeSelector="dropdown" total='10' pageSizePosition="start" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>,
+    mountNode
+);
+
+
+````
+
+
diff --git a/docs/pagination/index.en-us.md b/docs/pagination/index.en-us.md
@@ -38,6 +38,7 @@ When there is a lot of content to show when paged load processing is needed.
 | hideOnlyOnePage  | Whether to hide the pager when the number of pages is 1                     | Boolean                           | false       |
 | 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        |
 | 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                            | -           |
+| popupProps       | Props for Popup                                                                                                                                                         | Object  | -                   |
 
 ## ARIA and KeyBoard
 

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

diff --git a/src/overlay/overlay.jsx b/src/overlay/overlay.jsx
@@ -178,7 +178,7 @@ export default class Overlay extends Component {
          */
         wrapperStyle: PropTypes.object,
         /**
-         * 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画
+         * 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名
          * @default { in: 'expandInDown', out: 'expandOutUp' }
          */
         animation: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),

diff --git a/src/overlay/utils/position.js b/src/overlay/utils/position.js
@@ -14,7 +14,9 @@ const getPageY = () => window.pageYOffset || document.documentElement.scrollTop;
  */
 function _getElementRect(elem) {
     let offsetTop = 0,
-        offsetLeft = 0;
+        offsetLeft = 0,
+        scrollTop = 0,
+        scrollLeft = 0;
 
     const offsetHeight = elem.offsetHeight;
     const offsetWidth = elem.offsetWidth;
@@ -26,14 +28,22 @@ function _getElementRect(elem) {
         if (!isNaN(elem.offsetLeft)) {
             offsetLeft += elem.offsetLeft;
         }
+        if (!isNaN(elem.scrollTop)) {
+            scrollTop += elem.scrollTop;
+        }
+        if (!isNaN(elem.scrollLeft)) {
+            scrollLeft += elem.scrollLeft;
+        }
     } while ((elem = elem.offsetParent) !== null);
 
     return {
         top:
             offsetTop -
+            scrollTop -
             (document.documentElement.scrollTop || document.body.scrollTop),
         left:
             offsetLeft -
+            scrollLeft -
             (document.documentElement.scrollLeft || document.body.scrollLeft),
         height: offsetHeight,
         width: offsetWidth,

diff --git a/src/pagination/pagination.jsx b/src/pagination/pagination.jsx
@@ -122,6 +122,10 @@ class Pagination extends Component {
          */
         link: PropTypes.string,
         selectPopupContiner: PropTypes.func,
+        /**
+         * 弹层组件属性，透传给Popup
+         */
+        popupProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -532,6 +536,7 @@ class Pagination extends Component {
             pageSizeList,
             selectPopupContiner,
             locale,
+            popupProps,
         } = this.props;
         const { currentPageSize } = this.state;
 
@@ -540,6 +545,7 @@ class Pagination extends Component {
                 className={`${prefix}pagination-size-selector-dropdown`}
                 popupClassName={`${prefix}pagination-size-selector-popup`}
                 popupContainer={selectPopupContiner}
+                popupProps={popupProps}
                 aria-label={locale.selectAriaLabel}
                 autoWidth
                 size={size}