UNPKG

@flatbiz/antd

Version:
58 lines (54 loc) 2.48 kB
/*! @flatjs/forge MIT @flatbiz/antd */ import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js'; import { hooks } from '@wove/react/hooks'; import { useRef, useState, createElement } from 'react'; import { Input } from 'antd'; import { isUndefinedOrNull } from '@flatbiz/utils'; import { fbaHooks } from './fba-hooks/index.js'; var _excluded = ["value"]; /** * ``` * 1. 在输入框内输入拼音的时候,在拼音尚未输入完成时,字母会触发Input的onChange事件;导致以上效果的原因是input事件没办法知道我们在使用中文输入法 * 2. 此处封装可以解决此问题,在输入拼音未完成时不会触达onChange,选择拼音结果触发onChange * * 3. 设置value时,内部可将受控操作转为非受控操作(具体实现逻辑,自行查看源码) * 4. 适用场景:需要通过onChange事件处理业务逻辑,例如:在onChange中调用接口数据 * 5. defaultValue不可使用 * * ``` */ var InputSearchWrapper = function InputSearchWrapper(props) { var value = props.value, otherProps = _objectWithoutProperties(props, _excluded); var inputValueRef = useRef(); var isFirstUseValueRef = useRef(true); var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), defaultSearchInputKey = _useState2[0], setDefaultSearchInputKey = _useState2[1]; fbaHooks.useEffectCustom(function () { if (isUndefinedOrNull(value) && isFirstUseValueRef.current) return; isFirstUseValueRef.current = false; if (value === inputValueRef.current && !isUndefinedOrNull(value)) return; setDefaultSearchInputKey(Date.now()); }, [value]); var onChange = hooks.useCallbackRef(function (event) { var _props$onChange; if (event.nativeEvent['inputType'] === 'insertCompositionText') { return; } inputValueRef.current = event.target.value; (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, event); }); var onCompositionEnd = hooks.useCallbackRef(function (event) { onChange(event); }); return /*#__PURE__*/createElement(Input.Search, _objectSpread2(_objectSpread2({}, otherProps), {}, { key: defaultSearchInputKey, onCompositionEnd: onCompositionEnd, onChange: onChange, defaultValue: value })); }; export { InputSearchWrapper as I }; //# sourceMappingURL=input-search-wrapper-wVYGWi2O.js.map