@douyinfe/semi-foundation 2.25.0 → 2.25.1

package/lib/cjs/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: string[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {
@@ -10,8 +10,8 @@ declare const strings: {
         SCROLL: string;
     };
     BOUNDARY_MAP: {
-        START: string;
-        END: string;
+        readonly START: "start";
+        readonly END: "end";
     };
     OVERFLOW_DIR: {
         NONE: number;
@@ -19,5 +19,7 @@ declare const strings: {
         SHRINK: number;
     };
 };
-declare const numbers: {};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
 export { cssClasses, strings, numbers };

package/lib/cjs/overflowList/constants.js

@@ -33,5 +33,7 @@ const strings = {
   OVERFLOW_DIR
 };
 exports.strings = strings;
-const numbers = {};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 exports.numbers = numbers;

package/lib/cjs/overflowList/foundation.d.ts

@@ -3,6 +3,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
     notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
@@ -10,6 +11,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
 }
 export default OverflowListFoundation;

package/lib/cjs/overflowList/foundation.js

@@ -29,6 +29,13 @@ class OverflowListFoundation extends _foundation.default {
       } = this.getProps();
       return renderMode === 'scroll';
     };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return (0, _cloneDeep2.default)(items).reverse();
+    };
   }
 
   getOverflowItem() {
@@ -95,54 +102,68 @@ class OverflowListFoundation extends _foundation.default {
     this._adapter.notifyIntersect(res);
   }
 
-  handlePartition(growing) {
+  handleCollapseOverflow() {
+    const {
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
 
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
 
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
 
-    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 (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
       }
+
+      _pivot++;
     }
 
-    this._adapter.updateStates(updateState);
+    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;
+    }
   }
 
 }

package/lib/es/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: string[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {
@@ -10,8 +10,8 @@ declare const strings: {
         SCROLL: string;
     };
     BOUNDARY_MAP: {
-        START: string;
-        END: string;
+        readonly START: "start";
+        readonly END: "end";
     };
     OVERFLOW_DIR: {
         NONE: number;
@@ -19,5 +19,7 @@ declare const strings: {
         SHRINK: number;
     };
 };
-declare const numbers: {};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
 export { cssClasses, strings, numbers };

package/lib/es/overflowList/constants.js

@@ -23,5 +23,7 @@ const strings = {
   BOUNDARY_MAP,
   OVERFLOW_DIR
 };
-const numbers = {};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 export { cssClasses, strings, numbers };

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

@@ -3,6 +3,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
     notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
@@ -10,6 +11,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
 }
 export default OverflowListFoundation;

package/lib/es/overflowList/foundation.js

@@ -16,6 +16,13 @@ class OverflowListFoundation extends BaseFoundation {
       } = this.getProps();
       return renderMode === 'scroll';
     };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return _cloneDeep(items).reverse();
+    };
   }
 
   getOverflowItem() {
@@ -84,54 +91,68 @@ class OverflowListFoundation extends BaseFoundation {
     this._adapter.notifyIntersect(res);
   }
 
-  handlePartition(growing) {
+  handleCollapseOverflow() {
+    const {
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
 
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
 
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
 
-    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 (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
       }
+
+      _pivot++;
     }
 
-    this._adapter.updateStates(updateState);
+    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;
+    }
   }
 
 }

package/overflowList/constants.ts

@@ -14,7 +14,7 @@ const MODE_MAP = {
 const BOUNDARY_MAP = {
     START: 'start',
     END: 'end',
-};
+} as const;
 
 const OVERFLOW_DIR = {
     NONE: 0,
@@ -31,7 +31,9 @@ const strings = {
     OVERFLOW_DIR
 };
 
-const numbers = {};
+const numbers = {
+    MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 
 export {
     cssClasses,

package/overflowList/foundation.ts

@@ -7,7 +7,8 @@ const OverflowDirection = strings.OVERFLOW_DIR;
 export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
-    notifyIntersect: (res: any) => void
+    notifyIntersect: (res: any) => void;
+    getItemSizeMap: ()=>Map<string, number>
 }
 
 class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
@@ -29,6 +30,7 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         if (!this.isScrollMode()) {
             return overflow;
         }
+
         const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         const visibleStart = visibleStateArr.indexOf(true);
         const visibleEnd = visibleStateArr.lastIndexOf(true);
@@ -71,38 +73,52 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
         this._adapter.notifyIntersect(res);
     }
 
-    handlePartition(growing: number): void {
-        const { direction, overflow, lastOverflowCount, visible } = this.getStates();
-        const { minVisibleItems, collapseFrom, items } = 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,
-            };
+    getReversedItems = ()=>{
+        const { items } = this.getProps();
+        return cloneDeep(items).reverse();
+    }
+    handleCollapseOverflow(){
+        const { minVisibleItems, collapseFrom } = this.getProps();
+        const { overflowWidth, containerWidth, pivot: statePivot, overflowStatus } = this.getStates();
+        const { items, onOverflow } = this.getProps();
+        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);
     }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.25.0",
+    "version": "2.25.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "3c2ec566acd956095fc502690245c9a502251357",
+    "gitHead": "571a51134e49bec30e4412b4eacd45dd35d3849f",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",