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

package/lib/cjs/tag/tag.scss

@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
 
 .#{$module} {
     box-sizing: border-box;
-    display: inline-block;
     border-radius: $radius-tag;
     background-color: transparent;
     position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
     overflow: hidden;
     white-space: nowrap;
     vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
 
     &-default,
     &-small {
@@ -50,10 +51,31 @@ $types: "ghost", "solid", "light";
         display: none;
     }
 
-    &-content {
+    &-prefix-icon {
         display: flex;
-        @include all-center;
-        height: 100%;
+        padding-right: $spacing-tag_prefix_icon_paddingRight;
+    }
+
+    &-suffix-icon {
+        display: flex;
+        padding-left: $spacing-tag_suffix_icon_paddingLeft;
+    }
+
+    &-content {
+        flex: 1;
+
+        &-ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        &-center {
+            display: flex;
+            @include all-center;
+            height: 100%;
+            min-width: 0;
+        }
     }
 
     &-close {
@@ -61,6 +83,14 @@ $types: "ghost", "solid", "light";
         color: $color-tag_close-icon-default;
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
+
+        &:hover {
+            color: $color-tag_close-icon-hover;
+        }
+
+        &:active {
+            color: $color-tag_close-icon-active;
+        }
     }
 
     &-closable {
@@ -198,6 +228,15 @@ $types: "ghost", "solid", "light";
 .#{$module}-solid {
     .#{$module}-close {
         color: $color-tag_close-icon_deep-default;
+        opacity: .8;
+
+        &:hover {
+            opacity: 1.0;
+        }
+
+        &:active {
+            opacity: .9;
+        }
     }
 }
 

package/lib/cjs/tag/variables.scss

@@ -25,10 +25,15 @@ $radius-tag_circle: var(--semi-border-radius-full); // 胶囊标签圆角大小
 $spacing-tag_small-paddingY: 2px; // 小尺寸标签垂直方向内边距
 $spacing-tag_small-paddingX: $spacing-tight; // 小尺寸标签水平方向内边距
 
+$spacing-tag_prefix_icon_paddingRight: $spacing-extra-tight; // 后缀图标右侧边距 
+$spacing-tag_suffix_icon_paddingLeft: $spacing-extra-tight; // 后缀图标左侧边距
+
 $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
+$color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
 $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距

