@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

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

@@ -1,52 +0,0 @@
-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;
-}
-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

@@ -1,259 +0,0 @@
-"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 _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
-
-var _lodashEs = require("lodash-es");
-
-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, _lodashEs.isNumber)(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, _lodashEs.isUndefined)(valueArr[i]) && ((0, _lodashEs.isUndefined)(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, _lodashEs.isFunction)(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);
-      }
-    };
-  }
-
-  _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, _lodashEs.isString)(item) && (0, _trim.default)(item).call(item) !== '';
-    });
-    let newTagList = (0, _concat.default)(tagsArray).call(tagsArray, addTags);
-
-    if ((0, _lodashEs.isNumber)(max) && newTagList.length > max) {
-      (0, _lodashEs.isFunction)(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

@@ -1,23 +0,0 @@
-$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

@@ -1,171 +0,0 @@
-/* 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

@@ -1,192 +0,0 @@
-@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

@@ -1,7 +0,0 @@
-/**
- * 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;