dora-ui/es/toast/content.js

A React.js Mobile UI Library

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from '../icon';
import Popup from '../popup';
import { TOAST_TYPES } from './config';
import { isNumber } from '../utils';
var prefixCls = 'dora-toast';

var ToastContent =
/*#__PURE__*/
function (_Component) {
  _inherits(ToastContent, _Component);

  function ToastContent() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, ToastContent);

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

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ToastContent)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "timer", void 0);

    _defineProperty(_assertThisInitialized(_this), "isExecClose", false);

    _defineProperty(_assertThisInitialized(_this), "state", {
      visible: true
    });

    _defineProperty(_assertThisInitialized(_this), "renderIcon", function () {
      var type = _this.props.type;

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

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

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

    return _this;
  }

  _createClass(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 && 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.createElement(Popup, {
        visible: visible,
        node: container,
        mask: mask,
        maskClosable: false
      }, React.createElement("div", {
        className: "".concat(prefixCls, "-content")
      }, this.renderIcon(), React.createElement("div", {
        className: "".concat(prefixCls, "-text")
      }, content)));
    }
  }, {
    key: "isLoading",
    get: function get() {
      return this.props.type === TOAST_TYPES.LOADING;
    }
  }, {
    key: "isInfo",
    get: function get() {
      return this.props.type === TOAST_TYPES.INFO;
    }
  }]);

  return ToastContent;
}(Component);

_defineProperty(ToastContent, "useIcons", function (iconConfig) {
  ToastContent.icons = iconConfig;
});

_defineProperty(ToastContent, "icons", {});

_defineProperty(ToastContent, "propTypes", {
  container: PropTypes.any.isRequired,
  type: PropTypes.string.isRequired,
  content: PropTypes.node,
  mask: PropTypes.bool,
  duration: PropTypes.number,
  onClose: PropTypes.func
});

_defineProperty(ToastContent, "defaultProps", {
  mask: false,
  duration: 1500,
  onClose: function onClose() {}
});

export default ToastContent;