shineout/es/Message/messager.js

Shein 前端组件库

import React from 'react';
import ReactDOM from 'react-dom';
import { messageClass } from './styles';
import Container from './Container';
import { isFunc } from '../utils/is';
import { getDefaultContainer } from '../config';
var elements = {};
var components = {};

function getElement(type, container) {
  var defaultContainer = getDefaultContainer();
  var div = document.createElement('div');
  div.className = messageClass('_', type);
  var target = defaultContainer;

  if (container && isFunc(container)) {
    target = container();
  }

  if (container && container instanceof HTMLElement) {
    target = container;
  }

  target.appendChild(div);
  elements[type] = div;
  return div;
}

export function destroy(type) {
  if (elements[type]) {
    ReactDOM.unmountComponentAtNode(elements[type]);
    var el = elements[type];
    if (el && el.parentNode) el.parentNode.removeChild(el);
    delete elements[type];
  }

  if (components[type]) {
    delete components[type];
  }
}
export function getComponent(_ref) {
  var position = _ref.position,
      container = _ref.container;
  return new Promise(function (resolve) {
    var component = components[position];

    if (component) {
      resolve(component);
    } else {
      ReactDOM.render(React.createElement(Container, {
        ref: function ref(comp) {
          components[position] = comp;
          resolve(comp);
        },
        onDestory: destroy.bind(null, position)
      }), getElement(position, container));
    }
  });
}