ost-ui/dist/npm/OstToast/index.js

ost ui for react

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import ReactDOM from 'react-dom';
import React, { Component, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import OstMask from '../OstMask/index';
import clsPrefix from 'cls-prefix';

var OstToast = function (_Component) {
  _inherits(OstToast, _Component);

  function OstToast(props) {
    _classCallCheck(this, OstToast);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.state = { show: true };
    return _this;
  }

  OstToast.prototype.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _props = this.props,
        time = _props.time,
        container = _props.container;

    this._setTimeout = setTimeout(function () {
      return _this2.setState({ show: false }, function () {
        clearTimeout(_this2._setTimeout);
        container.parentNode.removeChild(container);
      });
    }, time);
  };

  OstToast.prototype.componentWillUnmount = function componentWillUnmount() {
    clearTimeout(this._setTimeout);
  };

  OstToast.prototype.render = function render() {
    var text = this.props.text;
    var show = this.state.show;


    return React.createElement(
      OstMask,
      {
        maskColor: 'rgba(0, 0, 0, 0)',
        childrenStyle: { padding: '0 10%' },
        show: show },
      React.createElement(
        'span',
        { className: 'ost-toast' },
        text
      )
    );
  };

  return OstToast;
}(Component);

OstToast.propTypes = {
  text: PropTypes.string.isRequired,
  time: PropTypes.number,
  container: PropTypes.object
};

var getContainer = function getContainer() {
  var container = document.createElement('div');
  var containerId = 'ost-toast-container-' + new Date().getTime();
  container.setAttribute('id', containerId);
  document.body.appendChild(container);
  return container;
};

function show(text, time) {

  time = time * 1000 || 2000;

  var container = getContainer();

  ReactDOM.render(React.createElement(OstToast, { text: text, time: time, container: container }), container);
}

export default {
  show: show
};