mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
83 lines • 3.19 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["options", "filterOption", "hideMaskOnEmpty", "onMaskClick", "mask", "popupProps", "maskProps", "readOnly", "onFocus", "onBlur", "onChange", "value"];
import React, { useCallback } from 'react';
import { useDebounceFn, useSafeState } from 'rc-hooks';
import SuperInput from '../ItemInput/SuperInput';
import AutoComplete from './AutoComplete';
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 = _objectWithoutProperties(props, _excluded);
var _useSafeState = useSafeState(false),
_useSafeState2 = _slicedToArray(_useSafeState, 2),
focus = _useSafeState2[0],
setFocus = _useSafeState2[1];
var debounceBlur = useDebounceFn(function (e) {
setFocus(false);
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
}, 300);
var filterMethod = 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.createElement(AutoComplete, {
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.createElement(SuperInput, _objectSpread(_objectSpread({
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
})));
};
export default AutoCompleteInput;