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

package/lib/cjs/tagInput/foundation.d.ts

@@ -14,6 +14,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     toggleFocusing(focused: boolean): void;
     setHovering: (hovering: boolean) => void;
     setActive: (active: boolean) => void;
+    setEntering: (entering: boolean) => void;
     getClickOutsideHandler: () => any;
     registerClickOutsideHandler: (cb: any) => void;
     unregisterClickOutsideHandler: () => void;
@@ -31,6 +32,8 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      * handler of input change
      */
     handleInputChange: (e: TagInputChangeEvent) => void;
+    handleInputCompositionStart: (e: any) => void;
+    handleInputCompositionEnd: (e: any) => void;
     /**
      * check whether the input change is legal
      */

package/lib/cjs/tagInput/foundation.js

@@ -36,7 +36,66 @@ class TagInputFoundation extends _foundation.default {
       const {
         value
       } = e.target;
-      this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      const {
+        entering
+      } = this.getStates();
+
+      if (entering) {
+        // 如果处于输入法输入中，则先不检查输入是否有效，直接更新到inputValue，
+        // 因为对于输入法输入中而言，此时更新到 inputValue 的不是最后的结果，比如对于中文，此时 inputValue 中的内容是拼音
+        // 当输入法输入结束后，将在 handleInputCompositionEnd 中判断输入是否有效，处理结果
+        // If it is composition session, it does not check whether the input is valid, and directly updates to inputValue,
+        // Because for composition input, what is updated to inputValue at this time is not the final result.
+        // For example, for Chinese, the content in inputValue is pinyin at this time
+        // When the composition input is finished, it will be judged whether the input is valid in handleInputCompositionEnd and the result will be processed
+        this._onInputChange(value, e);
+      } else {
+        this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      }
+    };
+
+    this.handleInputCompositionStart = e => {
+      this._adapter.setEntering(true);
+    };
+
+    this.handleInputCompositionEnd = e => {
+      this._adapter.setEntering(false);
+
+      const {
+        value
+      } = e.target;
+      const {
+        maxLength,
+        onInputExceed,
+        separator
+      } = this.getProps();
+      let allowChange = true;
+      const {
+        inputValue
+      } = this.getStates();
+
+      if ((0, _isNumber2.default)(maxLength)) {
+        const inputArr = (0, _getSplitedArray.default)(inputValue, separator);
+        let index = 0;
+
+        for (; index < inputArr.length; index++) {
+          if (inputArr[index].length > maxLength) {
+            allowChange = false;
+            (0, _isFunction2.default)(onInputExceed) && onInputExceed(value);
+            break;
+          }
+        }
+
+        if (!allowChange) {
+          const newInputArr = inputArr.slice(0, index);
+
+          if (index < inputArr.length) {
+            newInputArr.push(inputArr[index].slice(0, maxLength));
+          }
+
+          this._adapter.setInputValue(newInputArr.join(separator));
+        }
+      }
     };
     /**
      * check whether the input change is legal

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

@@ -14,6 +14,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     toggleFocusing(focused: boolean): void;
     setHovering: (hovering: boolean) => void;
     setActive: (active: boolean) => void;
+    setEntering: (entering: boolean) => void;
     getClickOutsideHandler: () => any;
     registerClickOutsideHandler: (cb: any) => void;
     unregisterClickOutsideHandler: () => void;
@@ -31,6 +32,8 @@ declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      * handler of input change
      */
     handleInputChange: (e: TagInputChangeEvent) => void;
+    handleInputCompositionStart: (e: any) => void;
+    handleInputCompositionEnd: (e: any) => void;
     /**
      * check whether the input change is legal
      */

package/lib/es/tagInput/foundation.js

