fix: [Pagination] hideOnSinglePage take effect that make page size changer disappears, #252 (#428)

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

@@ -183,7 +183,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | className          | The CSS class name of the wrapper element                                                                   | string                                          |                     |              |
 | 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                | boolean                                         | false               |              |
+| 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               |              |
 | 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

@@ -176,7 +176,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | className          | 类名                                                                              | string                                          |                     |
 | currentPage        | 当前页码                                                                          | number                                          |                     |
 | defaultCurrentPage | 默认的当前页码                                                                    | number                                          |                     |
-| hideOnSinglePage   | 总页数小于 2 时，是否自动隐藏分页器                                               | boolean                                            | false               |
+| hideOnSinglePage   | 总页数小于 2 时，是否自动隐藏分页器，当 showSizeChanger 为true时，此开关不再生效           | boolean                                            | false               |
 | hoverShowPageSelect  | hover 页码时是否展示切换页数的Select控件，仅当 size = 'small'时生效  | boolean             | false               | 1.27.0|
 | nextText           | 下一页文本                                                                        | string\|ReactNode                               |                     |
 | pageSize           | 每页条数                                                                          | number                                          | 10                  |

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

@@ -146,3 +146,14 @@ export const PaginationDynamicUpdatePageSize = () => <DynamicPageSize />;
 PaginationDynamicUpdatePageSize.story = {
   name: 'Pagination dynamic update pageSize',
 };
+
+
+export const HideOnSingePageAndShowChanger = () => {
+  return (
+    <Pagination total={10} hideOnSinglePage showSizeChanger style={{ marginBottom: 12 }}></Pagination>
+  )
+}
+
+HideOnSingePageAndShowChanger.story = {
+  name: 'hideOnSingelePage & showSizeChanger at same time',
+};

packages/semi-ui/pagination/index.tsx

@@ -14,6 +14,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/pagination/consta
 import '@douyinfe/semi-foundation/pagination/pagination.scss';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/utils/warning';
 
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -127,6 +128,10 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         this.foundation = new PaginationFoundation(this.adapter);
         this.renderDefaultPage = this.renderDefaultPage.bind(this);
         this.renderSmallPage = this.renderSmallPage.bind(this);
+        warning(
+            Boolean(props.showSizeChanger && props.hideOnSinglePage),
+            '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears'
+        );
     }
 
     get adapter(): PaginationAdapter<PaginationProps, PaginationState> {
@@ -377,11 +382,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderSmallPage(locale: PaginationLocale) {
-        const { className, style, hideOnSinglePage, hoverShowPageSelect } = this.props;
+        const { className, style, hideOnSinglePage, hoverShowPageSelect, showSizeChanger } = this.props;
         const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
         const { currentPage, total, pageSize } = this.state;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
 
@@ -410,11 +415,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
 
     renderDefaultPage(locale: PaginationLocale) {
         const { total, pageSize } = this.state;
-        const { showTotal, className, style, hideOnSinglePage } = this.props;
+        const { showTotal, className, style, hideOnSinglePage, showSizeChanger } = this.props;
         const paginationCls = classNames(className, `${prefixCls}`);
         const showTotalCls = `${prefixCls }-total`;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
         return (