mobile-more/lib/components/BizForm/ItemAutoComplete/AutoCompleteInput.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _rcHooks = require("rc-hooks");
var _SuperInput = _interopRequireDefault(require("../ItemInput/SuperInput"));
var _AutoComplete = _interopRequireDefault(require("./AutoComplete"));
var _excluded = ["options", "filterOption", "hideMaskOnEmpty", "onMaskClick", "mask", "popupProps", "maskProps", "readOnly", "onFocus", "onBlur", "onChange", "value"];
var AutoCompleteInput = function AutoCompleteInput(props) {
  var _props$options = props.options,
    options = _props$options === void 0 ? [] : _props$options,
    filterOption = props.filterOption,
    hideMaskOnEmpty = props.hideMaskOnEmpty,
    _onMaskClick = props.onMaskClick,
    mask = props.mask,
    popupProps = props.popupProps,
    maskProps = props.maskProps,
    readOnly = props.readOnly,
    _onFocus = props.onFocus,
    onBlur = props.onBlur,
    onChange = props.onChange,
    value = props.value,
    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var _useSafeState = (0, _rcHooks.useSafeState)(false),
    _useSafeState2 = (0, _slicedToArray2.default)(_useSafeState, 2),
    focus = _useSafeState2[0],
    setFocus = _useSafeState2[1];
  var debounceBlur = (0, _rcHooks.useDebounceFn)(function (e) {
    setFocus(false);
    onBlur === null || onBlur === void 0 || onBlur(e);
  }, 300);
  var filterMethod = (0, _react.useCallback)(function (inputValue, option) {
    if (typeof filterOption === 'function') {
      return filterOption(inputValue, option);
    }
    if (filterOption) {
      var trimVal = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
      return !trimVal || option.indexOf(trimVal) > -1;
    }
    return true;
  }, [filterOption]);
  var opts = options.filter(function (item) {
    return filterMethod(value || '', item);
  });
  return /*#__PURE__*/_react.default.createElement(_AutoComplete.default, {
    pure: true,
    value: value,
    visible: focus,
    options: options,
    filterOption: filterOption,
    hideMaskOnEmpty: hideMaskOnEmpty,
    onMaskClick: function onMaskClick(e) {
      debounceBlur.flush();
      _onMaskClick === null || _onMaskClick === void 0 || _onMaskClick(e);
    },
    mask: mask,
    maskProps: maskProps,
    onSelect: function onSelect(val) {
      onChange === null || onChange === void 0 || onChange(val);
      debounceBlur.flush();
    },
    popupProps: popupProps
  }, /*#__PURE__*/_react.default.createElement(_SuperInput.default, (0, _extends2.default)({
    readOnly: readOnly
  }, restProps, {
    onFocus: function onFocus(e) {
      if (!readOnly && !(restProps !== null && restProps !== void 0 && restProps.disabled)) {
        debounceBlur.cancel();
        setFocus(true);
        _onFocus === null || _onFocus === void 0 || _onFocus(e);
      }
    },
    onBlur: function onBlur(e) {
      debounceBlur.run(e);
      if (hideMaskOnEmpty && opts.length === 0) {
        debounceBlur.flush();
      }
    },
    value: value,
    onChange: onChange
  })));
};
var _default = exports.default = AutoCompleteInput;