dora-ui/lib/toast/content.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 _getPrototypeOf3 = _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 _propTypes = _interopRequireDefault(require("prop-types"));

var _icon = _interopRequireDefault(require("../icon"));

var _popup = _interopRequireDefault(require("../popup"));

var _config = require("./config");

var _utils = require("../utils");

var prefixCls = 'dora-toast';

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

  function ToastContent() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, ToastContent);

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

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(ToastContent)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timer", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isExecClose", false);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      visible: true
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderIcon", function () {
      var type = _this.props.type;

      if (typeof ToastContent.icons[type] !== 'undefined') {
        return _react.default.createElement("div", {
          className: "".concat(prefixCls, "-icon")
        }, ToastContent.icons[type]);
      }

      if (_this.isInfo) return null; // info类型没有Icon

      return _react.default.createElement("div", {
        className: "".concat(prefixCls, "-icon")
      }, _react.default.createElement(_icon.default, {
        type: type,
        color: "#fff",
        spinning: _this.isLoading,
        size: "lg"
      }));
    });
    return _this;
  }

  (0, _createClass2.default)(ToastContent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props = this.props,
          duration = _this$props.duration,
          onClose = _this$props.onClose;

      if (!this.isLoading && (0, _utils.isNumber)(duration)) {
        // 非loading类型存在展示时间
        this.timer = setTimeout(function () {
          _this2.setState({
            visible: false // 隐藏popup

          }, function () {
            _this2.isExecClose = true;
            setTimeout(onClose, 300); // 执行完动画后再卸载组件并执行回调, visble:false时触发动画预留的时间：200
          });
        }, duration);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (!this.isExecClose) {
        // 避免强制unmount(Toast.destroy)导致settimeout中的callback不会执行
        this.props.onClose();
      }

      clearTimeout(this.timer);
    }
  }, {
    key: "render",
    value: function render() {
      var visible = this.state.visible;
      var _this$props2 = this.props,
          container = _this$props2.container,
          content = _this$props2.content,
          mask = _this$props2.mask;
      return _react.default.createElement(_popup.default, {
        visible: visible,
        node: container,
        mask: mask,
        maskClosable: false
      }, _react.default.createElement("div", {
        className: "".concat(prefixCls, "-content")
      }, this.renderIcon(), _react.default.createElement("div", {
        className: "".concat(prefixCls, "-text")
      }, content)));
    }
  }, {
    key: "isLoading",
    get: function get() {
      return this.props.type === _config.TOAST_TYPES.LOADING;
    }
  }, {
    key: "isInfo",
    get: function get() {
      return this.props.type === _config.TOAST_TYPES.INFO;
    }
  }]);
  return ToastContent;
}(_react.Component);

(0, _defineProperty2.default)(ToastContent, "useIcons", function (iconConfig) {
  ToastContent.icons = iconConfig;
});
(0, _defineProperty2.default)(ToastContent, "icons", {});
(0, _defineProperty2.default)(ToastContent, "propTypes", {
  container: _propTypes.default.any.isRequired,
  type: _propTypes.default.string.isRequired,
  content: _propTypes.default.node,
  mask: _propTypes.default.bool,
  duration: _propTypes.default.number,
  onClose: _propTypes.default.func
});
(0, _defineProperty2.default)(ToastContent, "defaultProps", {
  mask: false,
  duration: 1500,
  onClose: function onClose() {}
});
var _default = ToastContent;
exports.default = _default;