mobile-more/lib/components/BizForm/ItemInput/index.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _utilHelpers = require("util-helpers");
var _dolyIcons = require("doly-icons");
var _FormItem = _interopRequireDefault(require("../FormItem"));
var _SuperInput = _interopRequireDefault(require("./SuperInput"));
var _BizConfigProvider = require("../../BizConfigProvider");
var _excluded = ["type", "maxLength", "max", "min", "disabledWhiteSpace", "precision", "clearable", "placeholder", "inputProps", "visibilityToggle", "iconRender", "required", "transform", "format", "loose", "useFloor", "readOnly"];
var BizFormItemInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _useConfig = (0, _BizConfigProvider.useConfig)(),
    locale = _useConfig.locale;
  var outType = props.type,
    maxLength = props.maxLength,
    max = props.max,
    min = props.min,
    disabledWhiteSpace = props.disabledWhiteSpace,
    precision = props.precision,
    clearable = props.clearable,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? locale.form.common.inputPlaceholder : _props$placeholder,
    inputProps = props.inputProps,
    _props$visibilityTogg = props.visibilityToggle,
    visibilityToggle = _props$visibilityTogg === void 0 ? true : _props$visibilityTogg,
    iconRender = props.iconRender,
    required = props.required,
    outTransform = props.transform,
    _props$format = props.format,
    format = _props$format === void 0 ? false : _props$format,
    _props$loose = props.loose,
    loose = _props$loose === void 0 ? false : _props$loose,
    useFloor = props.useFloor,
    readOnly = props.readOnly,
    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var inputRef = _react.default.useRef(null);
  var mergeType = outType || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) || 'text';
  var hasSpecialType = mergeType === 'bankCard' || mergeType === 'mobile' || mergeType === 'idCard' || mergeType === 'number';

  // only type password
  var _React$useState = _react.default.useState(false),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    visibilityPassword = _React$useState2[0],
    setVisibilityPassword = _React$useState2[1]; // 密码是否可见
  var passwordVisibilityIcon = mergeType !== 'password' || !visibilityToggle ? null : /*#__PURE__*/_react.default.createElement("div", {
    style: {
      color: 'var(--adm-color-weak, "#999")',
      cursor: 'pointer'
    },
    onClick: function onClick() {
      var _inputRef$current;
      setVisibilityPassword(function (v) {
        return !v;
      });
      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
    }
  }, typeof iconRender === 'function' ? iconRender(visibilityPassword) : visibilityPassword ? /*#__PURE__*/_react.default.createElement(_dolyIcons.Eye, null) : /*#__PURE__*/_react.default.createElement(_dolyIcons.EyeSlash, null));
  var transform = _react.default.useCallback(function (value) {
    if (typeof outTransform === 'function') {
      return outTransform(value);
    }
    if (format && (mergeType === 'bankCard' || mergeType === 'mobile') && value) {
      return value.replace(/\D/g, '');
    }
    return value;
  }, [format, mergeType, outTransform]);
  var type = mergeType === 'password' ? !visibilityPassword ? 'password' : 'text' : mergeType;
  _react.default.useImperativeHandle(ref, function () {
    return inputRef.current;
  }, [inputRef]);
  return /*#__PURE__*/_react.default.createElement(_FormItem.default, (0, _extends2.default)({
    required: required,
    arrow: false,
    arrowIcon: false,
    rules: [{
      required: required,
      message: locale.form.common.inputRequired
    }, {
      validator: function validator(_, value) {
        var errMsg = '';
        if (value) {
          if (outType === 'mobile' && !(0, _utilHelpers.isMobile)(format ? transform(value) : value) || outType === 'bankCard' && !(0, _utilHelpers.isBankCard)(format ? transform(value) : value, {
            loose: loose
          }) || outType === 'idCard' && !(0, _utilHelpers.isIdCard)(value, {
            loose: loose
          }) || outType === 'email' && !(0, _utilHelpers.isEmail)(value)) {
            errMsg = locale.form.input.invalid;
          }
        }
        if (errMsg) {
          return Promise.reject(errMsg);
        }
        return Promise.resolve();
      },
      transform: transform
    }],
    transform: transform,
    validateTrigger: hasSpecialType ? 'onBlur' : 'onChange'
  }, restProps), /*#__PURE__*/_react.default.createElement(_SuperInput.default, (0, _extends2.default)({
    placeholder: placeholder,
    clearable: clearable,
    disabledWhiteSpace: disabledWhiteSpace,
    precision: precision,
    maxLength: maxLength,
    max: max,
    min: min,
    suffix: passwordVisibilityIcon,
    useFloor: useFloor,
    readOnly: readOnly
  }, inputProps, {
    format: format,
    ref: inputRef,
    type: type
  })));
});
BizFormItemInput.displayName = 'BizFormItemInput';
var _default = exports.default = BizFormItemInput;