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

package/lib/cjs/autoComplete/foundation.js

@@ -1,459 +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 _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
-
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
-
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
-var _foundation = _interopRequireDefault(require("../base/foundation"));
-
-var _lodashEs = require("lodash-es");
-
-var _warning = _interopRequireDefault(require("../utils/warning"));
-
-var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
-
-/* eslint-disable prefer-const, max-len */
-class AutoCompleteFoundation extends _foundation.default {
-  constructor(adapter) {
-    super((0, _assign.default)({}, adapter));
-  }
-
-  init() {
-    this._setDropdownWidth();
-
-    const {
-      defaultOpen,
-      data,
-      defaultValue,
-      value
-    } = this.getProps();
-
-    if (data && data.length) {
-      const initOptions = this._generateList(data);
-
-      this._adapter.updateOptionList(initOptions);
-    }
-
-    if (defaultOpen) {
-      this.openDropdown();
-    } // When both defaultValue and value exist, finally the value of value will be taken as initValue
-
-
-    let initValue = '';
-
-    if (typeof defaultValue !== 'undefined') {
-      initValue = defaultValue;
-    }
-
-    if (typeof value !== 'undefined') {
-      initValue = value;
-    }
-
-    if (typeof initValue !== 'undefined') {
-      this.handleValueChange(initValue);
-    }
-  }
-
-  destroy() {
-    // this._adapter.unregisterClickOutsideHandler();
-    this.unBindKeyBoardEvent();
-  }
-
-  _setDropdownWidth() {
-    const {
-      style,
-      dropdownMatchSelectWidth
-    } = this.getProps();
-    let width;
-
-    if (dropdownMatchSelectWidth) {
-      var _context;
-
-      if (style && (0, _lodashEs.isNumber)(style.width)) {
-        width = style.width;
-      } else if (style && (0, _lodashEs.isString)(style.width) && !(0, _includes.default)(_context = style.width).call(_context, '%')) {
-        width = style.width;
-      } else {
-        width = this._adapter.getTriggerWidth();
-      }
-
-      this._adapter.setOptionWrapperWidth(width);
-    }
-  }
-
-  handleInputClick(e) {
-    const {
-      options
-    } = this.getStates();
-    const {
-      disabled
-    } = this.getProps();
-
-    if (options.length && !disabled) {
-      this.openDropdown();
-    }
-  }
-
-  openDropdown() {
-    this._adapter.toggleListVisible(true);
-
-    this._setDropdownWidth(); // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
-
-
-    this._adapter.notifyDropdownVisibleChange(true);
-
-    this.bindKeyBoardEvent();
-  }
-
-  closeDropdown(e) {
-    this._adapter.toggleListVisible(false); // this._adapter.unregisterClickOutsideHandler();
-
-
-    this._adapter.notifyDropdownVisibleChange(false);
-
-    this.unBindKeyBoardEvent();
-  } // props.data => optionList
-
-
-  _generateList(data) {
-    const {
-      renderItem
-    } = this.getProps();
-    const options = [];
-
-    if (data && data.length) {
-      (0, _forEach.default)(data).call(data, (item, i) => {
-        const key = String(new Date().getTime()) + i;
-        let option = {};
-
-        if ((0, _lodashEs.isString)(item) || (0, _lodashEs.isNumber)(item)) {
-          option = {
-            value: item,
-            key,
-            label: item,
-            show: true
-          };
-        } else if ((0, _lodashEs.isObject)(item) && !(0, _lodashEs.isUndefined)(item.value)) {
-          option = (0, _assign.default)({
-            show: true
-          }, item);
-        }
-
-        if (renderItem && typeof renderItem === 'function') {
-          option.label = renderItem(item);
-        }
-
-        options.push(option);
-      });
-    }
-
-    return options;
-  }
-
-  handleSearch(inputValue) {
-    this._adapter.updateInputValue(inputValue);
-
-    this._adapter.notifySearch(inputValue);
-
-    this._adapter.notifyChange(inputValue);
-  }
-
-  handleSelect(option, optionIndex) {
-    const {
-      renderSelectedItem
-    } = this.getProps();
-    let newInputValue = '';
-
-    if (renderSelectedItem && typeof renderSelectedItem === 'function') {
-      newInputValue = renderSelectedItem(option);
-      (0, _warning.default)(typeof newInputValue !== 'string', 'Warning: [Semi AutoComplete] renderSelectedItem must return string, please check your function return');
-    } else {
-      newInputValue = option.label;
-    } // 1. trigger onSelect
-    // 2. close Dropdown
-
-
-    if (this._isControlledComponent()) {
-      this.closeDropdown();
-      this.notifySelect(option);
-    } else {
-      // 1. update Input
-      // 2. update Selection
-      // 3. trigger onSelect
-      // 4. close Dropdown
-      this._adapter.updateInputValue(newInputValue);
-
-      this.updateSelection(option);
-      this.notifySelect(option);
-      this.closeDropdown();
-    }
-
-    this._adapter.notifyChange(newInputValue);
-
-    this._adapter.updateFocusIndex(optionIndex);
-  }
-
-  updateSelection(option) {
-    const selection = new _map.default();
-
-    if (option) {
-      selection.set(option.label, option);
-    }
-
-    this._adapter.updateSelection(selection);
-  }
-
-  notifySelect(option) {
-    if (this._backwardLabelInValue()) {
-      this._adapter.notifySelect(option);
-    } else {
-      this._adapter.notifySelect(option.value);
-    }
-  }
-
-  _backwardLabelInValue() {
-    const props = this.getProps();
-    let {
-      onSelectWithObject
-    } = props;
-    return onSelectWithObject;
-  }
-
-  handleDataChange(newData) {
-    const options = this._generateList(newData);
-
-    this._adapter.updateOptionList(options);
-
-    this._adapter.rePositionDropdown();
-  }
-
-  handleValueChange(propValue) {
-    let {
-      data
-    } = this.getProps();
-    let selectedValue = '';
-
-    if (this._backwardLabelInValue() && Object.prototype.toString.call(propValue) === '[object Object]') {
-      selectedValue = propValue.value;
-    } else {
-      selectedValue = propValue;
-    }
-
-    let renderSelectedItem = this._getRenderSelectedItem();
-
-    const options = this._generateList(data); // Get the option whose value match from options
-
-
-    let selectedOption = (0, _filter.default)(options).call(options, option => option.value === selectedValue);
-    const canMatchInData = selectedOption.length;
-    const selectedOptionIndex = (0, _findIndex.default)(options).call(options, option => option.value === selectedValue);
-    let inputValue = '';
-
-    if (canMatchInData) {
-      selectedOption = selectedOption[0];
-      inputValue = renderSelectedItem(selectedOption);
-    } else {
-      const cbItem = this._backwardLabelInValue() ? propValue : {
-        label: selectedValue,
-        value: selectedValue
-      };
-      inputValue = renderSelectedItem(cbItem);
-    }
-
-    this._adapter.updateInputValue(inputValue);
-
-    this.updateSelection(canMatchInData ? selectedOption : null);
-
-    this._adapter.updateFocusIndex(selectedOptionIndex);
-  }
-
-  _getRenderSelectedItem() {
-    let {
-      renderSelectedItem
-    } = this.getProps();
-
-    if (typeof renderSelectedItem === 'undefined') {
-      renderSelectedItem = option => option.label;
-    } else if (renderSelectedItem && typeof renderSelectedItem === 'function') {// do nothing
-    }
-
-    return renderSelectedItem;
-  }
-
-  handleClear() {
-    this._adapter.notifyClear();
-  }
-
-  bindKeyBoardEvent() {
-    this._keydownHandler = event => {
-      this._handleKeyDown(event);
-    };
-
-    this._adapter.registerKeyDown(this._keydownHandler);
-  }
-
-  unBindKeyBoardEvent() {
-    if (this._keydownHandler) {
-      this._adapter.unregisterKeyDown(this._keydownHandler);
-    }
-  }
-
-  _handleKeyDown(event) {
-    const key = event.keyCode;
-    const {
-      visible
-    } = this.getStates();
-
-    if (!visible) {
-      return;
-    }
-
-    switch (key) {
-      case _keyCode.default.UP:
-        // Prevent Input's cursor from following the movement
-        event.preventDefault();
-
-        this._handleArrowKeyDown(-1);
-
-        break;
-
-      case _keyCode.default.DOWN:
-        // Prevent Input's cursor from following the movement
-        event.preventDefault();
-
-        this._handleArrowKeyDown(1);
-
-        break;
-
-      case _keyCode.default.ENTER:
-        this._handleEnterKeyDown();
-
-        break;
-
-      case _keyCode.default.ESC:
-        this.closeDropdown();
-        break;
-
-      default:
-        break;
-    }
-  }
-
-  _getEnableFocusIndex(offset) {
-    const {
-      focusIndex,
-      options
-    } = this.getStates();
-    const visibleOptions = (0, _filter.default)(options).call(options, item => item.show);
-    const optionsLength = visibleOptions.length;
-    let index = focusIndex + offset;
-
-    if (index < 0) {
-      index = optionsLength - 1;
-    }
-
-    if (index >= optionsLength) {
-      index = 0;
-    } // avoid newIndex option is disabled
-
-
-    if (offset > 0) {
-      let nearestActiveOption = -1;
-
-      for (let i = 0; i < visibleOptions.length; i++) {
-        const optionIsActive = !visibleOptions[i].disabled;
-
-        if (optionIsActive) {
-          nearestActiveOption = i;
-        }
-
-        if (nearestActiveOption >= index) {
-          break;
-        }
-      }
-
-      index = nearestActiveOption;
-    } else {
-      let nearestActiveOption = visibleOptions.length;
-
-      for (let i = optionsLength - 1; i >= 0; i--) {
-        const optionIsActive = !visibleOptions[i].disabled;
-
-        if (optionIsActive) {
-          nearestActiveOption = i;
-        }
-
-        if (nearestActiveOption <= index) {
-          break;
-        }
-      }
-
-      index = nearestActiveOption;
-    }
-
-    this._adapter.updateFocusIndex(index);
-  }
-
-  _handleArrowKeyDown(offset) {
-    this._getEnableFocusIndex(offset);
-  }
-
-  _handleEnterKeyDown() {
-    const {
-      visible,
-      options,
-      focusIndex
-    } = this.getStates();
-
-    if (focusIndex !== -1 && options.length !== 0) {
-      const visibleOptions = (0, _filter.default)(options).call(options, item => item.show);
-      const selectedOption = visibleOptions[focusIndex];
-      this.handleSelect(selectedOption);
-    } else if (visible) {// this.close();
-    }
-  }
-
-  handleOptionMouseEnter(optionIndex) {
-    this._adapter.updateFocusIndex(optionIndex);
-  }
-
-  handleFocus(e) {
-    this._adapter.notifyFocus(e);
-
-    this.openDropdown();
-  }
-
-  handleBlur(e) {
-    // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
-    // internal-issues:1231
-    (0, _setTimeout2.default)(() => {
-      this._adapter.notifyBlur(e);
-
-      this.closeDropdown();
-    }, 100);
-  }
-
-}
-
-var _default = AutoCompleteFoundation;
-exports.default = _default;

package/lib/cjs/autoComplete/rtl.scss

@@ -1,8 +0,0 @@
-$module: #{$prefix}-autocomplete;
-
-.#{$prefix}-rtl, 
-.#{$prefix}-portal-rtl {
-    .#{$module} {
-        direction: rtl;
-    }
-}

package/lib/cjs/autoComplete/variables.scss

@@ -1,3 +0,0 @@
-// Spacing
-$spacing-autoComplete_loading_wrapper-paddingTop: $spacing-tight; //加载搜索结果时的顶部内边距
-$spacing-autoComplete_loading_wrapper-paddingBottom: $spacing-tight; //加载搜索结果时的底部内边距