@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/overflowList/foundation.js

@@ -1,23 +1,26 @@
-import _cloneDeep from "lodash/cloneDeep";
 import _get from "lodash/get";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
+import copy from 'fast-copy';
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
-
 class OverflowListFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.previousY = undefined;
-
     this.isScrollMode = () => {
       const {
         renderMode
       } = this.getProps();
       return renderMode === 'scroll';
     };
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return copy(items).reverse();
+    };
   }
-
   getOverflowItem() {
     const {
       items
@@ -26,11 +29,9 @@ class OverflowListFoundation extends BaseFoundation {
       visibleState,
       overflow
     } = this.getStates();
-
     if (!this.isScrollMode()) {
       return overflow;
     }
-
     const visibleStateArr = items.map(_ref => {
       let {
         key
@@ -44,96 +45,90 @@ class OverflowListFoundation extends BaseFoundation {
     overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items;
     return overflowList;
   }
-
   handleIntersect(entries) {
-    const visibleState = _cloneDeep(this.getState('visibleState'));
-
+    const visibleState = copy(this.getState('visibleState'));
     const res = {};
     entries.forEach(entry => {
       const itemKey = _get(entry, 'target.dataset.scrollkey');
-
       const visible = entry.isIntersecting;
       res[itemKey] = entry;
       visibleState.set(itemKey, visible);
     });
     let someItemVisible = false;
-
     for (const value of visibleState.values()) {
       if (value) {
         someItemVisible = true;
         break;
       }
-    } // Any item is visible, indicating that the List is visible
-
-
-    const wholeListVisible = someItemVisible; // If scrolling in the vertical direction makes the List invisible, no processing is required. 
+    }
+    // Any item is visible, indicating that the List is visible
+    const wholeListVisible = someItemVisible;
+    // If scrolling in the vertical direction makes the List invisible, no processing is required. 
     // If this.previousY is undefined, it means that the List is mounted for the first time and will not be processed.
-
     const [entry1] = entries;
     const currentY = entry1.boundingClientRect.y;
-
     if (!wholeListVisible && this.previousY !== undefined && currentY !== this.previousY) {
       this.previousY = currentY;
       return;
     }
-
     this.previousY = currentY;
-
     this._adapter.updateVisibleState(visibleState);
-
     this._adapter.notifyIntersect(res);
   }
-
-  handlePartition(growing) {
+  handleCollapseOverflow() {
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
+    const {
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
-
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
-
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
+    let itemWidths = overflowWidth,
+      _pivot = 0;
+    let overflowed = false;
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size;
+      // 触发overflow
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      }
+      // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
+      if (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+        break;
+      }
+      _pivot++;
     }
-
-    if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-      const collapseFromStart = collapseFrom === Boundary.START;
-      const newVisible = visible.slice();
-      const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-
-      if (next !== undefined) {
-        updateState = {
-          // set SHRINK mode unless a GROW is already in progress.
-          // GROW shows all items then shrinks until it settles, so we
-          // preserve the fact that the original trigger was a GROW.
-          direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-          overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-          visible: newVisible
-        };
+    if (overflowed) {
+      const pivot = Math.max(minVisibleItems, _pivot);
+      const isCollapseFromStart = collapseFrom === Boundary.START;
+      const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+      const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+      this._adapter.updateStates({
+        overflowStatus: "overflowed",
+        pivot: pivot,
+        visible,
+        overflow
+      });
+      // trigger onOverflow
+      if (statePivot !== pivot) {
+        onOverflow(overflow);
       }
+      return;
     }
-
-    this._adapter.updateStates(updateState);
   }
-
 }
-
 export default OverflowListFoundation;

package/lib/es/pagination/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-page")
+  PREFIX: `${BASE_CLASS_PREFIX}-page`
 };
 const strings = {};
 const numbers = {

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

@@ -5,6 +5,7 @@ export interface PaginationAdapter<P = Record<string, any>, S = Record<string, a
     updateTotal: (total: number) => void;
     updatePageSize: (pageSize: number) => void;
     updateQuickJumpPage: (quickJumpPage: string | number) => void;
+    updateAllPageNumbers: (allPageNumbers: number[]) => void;
     setCurrentPage: (pageIndex: number) => void;
     registerKeyDownHandler: (handler: KeyDownHandler) => void;
     unregisterKeyDownHandler: (handler: KeyDownHandler) => void;
@@ -12,14 +13,14 @@ export interface PaginationAdapter<P = Record<string, any>, S = Record<string, a
     notifyPageSizeChange: (pageSize: number) => void;
     notifyChange: (pageIndex: number, pageSize: number) => void;
 }
-export declare type PageRenderText = number | '...';
-export declare type PageList = PageRenderText[];
+export type PageRenderText = number | '...';
+export type PageList = PageRenderText[];
 export interface AdapterPageList {
     pageList: PageRenderText[];
     restLeftPageList: number[];
     restRightPageList: number[];
 }
-export declare type KeyDownHandler = any;
+export type KeyDownHandler = any;
 declare class PaginationFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PaginationAdapter<P, S>, P, S> {
     constructor(adapter: PaginationAdapter<P, S>);
     init(): void;
@@ -33,6 +34,7 @@ declare class PaginationFoundation<P = Record<string, any>, S = Record<string, a
     }): void;
     goPage(targetPageIndex: number | '...'): void;
     updatePage(targetPageIndex?: number, total?: number, pageSize?: number): void;
+    updateAllPageNumbers(total: number, pageSize: number): void;
     goPrev(): void;
     goNext(): void;
     _updatePageList(pageListInfo: {

package/lib/es/pagination/foundation.js

@@ -1,60 +1,46 @@
-/* eslint-disable max-len */
-
-/* eslint-disable no-param-reassign */
 import BaseFoundation from '../base/foundation';
 import { numbers } from './constants';
-
 class PaginationFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     const {
       currentPage,
       total,
       pageSize
-    } = this.getStates(); // If pageSize is set, pageSizeOpts does not work
-
+    } = this.getStates();
+    // If pageSize is set, pageSizeOpts does not work
     this._updateDisabled({
       currentPage,
       total,
       pageSize
     });
-
     this._updatePageList({
       currentPage,
       total,
       pageSize
     });
-
     this._registerEventHandler();
   }
-
   destroy() {
     this._unregisterEventHandler();
   }
-
   _registerEventHandler() {
     this._adapter.registerKeyDownHandler(this.handleKeyDown);
   }
-
   _unregisterEventHandler() {
     this._adapter.unregisterKeyDownHandler(this.handleKeyDown);
   }
-
   _updateDisabled(pageInfo) {
     const {
       currentPage,
       total,
       pageSize
     } = pageInfo;
-
     const totalPageNum = this._getTotalPageNumber(total, pageSize);
-
     let prevIsDisabled = false;
     let nextIsDisabled = false;
-
     if (currentPage === 1) {
       prevIsDisabled = true;
       nextIsDisabled = totalPageNum < 2;
@@ -62,96 +48,89 @@ class PaginationFoundation extends BaseFoundation {
       prevIsDisabled = false;
       nextIsDisabled = true;
     }
-
     this._adapter.setDisabled(prevIsDisabled, nextIsDisabled);
   }
-
   goPage(targetPageIndex) {
     if (targetPageIndex === '...') {
       return;
     }
-
     const {
       pageSize,
       currentPage
     } = this.getStates();
-
     const isControlComponent = this._isInProps('currentPage');
-
     if (targetPageIndex === currentPage) {
       return;
     }
-
     if (!isControlComponent) {
       this.updatePage(targetPageIndex);
-
       this._adapter.notifyPageChange(targetPageIndex);
-
       this._adapter.notifyChange(targetPageIndex, pageSize);
     } else {
       this._adapter.notifyPageChange(targetPageIndex);
-
       this._adapter.notifyChange(targetPageIndex, pageSize);
     }
   }
-
   updatePage() {
     let targetPageIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     let total = arguments.length > 1 ? arguments[1] : undefined;
     let pageSize = arguments.length > 2 ? arguments[2] : undefined;
-
     // maybe undefined or null
     if (total === null || typeof total === 'undefined') {
       total = this.getState('total');
     }
-
     if (pageSize === null || typeof pageSize === 'undefined') {
       pageSize = this.getState('pageSize');
     }
-
     this._updateDisabled({
       currentPage: targetPageIndex,
       total,
       pageSize
     });
-
     this._updatePageList({
       currentPage: targetPageIndex,
       total,
       pageSize
     });
-
     this._adapter.updateTotal(total);
-
     this._adapter.setCurrentPage(targetPageIndex);
-
     this._adapter.updatePageSize(pageSize);
   }
-
+  updateAllPageNumbers(total, pageSize) {
+    // only need to update in small size
+    const {
+      size,
+      hoverShowPageSelect,
+      disabled
+    } = this.getProps();
+    if (size !== 'small' || !hoverShowPageSelect || disabled) {
+      return;
+    } else {
+      const pageNumbers = Array.from({
+        length: Math.ceil(total / pageSize)
+      }, (v, i) => i + 1);
+      this._adapter.updateAllPageNumbers(pageNumbers);
+    }
+  }
   goPrev() {
     const {
       currentPage
     } = this.getStates();
-
     if (currentPage > 1) {
       this.goPage(currentPage - 1);
     }
   }
-
   goNext() {
     const {
       currentPage,
       total,
       pageSize
     } = this.getStates();
-
     const totalPageNum = this._getTotalPageNumber(total, pageSize);
-
     if (currentPage <= totalPageNum - 1) {
       this.goPage(currentPage + 1);
     }
   }
-
   _updatePageList(pageListInfo) {
     const {
       currentPage,
@@ -160,9 +139,7 @@ class PaginationFoundation extends BaseFoundation {
     } = pageListInfo;
     let pageList = [];
     let restLeftPageList = []; // pages before ...
-
     let restRightPageList = []; // pages after ...
-
     /** Pager truncation logic (t is the total number of pages, c is the current page):
          - No need to truncate when t<=7 pages
          - When t>7
@@ -180,14 +157,11 @@ class PaginationFoundation extends BaseFoundation {
             - 当 t-3<=c<=t 时，第 2 个为截断符号（...），后面为倒数第5个-倒数第1个
         截断符+数字 总共个数为7个
     */
-
     const totalPageNum = this._getTotalPageNumber(total, pageSize);
-
     const {
       PAGE_SHOW_MAX,
       REST_PAGE_MAX_SIZE
     } = numbers;
-
     if (totalPageNum <= PAGE_SHOW_MAX) {
       pageList = Array.from({
         length: totalPageNum
@@ -197,14 +171,13 @@ class PaginationFoundation extends BaseFoundation {
     } else {
       switch (true) {
         case currentPage < 4:
-          pageList = [1, 2, 3, 4, '...', totalPageNum - 1, totalPageNum]; // length: (totalPageNum - 1) - 4
-
+          pageList = [1, 2, 3, 4, '...', totalPageNum - 1, totalPageNum];
+          // length: (totalPageNum - 1) - 4
           restRightPageList = Array.from({
             length: Math.min(totalPageNum - 6, REST_PAGE_MAX_SIZE)
           }, (v, i) => i + 5);
           restLeftPageList = [];
           break;
-
         case currentPage === 4:
           pageList = [1, 2, 3, 4, 5, '...', totalPageNum];
           restRightPageList = Array.from({
@@ -212,13 +185,12 @@ class PaginationFoundation extends BaseFoundation {
           }, (v, i) => i + 6);
           restLeftPageList = [];
           break;
-
         case 4 < currentPage && currentPage < totalPageNum - 3:
           const middle = Array.from({
             length: 3
           }, (v, i) => currentPage + (i - 1));
-          pageList = [1].concat('...', middle, '...', totalPageNum); // length: total-(currentPage+1)-1
-
+          pageList = [1].concat('...', middle, '...', totalPageNum);
+          // length: total-(currentPage+1)-1
           restRightPageList = Array.from({
             length: Math.min(totalPageNum - currentPage - 2, REST_PAGE_MAX_SIZE)
           }, (v, i) => currentPage + i + 2);
@@ -226,7 +198,6 @@ class PaginationFoundation extends BaseFoundation {
             length: Math.min(currentPage - 3, REST_PAGE_MAX_SIZE)
           }, (v, i) => i + 2);
           break;
-
         case currentPage - 3 <= currentPage && currentPage <= totalPageNum:
           const right = Array.from({
             length: 5
@@ -237,51 +208,41 @@ class PaginationFoundation extends BaseFoundation {
             length: Math.min(right[0] - 2, REST_PAGE_MAX_SIZE)
           }, (v, i) => i + 2);
           break;
-
         default:
           break;
       }
     }
-
     this._adapter.setPageList({
       pageList,
       restLeftPageList,
       restRightPageList
-    }); // this._adapter.setRestLeftPageList(restLeftPageList);
+    });
+    // this._adapter.setRestLeftPageList(restLeftPageList);
     // this._adapter.setRestRightPageList(restRightPageList);
-
   }
 
   changePageSize(newPageSize) {
     const {
       pageSize
     } = this.getStates();
-
     this._adapter.updatePageSize(newPageSize);
-
     this._adapter.notifyPageSizeChange(newPageSize);
-
     const {
       total,
       currentPage
-    } = this.getStates(); // After converting the switching page capacity, which page is the current page
-
+    } = this.getStates();
+    // After converting the switching page capacity, which page is the current page
     const currentPageFirstItemIndex = (currentPage - 1) * pageSize + 1;
     const newCurrentPage = Math.ceil(currentPageFirstItemIndex / newPageSize);
     this.updatePage(newCurrentPage, total, newPageSize);
-
     if (currentPage !== newCurrentPage) {
       this._adapter.notifyPageChange(newCurrentPage);
     }
-
     this._adapter.notifyChange(newCurrentPage, newPageSize);
-  } // TODO handle tab/enter events
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  handleKeyDown() {} // If pageSize is not in the Opts array, insert it
-
-
+  }
+  // TODO handle tab/enter events
+  handleKeyDown() {}
+  // If pageSize is not in the Opts array, insert it
   pageSizeInOpts() {
     const {
       pageSizeOpts
@@ -290,66 +251,51 @@ class PaginationFoundation extends BaseFoundation {
       pageSize
     } = this.getStates();
     const newPageSizeOpts = [...pageSizeOpts];
-
     if (newPageSizeOpts.indexOf(pageSize) === -1) {
       const firstLargerIndex = newPageSizeOpts.findIndex(el => el > pageSize);
       newPageSizeOpts.splice(firstLargerIndex, 0, pageSize);
     }
-
     return newPageSizeOpts;
   }
-
   handleQuickJumpNumberChange(targetPage) {
     this._adapter.updateQuickJumpPage(targetPage);
   }
-
   _handleQuickJump(quickJumpPage) {
     let page = Number(quickJumpPage);
     const {
       pageSize,
       total
     } = this.getStates();
-
     const totalPageNum = this._getTotalPageNumber(total, pageSize);
-
     if (Number.isNaN(page)) {
       return;
-    } // If the user input is greater than totalPage
-
-
+    }
+    // If the user input is greater than totalPage
     if (page > totalPageNum) {
       page = totalPageNum;
     }
-
     if (page <= 0) {
       page = 1;
-    } // clear inputnumber
-
-
+    }
+    // clear inputnumber
     this._adapter.updateQuickJumpPage('');
-
     this.goPage(page);
   }
-
   handleQuickJumpBlur() {
     const {
       quickJumpPage
-    } = this.getStates(); // no need to operate when inputnumber blur & quickJumpPage is empty
-
+    } = this.getStates();
+    // no need to operate when inputnumber blur & quickJumpPage is empty
     if (typeof quickJumpPage === 'string' && quickJumpPage || typeof quickJumpPage === 'number') {
       this._handleQuickJump(quickJumpPage);
     }
   }
-
   handleQuickJumpEnterPress(targetPage) {
     this._handleQuickJump(targetPage);
   }
-
   _getTotalPageNumber(total, pageSize) {
     const totalPageNum = Math.ceil(total / pageSize);
     return totalPageNum;
   }
-
 }
-
 export default PaginationFoundation;

package/lib/es/pagination/pagination.css

@@ -18,6 +18,12 @@
   color: var(--semi-color-text-2);
   padding: 0 0;
 }
