antd-captcha-input/dist/index.js

Captcha input component as standard Ant.Design form item

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var antd = require('antd');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);

  if (_i == null) return;
  var _arr = [];
  var _n = true;
  var _d = false;

  var _s, _e;

  try {
    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var STORAGE_KEY = 'captcha-input-last-sent-at';
var CaptchaInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var onSend = _ref.onSend,
      onSendError = _ref.onSendError,
      renderSendBtnChildren = _ref.renderSendBtnChildren,
      onEnd = _ref.onEnd,
      outerStorageKey = _ref.storageKey,
      btnProps = _ref.btnProps,
      props = _objectWithoutProperties(_ref, ["onSend", "onSendError", "renderSendBtnChildren", "onEnd", "storageKey", "btnProps"]);

  var btnRef = React.useRef(null);
  React.useImperativeHandle(ref, function () {
    return {
      send: function send() {
        var _btnRef$current, _btnRef$current$click;

        (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : (_btnRef$current$click = _btnRef$current.click) === null || _btnRef$current$click === void 0 ? void 0 : _btnRef$current$click.call(_btnRef$current);
      }
    };
  });
  var storageKey = outerStorageKey !== null && outerStorageKey !== void 0 ? outerStorageKey : STORAGE_KEY;

  var _useState = React.useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      sending = _useState2[0],
      setSending = _useState2[1];

  var hasSentRef = React.useRef(false);

  var _useState3 = React.useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      countdownLeft = _useState4[0],
      setCountdownLeft = _useState4[1];

  var countdown = props.countdown === undefined ? 60 : Math.abs(props.countdown); // Countdown timer

  React.useEffect(function () {
    var timer = -1;

    if (countdownLeft > 0) {
      timer = window.setTimeout(function () {
        setCountdownLeft(function (state) {
          return state - 1;
        });
      }, 1000);
    } else if (countdownLeft === 0 && hasSentRef.current) {
      onEnd === null || onEnd === void 0 ? void 0 : onEnd();
    }

    return function () {
      window.clearTimeout(timer);
    };
  }, [countdownLeft, onEnd]);
  var calcTimePassed = React.useCallback(function () {
    var lastSentAt = +(sessionStorage.getItem(storageKey) || '');
    var currentTime = Math.floor(Date.now() / 1000);
    return Math.abs(currentTime - lastSentAt);
  }, [storageKey]); // Resume countdown on startup

  React.useEffect(function () {
    var timePassed = calcTimePassed();

    if (timePassed < countdown) {
      setCountdownLeft(countdown - timePassed);
    }
  }, [calcTimePassed, countdown]);
  var handleClick = React.useCallback(function (e) {
    if (!onSend) {
      return;
    }

    var timePassed = calcTimePassed();

    if (timePassed < countdown) {
      setCountdownLeft(countdown - timePassed);
      return;
    }

    var currentTime = Math.floor(Date.now() / 1000);
    setSending(true);
    onSend(e).then(function () {
      sessionStorage.setItem(storageKey, currentTime.toString());
      setCountdownLeft(countdown);
    }).catch(function (err) {
      return onSendError === null || onSendError === void 0 ? void 0 : onSendError(err);
    }).finally(function () {
      setSending(false);
      hasSentRef.current = true;
    });
  }, [calcTimePassed, countdown, onSend, onSendError, storageKey]);
  var renderBtnChildren = React.useCallback(function (countdownLeft) {
    if (renderSendBtnChildren) {
      return renderSendBtnChildren(countdownLeft);
    }

    return countdownLeft === 0 ? 'Send Captcha' : "Resend after ".concat(countdownLeft, "s");
  }, [renderSendBtnChildren]);
  return /*#__PURE__*/React__default['default'].createElement(antd.Input, Object.assign({
    placeholder: "Enter Captcha",
    bordered: true,
    suffix: /*#__PURE__*/React__default['default'].createElement(antd.Button, Object.assign({
      type: "link"
    }, btnProps, {
      ref: btnRef,
      loading: sending || (btnProps === null || btnProps === void 0 ? void 0 : btnProps.loading),
      disabled: countdownLeft !== 0 || (btnProps === null || btnProps === void 0 ? void 0 : btnProps.disabled),
      onClick: function onClick(e) {
        return handleClick(e);
      }
    }), renderBtnChildren(countdownLeft))
  }, props));
});

exports.CaptchaInput = CaptchaInput;
exports.default = CaptchaInput;