@hi-ui/hiui 2.15.11 → 2.15.12

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

@@ -0,0 +1,702 @@
+"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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+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; }
+
+var Select =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Select, _Component);
+
+  // 第一次自动加载数据标识
+  function Select(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Select);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Select).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 _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('hi-select', className, extraClass),
+        style: style
+      }, _react["default"].createElement("div", {
+        className: "hi-select__input-container",
+        ref: function ref(node) {
+          _this12.selectInputContainer = node;
+        }
+      }, _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, _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"
+      }, _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;