@rsuite/interactions/esm/index.js

Call rsuite Modal at ease.

import React, { useState, useCallback, useEffect, useMemo } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button, Input } from 'rsuite';

function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

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

function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(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$1(o, minLen); }

function _arrayLikeToArray$1(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 _iterableToArrayLimit$1(arr, i) { var _i = arr == null ? null : 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 _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }

function InteractionModal(_ref) {
  var _ref$okButtonText = _ref.okButtonText,
      okButtonText = _ref$okButtonText === void 0 ? '确定' : _ref$okButtonText,
      okButtonProps = _ref.okButtonProps,
      onOk = _ref.onOk,
      _ref$showCancelButton = _ref.showCancelButton,
      showCancelButton = _ref$showCancelButton === void 0 ? true : _ref$showCancelButton,
      _ref$cancelButtonText = _ref.cancelButtonText,
      cancelButtonText = _ref$cancelButtonText === void 0 ? '取消' : _ref$cancelButtonText,
      onCancel = _ref.onCancel,
      children = _ref.children,
      _ref$canCancelOnLoadi = _ref.canCancelOnLoading,
      canCancelOnLoading = _ref$canCancelOnLoadi === void 0 ? false : _ref$canCancelOnLoadi,
      _ref$modalProps = _ref.modalProps,
      extraModalProps = _ref$modalProps === void 0 ? {} : _ref$modalProps,
      title = _ref.title;

  var _useState = useState(true),
      _useState2 = _slicedToArray$1(_useState, 2),
      shouldShowModal = _useState2[0],
      setShouldShowModal = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray$1(_useState3, 2),
      submitLoading = _useState4[0],
      setSubmitLoading = _useState4[1];

  var handleReturnValueOfOnOk = useCallback(function (returnValueOfOnOk) {
    if (!returnValueOfOnOk || !returnValueOfOnOk.then) {
      setShouldShowModal(false);
      return;
    }

    setSubmitLoading(true);
    returnValueOfOnOk.finally(function () {
      setSubmitLoading(false);
      setShouldShowModal(false);
    });
  }, []);
  var handleOk = useCallback(function () {
    var returnValueOfOnOk = onOk && onOk();
    handleReturnValueOfOnOk(returnValueOfOnOk);
  }, [onOk, handleReturnValueOfOnOk]);
  var handleCancel = useCallback(function () {
    setShouldShowModal(false); // pass current loading status to onCancel to distinguish different case

    onCancel && onCancel(submitLoading);
  }, [onCancel, submitLoading]); // eslint-disable-next-line consistent-return

  useEffect(function () {
    function handleKeyDown(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        handleOk();
      }

      if (e.key === 'Escape') {
        e.preventDefault();

        if (showCancelButton) {
          handleCancel();
        } else {
          handleOk();
        }
      } // Prevent focus change


      if (e.key === 'Tab') {
        e.preventDefault();
      }
    }

    if (shouldShowModal) {
      document.addEventListener('keydown', handleKeyDown, false);
      return function () {
        document.removeEventListener('keydown', handleKeyDown, false);
      };
    }
  }, [shouldShowModal, handleOk, handleCancel, showCancelButton]);
  /**
   * using open/show judge by rsuite version
   * @example @4 no 'open' in propTypes
   * @example @5 'open' in propTypes
   */

  var modalProps = _objectSpread$1(_defineProperty$2({}, Modal.propTypes && 'open' in Modal.propTypes ? 'open' : 'show', shouldShowModal), extraModalProps);

  return /*#__PURE__*/React.createElement(Modal, _extends$3({
    role: "alertdialog",
    size: "xs",
    "aria-describedby": "alertdialog-description"
  }, modalProps), title && /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Modal.Title, null, title)), /*#__PURE__*/React.createElement(Modal.Body, {
    id: "alertdialog-description"
  }, children), /*#__PURE__*/React.createElement(Modal.Footer, null, showCancelButton && /*#__PURE__*/React.createElement(Button, {
    disabled: submitLoading && !canCancelOnLoading,
    onClick: handleCancel
  }, cancelButtonText), /*#__PURE__*/React.createElement(Button, _extends$3({
    loading: submitLoading,
    onClick: handleOk,
    appearance: "primary"
  }, okButtonProps), okButtonText)));
}

