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

基于 Antd 4 的组件封装

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
require("antd/es/auto-complete/style");
var _autoComplete = _interopRequireDefault(require("antd/es/auto-complete"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _excluded = ["value", "onChange", "autoList", "placeholder", "getPopupContainer"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var Option = _autoComplete["default"].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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
  var _useState = (0, _react.useState)(''),
    valueNow = _useState[0],
    setValueNow = _useState[1];
  var _useState2 = (0, _react.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);
  };
  (0, _react.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["default"].createElement(_autoComplete["default"], (0, _extends2["default"])({}, 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["default"].createElement(Option, {
      key: l,
      value: l
    }, l);
  }));
};
CompAutoComplete.propTypes = {
  value: _propTypes["default"].object,
  onChange: _propTypes["default"].func,
  autoList: _propTypes["default"].array,
  placeholder: _propTypes["default"].string,
  getPopupContainer: _propTypes["default"].any
};
CompAutoComplete.defaultProps = {
  value: {
    key: '',
    value: ''
  },
  onChange: function onChange() {},
  autoList: [],
  placeholder: '',
  getPopupContainer: function getPopupContainer(n) {
    return n.parentNode;
  }
};
var _default = CompAutoComplete;
exports["default"] = _default;