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

package/lib/es/input/textareaFoundation.js

@@ -6,100 +6,78 @@ 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 => {
+    this.resizeTextarea = () => {
+      var _a;
       const {
         height
       } = this.getStates();
       const {
-        rows
+        rows,
+        autosize
       } = 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 [minRows, maxRows] = autosize !== null && typeof autosize === 'object' ? [(_a = autosize === null || autosize === void 0 ? void 0 : autosize.minRows) !== null && _a !== void 0 ? _a : rows, autosize === null || autosize === void 0 ? void 0 : autosize.maxRows] : [rows];
+      const newHeight = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || 'x', minRows, maxRows);
       if (height !== newHeight) {
         this._adapter.notifyHeightUpdate(newHeight);
-
-        node.style.height = "".concat(newHeight, "px");
+        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
-
-
+  }
   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 +86,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,27 +109,27 @@ 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');
-        const truncatedValue = this.handleTruncateValue(value, maxLength);
-        return truncatedValue;
+    if (_isNumber(maxLength) && maxLength >= 0 && _isString(value)) {
+      if (_isFunction(getValueLength)) {
+        const valueLength = getValueLength(value);
+        if (valueLength > maxLength) {
+          console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+          const truncatedValue = this.handleTruncateValue(value, maxLength);
+          return truncatedValue;
+        }
       } else {
-        return value;
+        if (value.length > maxLength) {
+          console.warn('[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit');
+          return value.slice(0, maxLength);
+        }
       }
+      return value;
     }
-
     return undefined;
   }
   /**
@@ -165,92 +138,91 @@ 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();
-
+    const {
+      maxLength
+    } = this.getProps();
+    let realValue = value;
+    if (maxLength) {
+      // 如果设置了 maxLength，在中文输输入过程中，如果点击外部触发 blur，则拼音字符的所有内容会回显，
+      // 该表现不符合 maxLength 规定，因此需要在 blur 的时候二次确认
+      // 详情见 https://github.com/DouyinFE/semi-design/issues/2005
+      // If maxLength is set, during the Chinese input process, if you click outside to trigger blur, 
+      // all the contents of the Pinyin characters will be echoed.
+      // This behavior does not meet the maxLength requirement, so we need to confirm twice when blurring。
+      // For details, see https://github.com/DouyinFE/semi-design/issues/2005
+      realValue = this.handleVisibleMaxLength(value);
+      if (realValue !== value) {
+        if (!this._isControlledComponent()) {
+          this._adapter.setValue(realValue);
+        }
+        this._adapter.notifyChange(realValue, e);
+      }
+    }
     this._adapter.toggleFocusing(false);
-
-    this._adapter.notifyBlur(value, e);
+    this._adapter.notifyBlur(realValue, 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 +233,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;
 }

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

@@ -1,25 +1,22 @@
-import _pick from "lodash/pick";
-const SIZING_STYLE = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', // non-standard
-'tabSize', 'textIndent', // non-standard
+import _pick from "lodash/pick"; // Reference to https://github.com/andreypopp/react-textarea-autosize/
+const SIZING_STYLE = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'letterSpacing', 'lineHeight', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop',
+// non-standard
+'tabSize', 'textIndent',
+// non-standard
 'textRendering', 'textTransform', 'width'];
-
 const getSizingData = node => {
   const style = window.getComputedStyle(node);
-
   if (style === null) {
     return null;
   }
-
   const sizingStyle = _pick(style, SIZING_STYLE);
-
   const {
     boxSizing
-  } = sizingStyle; // probably node is detached from DOM, can't read computed dimensions
-
+  } = sizingStyle;
+  // probably node is detached from DOM, can't read computed dimensions
   if (boxSizing === '') {
     return null;
   }
-
   const paddingSize = parseFloat(sizingStyle.paddingBottom) + parseFloat(sizingStyle.paddingTop);
   const borderSize = parseFloat(sizingStyle.borderBottomWidth) + parseFloat(sizingStyle.borderTopWidth);
   return {
@@ -28,5 +25,4 @@ const getSizingData = node => {
     borderSize
   };
 };
-
 export default getSizingData;

package/lib/es/input/variables.scss

@@ -13,6 +13,8 @@ $color-input_default-bg-focus: var(--semi-color-fill-0); // 输入框背景颜
 $color-input_default-border-focus: var(--semi-color-focus-border); // 输入框描边颜色 - 选中
 $color-input_icon-outline: var(--semi-color-primary-light-active); // 输入框 icon outline 颜色
 
+$color-input_default-bg-focus-hover: $color-input_default-bg-focus; // 输入框背景颜色 - 选中悬浮
+
 // error
 $color-input_danger-bg-default: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 默认
 $color-input_danger-border-default: var(--semi-color-danger-light-default); // 错误输入框描边颜色 - 默认
@@ -57,6 +59,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文
 
 $color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
 
+$color_input-default-border-only_border-default: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+$color_input-default-border-only_border-hover: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+
 $height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
 $height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
 $height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸
@@ -111,3 +116,5 @@ $width-textarea-icon: $width-icon-medium + $spacing-tight; // clear 图标最小
 $height-textarea-default: 32px; // 多行文本 clear 图标的高度
 $spacing-textarea_withShowClear-paddingRight: 36px; // 多行文本设置 showClear 后的右内边距
 $spacing-textarea-icon-right: $spacing-extra-tight;// 多行文本 clear 图标的右边距
+
+