@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/select/select-legacy/select-v1/Select.js

@@ -1,706 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _shallowequal = _interopRequireDefault(require("shallowequal"));
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-var _popper = _interopRequireDefault(require("../../../popper"));
-
-var _SelectInput = _interopRequireDefault(require("./SelectInput"));
-
-var _SelectDropdown = _interopRequireDefault(require("./SelectDropdown"));
-
-var _context = _interopRequireDefault(require("../../../context"));
-
-var _fetchJsonp = _interopRequireDefault(require("fetch-jsonp"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var Select = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Select, _Component);
-
-  var _super = _createSuper(Select);
-
-  // 第一次自动加载数据标识
-  function Select(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Select);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "autoloadFlag", true);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputClick", function (e) {
-      var dropdownShow = _this.state.dropdownShow;
-
-      if (dropdownShow) {
-        _this.hideDropdown();
-
-        return;
-      }
-
-      _this.selectInput.focus();
-
-      if (_this.props.disabled) {
-        return;
-      }
-
-      if (!dropdownShow) {
-        _this.showDropdown();
-      }
-    });
-    var list = _this.props.list;
-    var dropdownItems = (0, _cloneDeep["default"])(list);
-
-    var selectedItems = _this.resetSelectedItems(_this.props.value, dropdownItems);
-
-    var searchable = _this.getSearchable();
-
-    _this.debouncedFilterItems = (0, _debounce["default"])(_this.onFilterItems.bind((0, _assertThisInitialized2["default"])(_this)), 300);
-    _this.clickOutsideHandel = _this.clickOutside.bind((0, _assertThisInitialized2["default"])(_this)); // const focusedIndex = this.resetFocusedIndex(false)
-
-    _this.state = {
-      searchable: searchable,
-      queryLength: 1,
-      focusedIndex: 0,
-      selectedItems: selectedItems,
-      dropdownItems: dropdownItems,
-      dropdownShow: false,
-      fetching: false,
-      keyword: '',
-      searchInput: {
-        width: '2px'
-      }
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Select, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        component: this
-      };
-    }
-  }, {
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      if (this.isRemote() && this.props.autoload) {
-        this.remoteSearch();
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('click', this.clickOutsideHandel);
-      this.resetFocusedIndex();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('click', this.clickOutsideHandel);
-    }
-  }, {
-    key: "clickOutside",
-    value: function clickOutside(e) {
-      var selectInput = _reactDom["default"].findDOMNode(this.selectInput);
-
-      if (selectInput && selectInput.contains(e.target)) {
-        return;
-      }
-
-      this.hideDropdown();
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(props) {
-      if (!(0, _shallowequal["default"])(props.value, this.props.value)) {
-        var selectedItems = this.resetSelectedItems(props.value, this.state.dropdownItems); // 异步获取时会从内部改变dropdownItems，所以不能从list取
-
-        this.setState({
-          selectedItems: selectedItems
-        }, function () {// this.onChange()
-        });
-      }
-
-      if (!(0, _shallowequal["default"])(props.list, this.props.list)) {
-        var _selectedItems2 = this.resetSelectedItems(props.value, props.list, true);
-
-        this.setState({
-          selectedItems: _selectedItems2,
-          dropdownItems: (0, _cloneDeep["default"])(props.list)
-        });
-      }
-    }
-  }, {
-    key: "getSearchable",
-    value: function getSearchable() {
-      var searchable = this.props.searchable;
-
-      if (this.isRemote()) {
-        return true;
-      } // if(mode==='multiple' && searchable===undefined) {
-      //   return true
-      // }
-
-
-      return !!searchable;
-    }
-  }, {
-    key: "parseValue",
-    value: function parseValue() {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.value;
-
-      if (Array.isArray(value)) {
-        return value.slice();
-      } else if (typeof value === 'string') {
-        return value.split(',');
-      } else {
-        return [value];
-      }
-    }
-  }, {
-    key: "isRemote",
-    value: function isRemote() {
-      var origin = this.props.origin;
-      return origin && !!origin.url;
-    }
-  }, {
-    key: "resetSelectedItems",
-    value: function resetSelectedItems(value, dropdownItems) {
-      var listChanged = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var values = this.parseValue(value);
-      var selectedItems = listChanged && this.props.mode === 'multiple' ? this.state.selectedItems : []; // 如果是多选，dropdownItems有改动，需要保留之前的选中值
-
-      dropdownItems && dropdownItems.map(function (item) {
-        if (values.indexOf(item.id) !== -1) {
-          var itemIndex = selectedItems.findIndex(function (sItem) {
-            // 多选时检查是否已选中
-            return sItem.id === item.id;
-          });
-          itemIndex === -1 && selectedItems.push(item);
-        }
-      });
-      return selectedItems;
-    }
-  }, {
-    key: "addOption",
-    value: function addOption(option) {
-      var values = this.parseValue();
-      this.state.dropdownItems.push(option);
-      values.indexOf(option.id) > -1 && this.state.selectedItems.push(option);
-      this.forceUpdate();
-    }
-  }, {
-    key: "onEnterSelect",
-    value: function onEnterSelect() {
-      var _this$state = this.state,
-          dropdownItems = _this$state.dropdownItems,
-          focusedIndex = _this$state.focusedIndex;
-      var item = dropdownItems[focusedIndex];
-      this.onClickOption(item, focusedIndex);
-    }
-  }, {
-    key: "onChange",
-    value: function onChange(changedItems) {
-      var selectedItems = this.state.selectedItems;
-      this.props.onChange && this.props.onChange(selectedItems, changedItems);
-    }
-  }, {
-    key: "checkAll",
-    value: function checkAll(e) {
-      var _this2 = this;
-
-      // 全选
-      e && e.stopPropagation();
-      var _this$state2 = this.state,
-          dropdownItems = _this$state2.dropdownItems,
-          selectedItems = _this$state2.selectedItems;
-
-      var _selectedItems = (0, _toConsumableArray2["default"])(selectedItems);
-
-      var changedItems = [];
-      dropdownItems.forEach(function (item) {
-        if (!item.disabled && _this2.matchFilter(item)) {
-          if (!_selectedItems.map(function (selectItem) {
-            return selectItem.id;
-          }).includes(item.id)) {
-            _selectedItems.push(item);
-
-            changedItems.push(item);
-          }
-        }
-      });
-      this.setState({
-        selectedItems: _selectedItems
-      }, function () {
-        _this2.selectInput.focus();
-
-        _this2.onChange(changedItems);
-      });
-    }
-  }, {
-    key: "onClickOption",
-    value: function onClickOption(item, index) {
-      var _this3 = this;
-
-      if (!item || item.disabled) return;
-      var selectedItems = this.state.selectedItems.concat();
-      var focusedIndex = index;
-
-      if (this.props.mode === 'multiple') {
-        var itemIndex = this.state.selectedItems.findIndex(function (sItem) {
-          return sItem.id === item.id;
-        });
-
-        if (itemIndex === -1) {
-          selectedItems.push(item);
-        } else {
-          selectedItems.splice(itemIndex, 1);
-        }
-      } else {
-        selectedItems = [item];
-      }
-
-      this.setState({
-        selectedItems: selectedItems,
-        focusedIndex: focusedIndex
-      }, function () {
-        if (_this3.props.mode !== 'multiple') {
-          _this3.hideDropdown();
-        } else {
-          _this3.selectInput.focus();
-
-          _this3.clearKeyword(); // 多选状态清空筛选
-
-        }
-
-        _this3.onChange(item);
-      });
-    }
-  }, {
-    key: "clearKeyword",
-    value: function clearKeyword() {
-      var _this4 = this;
-
-      this.setState({
-        keyword: ''
-      }, function () {
-        _this4.selectInput.clearInput();
-      });
-    }
-  }, {
-    key: "hideDropdown",
-    value: function hideDropdown() {
-      var _this5 = this;
-
-      this.state.dropdownShow === true && this.setState({
-        dropdownShow: false
-      }, function () {
-        _this5.clearKeyword();
-      });
-    }
-  }, {
-    key: "showDropdown",
-    value: function showDropdown() {
-      this.state.dropdownShow === false && this.setState({
-        dropdownShow: true
-      });
-      this.selectInput.focus();
-    }
-  }, {
-    key: "deleteItem",
-    value: function deleteItem(item) {
-      var _this6 = this;
-
-      if (item.disabled) return;
-      var selectedItems = this.state.selectedItems.concat();
-      var sIndex = selectedItems.findIndex(function (obj, index, arr) {
-        return obj.id === item.id;
-      });
-      selectedItems.splice(sIndex, 1);
-      this.setState({
-        selectedItems: selectedItems
-      }, function () {
-        _this6.selectInput.focus();
-
-        _this6.onChange(item);
-      });
-    } // 全部删除
-
-  }, {
-    key: "deleteAllItems",
-    value: function deleteAllItems() {
-      var _this7 = this;
-
-      var focusedIndex = this.resetFocusedIndex();
-      var changedItems = (0, _toConsumableArray2["default"])(this.state.selectedItems);
-      this.setState({
-        focusedIndex: focusedIndex,
-        selectedItems: []
-      }, function () {
-        _this7.onChange(_this7.props.mode === 'multiple' ? changedItems : changedItems[0]);
-
-        _this7.onFilterItems('');
-      });
-    }
-  }, {
-    key: "remoteSearch",
-    value: function remoteSearch(keyword) {
-      var _this8 = this;
-
-      var _this$props$origin = this.props.origin,
-          url = _this$props$origin.url,
-          func = _this$props$origin.func,
-          error = _this$props$origin.error,
-          _this$props$origin$da = _this$props$origin.data,
-          data = _this$props$origin$da === void 0 ? {} : _this$props$origin$da,
-          _this$props$origin$ty = _this$props$origin.type,
-          type = _this$props$origin$ty === void 0 ? 'GET' : _this$props$origin$ty,
-          _this$props$origin$ke = _this$props$origin.key,
-          key = _this$props$origin$ke === void 0 ? 'keyword' : _this$props$origin$ke,
-          _this$props$origin$js = _this$props$origin.jsonpCallback,
-          jsonpCallback = _this$props$origin$js === void 0 ? 'callback' : _this$props$origin$js,
-          options = (0, _objectWithoutProperties2["default"])(_this$props$origin, ["url", "func", "error", "data", "type", "key", "jsonpCallback"]);
-      keyword = !keyword && this.autoloadFlag && this.props.autoload ? this.props.origin.keyword : keyword;
-      this.autoloadFlag = false; // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词
-
-      url = url.indexOf('?') === -1 ? "".concat(url, "?").concat([key], "=").concat(keyword) : "".concat(url, "&").concat([key], "=").concat(keyword);
-
-      if (type.toUpperCase() === 'POST') {
-        options.body = JSON.stringify(data);
-      }
-
-      this.setState({
-        fetching: true
-      });
-
-      if (type.toUpperCase() === 'JSONP') {
-        var _o = {
-          jsonpCallback: jsonpCallback,
-          jsonpCallbackFunction: jsonpCallback
-        };
-        (0, _fetchJsonp["default"])(url, _o).then(function (res) {
-          return res.json();
-        }).then(function (json) {
-          _this8._setDropdownItems(json, func);
-        });
-      } else {
-        /* eslint-disable */
-        fetch(url, _objectSpread({
-          method: type
-        }, options)).then(function (response) {
-          return response.json();
-        }).then(function (res) {
-          _this8._setDropdownItems(res, func);
-        }, function (err) {
-          error && error(err);
-
-          _this8.setState({
-            fetching: false
-          });
-        });
-      }
-    }
-  }, {
-    key: "_setDropdownItems",
-    value: function _setDropdownItems(res, func) {
-      var dropdownItems = [];
-
-      if (func) {
-        dropdownItems = func(res);
-      } else {
-        dropdownItems = res.data;
-      }
-
-      if (Array.isArray(dropdownItems)) {
-        var selectedItems = this.resetSelectedItems(this.props.value, dropdownItems, true);
-        this.setState({
-          dropdownItems: dropdownItems,
-          selectedItems: selectedItems
-        });
-      }
-
-      this.setState({
-        fetching: false
-      });
-    }
-  }, {
-    key: "onFilterItems",
-    value: function onFilterItems(keyword) {
-      var _this9 = this;
-
-      this.setState({
-        keyword: keyword
-      }, function () {
-        return _this9.resetFocusedIndex();
-      });
-
-      if (this.props.origin) {
-        // this.setState({
-        //   dropdownItems: []
-        // })
-        if (this.props.autoload || keyword.toString().length >= this.state.queryLength) {
-          this.remoteSearch(keyword);
-        }
-      }
-    }
-  }, {
-    key: "matchFilter",
-    value: function matchFilter(item) {
-      var _this$state3 = this.state,
-          searchable = _this$state3.searchable,
-          keyword = _this$state3.keyword;
-      return this.isRemote() || !searchable || !keyword || searchable && keyword && (String(item.id).includes(keyword) || String(item.name).includes(keyword));
-    }
-  }, {
-    key: "resetFocusedIndex",
-    value: function resetFocusedIndex() {
-      var _this10 = this;
-
-      var setState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var focusedIndex = -1;
-      this.state.dropdownItems.every(function (item) {
-        focusedIndex++;
-
-        if (!item.disabled && _this10.matchFilter(item)) {
-          return false;
-        }
-
-        return true;
-      });
-      setState && this.setState({
-        focusedIndex: focusedIndex
-      });
-      return focusedIndex;
-    }
-  }, {
-    key: "setFocusedIndex",
-    value: function setFocusedIndex(focusedIndex) {
-      this.setState({
-        focusedIndex: focusedIndex
-      });
-    }
-  }, {
-    key: "moveFocusedIndex",
-    value: function moveFocusedIndex(direction) {
-      var _this11 = this;
-
-      var focusedIndex = this.state.focusedIndex;
-      var dropdownItems = this.state.dropdownItems;
-
-      if (direction === 'up') {
-        dropdownItems.slice(0, focusedIndex).reverse().every(function (item) {
-          focusedIndex--;
-
-          if (!item.disabled && _this11.matchFilter(item)) {
-            return false;
-          }
-
-          return true;
-        });
-      } else {
-        dropdownItems.slice(focusedIndex + 1).every(function (item) {
-          focusedIndex++;
-
-          if (!item.disabled && _this11.matchFilter(item)) {
-            return false;
-          }
-
-          return true;
-        });
-      }
-
-      this.setState({
-        focusedIndex: focusedIndex
-      });
-    }
-  }, {
-    key: "localeDatasProps",
-    value: function localeDatasProps(key) {
-      var localeDatas = this.props.localeDatas;
-
-      if (this.props[key]) {
-        return this.props[key];
-      } else {
-        return localeDatas.select[key];
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this12 = this;
-
-      var _this$props = this.props,
-          mode = _this$props.mode,
-          showCheckAll = _this$props.showCheckAll,
-          className = _this$props.className,
-          disabled = _this$props.disabled,
-          clearable = _this$props.clearable,
-          style = _this$props.style,
-          children = _this$props.children,
-          noFoundTip = _this$props.noFoundTip,
-          optionWidth = _this$props.optionWidth,
-          dropdownRender = _this$props.dropdownRender,
-          multipleMode = _this$props.multipleMode,
-          _onClick = _this$props.onClick,
-          onBlur = _this$props.onBlur,
-          onFocus = _this$props.onFocus;
-      var placeholder = this.localeDatasProps('placeholder');
-      var _this$state4 = this.state,
-          selectedItems = _this$state4.selectedItems,
-          dropdownItems = _this$state4.dropdownItems,
-          searchable = _this$state4.searchable,
-          dropdownShow = _this$state4.dropdownShow,
-          focusedIndex = _this$state4.focusedIndex,
-          fetching = _this$state4.fetching;
-      var extraClass = {
-        'is-multiple': mode === 'multiple',
-        'is-single': mode === 'single'
-      };
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])('hi-select', className, extraClass),
-        style: style
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-select__input-container",
-        ref: function ref(node) {
-          _this12.selectInputContainer = node;
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_SelectInput["default"], {
-        ref: function ref(node) {
-          _this12.selectInput = node;
-        },
-        mode: mode,
-        disabled: disabled,
-        searchable: searchable,
-        clearable: clearable,
-        dropdownShow: dropdownShow,
-        placeholder: placeholder,
-        selectedItems: selectedItems,
-        dropdownItems: dropdownItems,
-        multipleMode: multipleMode,
-        container: this.selectInputContainer,
-        moveFocusedIndex: this.moveFocusedIndex.bind(this),
-        onClick: function onClick() {
-          if (_this12.props.open) {
-            _this12.handleInputClick();
-          }
-
-          _onClick();
-        },
-        onBlur: onBlur,
-        onFocus: onFocus,
-        onDelete: this.deleteItem.bind(this),
-        onClear: this.deleteAllItems.bind(this),
-        onSearch: this.debouncedFilterItems.bind(this),
-        onEnterSelect: this.onEnterSelect.bind(this)
-      })), children, /*#__PURE__*/_react["default"].createElement(_popper["default"], {
-        show: dropdownShow && this.props.open,
-        attachEle: this.selectInputContainer,
-        zIndex: 1050,
-        topGap: 5,
-        className: "hi-select__popper",
-        placement: "top-bottom-start"
-      }, /*#__PURE__*/_react["default"].createElement(_SelectDropdown["default"], {
-        noFoundTip: noFoundTip,
-        mode: mode,
-        showCheckAll: showCheckAll,
-        checkAll: this.checkAll.bind(this),
-        loading: fetching,
-        focusedIndex: focusedIndex,
-        matchFilter: this.matchFilter.bind(this),
-        setFocusedIndex: this.setFocusedIndex.bind(this),
-        optionWidth: optionWidth,
-        dropdownItems: dropdownItems,
-        selectedItems: selectedItems,
-        dropdownRender: dropdownRender,
-        onClickOption: this.onClickOption.bind(this)
-      })));
-    }
-  }]);
-  return Select;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(Select, "propTypes", {
-  mode: _propTypes["default"].oneOf(['single', 'multiple']),
-  multipleMode: _propTypes["default"].oneOf(['wrap', 'nowrap']),
-  list: _propTypes["default"].array,
-  origin: _propTypes["default"].object,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].bool, _propTypes["default"].number]),
-  showCheckAll: _propTypes["default"].bool,
-  autoload: _propTypes["default"].bool,
-  searchable: _propTypes["default"].bool,
-  clearable: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  placeholder: _propTypes["default"].string,
-  noFoundTip: _propTypes["default"].string,
-  optionWidth: _propTypes["default"].number,
-  style: _propTypes["default"].object,
-  onChange: _propTypes["default"].func,
-  dropdownRender: _propTypes["default"].func,
-  open: _propTypes["default"].bool
-});
-(0, _defineProperty2["default"])(Select, "defaultProps", {
-  list: [],
-  mode: 'single',
-  multipleMode: 'wrap',
-  disabled: false,
-  clearable: true,
-  value: '',
-  autoload: false,
-  placeholder: '请选择',
-  noFoundTip: '无内容',
-  showCheckAll: false,
-  open: true,
-  onClick: function onClick() {},
-  onBlur: function onBlur() {},
-  onFocus: function onFocus() {}
-});
-Select.childContextTypes = {
-  component: _propTypes["default"].any
-};
-
-var _default = (0, _context["default"])(Select);
-
-exports["default"] = _default;