CustomAlert

CustomAlert.cmp

<aura:component >
	
    <aura:attribute name="title" type="String" />
    <aura:attribute name="message" type="String" />
    <aura:attribute name="showConfirmButton" type="Boolean" default="true" />
    <aura:attribute name="showCancelButton" type="Boolean" default="false" />
    <aura:attribute name="confirmButtonLabel" type="String" default="OK" />
    <aura:attribute name="cancelButtonLabel" type="String" default="Cancel" />
    <!-- accepting user input -->
    <aura:attribute name="inputType" type="String" />
    <aura:attribute name="inputLabel" type="String" />
    <aura:attribute name="inputValue" type="String" />
    <aura:attribute name="inputPlaceholder" type="String" default="Enter a value" />
    
    <aura:attribute name="promptClass" type="String" access="private" />
    <aura:attribute name="isOpen" type="Boolean" access="private" />
    <aura:attribute name="config" type="Object" access="private" />
    
    <aura:method name="open" action="{!c.openAlert}" description="Method used to open alert">
        <aura:attribute name="config" type="Object" />
    </aura:method>

    <aura:if isTrue="{!v.isOpen}">
        <div>
            <section role="dialog" tabindex="0" aria-modal="true" aria-labelledby="alert-heading-id" aria-describedby="alert-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt">
                <div class="slds-modal__container">
                    <div class="{!'slds-modal__header slds-theme_alert-texture ' + v.promptClass}">
                        <h1 class="slds-text-heading_medium" id="alert-heading-id">{!v.title}</h1>
                    </div>
                    <div class="slds-modal__content slds-p-around_medium" id="alert-message-wrapper">
                        <aura:if isTrue="{!v.inputType == null}">
                        	<lightning:formattedRichText value="{!v.message}"></lightning:formattedRichText>
                        </aura:if>
                        <aura:if isTrue="{!v.inputType == 'text'}">
                            <lightning:input aura:id="text-input" type="{!v.inputType}" label="{!v.inputLabel}" value="{!v.inputValue}" placeholder="{!v.inputPlaceholder}" />
                        </aura:if>
                    </div>
                    <div class="slds-modal__footer slds-theme_default">
                        <aura:if isTrue="{!v.showCancelButton}">
                        	<lightning:button label="{!v.cancelButtonLabel}" title="{!v.cancelButtonLabel}" onclick="{! c.handleCancel }" />
                        </aura:if>
                        <aura:if isTrue="{!v.showConfirmButton}">
	                        <lightning:button variant="brand" label="{!v.confirmButtonLabel}" title="{!v.confirmButtonLabel}" onclick="{! c.handleConfirm }" />
                        </aura:if>
                    </div>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
        </div>
    </aura:if>
</aura:component>

CustomAlertController.js

({
    openAlert: function(component, event, helper) {
        // close existing alert
        helper.closeAlert(component);
        // get params
        var args = event.getParam('arguments');
        var config = args.config;
        helper.setConfiguration(component, config);
        // open alert
        helper.openAlert(component);
    },
    handleConfirm: function(component, event, helper) {
        helper.callbackAndClose(component, true);
    },
    handleCancel: function(component, event, helper) {
        helper.callbackAndClose(component, false);
    }
})

CustomAlertHelper.js

({
    getPromptClass: function(promptType) {
        var promptClass = null;
        if (promptType == 'success') {
            promptClass = 'slds-theme_success';
        } else if (promptType == 'warning') {
            promptClass = 'slds-theme_warning';
        } else if (promptType == 'error') {
            promptClass = 'slds-theme_error';
        } else {
            // default
            promptClass = 'slds-theme_info';
        }
        return promptClass;
    },
    setConfiguration: function(component, config) {
        var helper = this;
        component.set('v.title', config.title);
        component.set('v.message', config.message);
        component.set('v.confirmButtonLabel', config.confirmButtonLabel);
        component.set('v.cancelButtonLabel', config.cancelButtonLabel);
        component.set('v.showConfirmButton', config.showConfirmButton || component.get('v.showConfirmButton'));
        component.set('v.showCancelButton', config.showCancelButton);
        component.set('v.inputType', config.inputType);
        component.set('v.inputLabel', config.inputLabel);
        component.set('v.inputValue', config.inputValue);
        component.set('v.inputPlaceholder', config.inputPlaceholder || component.get('v.inputPlaceholder'));
        component.set('v.promptClass', helper.getPromptClass(config.promptType));
        component.set('v.config', config);
    },
    openAlert: function(component) {
        component.set('v.isOpen', true);
    },
    closeAlert: function(component) {
        component.set('v.isOpen', false);
    },
    callbackAndClose: function(component, result) {
        var helper = this;
        helper.closeAlert(component);
        var config = component.get('v.config');
        if (config && config.callbackFn) {
            var inputType = component.get('v.inputType');
            var value = null;
            if (inputType == 'text') {
                value = component.find('text-input').get('v.value');
            }
            config.callbackFn(result, value);
        }
    }
})