@jannie-shao/components-antd4/es/auto-complete/index.js

基于 Antd 4 的组件封装

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import "antd/es/auto-complete/style";
import _AutoComplete from "antd/es/auto-complete";
var _excluded = ["value", "onChange", "autoList", "placeholder", "getPopupContainer"];
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
var Option = _AutoComplete.Option;

// autoList: { key: 'sellerId', label: 'Seller Id', rule: /^[0-9]*$/, forceType: 'number' }
var _rule = {
  number: /^[0-9]*$/,
  empId: /^(([Ww][Bb])|\d)\d*$/
};
var _funcForceType = {
  number: function number(v) {
    return Number(v);
  }
};
var CompAutoComplete = function CompAutoComplete(_ref) {
  var value = _ref.value,
    onChange = _ref.onChange,
    autoList = _ref.autoList,
    placeholder = _ref.placeholder,
    getPopupContainer = _ref.getPopupContainer,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(''),
    valueNow = _useState[0],
    setValueNow = _useState[1];
  var _useState2 = useState([]),
    list = _useState2[0],
    setList = _useState2[1];
  var initValue = function initValue(v) {
    var labelStr = v.match(/^\[.{1,}\] /);
    if (!labelStr || labelStr.length === 0) return {};
    var label = labelStr[0].substring(1, labelStr[0].length - 2);
    var temp = autoList.filter(function (l) {
      return l.label === label;
    })[0] || {};
    var key = (temp === null || temp === void 0 ? void 0 : temp.key) || label;
    var tempVal = v.substring(labelStr[0].length);
    var vNow = tempVal && _funcForceType[temp.forceType] ? _funcForceType[temp.forceType](tempVal) : tempVal;
    if (vNow) {
      return {
        key: key,
        value: vNow
      };
    }
    return {};
  };
  var handleSearch = function handleSearch(val) {
    if (val === void 0) {
      val = '';
    }
    var v = (val || '').trim();
    if (/^\[.{1,}\]$/.test(v)) {
      setValueNow('');
      setList([]);
      return;
    }
    setValueNow(v);
    if (/^\[.{1,}\] /.test(v)) {
      setList([v]);
      return;
    }
    var labels = [];
    autoList.forEach(function (item) {
      var label = item.label || item.key;
      var ruleTemp = item.rule || _rule[item.ruleType || item.forceType] || '';
      if (!ruleTemp || !val) {
        labels.push(label);
        return;
      }
      var reg = new RegExp(ruleTemp);
      if (reg.test(v)) {
        labels.push(label);
      }
    });
    setList(labels.map(function (l) {
      return "[" + l + "] " + v;
    }));
  };
  var handleChange = function handleChange(val) {
    var _tempList$;
    if (val === void 0) {
      val = '';
    }
    if (!/^\[.{1,}\] /.test(val)) {
      setValueNow('');
      onChange({});
      return;
    }
    var v = initValue(val);
    var tempList = autoList.filter(function (l) {
      return l.key === v.key;
    });
    if (tempList.length === 0 || !new RegExp((_tempList$ = tempList[0]) === null || _tempList$ === void 0 ? void 0 : _tempList$.rule).test(v.value)) {
      setValueNow('');
      onChange({});
      return;
    }
    setValueNow(val);
    onChange(v);
  };
  useEffect(function () {
    var _autoList$filter$;
    if (!value || Object.prototype.toString.call(value) !== '[object Object]') return;
    if (!value.key) return;
    var v = "[" + (((_autoList$filter$ = autoList.filter(function (l) {
      return l.key === value.key;
    })[0]) === null || _autoList$filter$ === void 0 ? void 0 : _autoList$filter$.label) || value.key) + "] " + value.value;
    setValueNow(v);
  }, [value, autoList]);
  return /*#__PURE__*/React.createElement(_AutoComplete, _extends({}, props, {
    getPopupContainer: getPopupContainer,
    placeholder: placeholder || autoList.map(function (l) {
      return l.label || l.key;
    }).join(' / '),
    onFocus: function onFocus() {
      return handleSearch(valueNow);
    },
    onSearch: handleSearch,
    onChange: handleChange,
    onBlur: function onBlur() {
      return handleChange(valueNow);
    },
    value: valueNow
  }), list.map(function (l) {
    return /*#__PURE__*/React.createElement(Option, {
      key: l,
      value: l
    }, l);
  }));
};
CompAutoComplete.propTypes = {
  value: PropTypes.object,
  onChange: PropTypes.func,
  autoList: PropTypes.array,
  placeholder: PropTypes.string,
  getPopupContainer: PropTypes.any
};
CompAutoComplete.defaultProps = {
  value: {
    key: '',
    value: ''
  },
  onChange: function onChange() {},
  autoList: [],
  placeholder: '',
  getPopupContainer: function getPopupContainer(n) {
    return n.parentNode;
  }
};
export default CompAutoComplete;