@douyinfe/semi-foundation 2.27.1 → 2.28.0-beta.0

package/lib/es/tabs/foundation.js

@@ -1,198 +0,0 @@
-import _noop from "lodash/noop";
-import _get from "lodash/get";
-import BaseFoundation from '../base/foundation';
-
-class TabsFoundation extends BaseFoundation {
-  constructor(adapter) {
-    super(Object.assign({}, adapter));
-    this.destroy = _noop;
-
-    this.handlePrevent = event => {
-      event.stopPropagation();
-      event.preventDefault();
-    };
-
-    this.handleKeyDown = (event, itemKey, closable) => {
-      const {
-        preventScroll
-      } = this.getProps();
-      const tabs = [...event.target.parentNode.childNodes].filter(item => {
-        return _get(item, 'attributes.data-tabkey.value', '').includes('semiTab') && _get(item, 'attributes.aria-disabled.value', '') !== "true";
-      });
-
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "ArrowDown":
-          this.determineOrientation(event, tabs);
-          break;
-
-        case "Backspace":
-        case "Delete":
-          this.handleDeleteKeyDown(event, tabs, itemKey, closable);
-          break;
-
-        case "Enter":
-        case " ":
-          this.handleTabClick(itemKey, event);
-          this.handlePrevent(event);
-          break;
-
-        case "Home":
-          tabs[0].focus({
-            preventScroll
-          }); // focus first tab
-
-          this.handlePrevent(event);
-          break;
-
-        case "End":
-          tabs[tabs.length - 1].focus({
-            preventScroll
-          }); // focus last tab
-
-          this.handlePrevent(event);
-          break;
-      }
-    };
-  }
-
-  init() {
-    this._adapter.collectPane();
-  }
-
-  _notifyChange(activeKey) {
-    const {
-      activeKey: stateActiveKey
-    } = this.getStates();
-
-    if (stateActiveKey !== activeKey) {
-      this._adapter.notifyChange(activeKey);
-    }
-  }
-
-  handleTabClick(activeKey, event) {
-    const isControlledComponent = this._isInProps('activeKey');
-
-    if (isControlledComponent) {
-      this._notifyChange(activeKey);
-    } else {
-      this._notifyChange(activeKey);
-
-      this.handleNewActiveKey(activeKey);
-    }
-
-    this._adapter.notifyTabClick(activeKey, event);
-  }
-
-  handleNewActiveKey(activeKey) {
-    const {
-      activeKey: stateActiveKey
-    } = this.getStates();
-
-    if (stateActiveKey !== activeKey) {
-      this._adapter.setNewActiveKey(activeKey);
-    }
-  }
-
-  getDefaultActiveKey() {
-    let activeKey;
-    const props = this.getProps();
-
-    if ('activeKey' in props) {
-      activeKey = props.activeKey;
-    } else if ('defaultActiveKey' in props) {
-      activeKey = props.defaultActiveKey;
-    } else {
-      activeKey = this._adapter.getDefaultActiveKeyFromChildren();
-    }
-
-    return activeKey;
-  }
-
-  handleTabListChange() {
-    this._adapter.collectPane();
-  }
-
-  handleTabPanesChange() {
-    this._adapter.collectPane();
-
-    this._adapter.collectActiveKey();
-  }
-
-  handleTabDelete(tabKey) {
-    this._adapter.notifyTabDelete(tabKey);
-  }
-
-  determineOrientation(event, tabs) {
-    const {
-      tabPosition
-    } = this.getProps();
-    const isVertical = tabPosition === 'left';
-
-    if (isVertical) {
-      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-        this.switchTabOnArrowPress(event, tabs);
-        this.handlePrevent(event);
-      }
-    } else {
-      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-        this.switchTabOnArrowPress(event, tabs);
-        this.handlePrevent(event);
-      }
-    }
-  }
-
-  handleDeleteKeyDown(event, tabs, itemKey, closable) {
-    const {
-      preventScroll
-    } = this.getProps();
-
-    if (closable) {
-      this.handleTabDelete(itemKey);
-      const index = tabs.indexOf(event.target); // Move focus to next element after deletion
-      // If the element is the last removable tab, focus to its previous tab
-
-      if (tabs.length !== 1) {
-        tabs[index + 1 >= tabs.length ? index - 1 : index + 1].focus({
-          preventScroll
-        });
-      }
-    }
-  }
-
-  switchTabOnArrowPress(event, tabs) {
-    const {
-      preventScroll
-    } = this.getProps();
-    const index = tabs.indexOf(event.target);
-    const direction = {
-      "ArrowLeft": -1,
-      "ArrowUp": -1,
-      "ArrowRight": 1,
-      "ArrowDown": 1
-    };
-
-    if (direction[event.key]) {
-      if (index !== undefined) {
-        if (tabs[index + direction[event.key]]) {
-          tabs[index + direction[event.key]].focus({
-            preventScroll
-          });
-        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-          tabs[tabs.length - 1].focus({
-            preventScroll
-          }); // focus last tab
-        } else if (event.key === "ArrowRight" || event.key == "ArrowDown") {
-          tabs[0].focus({
-            preventScroll
-          }); // focus first tab
-        }
-      }
-    }
-  }
-
-}
-
-export default TabsFoundation;

package/lib/es/tag/constants.d.ts

@@ -1,10 +0,0 @@
-declare const cssClasses: {
-    PREFIX: string;
-};
-declare const strings: {
-    TAG_SIZE: string[];
-    TAG_COLOR: string[];
-    TAG_TYPE: string[];
-    AVATAR_SHAPE: string[];
-};
-export { cssClasses, strings };

