@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/lib/es/navigation/navigation.scss

@@ -76,7 +76,7 @@ $module: #{$prefix}-navigation;
         padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
         box-sizing: border-box;
         margin-top: 0;
-        // margin-bottom: $spacing-navigation_item-marginBottom;
+        margin-bottom: $spacing-navigation_item-marginBottom;
 
         @include font-size-regular;
         font-weight: $font-navigation_item_normal-fontWeight;
@@ -257,13 +257,6 @@ $module: #{$prefix}-navigation;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        row-gap: $spacing-navigation_item-marginBottom;
-
-        &.#{$module}-sub-open {
-            margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-        }
 
         .#{$module}-item {
             color: $color-navigation_itemLn-text-default;
@@ -275,9 +268,9 @@ $module: #{$prefix}-navigation;
             font-weight: $font-navigation_sub_item-fontWeight;
             width: 100%;
 
-            // &:first-child {
-            //     margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-            // }
+            &:first-child {
+                margin-top: $spacing-navigation_sub_item_first_child-marginTop;
+            }
 
             & > &-text:first-child {
                 margin-left: $spacing-base-tight + $width-navigation_icon_left + $width-navigation_icon_text_between;
@@ -350,12 +343,6 @@ $module: #{$prefix}-navigation;
         transform: rotate(-180deg);
     }
 
-    &-icon-rotate-0-no-transition {
-        transform: rotate(0);
-    }
-    &-icon-rotate-180-no-transition {
-        transform: rotate(-180deg);
-    }
 }
 
 /* Header、Footer-Common */
@@ -443,12 +430,6 @@ $module: #{$prefix}-navigation;
             }
         }
 
-        &-list {
-            display: flex;
-            flex-direction: column;
-            row-gap: $spacing-navigation_item-marginBottom;
-        }
-
         &-list > .#{$module}-sub-wrap {
             & > .#{$module}-sub-title {
                 color: $color-navigation_itemL1-text-default;
@@ -502,9 +483,9 @@ $module: #{$prefix}-navigation;
         }
     }
 
-    // .#{$module}-item:last-of-type {
-    //     margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    // }
+    .#{$module}-item:last-of-type {
+        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
+    }
 
     .#{$module}-inner {
         flex-direction: column;
@@ -733,97 +714,4 @@ $module: #{$prefix}-navigation;
     }
 }
 
-// The following css is used for the variant generation of NavItem and NavSub in C2D
-.#{$module}-first-layer {
-    > .#{$module}-sub-title {
-        .#{$module}-item-text {
-            font-weight: 600;
-        }
-    }
-
-    > .#{$module}-item-text {
-        font-weight: 600;
-    }
-}
-
-.#{$module}-sub-title-selected {
-    .#{$module}-item-icon:first-child {
-        color: $color-navigation_itemL1_selected_icon-default;
-    }
-}
-
-.#{$module}-sub-wrap {
-    .#{$module}-sub-title {
-        margin-bottom: $spacing-navigation_sub_title-marginBottom;
-    }
-
-    .#{$module}-item:last-of-type {
-        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    } 
-}
-
-.#{$module}-sub-title {
-    &.#{$module}-sub-title-disabled {
-        .semi-navigation-item-text {
-            color: $color-navigation_itemL1_disabled-text-default;
-        }
-    }
-}
-
-.#{$module}-item-horizontal {
-    // The width of nav NavItem and NavSub in the horizontal direction both need fit-content
-    &.#{$module}-item { 
-        width: fit-content;
-        margin-bottom: $spacing-navigation_horizontal_nav_list_item-marginBottom;
-        margin-right: $spacing-navigation_horizontal_nav_list_item_not_last-marginRight;
-
-        &.#{$module}-item-disabled {
-            color: $color-navigation_horizontal_itemL1_disabled-text-default;
-        }
-    }
-
-    .#{$module}-sub-title {
-        .#{$module}-item-icon:first-child,
-        .#{$module}-item-text {
-            color: var(--semi-color-text-2);
-            background-color: transparent;
-        }
-
-        &.#{$module}-sub-title-selected {
-            .#{$module}-item-icon:first-child,
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1_selected-text-default;
-            }
-        }
-
-        &.#{$module}-sub-title-disabled {
-            .#{$module}-item-icon:first-child,
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1_disabled-text-default;
-            }
-        }
-    }
-
-    &.#{$module}-first-layer {
-        color: $color-navigation_horizontal_itemL1-text-default;
-    }
-
-    &.#{$module}-item-selected {
-        background-color: $color-navigation_horizontal_itemL1_selected-bg-default;
-
-        .#{$module}-item-icon:first-child,
-        .#{$module}-item-text {
-            color: $color-navigation_horizontal_itemL1_selected-text-default;
-        }
-    }
-
-    .semi-navigation-item-icon:first-child {
-        margin-right: $spacing-navigation_horizontal_icon_last-marginLeft;
-    }
-
-    .semi-navigation-item-icon:last-child {
-        margin-left: $spacing-navigation_horizontal_icon_first-marginRight;
-    }
-}
-
 @import "./rtl.scss";

