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

package/lib/es/layout/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-layout")
+  PREFIX: `${BASE_CLASS_PREFIX}-layout`
 };
 const strings = {
   BREAKPOINT: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']

package/lib/es/list/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-list")
+  PREFIX: `${BASE_CLASS_PREFIX}-list`
 };
 const strings = {
   SIZE: ['large', 'small', 'default'],

package/lib/es/modal/constants.js

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

package/lib/es/modal/modal.css

@@ -64,9 +64,13 @@
   overflow: hidden;
   box-shadow: var(--semi-shadow-elevated);
 }
+.semi-modal-footerfill {
+  display: flex;
+}
 .semi-modal-content-fullScreen {
   border-radius: 0;
   border: none;
+  top: 0px;
 }
 .semi-modal-header {
   display: flex;
@@ -163,18 +167,22 @@
 
 .semi-modal-content-animate-show {
   animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-content-animate-hide {
   animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-show {
   animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-hide {
   animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 @keyframes semi-modal-content-keyframe-show {

package/lib/es/modal/modal.scss

@@ -70,12 +70,17 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
         background-clip: padding-box;
         overflow: hidden;
-        @include shadow-elevated;
+        box-shadow: $shadow-modal_content;
+    }
+
+    &-footerfill{
+        display: flex;
     }
 
     &-content-fullScreen {
         border-radius: $radius-modal_content_fullscreen;
         border: none;
+        top: $spacing-modal_content_fullscreen-top;
     }
 
     // &-close {
@@ -209,18 +214,22 @@ $module: #{$prefix}-modal;
 
 .#{$module}-content-animate-show {
     animation: $animation_duration-modal-show #{$module}-content-keyframe-show $animation_function-modal-show $animation_delay-modal-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-content-animate-hide {
     animation: $animation_duration-modal-hide #{$module}-content-keyframe-hide $animation_function-modal-hide $animation_delay-modal-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-show {
     animation: $animation_duration-modal_mask-show #{$module}-mask-keyframe-show $animation_function-modal_mask-show $animation_delay-modal_mask-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-hide {
     animation: $animation_duration-modal_mask-hide #{$module}-mask-keyframe-hide $animation_function-modal_mask-hide $animation_delay-modal_mask-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 

package/lib/es/modal/modalContentFoundation.js

@@ -3,12 +3,10 @@ import KeyCode from '../utils/keyCode';
 export default class ModalContentFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
-
     this.handleKeyDown = e => {
       const {
         closeOnEsc
       } = this.getProps();
-
       if (closeOnEsc && e.keyCode === KeyCode.ESC) {
         e.stopPropagation();
         this.close(e);
@@ -16,57 +14,44 @@ export default class ModalContentFoundation extends BaseFoundation {
       }
     };
   }
-
   destroy() {
     this.handleKeyDownEventListenerUnmount();
     this.modalDialogBlur();
     this.prevFocusElementReFocus();
   }
-
   handleDialogMouseDown() {
     this._adapter.notifyDialogMouseDown();
   }
-
   handleMaskMouseUp() {
     this._adapter.notifyDialogMouseUp();
   }
-
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
   }
-
   handleKeyDownEventListenerUnmount() {
     this._adapter.removeKeyDownEventListener();
   }
-
   getMouseState() {
     this._adapter.getMouseState();
   }
-
   handleMaskClick(e) {
     const {
       dialogMouseDown
     } = this.getStates();
-
     if (e.target === e.currentTarget && !dialogMouseDown) {
       this.close(e);
     }
   }
-
   close(e) {
     this._adapter.notifyClose(e);
   }
-
   modalDialogFocus() {
     this._adapter.modalDialogFocus();
   }
-
   modalDialogBlur() {
     this._adapter.modalDialogBlur();
   }
-
   prevFocusElementReFocus() {
     this._adapter.prevFocusElementReFocus();
   }
-
 }

package/lib/es/modal/modalFoundation.d.ts

@@ -1,11 +1,11 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-export declare type Size = 'small' | 'medium' | 'large' | 'full-width';
+export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+export type Size = 'small' | 'medium' | 'large' | 'full-width';
 export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
-    notifyCancel: (e: any) => void;
-    notifyOk: (e: any) => void;
+    notifyCancel: (e: any) => void | Promise<any>;
+    notifyOk: (e: any) => void | Promise<any>;
     notifyClose: () => void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
@@ -51,10 +51,13 @@ export interface ModalProps {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
 }
 export interface ModalState {
     displayNone: boolean;
     isFullScreen: boolean;
+    onOKReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
+    onCancelReturnPromiseStatus?: "pending" | "fulfilled" | "rejected";
 }
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     constructor(adapter: ModalAdapter);
@@ -63,5 +66,6 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     handleOk(e: any): void;
     beforeShow(): void;
     afterHide(): void;
+    enabledBodyScroll(): void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
 }

package/lib/es/modal/modalFoundation.js

@@ -1,35 +1,64 @@
 import BaseFoundation from '../base/foundation';
+import isPromise from "../utils/isPromise";
 export default class ModalFoundation extends BaseFoundation {
   constructor(adapter) {
-    super(Object.assign({}, adapter)); // afterClose() {
+    super(Object.assign({}, adapter));
+    // afterClose() {
     //     this._adapter.notifyClose();
     // }
-
     this.toggleDisplayNone = (displayNone, callback) => {
       this._adapter.toggleDisplayNone(displayNone, callback);
     };
   }
-
   destroy() {
     this.afterHide();
   }
-
   handleCancel(e) {
-    this._adapter.notifyCancel(e);
+    var _a;
+    const result = this._adapter.notifyCancel(e);
+    if (isPromise(result)) {
+      this._adapter.setState({
+        onCancelReturnPromiseStatus: "pending"
+      });
+      (_a = result === null || result === void 0 ? void 0 : result.then(() => {
+        this._adapter.setState({
+          onCancelReturnPromiseStatus: "fulfilled"
+        });
+      })) === null || _a === void 0 ? void 0 : _a.catch(e => {
+        this._adapter.setState({
+          onCancelReturnPromiseStatus: "rejected"
+        });
+        throw e;
+      });
+    }
   }
-
   handleOk(e) {
-    this._adapter.notifyOk(e);
+    var _a;
+    const result = this._adapter.notifyOk(e);
+    if (isPromise(result)) {
+      this._adapter.setState({
+        onOKReturnPromiseStatus: "pending"
+      });
+      (_a = result === null || result === void 0 ? void 0 : result.then(() => {
+        this._adapter.setState({
+          onOKReturnPromiseStatus: "fulfilled"
+        });
+      })) === null || _a === void 0 ? void 0 : _a.catch(e => {
+        this._adapter.setState({
+          onOKReturnPromiseStatus: "rejected"
+        });
+        throw e;
+      });
+    }
   }
-
   beforeShow() {
     this._adapter.disabledBodyScroll();
   }
-
   afterHide() {
     this._adapter.enabledBodyScroll();
-
     this._adapter.notifyClose();
   }
-
+  enabledBodyScroll() {
+    this._adapter.enabledBodyScroll();
+  }
 }

package/lib/es/modal/variables.scss

@@ -34,7 +34,7 @@ $spacing-modal_header-paddingX: 0;
 $spacing-modal_body_wrapper-marginY: 24px;
 $spacing-modal_body_wrapper-marginX: 0;
 $spacing-modal_body-margin: 0; // 模态框 body 外边距
-$spacing-modal_body-padding: 0; // 模态框 footer 垂直外边距
+$spacing-modal_body-padding: 0; // 模态框 内容外Padding
 $spacing-modal_footer-marginY: 24px; // 模态框 footer 垂直外边距
 $spacing-modal_footer-marginX: 0; // 模态框 footer 水平外边距
 $spacing-modal_footer-paddingY:0;
@@ -43,6 +43,7 @@ $spacing-modal_footer_button-marginLeft: $spacing-base-tight; // 模态框 foote
 $spacing-modal_footer_button-marginRight: 0; // 模态框 footer 按钮右侧外边距
 $spacing-modal_confirm_header-marginBottom: 8px; // 命令式调用模态框 header 底部外边距
 $spacing-modal_confirm_icon_wrapper-marginRight: $spacing-base-tight; // 命令式调用模态框图标右侧外边距
+$spacing-modal_content_fullscreen-top: 0px; // 模态框内容全屏顶部位置
 
 // Width/Height
 $width-modal_title: 100%; // 模态框标题宽度
@@ -70,3 +71,7 @@ $color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
 $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
+//shadow
+$shadow-modal_content: var(--semi-shadow-elevated);
+
+

package/lib/es/navigation/NavItem.js

@@ -6,10 +6,7 @@ export const DEFAULT_TOGGLE_ICON = {
 export default class NavItem {
   constructor() {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-    // eslint-disable-next-line eqeqeq
     if (options == null || typeof options !== 'object') {
-      // eslint-disable-next-line no-param-reassign
       options = {
         text: options,
         itemKey: options,
@@ -22,14 +19,11 @@ export default class NavItem {
         indent: false
       };
     }
-
     for (const key of Object.keys(options)) {
       this[key] = options[key];
     }
-
     if (options.items && Array.isArray(options.items) && options.items.length) {
       this.items = options.items.map(item => new NavItem(item));
-
       if ('toggleIcon' in options) {
         this.toggleIcon = NavItem.isValidToggleIcon(options.toggleIcon) ? Object.assign({}, options.toggleIcon) : Object.assign({}, DEFAULT_TOGGLE_ICON);
       } else {
@@ -39,9 +33,7 @@ export default class NavItem {
       this.items = null;
     }
   }
-
   static isValidToggleIcon(toggleIcon) {
     return Boolean(toggleIcon && typeof toggleIcon === 'object' && typeof toggleIcon.open === 'string' && toggleIcon.open.length && typeof toggleIcon.closed === 'string' && toggleIcon.closed.length);
   }
-
 }

package/lib/es/navigation/constants.js

@@ -2,7 +2,7 @@ import { BASE_CLASS_PREFIX } from '../base/constants';
 const MODE_HORIZONTAL = 'horizontal';
 const MODE_VERTICAL = 'vertical';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-navigation")
+  PREFIX: `${BASE_CLASS_PREFIX}-navigation`
 };
 const strings = {
   MODE: [MODE_VERTICAL, MODE_HORIZONTAL],
@@ -20,6 +20,6 @@ const numbers = {
   DEFAULT_TOOLTIP_HIDE_DELAY: 100,
   DEFAULT_SUBNAV_OPEN_DELAY: 0,
   DEFAULT_SUBNAV_CLOSE_DELAY: 100 // ms
-
 };
+
 export { cssClasses, strings, numbers };

package/lib/es/navigation/foundation.js

@@ -1,8 +1,4 @@
 import _get from "lodash/get";
-
-/* eslint-disable max-depth */
-
-/* eslint-disable max-len */
 import BaseFoundation from '../base/foundation';
 import NavItem from './NavItem';
 import { strings } from './constants';
@@ -12,51 +8,40 @@ export default class NavigationFoundation extends BaseFoundation {
     super(Object.assign({}, adapter));
   }
   /* istanbul ignore next */
-
-
   static getZeroParentKeys() {
     let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const willAddKeys = [];
-
     for (var _len = arguments.length, itemKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       itemKeys[_key - 1] = arguments[_key];
     }
-
     if (itemKeys.length) {
       for (const itemKey of itemKeys) {
         if (Array.isArray(itemKeysMap[itemKey]) && itemKeysMap[itemKey].length) {
           const levelZeroParentKey = itemKeysMap[itemKey][0];
-
           if (!isNullOrUndefined(levelZeroParentKey)) {
             willAddKeys.push(levelZeroParentKey);
           }
         }
       }
     }
-
     return willAddKeys;
   }
-
   static buildItemKeysMap() {
     let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let keysMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     let parentKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     let keyPropName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'itemKey';
-
     if (Array.isArray(items) && items.length) {
       for (const item of items) {
         if (Array.isArray(item)) {
           NavigationFoundation.buildItemKeysMap(item, keysMap, [...parentKeys], keyPropName);
         } else {
           let itemKey;
-
           if (item && typeof item === 'object') {
             itemKey = item[keyPropName] || item.props && item.props[keyPropName];
           }
-
           if (itemKey) {
             keysMap[itemKey] = [...parentKeys];
-
             if (Array.isArray(item.items) && item.items.length) {
               NavigationFoundation.buildItemKeysMap(item.items, keysMap, [...parentKeys, itemKey], keyPropName);
             } else if (item.props && item.props.children) {
@@ -67,7 +52,6 @@ export default class NavigationFoundation extends BaseFoundation {
         }
       }
     }
-
     return keysMap;
   }
   /**
@@ -77,8 +61,6 @@ export default class NavigationFoundation extends BaseFoundation {
    * @param {*} lifecycle
    * @returns
    */
-
-
   init(lifecycle) {
     const {
       defaultSelectedKeys,
@@ -92,7 +74,6 @@ export default class NavigationFoundation extends BaseFoundation {
     } = this.getCalcState();
     const parentSelectKeys = this.selectLevelZeroParentKeys(itemKeysMap, willSelectedKeys);
     willSelectedKeys = willSelectedKeys.concat(parentSelectKeys);
-
     if (lifecycle === 'constructor') {
       return {
         selectedKeys: willSelectedKeys,
@@ -102,23 +83,16 @@ export default class NavigationFoundation extends BaseFoundation {
       };
     } else {
       this._adapter.updateSelectedKeys(willSelectedKeys);
-
       this._adapter.setItemKeysMap(itemKeysMap);
-
       this._adapter.updateOpenKeys(willOpenKeys);
-
       this._adapter.updateItems(formattedItems);
-
       this._adapter.setItemsChanged(true);
     }
-
     return undefined;
   }
   /**
    * Get the state to be calculated
    */
-
-
   getCalcState() {
     const {
       itemKeysMap,
@@ -134,8 +108,6 @@ export default class NavigationFoundation extends BaseFoundation {
   /**
    * Calculate formatted items and itemsKeyMap
    */
-
-
   getFormattedItems() {
     const {
       items,
@@ -153,8 +125,6 @@ export default class NavigationFoundation extends BaseFoundation {
    * Calculate the keys that will need to be opened soon
    * @param {*} itemKeysMap
    */
-
-
   getWillOpenKeys(itemKeysMap) {
     const {
       defaultOpenKeys,
@@ -164,114 +134,84 @@ export default class NavigationFoundation extends BaseFoundation {
       mode
     } = this.getProps();
     let willOpenKeys = openKeys || defaultOpenKeys || [];
-
     if (!(Array.isArray(defaultOpenKeys) || Array.isArray(openKeys)) && mode === strings.MODE_VERTICAL && (Array.isArray(defaultSelectedKeys) || Array.isArray(selectedKeys))) {
       const currentSelectedKeys = Array.isArray(selectedKeys) ? selectedKeys : defaultSelectedKeys;
       willOpenKeys = this.getShouldOpenKeys(itemKeysMap, currentSelectedKeys);
     }
-
     return [...willOpenKeys];
   }
-
   getShouldOpenKeys() {
     let itemKeysMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let selectedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     const willOpenKeySet = new Set();
-
     if (Array.isArray(selectedKeys) && selectedKeys.length) {
       selectedKeys.forEach(item => {
         if (item) {
           const parentKeys = _get(itemKeysMap, item);
-
           if (Array.isArray(parentKeys)) {
             parentKeys.forEach(k => willOpenKeySet.add(k));
           }
         }
       });
     }
-
     return [...willOpenKeySet];
   }
-
-  destroy() {} // eslint-disable-line
-
-
+  destroy() {}
   selectLevelZeroParentKeys(itemKeysMap) {
-    const _itemKeysMap = isNullOrUndefined(itemKeysMap) ? this.getState('itemKeysMap') : itemKeysMap; // console.log(itemKeysMap);
-
-
+    const _itemKeysMap = isNullOrUndefined(itemKeysMap) ? this.getState('itemKeysMap') : itemKeysMap;
+    // console.log(itemKeysMap);
     const willAddKeys = [];
-
     for (var _len2 = arguments.length, itemKeys = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       itemKeys[_key2 - 1] = arguments[_key2];
     }
-
     if (itemKeys.length) {
       for (const itemKey of itemKeys) {
         if (Array.isArray(_itemKeysMap[itemKey]) && _itemKeysMap[itemKey].length) {
           const levelZeroParentKey = _itemKeysMap[itemKey][0];
-
           if (!isNullOrUndefined(levelZeroParentKey)) {
             willAddKeys.push(levelZeroParentKey);
           }
         }
       }
     }
-
     if (willAddKeys.length) {
       return willAddKeys;
     }
-
     return [];
   }
-
   formatItems() {
     let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     const formattedItems = [];
-
     for (const item of items) {
       formattedItems.push(new NavItem(item));
     }
-
     return formattedItems;
   }
-
   handleSelect(data) {
     this._adapter.notifySelect(data);
   }
   /* istanbul ignore next */
-
-
   judgeIfOpen(openKeys, items) {
     let shouldBeOpen = false;
-
     const _openKeys = Array.isArray(openKeys) ? openKeys : openKeys && [openKeys];
-
     if (_openKeys && Array.isArray(items) && items.length) {
       for (const item of items) {
         shouldBeOpen = _openKeys.includes(item.itemKey) || this.judgeIfOpen(_openKeys, item.items);
-
         if (shouldBeOpen) {
           break;
         }
       }
     }
-
     return shouldBeOpen;
   }
-
   handleCollapseChange() {
     const isCollapsed = !this.getState('isCollapsed');
-
     if (!this._isControlledComponent('isCollapsed')) {
       this._adapter.setIsCollapsed(isCollapsed);
     }
-
     this._adapter.notifyCollapseChange(isCollapsed);
   }
-
   handleItemsChange(isChanged) {
     this._adapter.setItemsChanged(isChanged);
   }
-
 }