@antdp/antdp-ui/lib/InputCount/index.js

基于antd封装的组件

"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 _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 = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["onSend", "buttonProps", "countTime"];
var _this = void 0;
var InputCount = function InputCount(props) {
  var onSend = props.onSend,
    buttonProps = props.buttonProps,
    countTime = props.countTime,
    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
  // 默认倒计时时间
  var DEFAULT_TIME = countTime ? countTime : 60;
  var _useState = (0, _react.useState)(DEFAULT_TIME),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    time = _useState2[0],
    setTime = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    loading = _useState4[0],
    setLoading = _useState4[1];
  (0, _react.useEffect)(function () {
    var timer = 0;
    if (loading && time != 0) {
      timer = setInterval(function () {
        // 这时候的time由于闭包的原因，一直是0，所以这里不能用setNum(num-1)
        setTime(function (n) {
          if (n == 1) {
            setLoading(false);
            clearInterval(timer);
          }
          return n - 1;
        });
      }, 1000);
    }
    return function () {
      // 组件销毁时，清除定时器
      clearInterval(timer);
    };
  }, [loading]);

  //短信验证
  var send = function send(e) {
    setTime(DEFAULT_TIME);
    setLoading(true);
    // 点击发送按钮,回调调用接口
    onSend && onSend();
    e.preventDefault();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      style: {
        display: 'flex',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, (0, _objectSpread2["default"])({
        style: {
          flex: 1,
          transition: 'width .3s',
          marginRight: 8
        }
      }, others)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        style: {
          display: 'block'
        },
        size: "middle",
        type: "primary",
        loading: loading,
        onClick: send.bind(_this)
      }, buttonProps), {}, {
        children: loading ? time + '秒' : '发送验证'
      }))]
    })
  });
};
var _default = exports["default"] = InputCount;
module.exports = exports.default;