@douyinfe/semi-foundation 2.1.0 → 2.1.4

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

@@ -0,0 +1,53 @@
+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 interface TagInputAdapter extends DefaultAdapter {
+    setInputValue: (inputValue: string) => void;
+    setTagsArray: (tagsArray: string[]) => void;
+    setFocusing: (focusing: boolean) => void;
+    setHovering: (hovering: boolean) => void;
+    notifyBlur: (e: TagInputCursorEvent) => void;
+    notifyFocus: (e: TagInputCursorEvent) => void;
+    notifyInputChange: (v: string, e: TagInputChangeEvent) => void;
+    notifyTagChange: (v: string[]) => void;
+    notifyTagAdd: (v: string[]) => void;
+    notifyTagRemove: (v: string, idx: number) => void;
+    notifyKeyDown: (e: TagInputMouseEvent) => void;
+}
+declare class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
+    constructor(adapter: TagInputAdapter);
+    /**
+     * handler of input change
+     */
+    handleInputChange: (e: TagInputChangeEvent) => void;
+    /**
+     * check whether the input change is legal
+     */
+    _checkInputChangeValid: (value: string) => boolean;
+    /**
+     * Input event handler when onKeyDown is triggered
+     */
+    handleKeyDown: (e: TagInputKeyboardEvent) => void;
+    _handleAddTags(e: TagInputChangeEvent): void;
+    handleInputBlur(e: TagInputCursorEvent): void;
+    handleInputFocus(e: TagInputCursorEvent): void;
+    handleClearBtn(e: TagInputMouseEvent): void;
+    handleTagClose(index: number): void;
+    handleInputMouseEnter(): void;
+    handleInputMouseLeave(): void;
+    /**
+     * handler of delete tag
+     */
+    _onRemove(newTagList: string[], removedTags: string, index: number): void;
+    /**
+     * handler of add tag
+     */
+    _onAdd(newTagList: string[], addTags: string[]): void;
+    /**
+     * handler of input change
+     */
+    _onInputChange(value: string, e: TagInputChangeEvent): void;
+}
+export default TagInputFoundation;

package/lib/cjs/tagInput/foundation.js