package/lib/es/tag/constants.js

@@ -1,12 +0,0 @@
-/* eslint-disable max-len */
-import { BASE_CLASS_PREFIX } from '../base/constants';
-const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-tag")
-};
-const strings = {
-  TAG_SIZE: ['default', 'small', 'large'],
-  TAG_COLOR: ['grey', 'red', 'pink', 'purple', 'violet', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'white'],
-  TAG_TYPE: ['light', 'solid', 'ghost'],
-  AVATAR_SHAPE: ['square', 'circle']
-};
-export { cssClasses, strings };

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

@@ -1,8 +0,0 @@
-declare const cssClasses: {
-    readonly PREFIX: "semi-tagInput";
-};
-declare const strings: {
-    readonly SIZE_SET: readonly ["large", "default", "small"];
-    readonly STATUS: readonly ["success", "default", "error", "warning"];
-};
-export { cssClasses, strings };

package/lib/es/tagInput/constants.js

@@ -1,9 +0,0 @@
-import { BASE_CLASS_PREFIX } from '../base/constants';
-const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-tagInput")
-};
-const strings = {
-  SIZE_SET: ['large', 'default', 'small'],
-  STATUS: ["success", "default", "error", "warning"]
-};
-export { cssClasses, strings };

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

@@ -1,74 +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 OnSortEndProps {
-    oldIndex: number;
-    newIndex: number;
-}
-export interface TagInputAdapter extends DefaultAdapter {
-    setInputValue: (inputValue: string) => void;
-    setTagsArray: (tagsArray: string[]) => void;
-    setFocusing: (focusing: boolean) => void;
-    toggleFocusing(focused: boolean): void;
-    setHovering: (hovering: boolean) => void;
-    setActive: (active: boolean) => void;
-    setEntering: (entering: boolean) => void;
-    getClickOutsideHandler: () => any;
-    registerClickOutsideHandler: (cb: any) => void;
-    unregisterClickOutsideHandler: () => 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;
-    handleInputCompositionStart: (e: any) => void;
-    handleInputCompositionEnd: (e: any) => 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;
-    /**
-     * A11y: simulate clear button click
-     */
-    handleClearEnterPress(e: TagInputKeyboardEvent): void;
-    handleClearBtn(e: TagInputMouseEvent): void;
-    handleTagClose(index: number): void;
-    handleInputMouseEnter(): void;
-    handleInputMouseLeave(): void;
-    handleClick(e?: any): void;
-    clickOutsideCallBack(): void;
-    handleClickPrefixOrSuffix(e: any): void;
-    handlePreventMouseDown(e: any): 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;
-    handleSortEnd(callbackProps: OnSortEndProps): void;
-}
-export default TagInputFoundation;

package/lib/es/tagInput/foundation.js

@@ -1,373 +0,0 @@
-import _isUndefined from "lodash/isUndefined";
-import _isFunction from "lodash/isFunction";
-import _isNumber from "lodash/isNumber";
-import _isString from "lodash/isString";
-import BaseFoundation from '../base/foundation';
-import keyCode from '../utils/keyCode';
-import getSplitedArray from './utils/getSplitedArray';
-import isEnterPress from '../utils/isEnterPress';
-import arrayMove from '../utils/arrayMove';
-
-class TagInputFoundation extends BaseFoundation {
-  constructor(adapter) {
-    super(Object.assign({}, adapter));
-    /**
-     * handler of input change
-     */
-
-    this.handleInputChange = e => {
-      const {
-        value
-      } = e.target;
-      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
-     */
-
-
-    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 (_isNumber(maxLength)) {
-        const valueArr = getSplitedArray(value, separator);
-        const inputArr = getSplitedArray(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 (!_isUndefined(valueArr[i]) && (_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;
-              _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.ENTER) {
-        e.preventDefault(); // prevent trigger submit when using in form
-
-        if (inputValue !== '') {
-          this._handleAddTags(e);
-        }
-      }
-
-      const {
-        length
-      } = tagsArray;
-
-      if (code === keyCode.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,
-      max,
-      onExceed,
-      allowDuplicates
-    } = this._adapter.getProps();
-
-    const {
-      inputValue,
-      tagsArray
-    } = this._adapter.getStates();
-
-    let addTags = getSplitedArray(inputValue, separator);
-    addTags = addTags.filter((item, idx) => {
-      // If allowDuplicates is false, then filter duplicates
-      if (!allowDuplicates) {
-        if (tagsArray.includes(item) || addTags.indexOf(item) !== idx) {
-          return false;
-        }
-      } // Filter empty strings and pure space strings in new items
-
-
-      return _isString(item) && item.trim() !== '';
-    });
-    let newTagList = tagsArray.concat(addTags);
-
-    if (_isNumber(max) && newTagList.length > max) {
-      _isFunction(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 (isEnterPress(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
-
-
-    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 && _isFunction(e.preventDefault)) {
-      e.preventDefault();
-    }
-  }
-  /**
-   * 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,
-      newIndex
-    } = callbackProps;
-    const {
-      tagsArray
-    } = this.getStates();
-    const newTagsArray = arrayMove(tagsArray, oldIndex, newIndex);
-
-    if (!this._isControlledComponent()) {
-      this._adapter.setTagsArray(newTagsArray);
-    }
-
-    this._adapter.notifyTagChange(newTagsArray);
-  }
-
-}
-
-export default TagInputFoundation;

package/lib/es/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;