feat: pagination support disabled (#1641)

* feat: pagination support disabled

* feat: pagination support disabled

* feat: pagination support disabled

content/navigation/pagination/index-en-US.md

@@ -34,6 +34,19 @@ import { Pagination } from '@douyinfe/semi-ui';
 );
 ```
 
+### disabled
+
+Disabled via the `disabled` setting
+
+```jsx live=true width=60%
+import React from 'react';
+import { Pagination } from '@douyinfe/semi-ui';
+
+() => (
+    <Pagination total={30} disabled style={{ marginBottom: 12 }}></Pagination>
+);
+```
+
 ### Show total page number
 
 Use the showTotal property to control whether the total number of pages is shown.
@@ -184,6 +197,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | currentPage        | Current page number                                                                                         | number                                          |                     |              |
 | defaultCurrentPage | Default current page number                                                                                 | number                                          |                     |              |
 | hideOnSinglePage   | Whether to hide the page divider automatically when the total number of pages is less than 2. When showSizeChanger is true, this switch no longer takes effect                | boolean                                         | false               |              |
+| disabled           | disabled                                                                             | boolean                                         |false                  | 2.37.0
 | hoverShowPageSelect  | Whether to show the page select when hover page (only work when size='small')                             | boolean                                         | false               |   1.27.0     |
 | nextText           | Text displayed by the next Page button                                                                      | string\| React Node                             |                     |              |
 | pageSize           | Number of entries per page                                                                                  | number                                          | 10                  |              |

content/navigation/pagination/index.md

@@ -34,6 +34,19 @@ import { Pagination } from '@douyinfe/semi-ui';
 );
 ```
 
+### 禁用
+
+通过 `disabled` 设置禁用
+
+```jsx live=true width=60%
+import React from 'react';
+import { Pagination } from '@douyinfe/semi-ui';
+
+() => (
+    <Pagination total={30} disabled style={{ marginBottom: 12 }}></Pagination>
+);
+```
+
 ### 总页数显示
 
 通过 `showTotal` 属性控制是否展示总页数
@@ -177,6 +190,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | className          | 类名                                                                              | string                                          |                     |
 | currentPage        | 当前页码                                                                          | number                                          |                     |
 | defaultCurrentPage | 默认的当前页码                                                                    | number                                          |                     |
+| disabled           | 禁用                                                                             | boolean                                         |false                  | 2.37.0
 | hideOnSinglePage   | 总页数小于 2 时，是否自动隐藏分页器，当 showSizeChanger 为true时，此开关不再生效           | boolean                                            | false               |
 | hoverShowPageSelect  | hover 页码时是否展示切换页数的Select控件，仅当 size = 'small'时生效  | boolean             | false               | 1.27.0|
 | nextText           | 下一页文本                                                                        | string\|ReactNode                               |                     |

packages/semi-foundation/pagination/pagination.scss

@@ -20,6 +20,14 @@ $module: #{$prefix}-page;
         padding: $spacing-pagination_small-paddingY $spacing-pagination_small-paddingX;
     }
 
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-total {
+            color: $color-pagination_item-text-disabled;
+        }
+    }
+
     &-item {
         @include font-size-regular;
         min-width: $width-pagination_item-minWidth;
@@ -86,6 +94,18 @@ $module: #{$prefix}-page;
             min-width: $width-pagination_item_small-minWidth;
             margin: $spacing-pagination_item_small-margin;
         }
