import * as Utils from '../lib/utils' ; interface ActionBtnConf { /** 按钮文字 (动态/静态) */ text : ( ( ) => string ) | string ; /** 仅管理员可用 */ adminOnly ? : boolean ; /** 确认操作 */ confirm ? : boolean ; /** 确认时提示文字 */ confirmText ? : string ; } /**
 * 通用操作按钮
 */ export default class ActionBtn { private conf : ActionBtnConf ; public $el : HTMLElement ; public isLoading = false ; public msgRecTimer ? : number ; public msgRecTimerFunc ? : Function ; public get isMessaging ( ) { return ! ! this . msgRecTimer ; } public isConfirming = false ; public confirmRecTimer ? : number ; /** 构造函数 */ constructor ( conf ) { this . $el = Utils . createElement ( `<span class="atk-common-action-btn"></span>` ) ; this . conf = ( typeof conf !== 'object' ) ? ( { text : conf } ) : conf ; this . $el . innerText = this . getText ( ) ; if ( this . conf . adminOnly ) this . $el . setAttribute ( 'atk-only-admin-show' , '' ) ; } /** 将按钮装载到指定元素 */ public appendTo ( dom ) { dom . append ( this . $el ) ; return this ; } /** 获取按钮文字（动态/静态） */ private getText ( ) { return ( typeof this . conf . text === 'string' ) ? this . conf . text : this . conf . text ( ) ; } /** 设置点击事件 */ public setClick ( func ) { this . $el . onclick = ( e ) => { e . stopPropagation ( ) ; if ( this . isLoading ) { return ; } if ( this . conf . confirm && ! this . isMessaging ) { const confirmRestore = ( ) => { this . isConfirming = false ; this . $el . classList . remove ( 'atk-btn-confirm' ) ; this . $el . innerText = this . getText ( ) ; } ; if ( ! this . isConfirming ) { this . isConfirming = true ; this . $el . classList . add ( 'atk-btn-confirm' ) ; this . $el . innerText = this . conf . confirmText || '确认操作' ; this . confirmRecTimer = window . setTimeout ( ( ) => confirmRestore ( ) , 5000 ) ; return ; } if ( this . confirmRecTimer ) window . clearTimeout ( this . confirmRecTimer ) ; confirmRestore ( ) ; } if ( this . msgRecTimer ) { this . fireMsgRecTimer ( ) ; this . clearMsgRecTimer ( ) ; return ; } func ( ) ; } ; } /** 文字刷新（动态/静态） */ public updateText ( text ? ) { if ( text ) this . conf . text = text ; this . setLoading ( false ) ; this . $el . innerText = this . getText ( ) ; } /** 设置加载状态 */ public setLoading ( value , loadingText ? ) { if ( this . isLoading === value ) return ; this . isLoading = value ; if ( value ) { this . $el . classList . add ( 'atk-btn-loading' ) ; this . $el . innerText = loadingText || '加载中...' ; } else { this . $el . classList . remove ( 'atk-btn-loading' ) ; this . $el . innerText = this . getText ( ) ; } } /** 错误消息 */ public setError ( text ) { this . setMsg ( text , 'atk-btn-error' ) ; } /** 警告消息 */ public setWarn ( text ) { this . setMsg ( text , 'atk-btn-warn' ) ; } /** 成功消息 */ public setSuccess ( text ) { this . setMsg ( text , 'atk-btn-success' ) ; } /** 设置消息 */ public setMsg ( text , className ? , duringTime ? , after ? ) { this . setLoading ( false ) ; if ( className ) this . $el . classList . add ( className ) ; this . $el . innerText = text ; this . setMsgRecTimer ( ( ) => { this . $el . innerText = this . getText ( ) ; if ( className ) this . $el . classList . remove ( className ) ; if ( after ) after ( ) ; } , duringTime || 2500 ) ; } /** 设置消息复原操作定时器 */ private setMsgRecTimer ( func , duringTime ) { this . fireMsgRecTimer ( ) ; this . clearMsgRecTimer ( ) ; this . msgRecTimerFunc = func ; this . msgRecTimer = window . setTimeout ( ( ) => { func ( ) ; this . clearMsgRecTimer ( ) ; } , duringTime ) ; } /** 立刻触发器复原定时器 */ private fireMsgRecTimer ( ) { if ( this . msgRecTimerFunc ) this . msgRecTimerFunc ( ) ; } /** 仅清除 timer */ private clearMsgRecTimer ( ) { if ( this . msgRecTimer ) window . clearTimeout ( this . msgRecTimer ) ; this . msgRecTimer = undefined ; this . msgRecTimerFunc = undefined ; } }