@@ -0,0 +1,267 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+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"));
+
+class TagInputFoundation extends _foundation.default {
+  constructor(adapter) {
+    super((0, _assign.default)({}, adapter));
+    /**
+     * handler of input change
+     */
+
+    this.handleInputChange = e => {
+      const {
+        value
+      } = e.target;
+      this._checkInputChangeValid(value) && this._onInputChange(value, e);
+    };
+    /**
+     * 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 {
+        maxLength,
+        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);
+              break;
+            }
+          }
+        }
+      }
+
+      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 && inputValue !== '') {
+        this._handleAddTags(e);
+      }
+
+      const {
+        length
+      } = tagsArray;
+
+      if (code === _keyCode.default.BACKSPACE && inputValue === '' && length > 0) {
+        const newTagList = (0, _slice.default)(tagsArray).call(tagsArray, 0, length - 1);
+        const removedTag = tagsArray[length - 1];
+
+        this._onRemove(newTagList, removedTag, length - 1);
+      }
+
+      this._adapter.notifyKeyDown(e);
+    };
+  }
+
+  _handleAddTags(e) {
+    const {
+      separator,
+      max,
+      onExceed,
+      allowDuplicates
+    } = this._adapter.getProps();
+
+    const {
+      inputValue,
+      tagsArray
+    } = this._adapter.getStates();
+
+    let addTags = (0, _getSplitedArray.default)(inputValue, separator);
+    addTags = (0, _filter.default)(addTags).call(addTags, (item, idx) => {
+      // If allowDuplicates is false, then filter duplicates
+      if (!allowDuplicates) {
+        if ((0, _includes.default)(tagsArray).call(tagsArray, item) || (0, _indexOf.default)(addTags).call(addTags, item) !== idx) {
+          return false;
+        }
+      } // Filter empty strings and pure space strings in new items
+
+
+      return (0, _isString2.default)(item) && (0, _trim.default)(item).call(item) !== '';
+    });
+    let newTagList = (0, _concat.default)(tagsArray).call(tagsArray, addTags);
+
+    if ((0, _isNumber2.default)(max) && newTagList.length > max) {
+      (0, _isFunction2.default)(onExceed) && onExceed(newTagList);
+      newTagList = (0, _slice.default)(newTagList).call(newTagList, 0, max);
+      addTags = (0, _slice.default)(addTags).call(addTags, 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);
+  }
+
+  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);
+    }
+  }
+
+  handleTagClose(index) {
+    const {
+      tagsArray
+    } = this._adapter.getStates();
+
+    const newTagList = [...tagsArray];
+    (0, _splice.default)(newTagList).call(newTagList, index, 1);
+    const removedTag = tagsArray[index];
+
+    this._onRemove(newTagList, removedTag, index);
+  }
+
+  handleInputMouseEnter() {
+    this._adapter.setHovering(true);
+  }
+
+  handleInputMouseLeave() {
+    this._adapter.setHovering(false);
+  }
+  /**
+   * 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);
+  }
+
+}
+
+var _default = TagInputFoundation;
+exports.default = _default;

package/lib/cjs/tagInput/rtl.scss

@@ -0,0 +1,23 @@
+$module: #{$prefix}-tagInput;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-wrapper {
+
+            &-tag {
+                margin-left: $spacing-extra-tight;
+                margin-right: 0;
+            }
+
+            &-input {
+
+                &:not(:first-child) > input {
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+}

package/lib/cjs/tagInput/tagInput.css

@@ -0,0 +1,171 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-tagInput {
+  background-color: var(--semi-color-fill-0);
+  border: 1px transparent solid;
+  border-radius: var(--semi-border-radius-small);
+  display: inline-flex;
+  font-weight: 400;
+  width: 100%;
+  box-sizing: border-box;
+}
+.semi-tagInput-hover {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-tagInput-focus {
+  background-color: var(--semi-color-fill-0);
+  border: 1px var(--semi-color-focus-border) solid;
+}
+.semi-tagInput-warning {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning-light-default);
+}
+.semi-tagInput-warning:hover {
+  background-color: var(--semi-color-warning-light-hover);
+  border-color: var(--semi-color-warning-light-hover);
+}
+.semi-tagInput-warning.semi-tagInput-focus {
+  background-color: var(--semi-color-warning-light-default);
+  border-color: var(--semi-color-warning);
+}
+.semi-tagInput-error {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger-light-default);
+}
+.semi-tagInput-error:hover {
+  background-color: var(--semi-color-danger-light-hover);
+  border-color: var(--semi-color-danger-light-hover);
+}
+.semi-tagInput-error.semi-tagInput-focus {
+  background-color: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+}
+.semi-tagInput-disabled {
+  cursor: not-allowed;
+}
+.semi-tagInput-disabled .semi-tagInput-clearBtn,
+.semi-tagInput-disabled .semi-tagInput-prefix,
+.semi-tagInput-disabled .semi-tagInput-suffix {
+  color: var(--semi-color-disabled-text);
+}
+.semi-tagInput-disabled .semi-tagInput-wrapper {
+  cursor: not-allowed;
+}
+.semi-tagInput-disabled .semi-tagInput-wrapper-tag {
+  color: var(--semi-color-disabled-text);
+  background-color: transparent;
+}
+.semi-tagInput-disabled .semi-tagInput-wrapper-input {
+  cursor: not-allowed;
+}
+.semi-tagInput-disabled .semi-tagInput-wrapper-input::placeholder {
+  color: var(--semi-color-disabled-text);
+}
+.semi-tagInput-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 4px;
+  overflow: hidden;
+}
+.semi-tagInput-wrapper-tag {
+  margin-right: 4px;
+  white-space: pre;
+}
+.semi-tagInput-wrapper-tag-size-small {
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+.semi-tagInput-wrapper-tag-size-default {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.semi-tagInput-wrapper-tag-size-large {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+.semi-tagInput-wrapper-typo {
+  font-size: 12px;
+}
+.semi-tagInput-wrapper-typo-disabled {
+  color: var(--semi-color-disabled-text);
+}
+.semi-tagInput-wrapper-n {
+  cursor: pointer;
+  font-size: 12px;
+  margin-right: 4px;
+  color: var(--semi-color-text-0);
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.semi-tagInput-wrapper-n-disabled {
+  cursor: not-allowed;
+  color: var(--semi-color-disabled-text);
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input {
+  flex-grow: 1;
+  width: min-content;
+  min-width: 38px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: 14px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input:hover {
+  background-color: transparent;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input {
+  padding-left: 0;
+}
+.semi-tagInput-clearBtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  flex-shrink: 0;
+  color: var(--semi-color-text-2);
+}
+.semi-tagInput-clearBtn:hover {
+  cursor: pointer;
+  color: var(--semi-color-primary-hover);
+}
+.semi-tagInput-clearBtn-invisible {
+  visibility: hidden;
+}
+.semi-tagInput-prefix, .semi-tagInput-suffix {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.semi-tagInput-prefix-text, .semi-tagInput-suffix-text {
+  margin: 0 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.semi-tagInput-prefix-icon, .semi-tagInput-suffix-icon {
+  color: var(--semi-color-text-2);
+  margin: 0 8px;
+}
+.semi-tagInput-prefix-text {
+  color: var(--semi-color-text-2);
+}
+.semi-tagInput-suffix-text {
+  color: var(--semi-color-text-1);
+}
+
+.semi-rtl .semi-tagInput,
+.semi-portal-rtl .semi-tagInput {
+  direction: rtl;
+}
+.semi-rtl .semi-tagInput-wrapper-tag,
+.semi-portal-rtl .semi-tagInput-wrapper-tag {
+  margin-left: 4px;
+  margin-right: 0;
+}
+.semi-rtl .semi-tagInput-wrapper-input:not(:first-child) > input,
+.semi-portal-rtl .semi-tagInput-wrapper-input:not(:first-child) > input {
+  padding-right: 0;
+}

package/lib/cjs/tagInput/tagInput.scss

@@ -0,0 +1,192 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-tagInput;
+
+.#{$module} {
+    background-color: $color-tagInput_default-bg-default;
+    border: $border-thickness-control-focus $color-textarea-border-default solid;
+    border-radius: $radius-tagInput;
+    display: inline-flex;
+    font-weight: $font-weight-regular;
+    width: 100%;
+    box-sizing: border-box;
+    
+    &-hover {
+        background-color: $color-tagInput_default-bg-hover;
+    }
+    
+    &-focus {
+        background-color: $color-tagInput_default-bg-focus;
+        border: $border-thickness-control-focus $color-tagInput_default-border-focus solid;
+    }
+
+    &-warning {
+        background-color: $color-tagInput_warning-bg-default;
+        border-color: $color-tagInput_warning-border-default;
+
+        &:hover {
+            background-color: $color-tagInput_warning-bg-hover;
+            border-color: $color-tagInput_warning-border-hover;
+        }
+
+        &.#{$module}-focus {
+            background-color: $color-tagInput_warning-bg-focus;
+            border-color: $color-tagInput_warning-border-focus;
+        }
+    }
+
+    &-error {
+        background-color: $color-tagInput_danger-bg-default;
+        border-color: $color-tagInput_danger-border-default;
+
+        &:hover {
+            background-color: $color-tagInput_danger-bg-hover;
+            border-color: $color-tagInput_danger-border-hover;
+        }
+        
+        &.#{$module}-focus {
+            background-color: $color-tagInput_danger-bg-focus;
+            border-color: $color-tagInput_danger-border-focus;
+        }
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+
+        .#{$module}-clearBtn,
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-tagInput_disabled-text-default;
+        }
+        .#{$module}-wrapper {
+            cursor: not-allowed;
+        }
+        .#{$module}-wrapper-tag {
+            color: $color-tagInput_disabled-text-default;
+            background-color: transparent;
+        }
+        .#{$module}-wrapper-input {
+            cursor: not-allowed;
+            &::placeholder {
+                color: $color-tagInput_disabled-text-default;
+            }
+        }
+        
+    }
+
+    &-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        flex-grow: 1;
+        align-items: center;
+        padding-left: $spacing-extra-tight;
+        padding-right: $spacing-extra-tight;
+        overflow: hidden;
+
+        &-tag {
+            margin-right: $spacing-extra-tight;
+            white-space: pre;
+
+            &-size {
+                &-small {
+                    margin-top: $spacing-tagInput_small-Y;
+                    margin-bottom: $spacing-tagInput_small-Y;
+                }
+
+                &-default {
+                    margin-top: $spacing-tagInput_default-Y;
+                    margin-bottom: $spacing-tagInput_default-Y;
+                }
+
+                &-large {
+                    margin-top: $spacing-tagInput_large-Y;
+                    margin-bottom: $spacing-tagInput_large-Y;
+                }
+            }
+        }
+
+        &-typo {
+            font-size: $font-size-small;
+
+            &-disabled {
+                color: $color-tagInput_disabled-text-default;
+            }
+        }
+
+        &-n {
+            cursor: pointer;
+            font-size: $font-size-small;
+            margin-right: $spacing-extra-tight;
+            color: var(--semi-color-text-0);
+            padding-left: $spacing-tagInput_wrapper_n_paddingX;
+            padding-right: $spacing-tagInput_wrapper_n_paddingX;
+
+            &-disabled {
+                cursor: not-allowed;
+                color: $color-tagInput_disabled-text-default;
+            }
+        }
+
+        & &-input {
+            flex-grow: 1;
+            width: min-content;
+            min-width: 38px;
+            border: none;
+            outline: none; 
+            background-color: transparent;
+            font-size: $font-size-regular;
+
+            &:hover {
+                background-color: transparent;
+            }
+
+            &:not(:first-child) > input {
+                padding-left: 0;
+            }
+        }
+    }
+
+    &-clearBtn {
+        @include all-center;
+        width: $width-tagInput-clear-medium;
+        flex-shrink: 0;
+        color: $color-tagInput-icon-default;
+
+        &:hover {
+            cursor: pointer;
+            color: $color-tagInput-icon-hover;
+        }
+
+        &-invisible {
+            visibility: hidden;
+        }
+    }
+
+    &-prefix,
+    &-suffix {
+        @include all-center;
+        &-text {
+            margin: 0 $spacing-base-tight;
+            font-weight: 600;
+            white-space: nowrap;
+        }
+        &-icon {
+            color: $color-tagInput-icon-default;
+            margin: 0 $spacing-tight;
+        }
+    }
+
+    &-prefix {
+        &-text {
+            color: $color-tagInput_prefix-default;
+        }
+    }
+
+    &-suffix {
+        &-text {
+            color: $color-tagInput_suffix-default;
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/tagInput/utils/getSplitedArray.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Get the splited array.
+ * We expect separators to be string | string[] | null, but users
+ * are also allowed to pass in other types.
+ */
+declare const getSplitedArray: (originString: string, separators: string | string[] | null) => string[];
+export default getSplitedArray;