mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
91 lines (90 loc) • 3.75 kB
JavaScript
"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
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 ? 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 ? void 0 : _onMaskClick(e);
},
mask: mask,
maskProps: maskProps,
onSelect: function onSelect(val) {
onChange === null || onChange === void 0 ? void 0 : onChange(val);
debounceBlur.flush();
},
popupProps: popupProps
}, /*#__PURE__*/_react.default.createElement(_SuperInput.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
readOnly: readOnly
}, restProps), {}, {
onFocus: function onFocus(e) {
if (!readOnly && !(restProps === null || restProps === void 0 ? void 0 : restProps.disabled)) {
debounceBlur.cancel();
setFocus(true);
_onFocus === null || _onFocus === void 0 ? 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;