How is the `Magento_Ui/js/view/messages` UI component used?

dmitry_fedyuk · April 22, 2018, 7:33am

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L92-L102


/**
 * Initialize child elements
 *
 * @returns {Component} Chainable.
 */
initChildren: function () {
    this.messageContainer = new Messages();
    this.createMessagesComponent();


    return this;
},

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L104-L124


/**
 * Create child message renderer component
 *
 * @returns {Component} Chainable.
 */
createMessagesComponent: function () {


    var messagesComponent = {
        parent: this.name,
        name: this.name + '.messages',
        displayArea: 'messages',
        component: 'Magento_Ui/js/view/messages',
        config: {
            messageContainer: this.messageContainer
        }
    };


    layout([messagesComponent]);


    return this;
},

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Checkout/view/frontend/web/template/onepage.html#L19-L21


<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/frontend/web/js/model/messages.js#L9-L118


define([
'ko',
'uiClass'
], function (ko, Class) {
'use strict';


return Class.extend({
    /** @inheritdoc */
    initialize: function () {
        this._super()
            .initObservable();


        return this;
    },


    /** @inheritdoc */
    initObservable: function () {
        this.errorMessages = ko.observableArray([]);
        this.successMessages = ko.observableArray([]);


        return this;
    },


    /**
     * Add  message to list.
     * @param {Object} messageObj
     * @param {Object} type
     * @returns {Boolean}
     */
    add: function (messageObj, type) {
        var expr = /([%])\w+/g,
            message;


        if (!messageObj.hasOwnProperty('parameters')) {
            this.clear();
            type.push(messageObj.message);


            return true;
        }
        message = messageObj.message.replace(expr, function (varName) {
            varName = varName.substr(1);


            if (messageObj.parameters.hasOwnProperty(varName)) {
                return messageObj.parameters[varName];
            }


            return messageObj.parameters.shift();
        });
        this.clear();
        this.errorMessages.push(message);


        return true;
    },


    /**
     * Add success message.
     *
     * @param {Object} message
     * @return {*|Boolean}
     */
    addSuccessMessage: function (message) {
        return this.add(message, this.successMessages);
    },


    /**
     * Add error message.
     *
     * @param {Object} message
     * @return {*|Boolean}
     */
    addErrorMessage: function (message) {
        return this.add(message, this.errorMessages);
    },


    /**
     * Get error messages.
     *
     * @return {Array}
     */
    getErrorMessages: function () {
        return this.errorMessages;
    },


    /**
     * Get success messages.
     *
     * @return {Array}
     */
    getSuccessMessages: function () {
        return this.successMessages;
    },


    /**
     * Checks if an instance has stored messages.
     *
     * @return {Boolean}
     */
    hasMessages: function () {
        return this.errorMessages().length > 0 || this.successMessages().length > 0;
    },


    /**
     * Removes stored messages.
     */
    clear: function () {
        this.errorMessages.removeAll();
        this.successMessages.removeAll();
    }
});
});

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/frontend/web/js/view/messages.js#L9-L75


define([
'ko',
'jquery',
'uiComponent',
'../model/messageList'
], function (ko, $, Component, globalMessages) {
'use strict';


return Component.extend({
    defaults: {
        template: 'Magento_Ui/messages',
        selector: '[data-role=checkout-messages]',
        isHidden: false,
        listens: {
            isHidden: 'onHiddenChange'
        }
    },


    /** @inheritdoc */
    initialize: function (config, messageContainer) {
        this._super()
            .initObservable();


        this.messageContainer = messageContainer || config.messageContainer || globalMessages;


        return this;
    },


    /** @inheritdoc */
    initObservable: function () {
        this._super()
            .observe('isHidden');


        return this;
    },


    /**
     * Checks visibility.
     *
     * @return {Boolean}
     */
    isVisible: function () {
        return this.isHidden(this.messageContainer.hasMessages());
    },


    /**
     * Remove all messages.
     */
    removeAll: function () {
        this.messageContainer.clear();
    },


    /**
     * @param {Boolean} isHidden
     */
    onHiddenChange: function (isHidden) {
        var self = this;


        // Hide message block if needed
        if (isHidden) {
            setTimeout(function () {
                $(self.selector).hide('blind', {}, 500);
            }, 5000);
        }
    }
});
});