mobile-more
Version:
基于 antd-mobile v5 扩展移动端 UI 组件
125 lines • 4.73 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["options", "filterOption", "hideMaskOnEmpty", "onMaskClick", "mask", "maskProps", "popupBodyStyle", "destroyOnClose", "clearable", "placeholder", "disabledWhiteSpace", "maxLength", "readOnly", "inputProps", "disabled", "required"];
import React, { useCallback, useEffect, useRef } from 'react';
import { isBrowser, throttle } from 'ut2';
import classNames from 'classnames';
import { useLatest, useSetState } from 'rc-hooks';
import BizFormItem from '../FormItem';
import { useConfig } from '../../BizConfigProvider';
import { prefixClass } from '../../../config';
import "./index.css";
import AutoCompleteInput from './AutoCompleteInput';
var prefixCls = "".concat(prefixClass, "-form-item-autocomplete");
var BizFormItemAutoComplete = function BizFormItemAutoComplete(props) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var options = props.options,
filterOption = props.filterOption,
hideMaskOnEmpty = props.hideMaskOnEmpty,
onMaskClick = props.onMaskClick,
mask = props.mask,
maskProps = props.maskProps,
popupBodyStyle = props.popupBodyStyle,
destroyOnClose = props.destroyOnClose,
clearable = props.clearable,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? locale.form.common.inputPlaceholder : _props$placeholder,
disabledWhiteSpace = props.disabledWhiteSpace,
maxLength = props.maxLength,
readOnly = props.readOnly,
inputProps = props.inputProps,
disabled = props.disabled,
required = props.required,
restProps = _objectWithoutProperties(props, _excluded);
var wrapperRef = useRef(null);
var _useSetState = useSetState({
focus: false,
width: 0,
top: 0
}),
_useSetState2 = _slicedToArray(_useSetState, 2),
state = _useSetState2[0],
setState = _useSetState2[1];
var stateRef = useLatest(state);
var adjustSize = useCallback(function () {
if (wrapperRef.current) {
var rect = wrapperRef.current.getBoundingClientRect();
setState({
width: rect.width,
top: rect.height
});
}
}, [setState]);
useEffect(function () {
if (state.focus) {
adjustSize();
}
}, [adjustSize, state.focus]);
useEffect(function () {
if (isBrowser) {
var throttleAdjustSize = throttle(function () {
if (stateRef.current.focus) {
adjustSize();
}
}, 100);
window.addEventListener('resize', throttleAdjustSize);
return function () {
window.removeEventListener('resize', throttleAdjustSize);
};
}
}, [adjustSize, stateRef]);
return /*#__PURE__*/React.createElement("div", {
className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-focus"), state.focus)),
ref: wrapperRef
}, /*#__PURE__*/React.createElement(BizFormItem, _objectSpread({
disabled: disabled,
required: required,
arrow: false,
arrowIcon: false,
rules: [{
required: required,
message: locale.form.common.inputRequired
}]
}, restProps), /*#__PURE__*/React.createElement(AutoCompleteInput, _objectSpread(_objectSpread({
options: options,
filterOption: filterOption,
hideMaskOnEmpty: hideMaskOnEmpty,
onMaskClick: onMaskClick,
mask: mask,
maskProps: maskProps,
clearable: clearable,
placeholder: placeholder,
disabledWhiteSpace: disabledWhiteSpace,
maxLength: maxLength,
readOnly: readOnly,
popupProps: {
destroyOnClose: destroyOnClose,
getContainer: function getContainer() {
return wrapperRef.current;
},
bodyStyle: _objectSpread({
width: state.width,
top: state.top
}, popupBodyStyle)
}
}, inputProps), {}, {
onFocus: function onFocus(e) {
var _inputProps$onFocus;
setState({
focus: true
});
inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 ? void 0 : _inputProps$onFocus.call(inputProps, e);
},
onBlur: function onBlur(e) {
var _inputProps$onBlur;
setState({
focus: false
});
inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 ? void 0 : _inputProps$onBlur.call(inputProps, e);
}
}))));
};
export default BizFormItemAutoComplete;