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

package/lib/cjs/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {
@@ -299,53 +307,65 @@ $module: #{$prefix}-notification;
             }
         }
 
-  
+
 
         &-animation-show_top{
             animation: #{$module}-slideShow_top $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_top{
             animation: #{$module}-slideHide_top $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topLeft{
             animation: #{$module}-slideShow_topLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topLeft{
             animation: #{$module}-slideHide_topLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topRight{
             animation: #{$module}-slideShow_topRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topRight{
             animation: #{$module}-slideHide_topRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottom{
             animation: #{$module}-slideShow_bottom $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottom{
             animation: #{$module}-slideHide_bottom $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottomLeft{
             animation: #{$module}-slideShow_bottomLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomLeft{
             animation: #{$module}-slideHide_bottomLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
         &-animation-show_bottomRight{
             animation: #{$module}-slideShow_bottomRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomRight{
             animation: #{$module}-slideHide_bottomRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
     }
 }

package/lib/cjs/notification/notificationFoundation.d.ts

@@ -1,20 +1,20 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from '../notification/constants';
-export declare type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-export declare type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
-export declare type NoticeTheme = 'light' | 'normal';
+export type NoticePosition = 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type NoticeType = 'warning' | 'success' | 'info' | 'error' | 'default';
+export type NoticeTheme = 'light' | 'normal';
 export interface NoticeProps {
     duration?: number;
-    id?: string | number;
+    id?: string;
     title?: any;
     content?: any;
     position?: NoticePosition;
     type?: NoticeType;
     onClick?: (e: any) => void;
     onClose?: () => void;
-    onCloseClick?: (id: string | number) => void;
+    onCloseClick?: (id: string) => void;
     showClose?: boolean;
-    close?: (id: string | number) => void;
+    close?: (id: string) => void;
     zIndex?: number;
     icon?: any;
     getPopupContainer?: () => HTMLElement;

package/lib/cjs/notification/notificationFoundation.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class NotificationFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, NotificationFoundation.defaultAdapter), adapter));
@@ -20,48 +16,36 @@ class NotificationFoundation extends _foundation.default {
 
   init() {
     this._startCloseTimer();
-
     this._id = this.getProp('id');
   }
-
   destroy() {
     this._clearCloseTimer();
   }
-
   _startCloseTimer() {
     // unit: s
     const duration = this.getProp('duration');
-
     if (duration && (0, _isNumber2.default)(duration)) {
       this._timer = setTimeout(() => {
         this.close(); // call parent to remove itself
       }, duration * 1000);
     }
   }
-
   close(e) {
     if (e) {
       e.stopPropagation();
     }
-
     this._adapter.notifyWrapperToRemove(this._id);
-
     this._adapter.notifyClose();
   }
-
   _clearCloseTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
   restartCloseTimer() {
     this._clearCloseTimer();
-
     this._startCloseTimer();
   }
-
 }
-
 exports.default = NotificationFoundation;

package/lib/cjs/notification/notificationListFoundation.d.ts

@@ -6,9 +6,10 @@ export interface NotificationListProps {
 export interface NotificationListState {
     notices: NoticeInstance[];
     removedItems: NoticeInstance[];
+    updatedItems: NoticeInstance[];
 }
 export interface NotificationListAdapter extends DefaultAdapter<NotificationListProps, NotificationListState> {
-    updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[]) => void;
+    updateNotices: (notices: NoticeInstance[], removedItems?: NoticeInstance[], updatedItems?: NoticeInstance[]) => void;
     getNotices: () => NoticeInstance[];
 }
 export interface ConfigProps {
@@ -23,6 +24,8 @@ export interface ConfigProps {
 }
 export default class NotificationListFoundation extends BaseFoundation<NotificationListAdapter> {
     addNotice(opts: NoticeProps): void;
+    has(id: string): boolean;
+    update(id: string, noticeOpts: NoticeProps): void;
     removeNotice(id: string): void;
     destroyAll(): void;
 }

package/lib/cjs/notification/notificationListFoundation.js

@@ -4,53 +4,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable no-useless-constructor */
 class NotificationListFoundation extends _foundation.default {
   addNotice(opts) {
     // let notices = this._adapter.getNotices();
-    const notices = this._adapter.getNotices(); // opts = { ...opts, id };
+    const notices = this._adapter.getNotices();
+    // opts = { ...opts, id };
     // if (opts.duration) {
     //     setTimeout(() => {
     //         this.removeNotice(opts.id);
     //     }, opts.duration * 1000);
     // }
-
-
-    this._adapter.updateNotices([opts, ...notices]); // return id;
-
+    this._adapter.updateNotices([opts, ...notices]);
+    // return id;
   }
 
+  has(id) {
+    return this._adapter.getNotices().some(notice => notice.id === id);
+  }
+  update(id, noticeOpts) {
+    let notices = this._adapter.getNotices();
+    notices = notices.map(notice => notice.id === id ? Object.assign(Object.assign({}, notice), noticeOpts) : notice);
+    const updatedItems = notices.filter(notice => notice.id === id);
+    this._adapter.updateNotices(notices, [], updatedItems);
+  }
   removeNotice(id) {
-    let notices = this._adapter.getNotices(); // let notices = this._adapter.getNotices();
-
-
+    let notices = this._adapter.getNotices();
+    // let notices = this._adapter.getNotices();
     const removedItems = [];
     notices = notices.filter(notice => {
       if (notice.id === id) {
         removedItems.push(notice);
         return false;
       }
-
       return true;
     });
-
     this._adapter.updateNotices(notices, removedItems); // This must be updated at the same time https://github.com/facebook/react/issues/12312
-
   }
 
   destroyAll() {
     const notices = this._adapter.getNotices();
-
     if (notices.length > 0) {
       this._adapter.updateNotices([], notices);
     }
   }
-
 }
-
 exports.default = NotificationListFoundation;

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

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
   PREFIX: _constants.BASE_CLASS_PREFIX + '-overflow-list'
 };
@@ -33,5 +31,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

@@ -4,33 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _constants = require("./constants");
-
+var _fastCopy = _interopRequireDefault(require("fast-copy"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Boundary = _constants.strings.BOUNDARY_MAP;
 const OverflowDirection = _constants.strings.OVERFLOW_DIR;
-
 class OverflowListFoundation extends _foundation.default {
   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 (0, _fastCopy.default)(items).reverse();
+    };
   }
-
   getOverflowItem() {
     const {
       items
@@ -39,11 +36,9 @@ class OverflowListFoundation extends _foundation.default {
       visibleState,
       overflow
     } = this.getStates();
-
     if (!this.isScrollMode()) {
       return overflow;
     }
-
     const visibleStateArr = items.map(_ref => {
       let {
         key
@@ -57,9 +52,8 @@ class OverflowListFoundation extends _foundation.default {
     overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items;
     return overflowList;
   }
-
   handleIntersect(entries) {
-    const visibleState = (0, _cloneDeep2.default)(this.getState('visibleState'));
+    const visibleState = (0, _fastCopy.default)(this.getState('visibleState'));
     const res = {};
     entries.forEach(entry => {
       const itemKey = (0, _get2.default)(entry, 'target.dataset.scrollkey');
@@ -68,84 +62,81 @@ class OverflowListFoundation extends _foundation.default {
       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 {
+      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 = {};
-
-    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);
   }
-
 }
-
 var _default = OverflowListFoundation;
 exports.default = _default;

package/lib/cjs/pagination/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.numbers = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-page")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-page`
 };
 exports.cssClasses = cssClasses;
 const strings = {};

package/lib/cjs/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: {