+
+        &-all-disabled {
+            border-color: $color-pagination_item-border-disabled;
+            color: $color-pagination_item-text-disabled;
+            background-color: $color-pagination_item-bg-disabled;
+            cursor: not-allowed;
+    
+            &:hover {
+                background-color: transparent;
+                color: $color-pagination_item-text-disabled;
+            }
+        }
     }
 
     &-total {

packages/semi-ui/pagination/_story/pagination.stories.jsx

@@ -156,4 +156,18 @@ export const HideOnSingePageAndShowChanger = () => {
 
 HideOnSingePageAndShowChanger.story = {
   name: 'hideOnSingelePage & showSizeChanger at same time',
-};
+};
+
+export const DisabledPagination = () => {
+  return (
+    <div>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} size='small'></Pagination>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} showQuickJumper size='small'></Pagination>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} size='small' hoverShowPageSelect></Pagination>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} showQuickJumper></Pagination>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} showSizeChanger></Pagination>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} showTotal></Pagination>
+      <Pagination total={100} disabled style={{ marginBottom: 12 }} showTotal showSizeChanger showQuickJumper></Pagination>
+    </div>
+  )
+}

packages/semi-ui/pagination/index.tsx

@@ -49,7 +49,8 @@ export interface PaginationProps {
     style?: React.CSSProperties;
     className?: string;
     hideOnSinglePage?: boolean;
-    hoverShowPageSelect?: boolean
+    hoverShowPageSelect?: boolean;
+    disabled?: boolean
 }
 
 export interface PaginationState {
@@ -93,6 +94,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         hideOnSinglePage: PropTypes.bool,
         hoverShowPageSelect: PropTypes.bool,
         showQuickJumper: PropTypes.bool,
+        disabled: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -110,6 +112,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         className: '',
         hideOnSinglePage: false,
         showQuickJumper: false,
+        disabled: false,
     };
 
     constructor(props: PaginationProps) {
@@ -208,19 +211,20 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderPrevBtn() {
-        const { prevText } = this.props;
+        const { prevText, disabled } = this.props;
         const { prevDisabled } = this.state;
+        const isDisabled = prevDisabled || disabled;
         const preClassName = classNames({
             [`${prefixCls}-item`]: true,
             [`${prefixCls}-prev`]: true,
-            [`${prefixCls}-item-disabled`]: prevDisabled,
+            [`${prefixCls}-item-disabled`]: isDisabled,
         });
         return (
             <li
                 role="button"
-                aria-disabled={prevDisabled ? true : false}
+                aria-disabled={isDisabled ? true : false}
                 aria-label="Previous"
-                onClick={e => !prevDisabled && this.foundation.goPrev(e)}
+                onClick={e => !isDisabled && this.foundation.goPrev(e)}
                 className={preClassName}
                 x-semi-prop="prevText"
             >
@@ -230,19 +234,20 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderNextBtn() {
-        const { nextText } = this.props;
+        const { nextText, disabled } = this.props;
         const { nextDisabled } = this.state;
+        const isDisabled = nextDisabled || disabled;
         const nextClassName = classNames({
             [`${prefixCls}-item`]: true,
-            [`${prefixCls}-item-disabled`]: nextDisabled,
+            [`${prefixCls}-item-disabled`]: isDisabled,
             [`${prefixCls}-next`]: true,
         });
         return (
             <li
                 role="button"
-                aria-disabled={nextDisabled ? true : false}
+                aria-disabled={isDisabled ? true : false}
                 aria-label="Next"
-                onClick={e => !nextDisabled && this.foundation.goNext(e)}
+                onClick={e => !isDisabled && this.foundation.goNext(e)}
                 className={nextClassName}
                 x-semi-prop="prevText"
             >
@@ -255,7 +260,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         // rtl modify the default position
         const { direction } = this.context;
         const defaultPopoverPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
-        const { showSizeChanger, popoverPosition = defaultPopoverPosition } = this.props;
+        const { showSizeChanger, popoverPosition = defaultPopoverPosition, disabled } = this.props;
         const { pageSize } = this.state;
         const switchCls = classNames(`${prefixCls}-switch`);
         if (!showSizeChanger) {
@@ -277,6 +282,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             <div className={switchCls}>
                 <Select
                     aria-label="Page size selector"
+                    disabled={disabled}
                     onChange={newPageSize => this.foundation.changePageSize(newPageSize)}
                     value={pageSize}
                     key={pageSize}
@@ -291,13 +297,13 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderQuickJump(locale: PaginationLocale) {
-        const { showQuickJumper } = this.props;
+        const { showQuickJumper, disabled } = this.props;
         const { quickJumpPage, total, pageSize } = this.state;
         if (!showQuickJumper) {
             return null;
         }
         const totalPageNum = this.foundation._getTotalPageNumber(total, pageSize);
-        const isDisabled = totalPageNum === 1;
+        const isDisabled = (totalPageNum === 1) || disabled;
         const quickJumpCls = classNames({
             [`${prefixCls}-quickjump`]: true,
             [`${prefixCls}-quickjump-disabled`]: isDisabled
@@ -327,17 +333,18 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
             restLeftPageList,
             restRightPageList,
         } = this.state;
-        const { popoverPosition, popoverZIndex } = this.props;
+        const { popoverPosition, popoverZIndex, disabled } = this.props;
 
         return pageList.map((page, i) => {
             const pageListClassName = classNames(`${prefixCls}-item`, {
-                [`${prefixCls}-item-active`]: currentPage === page,
+                [`${prefixCls}-item-active`]: currentPage === page && !disabled,
+                [`${prefixCls}-item-all-disabled`]: disabled,
                 // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
             });
             const pageEl = (
                 <li
                     key={`${page}${i}`}
-                    onClick={() => this.foundation.goPage(page, i)}
+                    onClick={() => !disabled && this.foundation.goPage(page, i)}
                     className={pageListClassName}
                     aria-label={page === '...' ? 'More' : `Page ${page}`}
                     aria-current={currentPage === page ? "page" : false}
@@ -345,7 +352,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
                     {page}
                 </li>
             );
-            if (page === '...') {
+            if (page === '...' && !disabled) {
                 let content;
                 i < 3 ? (content = restLeftPageList) : (content = restRightPageList);
                 return (
@@ -405,8 +412,8 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderSmallPage(locale: PaginationLocale) {
-        const { className, style, hideOnSinglePage, hoverShowPageSelect, showSizeChanger, ...rest } = this.props;
-        const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
+        const { className, style, hideOnSinglePage, hoverShowPageSelect, showSizeChanger, disabled, ...rest } = this.props;
+        const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className, { [`${prefixCls}-disabled`]: disabled });
         const { currentPage, total, pageSize } = this.state;
         const totalPageNum = Math.ceil(total / pageSize);
         if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
@@ -416,13 +423,19 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         const pageNumbers = Array.from({ length: Math.ceil(total / pageSize) }, (v, i) => i + 1);
         const pageList = this.renderRestPageList(pageNumbers);
 
-        const page = (<div className={`${prefixCls}-item ${prefixCls}-item-small`}>{currentPage}/{totalPageNum} </div>);
+        const pageCls = classNames({
+            [`${prefixCls}-item`]: true,
+            [`${prefixCls}-item-small`]: true,
+            [`${prefixCls}-item-all-disabled`]: disabled,
+        });
+
+        const page = (<div className={pageCls}>{currentPage}/{totalPageNum} </div>);
 
         return (
             <div className={paginationCls} style={style} {...this.getDataAttr(rest)}>
                 {this.renderPrevBtn()}
                 {
-                    hoverShowPageSelect ? (
+                    (hoverShowPageSelect && !disabled) ? (
                         <Popover
                             content={pageList}
                         >
@@ -438,8 +451,8 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
 
     renderDefaultPage(locale: PaginationLocale) {
         const { total, pageSize } = this.state;
-        const { showTotal, className, style, hideOnSinglePage, showSizeChanger, ...rest } = this.props;
-        const paginationCls = classNames(className, `${prefixCls}`);
+        const { showTotal, className, style, hideOnSinglePage, showSizeChanger, disabled, ...rest } = this.props;
+        const paginationCls = classNames(className, `${prefixCls}`, { [`${prefixCls}-disabled`]: disabled });
         const showTotalCls = `${prefixCls}-total`;
         const totalPageNum = Math.ceil(total / pageSize);
         if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {