@auraxy/react-async-button/lib/es/index.js

A button component of react, realizes the button auto-lock when it clicked and auto-unlock after the async action has done

/**
 * Bundle of @auraxy/react-async-button
 * Generated: 2019-10-24
 * Version: 1.0.6
 * License: MIT
 * Author: 2631541504@qq.com
 */

import React, { useState, useRef, useEffect } from 'react';

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

function _iterableToArrayLimit(arr, i) {
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_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 _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

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

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;
}

var Status;

(function (Status) {
  Status[Status["Normal"] = 0] = "Normal";
  Status[Status["Pending"] = 1] = "Pending";
  Status[Status["Success"] = 2] = "Success";
  Status[Status["Failed"] = 3] = "Failed";
})(Status || (Status = {}));

function useButtonStatus(contents, canUseAgain) {
  var _useState = useState(Status.Normal),
      _useState2 = _slicedToArray(_useState, 2),
      status = _useState2[0],
      setStatus = _useState2[1];

  var isUsed = useRef(false);
  isUsed.current = isUsed.current || status !== Status.Normal;
  var content = contents.children;
  var disabled = canUseAgain ? false : isUsed.current;
  var className = '';

  switch (status) {
    case Status.Pending:
      if (contents.loadingContent) content = contents.loadingContent;
      className = 'btn-pending';
      disabled = true;
      break;

    case Status.Failed:
      if (contents.failedContent) content = contents.failedContent;
      className = 'btn-failed';
      break;

    case Status.Success:
      if (contents.successContent) content = contents.successContent;
      className = 'btn-success';
      break;
  }

  return [content, disabled, className, setStatus];
}

var ReactAsyncButton = function ReactAsyncButton(_ref) {
  var children = _ref.children,
      _ref$canUseAgain = _ref.canUseAgain,
      canUseAgain = _ref$canUseAgain === void 0 ? true : _ref$canUseAgain,
      _ref$loadingContent = _ref.loadingContent,
      loadingContent = _ref$loadingContent === void 0 ? 'loading...' : _ref$loadingContent,
      _ref$successContent = _ref.successContent,
      successContent = _ref$successContent === void 0 ? '' : _ref$successContent,
      _ref$failedContent = _ref.failedContent,
      failedContent = _ref$failedContent === void 0 ? '' : _ref$failedContent,
      onClick = _ref.onClick,
      disabled = _ref.disabled,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      rest = _objectWithoutProperties(_ref, ["children", "canUseAgain", "loadingContent", "successContent", "failedContent", "onClick", "disabled", "className"]);

  var _useButtonStatus = useButtonStatus({
    children: children,
    loadingContent: loadingContent,
    successContent: successContent,
    failedContent: failedContent
  }, canUseAgain),
      _useButtonStatus2 = _slicedToArray(_useButtonStatus, 4),
      content = _useButtonStatus2[0],
      $disabled = _useButtonStatus2[1],
      $className = _useButtonStatus2[2],
      setStatus = _useButtonStatus2[3];

  var unmounted = useRef(false);
  useEffect(function () {
    return function () {
      unmounted.current = true;
    };
  }, []);

  var click = function click(e) {
    setStatus(Status.Pending);
    onClick(e).then(function () {
      if (!unmounted.current) setStatus(Status.Success);
    })["catch"](function () {
      if (!unmounted.current) setStatus(Status.Failed);
    });
  };

  return React.createElement("button", Object.assign({}, rest, {
    className: "".concat(className, " ").concat($className),
    onClick: click,
    disabled: disabled || $disabled
  }), content);
};

export { ReactAsyncButton, Status, useButtonStatus };