基于react的一个组件弹层

5 篇文章 0 订阅
/**
 *  全局展示操作反馈信息:例
 *  import {Tipbox} from 'components';
 *  Tipbox.success('这是一条普通的提醒', 3);
 */

let defaultDuration = 2; // 默认停留时间 单位:s
let tipBoxInstance; // 唯一实例
let setTimeoutPointer; // settimeout指针
let onHideFuncQueue = {};// 视图隐藏时的回调函数HASH MAP
let onHideFuncID = 0;// 视图隐藏时的回调函数ID

function getOnHideFuncID() {
    // 临界值判断
    if (onHideFuncID === Number.MAX_VALUE) {
        onHideFuncID = 0;
    }
    return onHideFuncID++;
}

function getTipBoxInstance(type, textTip) {
    if (tipBoxInstance === void 0 || tipBoxInstance === null) {
        if (window.jQuery === void 0 || window.jQuery === null) {
            throw "The jQeury framework is missing";
        }
        tipBoxInstance = {
            isShow: false,// 是否显示
            type: undefined, // 显示类型
            textTip: undefined, // 提示文字
            show: function () {
                if (this.isShow === true) {
                    return;
                }
                window.jQuery(document.body).append(this.$dom);
                this.isShow = true;
            },
            removeFromSuperView: function () { // 从父级视图移除
                if (this.isShow === false) {
                    return;
                }
                this.$dom.remove();
                this.isShow = false;
            },
            $dom: window.jQuery('<div class="c-float-tip_box"><div class="tip-content"><span class="icon-img"><img src=></span><p class="tip-text"/></div></div>')
        };
    }
    const _$img = tipBoxInstance.$dom.find("img");
    const _$textP = tipBoxInstance.$dom.find(".tip-text");
    const _imgSrc ;
     switch(type){
        case "success":
       _imgSrc = "/public/images/icon_img/success_icon_img.png";
            break;
        case "info":
            break;
        case "error":
            break;
        default:
            break;
     }
    _$img.attr("src", _imgSrc);
    _$textP.text(textTip);
    return tipBoxInstance;
}

function show(content, duration = defaultDuration, type, onHide) {
    let instance = getTipBoxInstance(type, content);
    instance.show();
    // 清除之前的隐藏视图计划任务
    clearSettimeoutQueue();
    // 触发所有回调函数
    emitAllOnnHideFuncQueue();
    // 将回调函数加入队列
    let _onHideFuncID = addOnnHideFuncQueue(onHide);
    const _hideViewFunc = instance.removeFromSuperView.bind(instance);
    // 在视图隐藏时的计划任务
    const _task = () => {
        // 隐藏视图
        _hideViewFunc();
        // 触发回调函数
        emitOnnHideFuncQueue(_onHideFuncID);
    };
    setTimeoutPointer = setTimeout(_task, duration * 1000);
    return ()=>{
        // 立即执行在视图隐藏时的计划任务
        _task();
        // 取消在视图隐藏时的计划任务
        clearTimeout(setTimeoutPointer);
    };
}

// 加入回调函数队列
function addOnnHideFuncQueue(onHideCallbackFunc) {
    let _onHideFuncID;
    if (onHideCallbackFunc && typeof onHideCallbackFunc === "function") {
        _onHideFuncID = getOnHideFuncID();
        onHideFuncQueue[_onHideFuncID] = onHideCallbackFunc;
    }
    return _onHideFuncID;
}

// 触发回调函数
function emitOnnHideFuncQueue(id) {
    if(onHideFuncQueue[id]){
        onHideFuncQueue[id]();
        delete onHideFuncQueue[id];
    }
}

// 触发所有回调函数
function emitAllOnnHideFuncQueue() {
    for(let id in onHideFuncQueue){
        emitOnnHideFuncQueue(id);
    }
}

function clearSettimeoutQueue() {
    if (setTimeoutPointer !== void 0 || setTimeoutPointer !== null) {
        clearTimeout(setTimeoutPointer);
        setTimeoutPointer = null;
    }
}

export default {
    info(content, duration, onHide) {
        return show(content, duration, 'info', onHide);
    },
    success(content, duration, onHide) {
        return show(content, duration, 'success', onHide);
    },
    error(content, duration, onHide) {
        return show(content, duration, 'error', onHide);
    },
    warn(content, duration, onHide) {
        return show(content, duration, 'warn', onHide);
    },
    loading(content, duration, onHide) {
        return show(content, duration, 'loading', onHide);
    },
    destroy() {
        if (tipBoxInstance !== void 0 || tipBoxInstance !== null) {
            clearSettimeoutQueue();
            tipBoxInstance.removeFromSuperView(); // 从父级视图移除
            tipBoxInstance = null;
        }
    },
};

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值