package/lib/cjs/tagInput/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-tagInput")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-tagInput`
 };
 exports.cssClasses = cssClasses;
 const strings = {

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

@@ -1,8 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type TagInputChangeEvent = any;
-export declare type TagInputCursorEvent = any;
-export declare type TagInputKeyboardEvent = any;
-export declare type TagInputMouseEvent = any;
+export type TagInputChangeEvent = any;
+export type TagInputCursorEvent = any;
+export type TagInputKeyboardEvent = any;
+export type TagInputMouseEvent = any;
 export interface OnSortEndProps {
     oldIndex: number;
     newIndex: number;
@@ -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

@@ -4,45 +4,90 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
-
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
-
 var _getSplitedArray = _interopRequireDefault(require("./utils/getSplitedArray"));
-
 var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
-
 var _arrayMove = _interopRequireDefault(require("../utils/arrayMove"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class TagInputFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
     /**
      * handler of input change
      */
-
     this.handleInputChange = e => {
       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 => {
+      const {
+        maxLength
+      } = this.getProps();
+      if (!(0, _isNumber2.default)(maxLength)) {
+        return;
+      }
+      this._adapter.setEntering(true);
+    };
+    this.handleInputCompositionEnd = e => {
+      const {
+        value
+      } = e.target;
+      const {
+        maxLength,
+        onInputExceed,
+        separator
+      } = this.getProps();
+      if (!(0, _isNumber2.default)(maxLength)) {
+        return;
+      }
+      this._adapter.setEntering(false);
+      let allowChange = true;
+      const inputArr = (0, _getSplitedArray.default)(value, 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));
+      } else {
+        // Why does it need to be updated here instead of in onChange when the value meets the maxLength limit?
+        // Because in firefox, the state change in InputCompositionEnd causes onChange to not be triggered after 
+        // the composition input completes input.
+        this._adapter.setInputValue(value);
+      }
     };
     /**
      * check whether the input change is legal
      */
-
-
     this._checkInputChangeValid = value => {
       // e.target.value legitimacy judgment needs to be based on this.state.input Value
       const {
@@ -50,24 +95,18 @@ class TagInputFoundation extends _foundation.default {
         onInputExceed,
         separator
       } = this._adapter.getProps();
-
       const {
         inputValue
       } = this._adapter.getStates();
-
       let allowChange = true;
-
       if ((0, _isNumber2.default)(maxLength)) {
         const valueArr = (0, _getSplitedArray.default)(value, separator);
         const inputArr = (0, _getSplitedArray.default)(inputValue, separator);
         const maxLen = Math.max(valueArr.length, inputArr.length);
-
         for (let i = 0; i < maxLen; i++) {
           // When the input length is increasing
-          // eslint-disable-next-line max-len
           if (!(0, _isUndefined2.default)(valueArr[i]) && ((0, _isUndefined2.default)(inputArr[i]) || valueArr[i].length > inputArr[i].length)) {
             // When the input length exceeds maxLength
-            // eslint-disable-next-line max-depth
             if (valueArr[i].length > maxLength) {
               allowChange = false;
               (0, _isFunction2.default)(onInputExceed) && onInputExceed(value);
@@ -76,45 +115,34 @@ class TagInputFoundation extends _foundation.default {
           }
         }
       }
-
       return allowChange;
     };
     /**
      * Input event handler when onKeyDown is triggered
      */
-
-
     this.handleKeyDown = e => {
       const {
         inputValue,
         tagsArray
       } = this._adapter.getStates();
-
       const code = e.keyCode;
-
       if (code === _keyCode.default.ENTER) {
         e.preventDefault(); // prevent trigger submit when using in form
-
         if (inputValue !== '') {
           this._handleAddTags(e);
         }
       }
-
       const {
         length
       } = tagsArray;
-
       if (code === _keyCode.default.BACKSPACE && inputValue === '' && length > 0) {
         const newTagList = tagsArray.slice(0, length - 1);
         const removedTag = tagsArray[length - 1];
-
         this._onRemove(newTagList, removedTag, length - 1);
       }
-
       this._adapter.notifyKeyDown(e);
     };
   }
-
   _handleAddTags(e) {
     const {
       separator,
@@ -122,12 +150,10 @@ class TagInputFoundation extends _foundation.default {
       onExceed,
       allowDuplicates
     } = this._adapter.getProps();
-
     const {
       inputValue,
       tagsArray
     } = this._adapter.getStates();
-
     let addTags = (0, _getSplitedArray.default)(inputValue, separator);
     addTags = addTags.filter((item, idx) => {
       // If allowDuplicates is false, then filter duplicates
@@ -135,136 +161,102 @@ class TagInputFoundation extends _foundation.default {
         if (tagsArray.includes(item) || addTags.indexOf(item) !== idx) {
           return false;
         }
-      } // Filter empty strings and pure space strings in new items
-
-
+      }
+      // Filter empty strings and pure space strings in new items
       return (0, _isString2.default)(item) && item.trim() !== '';
     });
     let newTagList = tagsArray.concat(addTags);
-
     if ((0, _isNumber2.default)(max) && newTagList.length > max) {
       (0, _isFunction2.default)(onExceed) && onExceed(newTagList);
       newTagList = newTagList.slice(0, max);
       addTags = addTags.slice(0, max - tagsArray.length);
     }
-
     if (addTags.length > 0) {
       this._onAdd(newTagList, addTags);
     }
-
     this._onInputChange('', e);
   }
-
   handleInputBlur(e) {
     const {
       addOnBlur
     } = this._adapter.getProps();
-
     if (addOnBlur === true) {
       this._handleAddTags(e);
     }
-
     this._adapter.setFocusing(false);
-
     this._adapter.notifyBlur(e);
   }
-
   handleInputFocus(e) {
     this._adapter.setFocusing(true);
-
     this._adapter.notifyFocus(e);
   }
   /**
    * A11y: simulate clear button click
    */
-
   /* istanbul ignore next */
-
-
   handleClearEnterPress(e) {
     if ((0, _isEnterPress.default)(e)) {
       this.handleClearBtn(e);
     }
   }
-
   handleClearBtn(e) {
     const {
       inputValue,
       tagsArray
     } = this._adapter.getStates();
-
     if (tagsArray.length > 0) {
       this._adapter.setTagsArray([]);
-
       this._adapter.notifyTagChange([]);
     }
-
     if (inputValue.length > 0) {
       this._onInputChange('', e);
-    } // Prevent event propagate to TagInput outermost div
-
-
+    }
+    // Prevent event propagate to TagInput outermost div
     e.stopPropagation();
   }
-
   handleTagClose(index) {
     const {
       tagsArray
     } = this._adapter.getStates();
-
     const newTagList = [...tagsArray];
     newTagList.splice(index, 1);
     const removedTag = tagsArray[index];
-
     this._onRemove(newTagList, removedTag, index);
   }
-
   handleInputMouseEnter() {
     this._adapter.setHovering(true);
   }
-
   handleInputMouseLeave() {
     this._adapter.setHovering(false);
   }
-
   handleClick(e) {
     const {
       disabled
     } = this.getProps();
-
     if (disabled) {
       return;
     }
-
     const clickOutsideHandler = this._adapter.getClickOutsideHandler();
-
     if (!clickOutsideHandler) {
       this._adapter.setActive(true);
-
       this._adapter.registerClickOutsideHandler(e => this.clickOutsideCallBack());
     }
   }
-
   clickOutsideCallBack() {
     this._adapter.unregisterClickOutsideHandler();
-
     this._adapter.setActive(false);
   }
-
   handleClickPrefixOrSuffix(e) {
     const {
       disabled
     } = this._adapter.getProps();
-
     const {
       isFocus
     } = this._adapter.getStates();
-
     if (!disabled && !isFocus) {
       this._adapter.toggleFocusing(true);
     }
   }
-
   handlePreventMouseDown(e) {
     if (e && (0, _isFunction2.default)(e.preventDefault)) {
       e.preventDefault();
@@ -273,42 +265,30 @@ class TagInputFoundation extends _foundation.default {
   /**
    * handler of delete tag
    */
-
-
   _onRemove(newTagList, removedTags, index) {
     if (!this._isControlledComponent()) {
       this._adapter.setTagsArray(newTagList);
     }
-
     this._adapter.notifyTagChange(newTagList);
-
     this._adapter.notifyTagRemove(removedTags, index);
   }
   /**
    * handler of add tag
    */
-
-
   _onAdd(newTagList, addTags) {
     if (!this._isControlledComponent()) {
       this._adapter.setTagsArray(newTagList);
     }
-
     this._adapter.notifyTagChange(newTagList);
-
     this._adapter.notifyTagAdd(addTags);
   }
   /**
    * handler of input change
    */
-
-
   _onInputChange(value, e) {
     this._adapter.setInputValue(value);
-
     this._adapter.notifyInputChange(value, e);
   }
-
   handleSortEnd(callbackProps) {
     const {
       oldIndex,
@@ -318,15 +298,11 @@ class TagInputFoundation extends _foundation.default {
       tagsArray
     } = this.getStates();
     const newTagsArray = (0, _arrayMove.default)(tagsArray, oldIndex, newIndex);
-
     if (!this._isControlledComponent()) {
       this._adapter.setTagsArray(newTagsArray);
     }
-
     this._adapter.notifyTagChange(newTagsArray);
   }
-
 }
-
 var _default = TagInputFoundation;
 exports.default = _default;

package/lib/cjs/tagInput/tagInput.css

@@ -8,9 +8,16 @@
   display: inline-flex;
   font-weight: 400;
   width: 100%;
+  min-height: 32px;
   box-sizing: border-box;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
+.semi-tagInput-small {
+  min-height: 24px;
+}
+.semi-tagInput-large {
+  min-height: 40px;
+}
 .semi-tagInput-drag-item {
   display: flex;
   align-items: center;
@@ -23,6 +30,25 @@
   margin-right: 4px;
   cursor: move;
 }
+.semi-tagInput-sortable-item {
+  position: relative;
+}
+.semi-tagInput-sortable-item-over {
+  overflow: visible;
+}
+.semi-tagInput-sortable-item-over::before {
+  content: "";
+  display: block;
+  height: 100%;
+  width: 2px;
+  background-color: var(--semi-color-primary);
+  position: absolute;
+  left: -2px;
+  top: 0;
+}
+.semi-tagInput-sortable-item-active {
+  opacity: 0.5;
+}
 .semi-tagInput-hover {
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
@@ -85,15 +111,6 @@
   padding-right: 4px;
   overflow: hidden;
 }
-.semi-tagInput-wrapper-small {
-  min-height: 24px;
-}
-.semi-tagInput-wrapper-default {
-  min-height: 32px;
-}
-.semi-tagInput-wrapper-large {
-  min-height: 40px;
-}
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
   white-space: pre;
@@ -210,6 +227,15 @@
 .semi-tagInput-suffix-text {
   color: var(--semi-color-text-2);
 }
+.semi-tagInput-tag-content-wrapper {
+  display: flex;
+  align-items: center;
+}
+.semi-tagInput-sortable-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+}
 
 .semi-rtl .semi-tagInput,
 .semi-portal-rtl .semi-tagInput {

package/lib/cjs/tagInput/tagInput.scss

@@ -11,10 +11,19 @@ $module: #{$prefix}-tagInput;
     display: inline-flex;
     font-weight: $font-weight-regular;
     width: 100%;
+    min-height: $height-tagInput-default;
     box-sizing: border-box;
     transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
         border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
 
+    &-small {
+        min-height: $height-tagInput-small;
+    }
+
+    &-large {
+        min-height: $height-tagInput-large;
+    }
+
     &-drag {
 
         &-item {
@@ -33,6 +42,27 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-sortable-item {
+        position: relative;
+        &-over {
+            overflow: visible;
+            &::before {
+                content: "";
+                display: block;
+                height: 100%;
+                width: $width-tagInput_sortable_item_over;
+                background-color: $color-tagInput_sortable_item_over-bg;
+                position: absolute;
+                left: -$width-tagInput_sortable_item_over;
+                top: 0;
+            }
+        }
+
+        &-active {
+            opacity: 0.5;
+        }
+    }
+
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
         border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
@@ -106,18 +136,6 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
-        &-small {
-            min-height: $height-tagInput-small;
-        }
-
-        &-default {
-            min-height: $height-tagInput-default;
-        }
-
-        &-large {
-            min-height: $height-tagInput-large;
-        }
-
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -262,6 +280,17 @@ $module: #{$prefix}-tagInput;
             color: $color-tagInput_suffix-default;
         }
     }
+
+    &-tag-content-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &-sortable-list {
+        display: flex;
+        flex-flow: row wrap;
+        width: 100%;
+    }
 }
 
 @import "./rtl.scss";