zent/es/notice/Container.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import * as ReactDOM from 'react-dom';
import Wrap from './Wrap';
import createElement from '../utils/dom/createElement';
var containers = {
    'right-top': null,
    'right-bottom': null,
    'left-top': null,
    'left-bottom': null,
};
var pendingNotice = {
    'right-top': new Set(),
    'right-bottom': new Set(),
    'left-top': new Set(),
    'left-bottom': new Set(),
};
function createContainer(position) {
    var div = createElement('div');
    div.classList.add('zent-notice-container');
    switch (position) {
        case 'right-top':
            div.classList.add('zent-notice-container-right', 'zent-notice-container-top');
            break;
        case 'right-bottom':
            div.classList.add('zent-notice-container-right', 'zent-notice-container-bottom');
            break;
        case 'left-top':
            div.classList.add('zent-notice-container-left', 'zent-notice-container-top');
            break;
        case 'left-bottom':
            div.classList.add('zent-notice-container-left', 'zent-notice-container-bottom');
            break;
        default:
            throw new Error("Invalid argument " + position);
    }
    document.body.appendChild(div);
    return div;
}
export var instanceMap = new Map();
var NoticeContainer = (function (_super) {
    __extends(NoticeContainer, _super);
    function NoticeContainer() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            list: [],
        };
        _this.onExited = function (id) {
            _this.setState(function (state) { return ({
                list: state.list.filter(function (it) { return it.props.id !== id; }),
            }); });
        };
        return _this;
    }
    NoticeContainer.prototype.push = function (children, id) {
        var ref = createRef();
        var el = (_jsx(Wrap, __assign({ ref: ref, id: id, onExited: this.onExited }, { children: children }), id));
        instanceMap.set(id, ref);
        this.setState(function (state) { return ({
            list: state.list.concat([el]),
        }); });
        return id;
    };
    NoticeContainer.prototype.render = function () {
        return _jsx(_Fragment, { children: this.state.list }, void 0);
    };
    return NoticeContainer;
}(Component));
export function getContainer(position, ready) {
    var container = containers[position];
    if (container) {
        return ready(container);
    }
    var pending = pendingNotice[position];
    pending.add(ready);
    if (pending.size > 1) {
        return;
    }
    var div = createContainer(position);
    ReactDOM.render(_jsx(NoticeContainer, { element: div, ref: function (node) {
            if (node) {
                containers[position] = node;
                pending.forEach(function (cb) { return cb(node); });
                pending.clear();
            }
        } }, void 0), div);
}
export function remove(id) {
    var ref = instanceMap.get(id);
    if (ref && ref.current) {
        ref.current.leave();
    }
}