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

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

@@ -14,7 +14,7 @@ export interface StateOptionItem extends DataItem {
     show?: boolean;
     key?: string | number;
 }
-export declare type AutoCompleteData = Array<DataItem | string>;
+export type AutoCompleteData = Array<DataItem | string>;
 export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string, any>> extends KeyboardAdapter<P, S> {
     getTriggerWidth: () => number | undefined;
     setOptionWrapperWidth: (width: number) => void;
@@ -31,6 +31,8 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyBlur: (event?: any) => void;
     rePositionDropdown: () => void;
     persistEvent: (event: any) => void;
+    registerClickOutsideHandler: (cb: (e: any) => void) => void;
+    unregisterClickOutsideHandler: () => void;
 }
 declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
     private _keydownHandler;

package/lib/es/autoComplete/foundation.js

@@ -2,55 +2,43 @@ import _isObject from "lodash/isObject";
 import _isUndefined from "lodash/isUndefined";
 import _isNumber from "lodash/isNumber";
 import _isString from "lodash/isString";
-
-/* eslint-disable prefer-const, max-len */
 import BaseFoundation from '../base/foundation';
 import warning from '../utils/warning';
 import KeyCode from '../utils/keyCode';
-
 class AutoCompleteFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     this.isPanelOpen = false;
   }
-
   init() {
     this._setDropdownWidth();
-
     const {
       defaultOpen,
       data,
       defaultValue,
       value
     } = this.getProps();
-
     if (data && data.length) {
       const initOptions = this._generateList(data);
-
       this._adapter.updateOptionList(initOptions);
     }
-
     if (defaultOpen) {
       this.openDropdown();
-    } // When both defaultValue and value exist, finally the value of value will be taken as initValue
-
-
+    }
+    // When both defaultValue and value exist, finally the value of value will be taken as initValue
     let initValue;
-
     if (typeof defaultValue !== 'undefined') {
       initValue = defaultValue;
     }
-
     if (typeof value !== 'undefined') {
       initValue = value;
     }
-
     if (typeof initValue !== 'undefined') {
       this.handleValueChange(initValue);
     }
   }
