mobile-more/lib/components/BizForm/ItemInput/SuperInput.js

基于 antd-mobile v5 扩展移动端 UI 组件

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _ut = require("ut2");
var _utilHelpers = require("util-helpers");
var _rcHooks = require("rc-hooks");
var _antdMobile = require("antd-mobile");
var _config = require("../../../config");
var _normalize = require("../utils/normalize");
require("./SuperInput.css");
var _excluded = ["type", "disabledWhiteSpace", "prefix", "suffix", "onBlur", "max", "min", "precision", "useFloor", "inputMode", "format", "maxLength"];
var prefixCls = "".concat(_config.prefixClass, "-input");
var SuperInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var type = _ref.type,
    disabledWhiteSpace = _ref.disabledWhiteSpace,
    prefix = _ref.prefix,
    suffix = _ref.suffix,
    onBlur = _ref.onBlur,
    _ref$max = _ref.max,
    max = _ref$max === void 0 ? Number.MAX_SAFE_INTEGER : _ref$max,
    _ref$min = _ref.min,
    min = _ref$min === void 0 ? Number.MIN_SAFE_INTEGER : _ref$min,
    precision = _ref.precision,
    useFloor = _ref.useFloor,
    inputMode = _ref.inputMode,
    _ref$format = _ref.format,
    format = _ref$format === void 0 ? true : _ref$format,
    maxLength = _ref.maxLength,
    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var internalRef = _react.default.useRef(null);
  var _useControllableValue = (0, _rcHooks.useControllableValue)(restProps),
    _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
    state = _useControllableValue2[0],
    setState = _useControllableValue2[1];
  var maxLen = _react.default.useMemo(function () {
    if (!(0, _ut.isUndefined)(maxLength)) {
      return maxLength;
    }
    if (!format) {
      if (type === 'mobile') {
        return 11;
      } else if (type === 'idCard') {
        return 18;
      }
    }
    return undefined;
  }, [format, maxLength, type]);
  var needAdjustPos = _react.default.useMemo(function () {
    return format && (type === 'mobile' || type === 'bankCard' || type === 'idCard' || type === 'number' || disabledWhiteSpace);
  }, [disabledWhiteSpace, format, type]);
  var realType = _react.default.useMemo(function () {
    if (type === 'mobile') {
      return 'tel';
    }
    if (type === 'bankCard' || type === 'idCard' || type === 'number' || type === 'email') {
      return 'text';
    }
    return type;
  }, [type]);
  var realInputMode = _react.default.useMemo(function () {
    if (!inputMode && type === 'number') {
      return 'decimal';
    }
    return inputMode;
  }, [type, inputMode]);
  var calcPosOpts = _react.default.useMemo(function () {
    var ret = {};
    if (type === 'bankCard') {
      ret.type = 'bankCard';
    } else if (type === 'mobile') {
      ret.type = 'mobile';
    } else if (type === 'idCard') {
      ret.maskReg = /[^\dx]/gi;
      ret.placeholderChars = [];
    } else if (type === 'number') {
      ret.maskReg = /[^\d\\.-]/g;
      ret.placeholderChars = [];
    } else if (disabledWhiteSpace) {
      ret.maskReg = /\s/g;
      ret.placeholderChars = [];
    }
    return ret;
  }, [type, disabledWhiteSpace]);
  var normalize = _react.default.useCallback(function (val) {
    var newValue = val;
    if (type === 'mobile') {
      newValue = (0, _normalize.normalizeMobile)(val, format);
    } else if (type === 'bankCard') {
      newValue = (0, _normalize.normalizeBankCard)(val, format);
    } else if (type === 'idCard') {
      newValue = (0, _normalize.normalizeIdCard)(val, format);
    } else if (type === 'number') {
      newValue = (0, _normalize.normalizeNumber)(val);
    } else if (type === 'email') {
      newValue = (0, _normalize.normalizeEmail)(val);
    } else if (disabledWhiteSpace) {
      newValue = (0, _normalize.normalizeNotWhiteSpace)(val);
    }
    return newValue;
  }, [disabledWhiteSpace, format, type]);
  var handleChange = _react.default.useCallback(function (val) {
    var _internalRef$current, _internalRef$current2;
    var inputElement = (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.nativeElement;
    var prevPos = (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 || (_internalRef$current2 = _internalRef$current2.nativeElement) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.selectionEnd;
    var nextCtrlValue = normalize(val);
    setState(nextCtrlValue);
    if (inputElement && needAdjustPos) {
      var adjustPos = (0, _utilHelpers.calculateCursorPosition)(prevPos, state, val, nextCtrlValue, calcPosOpts);
      if (inputElement) {
        if (val !== nextCtrlValue) {
          window.setTimeout(function () {
            inputElement.selectionStart = inputElement.selectionEnd = adjustPos;
          });
        } else {
          inputElement.selectionStart = inputElement.selectionEnd = adjustPos;
        }
      }
    }
  }, [normalize, setState, needAdjustPos, state, calcPosOpts]);

  // 处理最大最小值，以及精度
  var handelBlur = _react.default.useCallback(function (e) {
    if (type === 'number' && state) {
      var numberValue = Number(state);
      if (numberValue > max) {
        numberValue = max;
      } else if (numberValue < min) {
        numberValue = min;
      }
      var newValue = typeof precision === 'number' && precision >= 0 ? (useFloor ? (0, _ut.floor)(numberValue, precision) : numberValue).toFixed(precision) : String(numberValue);
      if (newValue !== state) {
        setState(newValue);
      }
    }
    onBlur === null || onBlur === void 0 || onBlur(e);
  }, [type, state, onBlur, max, min, precision, useFloor, setState]);
  var triggerFocus = _react.default.useCallback(function () {
    var _internalRef$current3;
    var inputEl = (_internalRef$current3 = internalRef.current) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.nativeElement;
    if (inputEl) {
      var startPos = inputEl.selectionStart;
      var endPos = inputEl.selectionEnd;
      inputEl.focus();
      window.setTimeout(function () {
        inputEl.setSelectionRange(startPos, endPos);
      });
    }
  }, []);
  _react.default.useImperativeHandle(ref, function () {
    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, internalRef.current), {}, {
      focus: triggerFocus
    });
  }, [triggerFocus]);
  _react.default.useEffect(function () {
    // 处理直接通过 form.setFieldsValue 或 initialValues
    if (state && needAdjustPos) {
      var newValue = normalize(state);
      if (newValue !== state) {
        handleChange(newValue);
      }
    }
  }, [handleChange, needAdjustPos, normalize, type, state]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls)
  }, prefix && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-prefix")
  }, prefix), /*#__PURE__*/_react.default.createElement(_antdMobile.Input, (0, _extends2.default)({
    inputMode: realInputMode,
    ref: internalRef,
    autoComplete: "off"
  }, restProps, {
    type: realType,
    value: state,
    onChange: handleChange,
    onBlur: handelBlur,
    maxLength: maxLen
  })), suffix && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefixCls, "-suffix")
  }, suffix));
});
SuperInput.displayName = 'SuperInput';
var _default = exports.default = SuperInput;