zent/es/notify/Notify.js

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

import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import * as ReactDOM from 'react-dom';
import isBrowser from '../utils/isBrowser';
import createElement from '../utils/dom/createElement';
import NotifyContent from './NotifyContent';
var index = 0;
var durationDefault = 3500;
var containerSelectorDefault = 'body';
var containerList = {};
var notifyContainerClass = 'zent-notify-container';
var createContainerId = function () {
    return ++index;
};
var closeNotifyCallback = function (callback) {
    if (typeof callback === 'function') {
        callback();
    }
};
var closeNotify = function (containerId) {
    var containerObj = containerList[containerId];
    if (!containerObj) {
        return;
    }
    var container = containerObj.container, callback = containerObj.callback, timeOutId = containerObj.timeOutId;
    clearTimeout(timeOutId);
    ReactDOM.unmountComponentAtNode(container);
    delete containerList[containerId];
    closeNotifyCallback(callback);
};
var closeAllNotify = function () {
    Object.keys(containerList).forEach(function (containerId) {
        closeNotify(containerId);
    });
};
var addClassName = function (node, className) {
    if (node.classList && !node.classList.contains(className)) {
        node.classList.add(className);
    }
};
var createNotifyContainerNode = function (containerSelector, className) {
    var rootContainerSelector = containerSelector || containerSelectorDefault;
    var notifyContainerNode = document.querySelector(rootContainerSelector + " > ." + notifyContainerClass);
    var rootContainer = document.querySelector(rootContainerSelector) || document.body;
    if (!notifyContainerNode) {
        var div = createElement('div');
        div.className = notifyContainerClass;
        notifyContainerNode = rootContainer.appendChild(div);
    }
    if (className) {
        addClassName(notifyContainerNode, className);
    }
    if (rootContainerSelector !== 'body') {
        addClassName(notifyContainerNode, 'zent-notify-container-custom');
    }
    return notifyContainerNode;
};
var show = function (text, duration, status, callback, containerSelector, className) {
    if (!isBrowser)
        return null;
    var container = createElement('div');
    var notifyContainerNode = createNotifyContainerNode(containerSelector, className);
    var props = {
        text: text,
        status: status,
        duration: duration,
        isIn: true,
        selector: notifyContainerNode,
    };
    ReactDOM.render(_jsx(NotifyContent, __assign({}, props), void 0), container);
    var containerId = createContainerId();
    var timeOutId = setTimeout(function () {
        ReactDOM.render(_jsx(NotifyContent, { isIn: false, text: text, selector: notifyContainerNode, status: status, close: function () { return closeNotify(containerId); } }, void 0), container);
    }, props.duration || durationDefault);
    containerList[containerId] = { container: container, callback: callback, timeOutId: timeOutId };
    return containerId;
};
export function success(text, duration, callback, containerSelector, className) {
    return show(text, duration, 'success', callback, containerSelector, className);
}
export function warn(text, duration, callback, containerSelector, className) {
    return show(text, duration, 'warn', callback, containerSelector, className);
}
export function error(text, duration, callback, containerSelector, className) {
    return show(text, duration, 'error', callback, containerSelector, className);
}
export function info(text, duration, callback, containerSelector, className) {
    return show(text, duration, 'info', callback, containerSelector, className);
}
export function clear(containerId) {
    if (containerId) {
        closeNotify(containerId);
    }
    else {
        closeAllNotify();
    }
}
export function config(options) {
    if (options.duration) {
        durationDefault = options.duration;
    }
    if (options.containerSelector) {
        containerSelectorDefault = options.containerSelector;
    }
}