package/lib/es/navigation/subNavFoundation.d.ts

@@ -21,8 +21,6 @@ export interface SubNavAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyGlobalOnClick(data: OnClickData): void;
     getIsSelected(itemKey: string | number): boolean;
     getIsOpen(): boolean;
-    getIsCollapsed(): boolean;
-    getMode(): string;
 }
 export default class SubNavFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SubNavAdapter<P, S>, P, S> {
     constructor(adapter: SubNavAdapter<P, S>);

package/lib/es/navigation/subNavFoundation.js

@@ -1,72 +1,54 @@
 import BaseFoundation from '../base/foundation';
 import isEnterPress from '../utils/isEnterPress';
-
 const addKeys = function addKeys() {
   let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const keySet = new Set(originKeys);
-
   for (var _len = arguments.length, willAddKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     willAddKeys[_key - 1] = arguments[_key];
   }
-
   willAddKeys.forEach(key => key && keySet.add(key));
   return Array.from(keySet);
 };
-
 const removeKeys = function removeKeys() {
   let originKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const keySet = new Set(originKeys);
-
   for (var _len2 = arguments.length, willRemoveKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
     willRemoveKeys[_key2 - 1] = arguments[_key2];
   }
-
   willRemoveKeys.forEach(key => key && keySet.delete(key));
   return Array.from(keySet);
 };
-
 export default class SubNavFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     // this.log('invoke SubNavFoundation init()');
     this._timer = null;
   }
-
   destroy() {} // eslint-disable-line
-
-
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
   }
-
   isValidKey(itemKey) {
     // eslint-disable-next-line eqeqeq
     return itemKey != null && (typeof itemKey === 'number' || typeof itemKey === 'string');
   }
