[Pagination]极简分页的下拉列表替换成 Dropdown

Author: liyuan-meng

src/components/pagination/index.js

@@ -6,7 +6,7 @@ import { noop, prefixCls } from '@utils';
 import Icon from '../icon';
 import Input from '../input';
 import Select from '../select';
-import Popover from '../popover';
+import Dropdown from '../c-dropdown';
 
 import './index.less';
 
@@ -435,37 +435,29 @@ class Pagination extends Component {
         {this.totalPage}
       </span>
     ) : (
-      <Popover
-        trigger="click"
-        placement="bottom-center"
-        className={`${prefixCls}-pagination-mini-container`}
-        content={(
-          <div className="mini-page-list">
-            {pageList.map((page) => (
-              <span
-                key={page}
-                className={`mini-page-item ${prefixCls}-popover-cancel ${
-                  `${page}` === `${this.state.current}` ? 'active' : ''
-                }`}
-                onClick={() => {
-                  this.goPage(page);
-                }}
-              >
-                <span>{page}</span>
-                {`${page}` === `${this.state.current}` && (
-                  <Icon type="finish" />
-                )}
-              </span>
+      <Dropdown
+        placement="bottom"
+        overlay={(
+          <Dropdown.Menu
+            checkedId={this.state.current}
+            className={`${prefixCls}-pagination-min-list`}
+            onClick={page => {
+              this.goPage(page);
+            }}
+          >
+            {pageList.map(page => (
+              <Dropdown.Item key={page} id={page}>{page}</Dropdown.Item>
             ))}
-          </div>
+          </Dropdown.Menu>
         )}
+        trigger={['click']}
       >
         <span className="current-page">
           {this.state.current}
           /
           {this.totalPage}
         </span>
-      </Popover>
+      </Dropdown>
     );
   };
 

src/components/pagination/index.less

@@ -225,9 +225,12 @@
 
   &.@{pagination-prefix-cls}-mini-page {
     .current-page {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       height: 32px;
       line-height: 32px;
-      min-width: 48px;
+      min-width: 48px!important;
       text-align: center;
       color: @blue-4;
       cursor: pointer;
@@ -284,40 +287,13 @@
   }
 }
 
-.@{pagination-prefix-cls}-mini-container {
-  padding: 0!important;
-
-  .mini-page-list {
-    width: 72px;
-
-    .mini-page-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-      height: 31px;
-      padding-left: 12px;
-      padding-right: 14px;
-
-      &:hover {
-        background: @indigo-1;
-      }
-
-      &.active {
-        background: @indigo-2;
-      }
-
-      .icon-finish {
-        color: @blue-4;
-      }
-    }
-  }
-
-  &.@{prefix}-tooltip.is-light {
-    box-shadow: @border-shadow-3;
-  }
+.@{pagination-prefix-cls}-min-list {
+  max-height: 190px;
+  overflow: auto;
 
-  &.@{prefix}-tooltip.bottom-center.is-light:after {
-    display: none;
+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 0;
+    height: 0;
   }
 }