mobile-more/lib/components/BizForm/ItemCaptcha/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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utilHelpers = require("util-helpers");
var _ItemInput = _interopRequireDefault(require("../ItemInput"));
var _BizCaptchaButton = _interopRequireDefault(require("../../BizCaptchaButton"));
var _config = require("../../../config");
var _excluded = ["initText", "runText", "resetText", "second", "onGetCaptcha", "captchaButtonProps", "className", "inputProps"];
var prefixCls = "".concat(_config.formItemPrefixClass, "-captcha");
var BizFormItemCaptcha = function BizFormItemCaptcha(_ref) {
  var initText = _ref.initText,
    runText = _ref.runText,
    resetText = _ref.resetText,
    second = _ref.second,
    _ref$onGetCaptcha = _ref.onGetCaptcha,
    onGetCaptcha = _ref$onGetCaptcha === void 0 ? function () {
      return true;
    } : _ref$onGetCaptcha,
    captchaButtonProps = _ref.captchaButtonProps,
    className = _ref.className,
    inputProps = _ref.inputProps,
    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var inputRef = _react.default.useRef(null);

  // 倒计时按钮状态
  var _React$useState = _react.default.useState(false),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    start = _React$useState2[0],
    setStart = _React$useState2[1];
  var _React$useState3 = _react.default.useState(false),
    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
    loading = _React$useState4[0],
    setLoading = _React$useState4[1];

  // 点击按钮
  var onButtonClick = /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
      var _captchaButtonProps$o;
      var ret, _inputRef$current;
      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            captchaButtonProps === null || captchaButtonProps === void 0 || (_captchaButtonProps$o = captchaButtonProps.onClick) === null || _captchaButtonProps$o === void 0 || _captchaButtonProps$o.call(captchaButtonProps, e);
            setLoading(true);
            // 验证手机号码/邮箱是否正确
            // ...

            // 发送验证码
            _context.next = 4;
            return (0, _utilHelpers.checkResult)(onGetCaptcha);
          case 4:
            ret = _context.sent;
            setLoading(false);
            if (ret) {
              setStart(true);
              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
            }
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function onButtonClick(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  var handleEnd = function handleEnd() {
    var _captchaButtonProps$o2;
    setStart(false);
    captchaButtonProps === null || captchaButtonProps === void 0 || (_captchaButtonProps$o2 = captchaButtonProps.onEnd) === null || _captchaButtonProps$o2 === void 0 || _captchaButtonProps$o2.call(captchaButtonProps);
  };
  return /*#__PURE__*/_react.default.createElement(_ItemInput.default, (0, _extends2.default)({
    className: (0, _classnames.default)(prefixCls, className),
    disabledWhiteSpace: true
  }, restProps, {
    ref: inputRef,
    inputProps: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, inputProps), {}, {
      suffix: /*#__PURE__*/_react.default.createElement(_BizCaptchaButton.default, (0, _extends2.default)({
        initText: initText,
        runText: runText,
        resetText: resetText,
        second: second,
        loading: loading,
        fill: "none",
        color: "primary"
      }, captchaButtonProps, {
        start: start,
        onClick: onButtonClick,
        onEnd: handleEnd
      }))
    })
  }));
};
var _default = exports.default = BizFormItemCaptcha;