-
-  destroy() {// this._adapter.unregisterClickOutsideHandler();
+  destroy() {
+    this._adapter.unregisterClickOutsideHandler();
     // this.unBindKeyBoardEvent();
   }
 
@@ -60,7 +48,6 @@ class AutoCompleteFoundation extends BaseFoundation {
       dropdownMatchSelectWidth
     } = this.getProps();
     let width;
-
     if (dropdownMatchSelectWidth) {
       if (style && _isNumber(style.width)) {
         width = style.width;
@@ -69,11 +56,9 @@ class AutoCompleteFoundation extends BaseFoundation {
       } else {
         width = this._adapter.getTriggerWidth();
       }
-
       this._adapter.setOptionWrapperWidth(width);
     }
   }
-
   handleInputClick(e) {
     const {
       options
@@ -81,7 +66,6 @@ class AutoCompleteFoundation extends BaseFoundation {
     const {
       disabled
     } = this.getProps();
-
     if (!disabled) {
       if (this.isPanelOpen) {
         this.closeDropdown();
@@ -90,43 +74,32 @@ class AutoCompleteFoundation extends BaseFoundation {
       }
     }
   }
-
   openDropdown() {
     this.isPanelOpen = true;
-
     this._adapter.toggleListVisible(true);
-
-    this._setDropdownWidth(); // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
-
-
+    this._setDropdownWidth();
+    this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
     this._adapter.notifyDropdownVisibleChange(true);
-
     this._modifyFocusIndexOnPanelOpen();
   }
-
   closeDropdown(e) {
     this.isPanelOpen = false;
-
-    this._adapter.toggleListVisible(false); // this._adapter.unregisterClickOutsideHandler();
-
-
-    this._adapter.notifyDropdownVisibleChange(false); // After closing the panel, you can still open the panel by pressing the enter key
+    this._adapter.toggleListVisible(false);
+    this._adapter.unregisterClickOutsideHandler();
+    this._adapter.notifyDropdownVisibleChange(false);
+    // After closing the panel, you can still open the panel by pressing the enter key
     // this.unBindKeyBoardEvent();
-
-  } // props.data => optionList
-
-
+  }
+  // props.data => optionList
   _generateList(data) {
     const {
       renderItem
     } = this.getProps();
     const options = [];
-
     if (data && data.length) {
       data.forEach((item, i) => {
         const key = String(new Date().getTime()) + i;
         let option = {};
-
         if (_isString(item) || _isNumber(item)) {
           option = {
             value: item,
@@ -139,47 +112,36 @@ class AutoCompleteFoundation extends BaseFoundation {
             show: true
           }, item);
         }
-
         if (renderItem && typeof renderItem === 'function') {
           option.label = renderItem(item);
         }
-
         options.push(option);
       });
     }
-
     return options;
   }
-
   handleSearch(inputValue) {
     this._adapter.updateInputValue(inputValue);
-
     this._adapter.notifySearch(inputValue);
-
     this._adapter.notifyChange(inputValue);
-
     this._modifyFocusIndex(inputValue);
-
     if (!this.isPanelOpen) {
       this.openDropdown();
     }
   }
-
   handleSelect(option, optionIndex) {
     const {
       renderSelectedItem
     } = this.getProps();
     let newInputValue = '';
-
     if (renderSelectedItem && typeof renderSelectedItem === 'function') {
       newInputValue = renderSelectedItem(option);
       warning(typeof newInputValue !== 'string', 'Warning: [Semi AutoComplete] renderSelectedItem must return string, please check your function return');
     } else {
       newInputValue = option.value;
-    } // 1. trigger onSelect
+    }
+    // 1. trigger onSelect
     // 2. close Dropdown
-
-
     if (this._isControlledComponent()) {
       this.closeDropdown();
       this.notifySelect(option);
@@ -189,27 +151,20 @@ class AutoCompleteFoundation extends BaseFoundation {
       // 3. trigger onSelect
       // 4. close Dropdown
       this._adapter.updateInputValue(newInputValue);
-
       this.updateSelection(option);
       this.notifySelect(option);
       this.closeDropdown();
     }
-
     this._adapter.notifyChange(newInputValue);
-
     this._adapter.updateFocusIndex(optionIndex);
   }
-
   updateSelection(option) {
     const selection = new Map();
-
     if (option) {
       selection.set(option.label, option);
     }
-
     this._adapter.updateSelection(selection);
   }
-
   notifySelect(option) {
     if (this._backwardLabelInValue()) {
       this._adapter.notifySelect(option);
@@ -217,7 +172,6 @@ class AutoCompleteFoundation extends BaseFoundation {
       this._adapter.notifySelect(option.value);
     }
   }
-
   _backwardLabelInValue() {
     const props = this.getProps();
     let {
@@ -225,38 +179,29 @@ class AutoCompleteFoundation extends BaseFoundation {
     } = props;
     return onSelectWithObject;
   }
-
   handleDataChange(newData) {
     const options = this._generateList(newData);
-
     this._adapter.updateOptionList(options);
-
     this._adapter.rePositionDropdown();
   }
-
   handleValueChange(propValue) {
     let {
       data,
       defaultActiveFirstOption
     } = this.getProps();
     let selectedValue = '';
-
     if (this._backwardLabelInValue() && Object.prototype.toString.call(propValue) === '[object Object]') {
       selectedValue = propValue.value;
     } else {
       selectedValue = propValue;
     }
-
     let renderSelectedItem = this._getRenderSelectedItem();
-
-    const options = this._generateList(data); // Get the option whose value match from options
-
-
-    let selectedOption = options.filter(option => renderSelectedItem(option) === selectedValue);
+    const options = this._generateList(data);
+    // Get the option whose value match from options
+    let selectedOption = options.length ? options.filter(option => renderSelectedItem(option) === selectedValue) : [];
     const canMatchInData = selectedOption.length;
     const selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === selectedValue);
     let inputValue = '';
-
     if (canMatchInData) {
       selectedOption = selectedOption[0];
       inputValue = renderSelectedItem(selectedOption);
@@ -267,18 +212,14 @@ class AutoCompleteFoundation extends BaseFoundation {
       };
       inputValue = renderSelectedItem(cbItem);
     }
-
     this._adapter.updateInputValue(inputValue);
-
     this.updateSelection(canMatchInData ? selectedOption : null);
-
     if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
       this._adapter.updateFocusIndex(0);
     } else {
       this._adapter.updateFocusIndex(selectedOptionIndex);
     }
   }
-
   _modifyFocusIndex(searchValue) {
     let {
       focusIndex
@@ -287,13 +228,12 @@ class AutoCompleteFoundation extends BaseFoundation {
       data,
       defaultActiveFirstOption
     } = this.getProps();
-
-    let renderSelectedItem = this._getRenderSelectedItem();
-
-    const options = this._generateList(data);
-
-    const selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === searchValue);
-
+    let selectedOptionIndex = -1;
+    if (searchValue) {
+      let renderSelectedItem = this._getRenderSelectedItem();
+      const options = this._generateList(data);
+      selectedOptionIndex = options.findIndex(option => renderSelectedItem(option) === searchValue);
+    }
     if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
       if (focusIndex !== 0) {
         this._adapter.updateFocusIndex(0);
@@ -304,87 +244,71 @@ class AutoCompleteFoundation extends BaseFoundation {
       }
     }
   }
-
   _modifyFocusIndexOnPanelOpen() {
     let {
       inputValue
     } = this.getStates();
-
     this._modifyFocusIndex(inputValue);
   }
-
   _getRenderSelectedItem() {
     let {
       renderSelectedItem
     } = this.getProps();
-
     if (typeof renderSelectedItem === 'undefined') {
-      renderSelectedItem = option => option.value;
-    } else if (renderSelectedItem && typeof renderSelectedItem === 'function') {// do nothing
+      renderSelectedItem = option => {
+        return option === null || option === void 0 ? void 0 : option.value;
+      };
+    } else if (renderSelectedItem && typeof renderSelectedItem === 'function') {
+      // do nothing
     }
-
     return renderSelectedItem;
   }
-
   handleClear() {
     this._adapter.notifyClear();
   }
-
   bindKeyBoardEvent() {
     this._keydownHandler = event => {
       this._handleKeyDown(event);
     };
-
     this._adapter.registerKeyDown(this._keydownHandler);
-  } // unBindKeyBoardEvent() {
+  }
+  // unBindKeyBoardEvent() {
   //     if (this._keydownHandler) {
   //         this._adapter.unregisterKeyDown(this._keydownHandler);
   //     }
   // }
-
-
   _handleKeyDown(event) {
     const key = event.keyCode;
     const {
       visible
     } = this.getStates();
-
     switch (key) {
       case KeyCode.UP:
         // Prevent Input's cursor from following the movement
         event.preventDefault();
-
         this._handleArrowKeyDown(-1);
-
         break;
-
       case KeyCode.DOWN:
         // Prevent Input's cursor from following the movement
         event.preventDefault();
-
         this._handleArrowKeyDown(1);
-
         break;
-
       case KeyCode.ENTER:
         // when custom trigger, prevent outer open panel again
         event.preventDefault();
-
         this._handleEnterKeyDown();
-
         break;
-
       case KeyCode.ESC:
         this.closeDropdown();
         break;
-
+      case KeyCode.TAB:
+        this.closeDropdown();
+        break;
       default:
         break;
     }
-
     this._adapter.notifyKeyDown(event);
   }
-
   _getEnableFocusIndex(offset) {
     const {
       focusIndex,
@@ -393,72 +317,56 @@ class AutoCompleteFoundation extends BaseFoundation {
     const visibleOptions = options.filter(item => item.show);
     const optionsLength = visibleOptions.length;
     let index = focusIndex + offset;
-
     if (index < 0) {
       index = optionsLength - 1;
     }
-
     if (index >= optionsLength) {
       index = 0;
-    } // avoid newIndex option is disabled
-
-
+    }
+    // avoid newIndex option is disabled
     if (offset > 0) {
       let nearestActiveOption = -1;
-
       for (let i = 0; i < visibleOptions.length; i++) {
         const optionIsActive = !visibleOptions[i].disabled;
-
         if (optionIsActive) {
           nearestActiveOption = i;
         }
-
         if (nearestActiveOption >= index) {
           break;
         }
       }
-
       index = nearestActiveOption;
     } else {
       let nearestActiveOption = visibleOptions.length;
-
       for (let i = optionsLength - 1; i >= 0; i--) {
         const optionIsActive = !visibleOptions[i].disabled;
-
         if (optionIsActive) {
           nearestActiveOption = i;
         }
-
         if (nearestActiveOption <= index) {
           break;
         }
       }
-
       index = nearestActiveOption;
     }
-
     this._adapter.updateFocusIndex(index);
   }
-
   _handleArrowKeyDown(offset) {
     const {
       visible
     } = this.getStates();
-
     if (!visible) {
       this.openDropdown();
     } else {
       this._getEnableFocusIndex(offset);
     }
   }
-
   _handleEnterKeyDown() {
     const {
       visible,
       options,
       focusIndex
     } = this.getStates();
-
     if (!visible) {
       this.openDropdown();
     } else {
@@ -471,33 +379,20 @@ class AutoCompleteFoundation extends BaseFoundation {
       }
     }
   }
-
   handleOptionMouseEnter(optionIndex) {
     this._adapter.updateFocusIndex(optionIndex);
   }
-
   handleFocus(e) {
     // If you get the focus through the tab key, you need to manually bind keyboard events
     // Then you can open the panel by pressing the enter key
     this.bindKeyBoardEvent();
-
     this._adapter.notifyFocus(e);
   }
-
   handleBlur(e) {
     // only need persist on react adapter
     // https://reactjs.org/docs/legacy-event-pooling.html
-    this._persistEvent(e); // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
-    // internal-issues:1231
-
-
-    setTimeout(() => {
-      this._adapter.notifyBlur(e);
-
-      this.closeDropdown();
-    }, 100);
+    this._persistEvent(e);
+    this._adapter.notifyBlur(e);
   }
-
 }
-
 export default AutoCompleteFoundation;

package/lib/es/autoComplete/optionFoundation.js

@@ -2,24 +2,16 @@ import BaseFoundation from '../base/foundation';
 export default class OptionFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  }
+  init() {}
   destroy() {}
-
   onOptionClick(option) {
     const isDisabled = this._isDisabled();
-
     if (!isDisabled) {
       this._adapter.notifyClick(option);
     }
   }
-
   _isDisabled() {
     return this.getProp('disabled');
   }
-
 }

package/lib/es/avatar/animation.scss

@@ -0,0 +1,19 @@
+$animation_duration-additionalBorder: 800ms; // 边框动画持续时间
+$animation_duration-content: 1000ms; // 内容动画持续时间
+
+
+$animation_opacity-additionalBorder-start: 1; // 边框动画起始透明度
+$animation_opacity-additionalBorder-end: 0; // 边框动画结束透明度
+
+
+$animation_width-additionalBorder-end:0; // 边框动画结束宽度
+
+
+$animation_scale-additionalBorder-start: 1; // 边框动画起始缩放比例
+$animation_scale-additionalBorder-end: 1.15; // 边框动画结束缩放比例
+
+$animation_scale-content-start: 1; // 边框动画起始缩放比例
+$animation_scale-content-middle: 0.9; // 边框动画中间态缩放比例
+$animation_scale-content-end: 1; // 边框动画结束缩放比例
+
+