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

package/lib/es/autoComplete/foundation.js

@@ -2,65 +2,52 @@ 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();
   }
-
   _setDropdownWidth() {
     const {
       style,
       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
-
-
+    const options = this._generateList(data);
+    // Get the option whose value match from options
     let selectedOption = 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,9 @@ 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);
-
     if (selectedOptionIndex === -1 && defaultActiveFirstOption) {
       if (focusIndex !== 0) {
         this._adapter.updateFocusIndex(0);
@@ -304,87 +241,66 @@ 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
+    } 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;
-
       default:
         break;
     }
-
     this._adapter.notifyKeyDown(event);
   }
-
   _getEnableFocusIndex(offset) {
     const {
       focusIndex,
@@ -393,72 +309,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 +371,25 @@ 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
+    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);
   }
-
 }
-
 export default AutoCompleteFoundation;

package/lib/es/autoComplete/optionFoundation.js

@@ -2,24 +2,18 @@ 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
-
-
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  init() {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   destroy() {}
-
   onOptionClick(option) {
     const isDisabled = this._isDisabled();
-
     if (!isDisabled) {
       this._adapter.notifyClick(option);
     }
   }
-
   _isDisabled() {
     return this.getProp('disabled');
   }
-
 }

package/lib/es/avatar/foundation.js

@@ -3,12 +3,10 @@ import warning from '../utils/warning';
 export default class AvatarFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.handleFocusVisible = event => {
       const {
         target
       } = event;
-
       try {
         if (target.matches(':focus-visible')) {
           this._adapter.setFocusVisible(true);
@@ -17,35 +15,25 @@ export default class AvatarFoundation extends BaseFoundation {
         warning(true, 'Warning: [Semi Avatar] The current browser does not support the focus-visible');
       }
     };
-
     this.handleBlur = () => {
       this._adapter.setFocusVisible(false);
     };
   }
-
   init() {} // eslint-disable-line
-
-
   destroy() {} // eslint-disable-line
-
-
   handleImgLoadError() {
     const {
       onError
     } = this.getProps();
     const errorFlag = onError ? onError() : undefined;
-
     if (errorFlag !== false) {
       this._adapter.notifyImgState(false);
     }
   }
-
   handleEnter(e) {
     this._adapter.notifyEnter(e);
   }
-
   handleLeave(e) {
     this._adapter.notifyLeave(e);
   }
-
 }

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

@@ -1,6 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type BackTopClickEvent = any;
-export declare type Target = any;
+export type BackTopClickEvent = any;
+export type Target = any;
 export interface BackTopAdapter extends DefaultAdapter {
     updateVisible: (visible: boolean) => void;
     notifyClick: (e: BackTopClickEvent) => void;

package/lib/es/backtop/foundation.js

@@ -3,7 +3,6 @@ import { Animation } from '@douyinfe/semi-animation';
 export default class BackTopFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.scrollTo = (targetNode, from, to) => {
       const {
         duration
@@ -23,29 +22,23 @@ export default class BackTopFoundation extends BaseFoundation {
         let {
           scrollTop
         } = _ref;
-
         this._adapter.targetScrollToTop(targetNode, scrollTop);
       });
       this.animation.start();
     };
-
     this.handleScroll = () => {
       const {
         target,
         visibilityHeight
       } = this.getProps();
       const targetNode = target();
-
       const update = () => {
         const scrollTop = this.getScroll(targetNode);
-
         this._adapter.updateVisible(scrollTop > visibilityHeight);
       };
-
       requestAnimationFrame(update);
     };
   }
-
   init() {
     const {
       target
@@ -54,7 +47,6 @@ export default class BackTopFoundation extends BaseFoundation {
     targetNode.addEventListener('scroll', this.handleScroll);
     this.handleScroll();
   }
-
   destroy() {
     const {
       target
@@ -63,21 +55,16 @@ export default class BackTopFoundation extends BaseFoundation {
     targetNode && targetNode.removeEventListener('scroll', this.handleScroll);
     this.animation && this.animation.destroy();
   }
-
   getScroll(target) {
     if (this._adapter.isWindowUndefined()) {
       return 0;
     }
-
     const prop = 'pageYOffset';
     const method = 'scrollTop';
-
     const isWindow = this._adapter.targetIsWindow(target);
-
     const scroll = isWindow ? target[prop] : target[method];
     return scroll;
   }
-
   setScrollTop(to) {
     const {
       target
@@ -86,11 +73,8 @@ export default class BackTopFoundation extends BaseFoundation {
     const from = this.getScroll(targetNode);
     this.scrollTo(targetNode, from, to);
   }
-
   onClick(e) {
     this.setScrollTop(0);
-
     this._adapter.notifyClick(e);
   }
-
 }

package/lib/es/banner/foundation.js

@@ -3,11 +3,8 @@ export default class BannerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, BannerFoundation.defaultAdapter), adapter));
   }
-
   removeBanner(e) {
     this._adapter.notifyClose(e);
-
     this._adapter.setVisible();
   }
-
 }

package/lib/es/base/constants.js

@@ -1,4 +1,4 @@
 import { BASE_CLASS_PREFIX } from './env';
-const VALIDATE_STATUS = ['default', 'error', 'warning', 'success']; // const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
-
+const VALIDATE_STATUS = ['default', 'error', 'warning', 'success'];
+// const VALIDATE_STATUS = ['default', 'error', 'warning', 'success', 'validating'] as const;
 export { BASE_CLASS_PREFIX, VALIDATE_STATUS };

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

@@ -3,7 +3,7 @@
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  *
  */
-export declare type noopFunction = (...args: any) => any;
+export type noopFunction = (...args: any) => any;
 export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>> {
     getContext(key: string): any;
     getContexts(): any;