var dom = null;
function getContainerDOM() {
  if (!dom) {
    dom = document.createElement('div');
    document.body.appendChild(dom);
  }

  return dom;
}

function isFunction(value) {
  return typeof value === 'function';
}

function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
function alert$1(message, modalConfig) {
  return new Promise(function (resolve, reject) {
    ReactDOM.render( /*#__PURE__*/React.createElement(InteractionModal, _extends$2({
      key: Date.now(),
      showCancelButton: false
    }, modalConfig, {
      onOk: function onOk() {
        if (!isFunction(modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.onOk)) {
          resolve();
          return;
        }

        try {
          var result = modalConfig.onOk();

          if (!(result instanceof Promise)) {
            resolve();
            return;
          }

          result.then(function (resolved) {
            resolve();
            return resolved;
          }, reject);
          return result;
        } catch (e) {
          reject(e);
        }
      }
    }), message), getContainerDOM());
  });
}

var _excluded$1 = ["okButtonDangerous"];

function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }

function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(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 _objectWithoutPropertiesLoose$1(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 confirm$1(message) {
  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
      _ref$okButtonDangerou = _ref.okButtonDangerous,
      okButtonDangerous = _ref$okButtonDangerou === void 0 ? false : _ref$okButtonDangerou,
      modalConfig = _objectWithoutProperties$1(_ref, _excluded$1);

  return new Promise(function (resolve, reject) {
    ReactDOM.render( /*#__PURE__*/React.createElement(InteractionModal, _extends$1({
      key: Date.now(),
      canCancelOnLoading: !!(modalConfig !== null && modalConfig !== void 0 && modalConfig.onCancel)
    }, modalConfig, {
      okButtonProps: {
        color: okButtonDangerous ? 'red' : undefined
      },
      onOk: function onOk() {
        if (!isFunction(modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.onOk)) {
          resolve(true);
          return;
        }

        try {
          var result = modalConfig.onOk();

          if (!(result instanceof Promise)) {
            resolve(true);
            return;
          }

          result.then(function (resolved) {
            resolve(true);
            return resolved;
          }, reject);
          return result;
        } catch (e) {
          reject(e);
        }
      },
      onCancel: function onCancel(isSubmitLoading) {
        var _modalConfig$onCancel;

        modalConfig === null || modalConfig === void 0 ? void 0 : (_modalConfig$onCancel = modalConfig.onCancel) === null || _modalConfig$onCancel === void 0 ? void 0 : _modalConfig$onCancel.call(modalConfig, isSubmitLoading);
        resolve(false);
      }
    }), message), getContainerDOM());
  });
}

var _excluded = ["message", "defaultResult", "okButtonDangerous", "onOk", "validate", "inputProps", "style"],
    _excluded2 = ["onChange", "style"];

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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

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."); }

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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : 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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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 _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 PromptModal(_ref) {
  var message = _ref.message,
      _ref$defaultResult = _ref.defaultResult,
      defaultResult = _ref$defaultResult === void 0 ? '' : _ref$defaultResult,
      _ref$okButtonDangerou = _ref.okButtonDangerous,
      okButtonDangerous = _ref$okButtonDangerou === void 0 ? false : _ref$okButtonDangerou,
      onOk = _ref.onOk,
      validate = _ref.validate,
      inputProps = _ref.inputProps;
      _ref.style;
      var props = _objectWithoutProperties(_ref, _excluded);

  var _ref2 = inputProps || {},
      onInputChange = _ref2.onChange,
      inputStyle = _ref2.style,
      restInputProps = _objectWithoutProperties(_ref2, _excluded2);

  var _useState = useState(defaultResult),
      _useState2 = _slicedToArray(_useState, 2),
      result = _useState2[0],
      setResult = _useState2[1];

  var handleOk = useCallback(function () {
    return onOk(result);
  }, [onOk, result]);
  var okButtonDisabled = useMemo(function () {
    return (validate === null || validate === void 0 ? void 0 : validate(result)) === false;
  }, [result, validate]);
  var okButtonColor = okButtonDangerous ? 'red' : undefined;
  return /*#__PURE__*/React.createElement(InteractionModal, _extends({}, props, {
    okButtonProps: {
      color: okButtonColor,
      disabled: okButtonDisabled
    },
    onOk: handleOk
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '5px'
    },
    className: "modal-content"
  }, message, /*#__PURE__*/React.createElement(Input, _extends({
    autoFocus: true,
    value: result,
    onChange: function onChange(value) {
      setResult(value);
      onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value);
    },
    style: _objectSpread({
      marginTop: 10
    }, inputStyle)
  }, restInputProps))));
}