-
   handleDropdownVisibleChange(visible) {
     const itemKey = this.getProp('itemKey');
-
     const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
-
     const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
-
     const rawOpenKeys = this._adapter.getOpenKeys();
-
     const openKeys = visible ? addKeys(rawOpenKeys, itemKey) : removeKeys(rawOpenKeys, itemKey);
     this.clearDelayTimer();
-
     if (!openKeysIsControlled) {
       if (canUpdateOpenKeys) {
         this._adapter.updateOpen(visible);
-      } // this._adapter.updateIsHovered(visible);
-
+      }
+      // this._adapter.updateIsHovered(visible);
     }
 
     this._adapter.notifyGlobalOpenChange({
@@ -80,28 +62,22 @@ export default class SubNavFoundation extends BaseFoundation {
    * @param {Event} e
    * @param {HTMLElement} titleRef
    */
-
-
   handleClick(e, titleRef) {
     const {
       itemKey,
       disabled
     } = this.getProps();
-
     if (disabled) {
       return;
-    } // this.log(e, titleRef, titleRef.contains(e.target));
-
-
+    }
+    // this.log(e, titleRef, titleRef.contains(e.target));
     const clickedDomIsTitle = titleRef && titleRef.contains(e.target);
     let isOpen = Boolean(this._adapter.getIsOpen());
-
     if (!clickedDomIsTitle) {
       isOpen = false;
     } else {
       isOpen = !isOpen;
     }
-
     const openKeys = isOpen ? addKeys(this._adapter.getOpenKeys(), itemKey) : removeKeys(this._adapter.getOpenKeys(), itemKey);
     const cbVal = {
       itemKey,
@@ -109,17 +85,12 @@ export default class SubNavFoundation extends BaseFoundation {
       isOpen,
       domEvent: e
     };
-
     const openKeysIsControlled = this._adapter.getOpenKeysIsControlled();
-
     const canUpdateOpenKeys = this._adapter.getCanUpdateOpenKeys();
-
     if (!openKeysIsControlled && canUpdateOpenKeys) {
       this._adapter.updateOpen(isOpen);
     }
-
     this._adapter.notifyGlobalOpenChange(cbVal);
-
     this._adapter.notifyGlobalOnClick(cbVal);
   }
   /**
@@ -127,12 +98,9 @@ export default class SubNavFoundation extends BaseFoundation {
    * @param e
    * @param titleRef
    */
-
-
   handleKeyPress(e, titleRef) {
     if (isEnterPress(e)) {
       this.handleClick(e, titleRef);
     }
   }
-
 }

package/lib/es/notification/constants.js

@@ -11,6 +11,6 @@ const strings = {
 };
 const numbers = {
   duration: 3 // default close time, unit: s
-
 };
+
 export { cssClasses, strings, numbers };

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

@@ -1,8 +1,8 @@
 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;

package/lib/es/notification/notificationFoundation.js

@@ -9,46 +9,35 @@ export default class NotificationFoundation extends BaseFoundation {
 
   init() {
     this._startCloseTimer();
-
     this._id = this.getProp('id');
   }
-
   destroy() {
     this._clearCloseTimer();
   }
-
   _startCloseTimer() {
     // unit: s
     const duration = this.getProp('duration');
-
     if (duration && _isNumber(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();
   }
-
 }

package/lib/es/notification/notificationListFoundation.js

@@ -3,42 +3,35 @@ import BaseFoundation from '../base/foundation';
 export default class NotificationListFoundation extends BaseFoundation {
   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;
   }
 
   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);
     }
   }
-
 }

package/lib/es/overflowList/foundation.js

@@ -4,19 +4,16 @@ import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
 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
@@ -24,7 +21,6 @@ class OverflowListFoundation extends BaseFoundation {
       return _cloneDeep(items).reverse();
     };
   }
-
   getOverflowItem() {
     const {
       items
@@ -33,11 +29,9 @@ class OverflowListFoundation extends BaseFoundation {
       visibleState,
       overflow
     } = this.getStates();
-
     if (!this.isScrollMode()) {
       return overflow;
     }
-
     const visibleStateArr = items.map(_ref => {
       let {
         key
@@ -51,46 +45,36 @@ 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 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);
   }
-
   handleCollapseOverflow() {
     const {
       minVisibleItems,
@@ -107,18 +91,16 @@ class OverflowListFoundation extends BaseFoundation {
       onOverflow
     } = this.getProps();
     let itemWidths = overflowWidth,
-        _pivot = 0;
+      _pivot = 0;
     let overflowed = false;
-
     for (const size of this._adapter.getItemSizeMap().values()) {
-      itemWidths += size; // 触发overflow
-
+      itemWidths += size;
+      // 触发overflow
       if (itemWidths > containerWidth) {
         overflowed = true;
         break;
-      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
-
-
+      }
+      // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
       if (_pivot === items.length - 1) {
         this._adapter.updateStates({
           overflowStatus: "normal",
@@ -126,35 +108,27 @@ class OverflowListFoundation extends BaseFoundation {
           visible: items,
           overflow: []
         });
-
         break;
       }
-
       _pivot++;
     }
-
     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
-
-
+      });
+      // trigger onOverflow
       if (statePivot !== pivot) {
         onOverflow(overflow);
       }
-
       return;
     }
   }
-
 }
-
 export default OverflowListFoundation;

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

@@ -12,14 +12,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;