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

package/lib/es/tabs/foundation.js

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

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

@@ -0,0 +1,12 @@
+/* eslint-disable max-len */
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${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

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

@@ -0,0 +1,9 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${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

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

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

@@ -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;