@jannie-shao/components-antd4/es/input-select/index.js

基于 Antd 4 的组件封装

import "antd/es/select/style";
import _Select from "antd/es/select";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["options", "forceMatch"];
import React, { useEffect, useState } from 'react';
var check = function check(type, a, b, force) {
  if (type === void 0) {
    type = 'equal';
  }
  if (a === void 0) {
    a = '';
  }
  if (b === void 0) {
    b = '';
  }
  if (force === void 0) {
    force = false;
  }
  var aNow = force ? a : a.toLowerCase();
  var bNow = force ? b : b.toLowerCase();
  if (type === 'in') {
    return aNow.indexOf(bNow) >= 0;
  }
  return a.toLowerCase() === b.toLowerCase();
};
var InputSelect = function InputSelect(_ref) {
  var _ref$options = _ref.options,
    options = _ref$options === void 0 ? [] : _ref$options,
    _ref$forceMatch = _ref.forceMatch,
    forceMatch = _ref$forceMatch === void 0 ? false : _ref$forceMatch,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState([]),
    optionsNow = _useState[0],
    setOptionsNow = _useState[1];
  var handleSearch = function handleSearch(v) {
    var flag = v ? options.filter(function (o) {
      return check('equal', o.label, v, forceMatch);
    }).length === 0 : false;
    setOptionsNow(flag ? [{
      label: v,
      value: v
    }].concat(options) : options);
  };
  useEffect(function () {
    setOptionsNow(options || []);
  }, [options]);
  return /*#__PURE__*/React.createElement(_Select, _extends({}, props, {
    options: optionsNow,
    showSearch: true,
    filterOption: function filterOption(input, option) {
      return check('in', option.label, input, forceMatch);
    },
    onSearch: handleSearch
  }));
};
export default InputSelect;