dora-ui/lib/spin/index.js

A React.js Mobile UI Library

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _reactTransitionGroup = require("react-transition-group");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _portal = _interopRequireDefault(require("../portal"));

var _spinner = _interopRequireDefault(require("../spinner"));

// 是否延迟spinning
function shouldDelay(spinning, delay) {
  /* eslint-disable-next-line no-restricted-globals */
  return !!spinning && !!delay && !isNaN(Number(delay));
}

var prefixCls = 'dora-spin';

var Spin =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Spin, _Component);

  function Spin(_props) {
    var _this;

    (0, _classCallCheck2.default)(this, Spin);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Spin).call(this, _props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "debouncifyUpdateSpinning", function (props) {
      var delay = props.delay;

      if (delay) {
        // 取消防抖函数的执行
        _this.cancelExistingSpin();

        _this.updateSpinning = (0, _debounce.default)(_this.updateSpinning, delay);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSpinning", function () {
      var spinning = _this.props.spinning;
      var currentSpinning = _this.state.spinning;

      if (currentSpinning !== spinning) {
        _this.setState({
          spinning: spinning
        });
      }
    });
    var _spinning = _props.spinning,
        _delay = _props.delay;
    var shouldBeDelayed = shouldDelay(_spinning, _delay);
    _this.state = {
      spinning: _spinning && !shouldBeDelayed
    };

    _this.debouncifyUpdateSpinning(_props);

    return _this;
  }

  (0, _createClass2.default)(Spin, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.updateSpinning();
    }
    /**
     * antd Spin组件每次didupdate中 取消防抖updateSpinning函数的执行 随后重新创建防抖updateSpinning函数进行执行
     * 未直接使用 didmount 中创建的防抖updateSpinning函数 的防抖特性 可参见antd源码3.20.5
     * 此处进行优化： 利用防抖函数特性，无需重复取消创建防抖updateSpinning函数
     */

  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.updateSpinning();
    }
    /**
     * 避免组件卸载后 spinning状态变化而setState报错
     * 参考antd，相关issue https://github.com/ant-design/ant-design/pull/16081
     */

  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.cancelExistingSpin();
    }
  }, {
    key: "cancelExistingSpin",
    value: function cancelExistingSpin() {
      var updateSpinning = this.updateSpinning;
      var copyUpdateSpinning = updateSpinning;

      if (copyUpdateSpinning && copyUpdateSpinning.cancel) {
        copyUpdateSpinning.cancel();
      }
    }
  }, {
    key: "getSpinElement",
    value: function getSpinElement() {
      var _this$props = this.props,
          spinner = _this$props.spinner,
          tip = _this$props.tip,
          size = _this$props.size,
          fullScreen = _this$props.fullScreen,
          transition = _this$props.transition;
      var isDefaultSpinner = spinner.type === _spinner.default;
      var spinning = this.state.spinning;
      var spinnerContainerCls = (0, _classnames.default)("".concat(prefixCls, "-spinner-container"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-spinner-container__full"), fullScreen));
      var tipCls = (0, _classnames.default)("".concat(prefixCls, "-text"), "".concat(prefixCls, "-text-").concat(size));

      var spinElement = _react.default.createElement("div", {
        className: spinnerContainerCls
      }, isDefaultSpinner ? (0, _react.cloneElement)(spinner, {
        size: size
      }) : spinner, tip && _react.default.createElement("div", {
        className: tipCls
      }, tip));
      /* 是否为全屏展示 */


      if (fullScreen) {
        spinElement = _react.default.createElement(_portal.default, null, spinElement);
      }
      /* 是否存在过渡效果 */


      if (transition) {
        return _react.default.createElement(_reactTransitionGroup.CSSTransition, {
          in: spinning,
          classNames: "dora-fade",
          timeout: 300,
          unmountOnExit: true
        }, spinElement);
      }

      if (spinning) {
        return spinElement;
      }

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          wrapperClassName = _this$props2.wrapperClassName,
          children = _this$props2.children;
      var wrapperCls = (0, _classnames.default)(wrapperClassName, prefixCls);
      return _react.default.createElement("div", {
        className: wrapperCls
      }, this.getSpinElement(), children);
    }
  }]);
  return Spin;
}(_react.Component);

(0, _defineProperty2.default)(Spin, "propTypes", {
  spinning: _propTypes.default.bool.isRequired,
  fullScreen: _propTypes.default.bool,
  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
  children: _propTypes.default.node,
  spinner: _propTypes.default.element,
  tip: _propTypes.default.string,
  wrapperClassName: _propTypes.default.string,
  transition: _propTypes.default.bool,
  delay: _propTypes.default.number
});
(0, _defineProperty2.default)(Spin, "defaultProps", {
  fullScreen: true,
  size: 'md',
  tip: '',
  wrapperClassName: '',
  transition: true,
  delay: 0,
  spinner: _react.default.createElement(_spinner.default, {
    type: "wave"
  })
});
var _default = Spin;
exports.default = _default;