function prompt$1(message, _default, modalConfig) {
  return new Promise(function (resolve, reject) {
    ReactDOM.render( /*#__PURE__*/React.createElement(PromptModal, _extends({
      key: Date.now(),
      message: message,
      defaultResult: _default,
      canCancelOnLoading: !!(modalConfig !== null && modalConfig !== void 0 && modalConfig.onCancel)
    }, modalConfig, {
      onOk: function onOk() {
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        if (!isFunction(modalConfig === null || modalConfig === void 0 ? void 0 : modalConfig.onOk)) {
          resolve.apply(void 0, args);
          return;
        }

        try {
          var result = modalConfig.onOk.apply(modalConfig, args);

          if (!(result instanceof Promise)) {
            resolve.apply(void 0, args);
            return;
          }

          result.then(function (resolved) {
            resolve.apply(void 0, args);
            return resolved;
          }, reject);
          return result;
        } catch (e) {
          reject(e);
        }
      },
      onCancel: function onCancel(isSubmitLoading) {
        var _modalConfig$onCancel;

        modalConfig === null || modalConfig === void 0 ? void 0 : (_modalConfig$onCancel = modalConfig.onCancel) === null || _modalConfig$onCancel === void 0 ? void 0 : _modalConfig$onCancel.call(modalConfig, isSubmitLoading);
        resolve(null);
      }
    })), getContainerDOM());
  });
}

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/**
 * 用于队列 interaction 请求
 */

var InteractionManager = /*#__PURE__*/function () {
  function InteractionManager() {
    _classCallCheck(this, InteractionManager);

    _defineProperty(this, "$tail", null);

    _defineProperty(this, "$interactionMap", {
      alert: alert$1,
      confirm: confirm$1,
      prompt: prompt$1
    });
  }

  _createClass(InteractionManager, [{
    key: "getInteractionMethod",
    value: function getInteractionMethod(method) {
      return this.$interactionMap[method];
    }
  }, {
    key: "interactionMethodExists",
    value: function interactionMethodExists(method) {
      return !!this.$interactionMap[method];
    }
  }, {
    key: "requestInteraction",
    value: function requestInteraction(method) {
      var _this = this;

      if (!this.interactionMethodExists(method)) {
        return Promise.reject(new Error("No such interaction '".concat(method, "' found.")));
      }

      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      var newTail = this.$tail ? this.queueInteraction.apply(this, [this.$tail, method].concat(args)) : this.performInteraction.apply(this, [method].concat(args));
      newTail.finally(function () {
        if (_this.$tail === newTail) {
          _this.$tail = null;
        }
      });
      this.$tail = newTail;
      return this.$tail;
    }
  }, {
    key: "queueInteraction",
    value: function queueInteraction(tail, method) {
      var _this2 = this;

      for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
        args[_key2 - 2] = arguments[_key2];
      }

      return new Promise(function (resolve, reject) {
        tail.finally(function () {
          _this2.performInteraction.apply(_this2, [method].concat(args)).then(resolve, reject);
        });
      });
    }
  }, {
    key: "performInteraction",
    value: function performInteraction(method) {
      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
        args[_key3 - 1] = arguments[_key3];
      }

      return this.getInteractionMethod(method).apply(void 0, args);
    }
  }, {
    key: "resetQueue",
    value: function resetQueue() {
      this.$tail = null;
    }
  }]);

  return InteractionManager;
}();

var manager = new InteractionManager();

var alert = function alert(message, modalConfig) {
  return manager.requestInteraction('alert', message, modalConfig);
};
var confirm = function confirm(message, modalConfig) {
  return manager.requestInteraction('confirm', message, modalConfig);
};
var prompt = function prompt(message, _default, modalConfig) {
  return manager.requestInteraction('prompt', message, _default, modalConfig);
};

export { alert, confirm, prompt };