mobile-more/es/components/BizForm/ItemInput/index.js

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["type", "maxLength", "max", "min", "disabledWhiteSpace", "precision", "clearable", "placeholder", "inputProps", "visibilityToggle", "iconRender", "required", "transform", "format", "loose", "useFloor", "readOnly"];
import React from 'react';
import { isMobile, isBankCard, isIdCard, isEmail } from 'util-helpers';
import { Eye, EyeSlash } from 'doly-icons';
import BizFormItem from "../FormItem";
import Input from "./SuperInput";
import { useConfig } from "../../BizConfigProvider";
var BizFormItemInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _useConfig = 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 = _objectWithoutProperties(props, _excluded);
  var inputRef = React.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.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    visibilityPassword = _React$useState2[0],
    setVisibilityPassword = _React$useState2[1]; // 密码是否可见
  var passwordVisibilityIcon = mergeType !== 'password' || !visibilityToggle ? null : /*#__PURE__*/React.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.createElement(Eye, null) : /*#__PURE__*/React.createElement(EyeSlash, null));
  var transform = React.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.useImperativeHandle(ref, function () {
    return inputRef.current;
  }, [inputRef]);
  return /*#__PURE__*/React.createElement(BizFormItem, _extends({
    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' && !isMobile(format ? transform(value) : value) || outType === 'bankCard' && !isBankCard(format ? transform(value) : value, {
            loose: loose
          }) || outType === 'idCard' && !isIdCard(value, {
            loose: loose
          }) || outType === 'email' && !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.createElement(Input, _extends({
    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';
export default BizFormItemInput;