@douyinfe/semi-ui 2.39.1 → 2.39.2

package/lib/cjs/form/interface.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Subtract } from 'utility-types';
 import type { RuleItem } from 'async-validator';
-import type { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import type { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
 import type { SelectProps } from '../select/index';
 import Option from '../select/option';
@@ -106,7 +106,7 @@ export interface BaseFormProps<Values extends Record<string, any> = any> extends
     render?: (internalProps: FormFCChild) => React.ReactNode;
     component?: React.FC<any> | React.ComponentClass<any>;
     children?: React.ReactNode | ((internalProps: FormFCChild) => React.ReactNode);
-    autoScrollToError?: boolean | scrollIntoViewOptions;
+    autoScrollToError?: boolean | ScrollIntoViewOptions;
     disabled?: boolean;
     showValidateIcon?: boolean;
     extraTextPosition?: 'middle' | 'bottom';

package/lib/cjs/pagination/index.d.ts

@@ -40,6 +40,7 @@ export interface PaginationState {
     nextDisabled: boolean;
     restLeftPageList: number[];
     restRightPageList: number[];
+    allPageNumbers: number[];
 }
 export type PaginationLocale = Locale['Pagination'];
 export type PopoverPosition = Position;
@@ -98,6 +99,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     renderQuickJump(locale: PaginationLocale): JSX.Element;
     renderPageList(): JSX.Element[];
     renderRestPageList(restList: ('...' | number)[]): JSX.Element;
+    renderSmallPageSelect(content: React.ReactNode): JSX.Element;
     renderSmallPage(locale: PaginationLocale): JSX.Element;
     renderDefaultPage(locale: PaginationLocale): JSX.Element;
     render(): JSX.Element;

package/lib/cjs/pagination/index.js

@@ -39,18 +39,25 @@ const {
 class Pagination extends _baseComponent.default {
   constructor(props) {
     super(props);
+    const total = props.total;
+    const pageSize = props.pageSize || props.pageSizeOpts[0] || _constants.numbers.DEFAULT_PAGE_SIZE; // Use pageSize first, use the first of pageSizeOpts when not, use the default value when none
+    const shouldFillAllNumber = props.size === 'small' && props.hoverShowPageSelect && !props.disabled;
     this.state = {
-      total: props.total,
+      total,
       showTotal: props.showTotal,
       currentPage: props.currentPage || props.defaultCurrentPage,
-      pageSize: props.pageSize || props.pageSizeOpts[0] || _constants.numbers.DEFAULT_PAGE_SIZE,
+      pageSize,
       pageList: [],
       prevDisabled: false,
       nextDisabled: false,
       restLeftPageList: [],
       restRightPageList: [],
-      quickJumpPage: ''
+      quickJumpPage: '',
+      allPageNumbers: shouldFillAllNumber ? Array.from({
+        length: Math.ceil(total / pageSize)
+      }, (v, i) => i + 1) : [] // only need to count in smallPage mode, when props.size = small
     };
+
     this.foundation = new _foundation.default(this.adapter);
     this.renderDefaultPage = this.renderDefaultPage.bind(this);
     this.renderSmallPage = this.renderSmallPage.bind(this);
@@ -85,7 +92,9 @@ class Pagination extends _baseComponent.default {
       updateQuickJumpPage: quickJumpPage => this.setState({
         quickJumpPage
       }),
-      // updateRestPageList: () => {},
+      updateAllPageNumbers: allPageNumbers => this.setState({
+        allPageNumbers
+      }),
       setCurrentPage: pageIndex => {
         this.setState({
           currentPage: pageIndex
@@ -121,6 +130,7 @@ class Pagination extends _baseComponent.default {
       pageSize: this.props.pageSize
     };
     let pagerHasChanged = false;
+    let allPageNumberNeedUpdate = false;
     if (prevProps.currentPage !== this.props.currentPage) {
       pagerHasChanged = true;
       // this.foundation.updatePage(this.props.currentPage);
@@ -128,13 +138,18 @@ class Pagination extends _baseComponent.default {
 
     if (prevProps.total !== this.props.total) {
       pagerHasChanged = true;
+      allPageNumberNeedUpdate = true;
     }
     if (prevProps.pageSize !== this.props.pageSize) {
       pagerHasChanged = true;
+      allPageNumberNeedUpdate = true;
     }
     if (pagerHasChanged) {
       this.foundation.updatePage(pagerProps.currentPage, pagerProps.total, pagerProps.pageSize);
     }
+    if (allPageNumberNeedUpdate) {
+      this.foundation.updateAllPageNumbers(pagerProps.total, pagerProps.pageSize);
+    }
   }
   renderPrevBtn() {
     const {
@@ -337,6 +352,13 @@ class Pagination extends _baseComponent.default {
       }, row)
     );
   }
+  renderSmallPageSelect(content) {
+    const allPageNumbers = this.state.allPageNumbers;
+    const pageList = this.renderRestPageList(allPageNumbers);
+    return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      content: pageList
+    }, content);
+  }
   renderSmallPage(locale) {
     const _a = this.props,
       {
@@ -360,24 +382,18 @@ class Pagination extends _baseComponent.default {
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
-    const pageNumbers = Array.from({
-      length: Math.ceil(total / pageSize)
-    }, (v, i) => i + 1);
-    const pageList = this.renderRestPageList(pageNumbers);
     const pageCls = (0, _classnames.default)({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-small`]: true,
       [`${prefixCls}-item-all-disabled`]: disabled
     });
-    const page = /*#__PURE__*/_react.default.createElement("div", {
+    const content = /*#__PURE__*/_react.default.createElement("div", {
       className: pageCls
     }, currentPage, "/", totalPageNum, " ");
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: paginationCls,
       style: style
-    }, this.getDataAttr(rest)), this.renderPrevBtn(), hoverShowPageSelect && !disabled ? /*#__PURE__*/_react.default.createElement(_index3.default, {
-      content: pageList
-    }, page) : page, this.renderNextBtn(), this.renderQuickJump(locale));
+    }, this.getDataAttr(rest)), this.renderPrevBtn(), hoverShowPageSelect && !disabled ? this.renderSmallPageSelect(content) : content, this.renderNextBtn(), this.renderQuickJump(locale));
   }
   renderDefaultPage(locale) {
     const {

package/lib/es/form/interface.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Subtract } from 'utility-types';
 import type { RuleItem } from 'async-validator';
-import type { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import type { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import type { BaseFormApi as FormApi, FormState, WithFieldOption, AllErrors } from '@douyinfe/semi-foundation/lib/es/form/interface';
 import type { SelectProps } from '../select/index';
 import Option from '../select/option';
@@ -106,7 +106,7 @@ export interface BaseFormProps<Values extends Record<string, any> = any> extends
     render?: (internalProps: FormFCChild) => React.ReactNode;
     component?: React.FC<any> | React.ComponentClass<any>;
     children?: React.ReactNode | ((internalProps: FormFCChild) => React.ReactNode);
-    autoScrollToError?: boolean | scrollIntoViewOptions;
+    autoScrollToError?: boolean | ScrollIntoViewOptions;
     disabled?: boolean;
     showValidateIcon?: boolean;
     extraTextPosition?: 'middle' | 'bottom';

package/lib/es/pagination/index.d.ts

@@ -40,6 +40,7 @@ export interface PaginationState {
     nextDisabled: boolean;
     restLeftPageList: number[];
     restRightPageList: number[];
+    allPageNumbers: number[];
 }
 export type PaginationLocale = Locale['Pagination'];
 export type PopoverPosition = Position;
@@ -98,6 +99,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     renderQuickJump(locale: PaginationLocale): JSX.Element;
     renderPageList(): JSX.Element[];
     renderRestPageList(restList: ('...' | number)[]): JSX.Element;
+    renderSmallPageSelect(content: React.ReactNode): JSX.Element;
     renderSmallPage(locale: PaginationLocale): JSX.Element;
     renderDefaultPage(locale: PaginationLocale): JSX.Element;
     render(): JSX.Element;

package/lib/es/pagination/index.js

@@ -31,18 +31,25 @@ const {
 export default class Pagination extends BaseComponent {
   constructor(props) {
     super(props);
+    const total = props.total;
+    const pageSize = props.pageSize || props.pageSizeOpts[0] || numbers.DEFAULT_PAGE_SIZE; // Use pageSize first, use the first of pageSizeOpts when not, use the default value when none
+    const shouldFillAllNumber = props.size === 'small' && props.hoverShowPageSelect && !props.disabled;
     this.state = {
-      total: props.total,
+      total,
       showTotal: props.showTotal,
       currentPage: props.currentPage || props.defaultCurrentPage,
-      pageSize: props.pageSize || props.pageSizeOpts[0] || numbers.DEFAULT_PAGE_SIZE,
+      pageSize,
       pageList: [],
       prevDisabled: false,
       nextDisabled: false,
       restLeftPageList: [],
       restRightPageList: [],
-      quickJumpPage: ''
+      quickJumpPage: '',
+      allPageNumbers: shouldFillAllNumber ? Array.from({
+        length: Math.ceil(total / pageSize)
+      }, (v, i) => i + 1) : [] // only need to count in smallPage mode, when props.size = small
     };
+
     this.foundation = new PaginationFoundation(this.adapter);
     this.renderDefaultPage = this.renderDefaultPage.bind(this);
     this.renderSmallPage = this.renderSmallPage.bind(this);
@@ -77,7 +84,9 @@ export default class Pagination extends BaseComponent {
       updateQuickJumpPage: quickJumpPage => this.setState({
         quickJumpPage
       }),
-      // updateRestPageList: () => {},
+      updateAllPageNumbers: allPageNumbers => this.setState({
+        allPageNumbers
+      }),
       setCurrentPage: pageIndex => {
         this.setState({
           currentPage: pageIndex
@@ -113,6 +122,7 @@ export default class Pagination extends BaseComponent {
       pageSize: this.props.pageSize
     };
     let pagerHasChanged = false;
+    let allPageNumberNeedUpdate = false;
     if (prevProps.currentPage !== this.props.currentPage) {
       pagerHasChanged = true;
       // this.foundation.updatePage(this.props.currentPage);
@@ -120,13 +130,18 @@ export default class Pagination extends BaseComponent {
 
     if (prevProps.total !== this.props.total) {
       pagerHasChanged = true;
+      allPageNumberNeedUpdate = true;
     }
     if (prevProps.pageSize !== this.props.pageSize) {
       pagerHasChanged = true;
+      allPageNumberNeedUpdate = true;
     }
     if (pagerHasChanged) {
       this.foundation.updatePage(pagerProps.currentPage, pagerProps.total, pagerProps.pageSize);
     }
+    if (allPageNumberNeedUpdate) {
+      this.foundation.updateAllPageNumbers(pagerProps.total, pagerProps.pageSize);
+    }
   }
   renderPrevBtn() {
     const {
@@ -329,6 +344,13 @@ export default class Pagination extends BaseComponent {
       }, row)
     );
   }
+  renderSmallPageSelect(content) {
+    const allPageNumbers = this.state.allPageNumbers;
+    const pageList = this.renderRestPageList(allPageNumbers);
+    return /*#__PURE__*/React.createElement(Popover, {
+      content: pageList
+    }, content);
+  }
   renderSmallPage(locale) {
     const _a = this.props,
       {
@@ -352,24 +374,18 @@ export default class Pagination extends BaseComponent {
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
       return null;
     }
-    const pageNumbers = Array.from({
-      length: Math.ceil(total / pageSize)
-    }, (v, i) => i + 1);
-    const pageList = this.renderRestPageList(pageNumbers);
     const pageCls = classNames({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-small`]: true,
       [`${prefixCls}-item-all-disabled`]: disabled
     });
-    const page = /*#__PURE__*/React.createElement("div", {
+    const content = /*#__PURE__*/React.createElement("div", {
       className: pageCls
     }, currentPage, "/", totalPageNum, " ");
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: paginationCls,
       style: style
-    }, this.getDataAttr(rest)), this.renderPrevBtn(), hoverShowPageSelect && !disabled ? /*#__PURE__*/React.createElement(Popover, {
-      content: pageList
-    }, page) : page, this.renderNextBtn(), this.renderQuickJump(locale));
+    }, this.getDataAttr(rest)), this.renderPrevBtn(), hoverShowPageSelect && !disabled ? this.renderSmallPageSelect(content) : content, this.renderNextBtn(), this.renderQuickJump(locale));
   }
   renderDefaultPage(locale) {
     const {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.39.1",
+    "version": "2.39.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.39.1",
-        "@douyinfe/semi-animation-react": "2.39.1",
-        "@douyinfe/semi-foundation": "2.39.1",
-        "@douyinfe/semi-icons": "2.39.1",
-        "@douyinfe/semi-illustrations": "2.39.1",
-        "@douyinfe/semi-theme-default": "2.39.1",
+        "@douyinfe/semi-animation": "2.39.2",
+        "@douyinfe/semi-animation-react": "2.39.2",
+        "@douyinfe/semi-foundation": "2.39.2",
+        "@douyinfe/semi-icons": "2.39.2",
+        "@douyinfe/semi-illustrations": "2.39.2",
+        "@douyinfe/semi-theme-default": "2.39.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "f35dea361d04de2c89c272a1f561ac945ad13aa3",
+    "gitHead": "4a5d81c6ff12a6ecf0a0f96b5a9ae96174dd12b7",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",