+.semi-page-disabled {
+  cursor: not-allowed;
+}
+.semi-page-disabled .semi-page-total {
+  color: var(--semi-color-disabled-text);
+}
 .semi-page-item {
   font-size: 14px;
   line-height: 20px;
@@ -78,6 +84,23 @@
   min-width: 44px;
   margin: 0;
 }
+.semi-page-item-all-disabled {
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+.semi-page-item-all-disabled:hover {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+.semi-page-item-all-disabled-active {
+  background-color: var(--semi-color-disabled-fill);
+  font-weight: 600;
+}
+.semi-page-item-all-disabled-active:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
 .semi-page-total {
   font-size: 14px;
   line-height: 20px;

package/lib/es/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,27 @@ $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;
+            }
+
+            &-active {
+                background-color: $color-pagination_item-bg-selected-disabled;
+                font-weight: $font-pagination_item_active-fontWeight;
+
+                &:hover {
+                    background-color: $color-pagination_item-bg-selected-disabled;
+                }
+            }
+        }
     }
 
     &-total {

package/lib/es/pagination/variables.scss

@@ -10,6 +10,7 @@ $color-pagination_item-bg-active: var(--semi-color-fill-1); // 翻页器 页码
 $color-pagination_item-text-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态文字颜色
 $color-pagination_item-icon-disabled: var(--semi-color-disabled-text); // 翻页器 页码 禁用态图标颜色
 $color-pagination_item-bg-disabled: transparent; // 翻页器 页码 禁用态背景颜色
+$color-pagination_item-bg-selected-disabled: var(--semi-color-disabled-fill); // 翻页器 页码 选中禁用态背景颜色
 $color-pagination_item-text-selected: var(--semi-color-primary); // 翻页器 页码 选中态文字颜色
 $color-pagination_item-bg-selected: var(--semi-color-primary-light-default); // 翻页器 页码 选中态背景颜色
 $color-pagination_quickjump_text-disabled: var(--semi-color-disabled-text); // 翻页器 快速跳转禁用态文字颜色