mobile-more/lib/components/BizForm/ItemAutoComplete/index.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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _ut = require("ut2");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcHooks = require("rc-hooks");
var _FormItem = _interopRequireDefault(require("../FormItem"));
var _AutoCompleteInput = _interopRequireDefault(require("./AutoCompleteInput"));
var _BizConfigProvider = require("../../BizConfigProvider");
var _config = require("../../../config");
var _excluded = ["options", "filterOption", "hideMaskOnEmpty", "onMaskClick", "mask", "maskProps", "popupBodyStyle", "destroyOnClose", "clearable", "placeholder", "disabledWhiteSpace", "maxLength", "readOnly", "inputProps", "className", "disabled", "required"];
var prefixCls = "".concat(_config.formItemPrefixClass, "-auto-complete");
var BizFormItemAutoComplete = function BizFormItemAutoComplete(props) {
  var _useConfig = (0, _BizConfigProvider.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,
    className = props.className,
    disabled = props.disabled,
    required = props.required,
    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var wrapperRef = (0, _react.useRef)(null);
  var _useSetState = (0, _rcHooks.useSetState)({
      focus: false,
      width: 0,
      top: 0
    }),
    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
    state = _useSetState2[0],
    setState = _useSetState2[1];
  var stateRef = (0, _rcHooks.useLatest)(state);
  var adjustSize = (0, _react.useCallback)(function () {
    if (wrapperRef.current) {
      var rect = wrapperRef.current.getBoundingClientRect();
      setState({
        width: rect.width,
        top: rect.height
      });
    }
  }, [setState]);
  (0, _react.useEffect)(function () {
    if (state.focus) {
      adjustSize();
    }
  }, [adjustSize, state.focus]);
  (0, _react.useEffect)(function () {
    if (_ut.isBrowser) {
      var throttleAdjustSize = (0, _ut.throttle)(function () {
        if (stateRef.current.focus) {
          adjustSize();
        }
      }, 100);
      window.addEventListener('resize', throttleAdjustSize);
      return function () {
        window.removeEventListener('resize', throttleAdjustSize);
      };
    }
  }, [adjustSize, stateRef]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-wrapper"),
    ref: wrapperRef
  }, /*#__PURE__*/_react.default.createElement(_FormItem.default, (0, _extends2.default)({
    disabled: disabled,
    required: required,
    arrow: false,
    arrowIcon: false,
    rules: [{
      required: required,
      message: locale.form.common.inputRequired
    }],
    className: (0, _classnames.default)(prefixCls, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-focus"), state.focus), className)
  }, restProps), /*#__PURE__*/_react.default.createElement(_AutoCompleteInput.default, (0, _extends2.default)({
    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: (0, _objectSpread2.default)({
        width: state.width,
        top: state.top
      }, popupBodyStyle)
    }
  }, inputProps, {
    onFocus: function onFocus(e) {
      var _inputProps$onFocus;
      setState({
        focus: true
      });
      inputProps === null || inputProps === void 0 || (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 || _inputProps$onFocus.call(inputProps, e);
    },
    onBlur: function onBlur(e) {
      var _inputProps$onBlur;
      setState({
        focus: false
      });
      inputProps === null || inputProps === void 0 || (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, e);
    }
  }))));
};
var _default = exports.default = BizFormItemAutoComplete;