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

package/lib/es/input/foundation.js

@@ -6,70 +6,58 @@ import _noop from "lodash/noop";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
 import { ENTER_KEY } from './../utils/keyCode';
-
 class InputFoundation extends BaseFoundation {
-  constructor(adapter) {
-    super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
-  }
-
   static get inputDefaultAdapter() {
     return {
       notifyChange: _noop,
-      setValue: _noop // toggleAllowClear: noop,
-
+      setValue: _noop
+      // toggleAllowClear: noop,
     };
   }
 
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, InputFoundation.inputDefaultAdapter), adapter));
+  }
   init() {
     this._setInitValue();
   }
-
   destroy() {
     if (this._timer) {
       clearTimeout(this._timer);
       this._timer = null;
     }
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   setDisable() {}
-
   _setInitValue() {
     const {
       defaultValue,
       value
     } = this.getProps();
     let v = defaultValue;
-
     if (this._isControlledComponent()) {
       v = value;
     }
-
-    this._adapter.setValue(v); // this.checkAllowClear(v);
-
+    this._adapter.setValue(v);
+    // this.checkAllowClear(v);
   }
 
   setValue(value) {
     this._adapter.setValue(value);
   }
-
   handleChange(value, e) {
     const {
       maxLength,
       minLength,
       getValueLength
     } = this._adapter.getProps();
-
     let nextValue = value;
-
     if (maxLength && _isFunction(getValueLength)) {
       nextValue = this.handleVisibleMaxLength(value);
     }
-
     if (minLength && _isFunction(getValueLength)) {
       this.handleVisibleMinLength(nextValue);
     }
-
     if (this._isControlledComponent()) {
       /**
        * If it is a controlled component, directly notify the caller of the modified value.
@@ -79,9 +67,8 @@ class InputFoundation extends BaseFoundation {
       this._adapter.notifyChange(nextValue, e);
     } else {
       this._adapter.setValue(nextValue);
-
-      this._adapter.notifyChange(nextValue, e); // this.checkAllowClear(value);
-
+      this._adapter.notifyChange(nextValue, e);
+      // this.checkAllowClear(value);
     }
   }
   /**
@@ -89,21 +76,16 @@ class InputFoundation extends BaseFoundation {
    * Controlled mode is not checked
    * @param {String} value
    */
-
-
   handleVisibleMinLength(value) {
     const {
       minLength,
       getValueLength
     } = this._adapter.getProps();
-
     const {
       minLength: stateMinLength
     } = this._adapter.getStates();
-
     if (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
-
       if (valueLength < minLength) {
         const newMinLength = value.length + (minLength - valueLength);
         newMinLength !== stateMinLength && this._adapter.setMinLength(newMinLength);
@@ -117,17 +99,13 @@ class InputFoundation extends BaseFoundation {
    * Controlled mode is not checked
    * @param {String} value
    */
-
-
   handleVisibleMaxLength(value) {
     const {
       maxLength,
       getValueLength
     } = this._adapter.getProps();
-
     if (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
-
       if (valueLength > maxLength) {
         // eslint-disable-next-line max-len
         console.warn('[Semi Input] The input character is truncated because the input length exceeds the maximum length limit');
@@ -144,36 +122,29 @@ class InputFoundation extends BaseFoundation {
    * @param {Number} maxLength
    * @returns {String}
    */
-
-
   handleTruncateValue(value, maxLength) {
     const {
       getValueLength
     } = this._adapter.getProps();
-
     if (_isFunction(getValueLength)) {
       let truncatedValue = '';
-
       for (let i = 1, len = value.length; i <= len; i++) {
         const currentValue = value.slice(0, i);
-
         if (getValueLength(currentValue) > maxLength) {
           return truncatedValue;
         } else {
           truncatedValue = currentValue;
         }
       }
-
       return truncatedValue;
     } else {
       return value.slice(0, maxLength);
     }
   }
-
   handleClear(e) {
     let eventObj = e;
-    const value = ''; // let input = this._adapter.getInput();
-
+    const value = '';
+    // let input = this._adapter.getInput();
     if (this._isControlledComponent('value')) {
       this._adapter.setState({
         isFocus: false
@@ -184,18 +155,12 @@ class InputFoundation extends BaseFoundation {
         isFocus: false
       });
     }
-
     if (!eventObj || typeof eventObj !== 'object') {
       eventObj = {};
     }
-
     _set(eventObj, strings.CLEARBTN_CLICKED_EVENT_FLAG, true); // this is useful for DateInput
-
-
     this._adapter.notifyChange(value, eventObj);
-
     this._adapter.notifyClear(eventObj);
-
     if (eventObj) {
       // When input is in popover and popover needs to judge clickOutSide, such as TreeSelect
       // If the click event bubbles up, it will mistakenly trigger clickOutSide's judgment.
@@ -208,29 +173,22 @@ class InputFoundation extends BaseFoundation {
    * trigger when click input wrapper
    * @param {Event} e
    */
-
-
   handleClick(e) {
     const {
       disabled
     } = this._adapter.getProps();
-
     const {
       isFocus
     } = this._adapter.getStates();
-
     if (disabled || isFocus) {
       return;
-    } // do not handle bubbling up events
-
-
+    }
+    // do not handle bubbling up events
     if (this._adapter.isEventTarget(e)) {
       this._adapter.focusInput();
-
       this._adapter.toggleFocusing(true);
     }
   }
-
   handleModeChange(mode) {
     if (mode === 'password') {
       this._adapter.setEyeClosed(true);
@@ -238,106 +196,78 @@ class InputFoundation extends BaseFoundation {
       this._adapter.setEyeClosed(false);
     }
   }
-
   handleClickEye(e) {
     const eyeClosed = this._adapter.getState('eyeClosed');
-
     this._adapter.focusInput();
-
     this._adapter.toggleFocusing(true);
-
     this._adapter.setEyeClosed(!eyeClosed);
   }
-
   handleInputType(type) {
     const mode = this._adapter.getProp('mode');
-
     const eyeClosed = this._adapter.getState('eyeClosed');
-
     if (mode === 'password') {
       return eyeClosed ? 'password' : 'text';
     }
-
     return type;
   }
-
   handleMouseDown(e) {
     e.preventDefault();
   }
-
   handleMouseUp(e) {
     e.preventDefault();
   }
-
   handleBlur(e) {
     const {
       value
     } = this.getStates();
-
     this._adapter.toggleFocusing(false);
-
     this._adapter.notifyBlur(value, e);
   }
-
   handleFocus(e) {
     const {
       value
     } = this.getStates();
-
-    this._adapter.toggleFocusing(true); // this.checkAllowClear(this.getState('value'), true);
-
-
+    this._adapter.toggleFocusing(true);
+    // this.checkAllowClear(this.getState('value'), true);
     this._adapter.notifyFocus(value, e);
   }
-
   handleInput(e) {
     this._adapter.notifyInput(e);
   }
-
   handleKeyDown(e) {
     this._adapter.notifyKeyDown(e);
   }
-
   handleKeyUp(e) {
     this._adapter.notifyKeyUp(e);
   }
-
   handleKeyPress(e) {
     this._adapter.notifyKeyPress(e);
-
     if (e.key === ENTER_KEY) {
       this._adapter.notifyEnterPress(e);
     }
   }
-
   isAllowClear() {
     const {
       value,
       isFocus,
       isHovering
     } = this._adapter.getStates();
-
     const {
       showClear,
       disabled
     } = this._adapter.getProps();
-
     const allowClear = value && showClear && !disabled && (isFocus || isHovering);
     return allowClear;
   }
-
   handleClickPrefixOrSuffix(e) {
     const {
       disabled
     } = this._adapter.getProps();
-
     const {
       isFocus
     } = this._adapter.getStates();
-
     if (!disabled && !isFocus) {
       this._adapter.focusInput();
-
       this._adapter.toggleFocusing(true);
     }
   }
@@ -345,8 +275,6 @@ class InputFoundation extends BaseFoundation {
    * Blocking mousedown events prevents input from losing focus
    * @param {Event} e
    */
-
-
   handlePreventMouseDown(e) {
     if (e && _isFunction(e.preventDefault)) {
       e.preventDefault();
@@ -355,8 +283,6 @@ class InputFoundation extends BaseFoundation {
   /**
    * A11y: simulate password button click
    */
-
-
   handleModeEnterPress(e) {
     // trigger by Enter or Space key
     if (['Enter', ' '].includes(e === null || e === void 0 ? void 0 : e.key)) {
@@ -364,7 +290,5 @@ class InputFoundation extends BaseFoundation {
       this.handleClickEye(e);
     }
   }
-
 }
-
 export default InputFoundation;

package/lib/es/input/textareaFoundation.js

@@ -6,9 +6,20 @@ import BaseFoundation from '../base/foundation';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
 export default class TextAreaFoundation extends BaseFoundation {
+  static get textAreaDefaultAdapter() {
+    return {
+      notifyChange: _noop,
+      setValue: _noop,
+      toggleFocusing: _noop,
+      toggleHovering: _noop,
+      notifyFocus: _noop,
+      notifyBlur: _noop,
+      notifyKeyDown: _noop,
+      notifyEnterPress: _noop
+    };
+  }
   constructor(adapter) {
     super(Object.assign(Object.assign({}, TextAreaFoundation.textAreaDefaultAdapter), adapter));
-
     this.resizeTextarea = cb => {
       const {
         height
@@ -16,90 +27,60 @@ export default class TextAreaFoundation extends BaseFoundation {
       const {
         rows
       } = this.getProps();
-
       const node = this._adapter.getRef();
-
       const nodeSizingData = getSizingData(node);
-
       if (!nodeSizingData) {
         cb && cb();
         return;
       }
-
-      const newHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', rows // maxRows,
+      const newHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', rows
+      // maxRows,
       );
 
       if (height !== newHeight) {
         this._adapter.notifyHeightUpdate(newHeight);
-
         node.style.height = `${newHeight}px`;
         return;
       }
-
       cb && cb();
     };
   }
-
-  static get textAreaDefaultAdapter() {
-    return {
-      notifyChange: _noop,
-      setValue: _noop,
-      toggleFocusing: _noop,
-      toggleHovering: _noop,
-      notifyFocus: _noop,
-      notifyBlur: _noop,
-      notifyKeyDown: _noop,
-      notifyEnterPress: _noop
-    };
-  }
-
   init() {
     this.setInitValue();
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   destroy() {}
-
   setInitValue() {
     const {
       defaultValue,
       value
     } = this.getProps();
     let v = defaultValue;
-
     if (this._isControlledComponent()) {
       v = value;
     }
-
     this._adapter.setValue(v);
   }
-
   handleValueChange(v) {
     this._adapter.setValue(v);
   }
-
   handleChange(value, e) {
     const {
       maxLength,
       minLength,
       getValueLength
     } = this._adapter.getProps();
-
     let nextValue = value;
-
     if (maxLength && _isFunction(getValueLength)) {
       nextValue = this.handleVisibleMaxLength(value);
     }
-
     if (minLength && _isFunction(getValueLength)) {
       this.handleVisibleMinLength(nextValue);
     }
-
     if (this._isControlledComponent()) {
       this._adapter.notifyChange(nextValue, e);
     } else {
       this._adapter.setValue(nextValue);
-
       this._adapter.notifyChange(nextValue, e);
     }
   }
@@ -108,21 +89,16 @@ export default class TextAreaFoundation extends BaseFoundation {
    * Controlled mode is not checked
    * @param {String} value
    */
-
-
   handleVisibleMinLength(value) {
     const {
       minLength,
       getValueLength
     } = this._adapter.getProps();
-
     const {
       minLength: stateMinLength
     } = this._adapter.getStates();
-
     if (_isNumber(minLength) && minLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
-
       if (valueLength < minLength) {
         const newMinLength = value.length + (minLength - valueLength);
         newMinLength !== stateMinLength && this._adapter.setMinLength(newMinLength);
@@ -136,17 +112,13 @@ export default class TextAreaFoundation extends BaseFoundation {
    * Controlled mode is not checked
    * @param {String} value
    */
-
-
   handleVisibleMaxLength(value) {
     const {
       maxLength,
       getValueLength
     } = this._adapter.getProps();
-
     if (_isNumber(maxLength) && maxLength >= 0 && _isFunction(getValueLength) && _isString(value)) {
       const valueLength = getValueLength(value);
-
       if (valueLength > maxLength) {
         // eslint-disable-next-line max-len
         console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
@@ -156,7 +128,6 @@ export default class TextAreaFoundation extends BaseFoundation {
         return value;
       }
     }
-
     return undefined;
   }
   /**
@@ -165,92 +136,71 @@ export default class TextAreaFoundation extends BaseFoundation {
    * @param {Number} maxLength
    * @returns {String}
    */
-
-
   handleTruncateValue(value, maxLength) {
     const {
       getValueLength
     } = this._adapter.getProps();
-
     if (_isFunction(getValueLength)) {
       let truncatedValue = '';
-
       for (let i = 1, len = value.length; i <= len; i++) {
         const currentValue = value.slice(0, i);
-
         if (getValueLength(currentValue) > maxLength) {
           return truncatedValue;
         } else {
           truncatedValue = currentValue;
         }
       }
-
       return truncatedValue;
     } else {
       return value.slice(0, maxLength);
     }
   }
-
   handleFocus(e) {
     const {
       value
     } = this.getStates();
-
     this._adapter.toggleFocusing(true);
-
     this._adapter.notifyFocus(value, e);
   }
-
   handleBlur(e) {
     const {
       value
     } = this.getStates();
-
     this._adapter.toggleFocusing(false);
-
     this._adapter.notifyBlur(value, e);
   }
-
   handleKeyDown(e) {
     this._adapter.notifyKeyDown(e);
-
     if (e.keyCode === 13) {
       this._adapter.notifyPressEnter(e);
     }
-  } // e: MouseEvent
-
-
+  }
+  // e: MouseEvent
   handleMouseEnter(e) {
     this._adapter.toggleHovering(true);
-  } // e: MouseEvent
-
-
+  }
+  // e: MouseEvent
   handleMouseLeave(e) {
     this._adapter.toggleHovering(false);
   }
-
   isAllowClear() {
     const {
       value,
       isFocus,
       isHover
     } = this._adapter.getStates();
-
     const {
       showClear,
       disabled,
       readonly
     } = this._adapter.getProps();
-
     const allowClear = value && showClear && !disabled && (isFocus || isHover) && !readonly;
     return allowClear;
   }
-
   handleClear(e) {
     const {
       isFocus
     } = this.getStates();
-
     if (this._isControlledComponent('value')) {
       this._adapter.setState({
         isFocus: false
@@ -261,16 +211,11 @@ export default class TextAreaFoundation extends BaseFoundation {
         isFocus: false
       });
     }
-
     if (isFocus) {
       this._adapter.notifyBlur('', e);
     }
-
     this._adapter.notifyChange('', e);
-
     this._adapter.notifyClear(e);
-
     this.stopPropagation(e);
   }
-
 }

package/lib/es/input/util/calculateNodeHeight.js

@@ -11,40 +11,32 @@ const HIDDEN_TEXTAREA_STYLE = {
   top: '0',
   right: '0'
 };
-
 const forceHiddenStyles = node => {
   Object.keys(HIDDEN_TEXTAREA_STYLE).forEach(key => {
     node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');
   });
 };
-
 const getContentHeight = (node, sizingData) => {
   const height = node.scrollHeight;
-
   if (sizingData.sizingStyle.boxSizing === 'border-box') {
     // border-box: add border, since height = content + padding + border
     return height + sizingData.borderSize;
-  } // remove padding, since height = content
-
-
+  }
+  // remove padding, since height = content
   return height - sizingData.paddingSize;
 };
-
 export default function calculateNodeHeight(sizingData, value) {
   let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Infinity;
-
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea');
     hiddenTextarea.setAttribute('tab-index', '-1');
     hiddenTextarea.setAttribute('aria-hidden', 'true');
     forceHiddenStyles(hiddenTextarea);
   }
-
   if (hiddenTextarea.parentNode === null) {
     document.body.appendChild(hiddenTextarea);
   }
-
   const {
     paddingSize,
     borderSize,
@@ -58,24 +50,20 @@ export default function calculateNodeHeight(sizingData, value) {
   });
   forceHiddenStyles(hiddenTextarea);
   hiddenTextarea.value = value;
-  let height = getContentHeight(hiddenTextarea, sizingData); // measure height of a textarea with a single row
-
-  hiddenTextarea.value = 'x'; // calc single row need to remove padding and border to avoid duplicated calc
-
+  let height = getContentHeight(hiddenTextarea, sizingData);
+  // measure height of a textarea with a single row
+  hiddenTextarea.value = 'x';
+  // calc single row need to remove padding and border to avoid duplicated calc
   const rowHeight = getContentHeight(hiddenTextarea, sizingData) - paddingSize - borderSize;
   let minHeight = rowHeight * minRows;
-
   if (boxSizing === 'border-box') {
     minHeight = minHeight + paddingSize + borderSize;
   }
-
   height = Math.max(minHeight, height);
   let maxHeight = rowHeight * maxRows;
-
   if (boxSizing === 'border-box') {
     maxHeight = maxHeight + paddingSize + borderSize;
   }
-
   height = Math.min(maxHeight, height);
   return height;
 }