@@ -19,7 +19,66 @@ class TagInputFoundation extends BaseFoundation {
       const {
         value
       } = e.target;
-      this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      const {
+        entering
+      } = this.getStates();
+
+      if (entering) {
+        // 如果处于输入法输入中，则先不检查输入是否有效，直接更新到inputValue，
+        // 因为对于输入法输入中而言，此时更新到 inputValue 的不是最后的结果，比如对于中文，此时 inputValue 中的内容是拼音
+        // 当输入法输入结束后，将在 handleInputCompositionEnd 中判断输入是否有效，处理结果
+        // If it is composition session, it does not check whether the input is valid, and directly updates to inputValue,
+        // Because for composition input, what is updated to inputValue at this time is not the final result.
+        // For example, for Chinese, the content in inputValue is pinyin at this time
+        // When the composition input is finished, it will be judged whether the input is valid in handleInputCompositionEnd and the result will be processed
+        this._onInputChange(value, e);
+      } else {
+        this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      }
+    };
+
+    this.handleInputCompositionStart = e => {
+      this._adapter.setEntering(true);
+    };
+
+    this.handleInputCompositionEnd = e => {
+      this._adapter.setEntering(false);
+
+      const {
+        value
+      } = e.target;
+      const {
+        maxLength,
+        onInputExceed,
+        separator
+      } = this.getProps();
+      let allowChange = true;
+      const {
+        inputValue
+      } = this.getStates();
+
+      if (_isNumber(maxLength)) {
+        const inputArr = getSplitedArray(inputValue, separator);
+        let index = 0;
+
+        for (; index < inputArr.length; index++) {
+          if (inputArr[index].length > maxLength) {
+            allowChange = false;
+            _isFunction(onInputExceed) && onInputExceed(value);
+            break;
+          }
+        }
+
+        if (!allowChange) {
+          const newInputArr = inputArr.slice(0, index);
+
+          if (index < inputArr.length) {
+            newInputArr.push(inputArr[index].slice(0, maxLength));
+          }
+
+          this._adapter.setInputValue(newInputArr.join(separator));
+        }
+      }
     };
     /**
      * check whether the input change is legal

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.26.0-beta.0",
+    "version": "2.26.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "97f744558e96e39201b54219f82ce64da7163b81",
+    "gitHead": "7fed74a6b19a9bf9d45f56eb36c97fce0ac9de76",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tagInput/foundation.ts

@@ -27,6 +27,7 @@ export interface TagInputAdapter extends DefaultAdapter {
     toggleFocusing(focused: boolean): void;
     setHovering: (hovering: boolean) => void;
     setActive: (active: boolean) => void;
+    setEntering: (entering: boolean) => void;
     getClickOutsideHandler: () => any;
     registerClickOutsideHandler: (cb: any) => void;
     unregisterClickOutsideHandler: () => void;
@@ -49,9 +50,55 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
      */
     handleInputChange = (e: TagInputChangeEvent) => {
         const { value } = e.target;
-        this._checkInputChangeValid(value) && this._onInputChange(value, e);
+        const { entering } = this.getStates();
+        if (entering) {
+            // 如果处于输入法输入中，则先不检查输入是否有效，直接更新到inputValue，
+            // 因为对于输入法输入中而言，此时更新到 inputValue 的不是最后的结果，比如对于中文，此时 inputValue 中的内容是拼音
+            // 当输入法输入结束后，将在 handleInputCompositionEnd 中判断输入是否有效，处理结果
+            // If it is composition session, it does not check whether the input is valid, and directly updates to inputValue,
+            // Because for composition input, what is updated to inputValue at this time is not the final result.
+            // For example, for Chinese, the content in inputValue is pinyin at this time
+            // When the composition input is finished, it will be judged whether the input is valid in handleInputCompositionEnd and the result will be processed
+            this._onInputChange(value, e);
+        } else {
+            this._checkInputChangeValid(value) && this._onInputChange(value, e);
+        }
     };
 
+    handleInputCompositionStart = (e: any) => {
+        this._adapter.setEntering(true);
+    }
+
+    handleInputCompositionEnd = (e: any) => {
+        this._adapter.setEntering(false);
+        const { value } = e.target;
+        const {
+            maxLength, 
+            onInputExceed,
+            separator
+        } = this.getProps();
+        let allowChange = true;
+        const { inputValue } = this.getStates();
+        if (isNumber(maxLength)) {
+            const inputArr = getSplitedArray(inputValue, separator);
+            let index = 0;
+            for (; index < inputArr.length; index++) {
+                if (inputArr[index].length > maxLength) {
+                    allowChange = false;
+                    isFunction(onInputExceed) && onInputExceed(value);
+                    break;
+                }
+            }
+            if (!allowChange) {
+                const newInputArr = inputArr.slice(0, index);
+                if (index < inputArr.length) {
+                    newInputArr.push(inputArr[index].slice(0, maxLength));
+                }
+                this._adapter.setInputValue(newInputArr.join(separator));
+            }
+        }
+    }
+
     /**
      * check whether the input change is legal
      */