Extend massactions.js

Question

I need to extend a javascript from the new ui module that features the new admin grid system. Extend a default Ui component give me a hint, and I was able to setup some code:

# file: app/code/My/Module/view/adminhtml/web/js/gid/massactions.js
console.log('new massactions.js');
define([
    'Magento_Ui/js/grid/massactions'
], function (massactions) {
    console.log('before extend');
    return massactions.extend({

        defaultCallback: function (action, data) {
            console.log('custom callback');
        }

    });
});

As you can see, I have three console.log, but the defaultCallback one is not being called, so it is not overwriting the method as I expected, but I can be sure that the definition was loaded.

To be fair, I want to add a custom callback to a new action that I've added. In the original massactions.js, we have a _getCallback that attempts to grab a callback for a massaction item (fallback to defaultCallback, which I'm trying to overwrite), but I could not manage to add a callback there, even using view/ui_component/sales_order_grid.xml.

Any help will be very appreciated.

Update 1: I'm able to overwrite the method using massactions.prototype.defaultCallback = function(){}. I'm not sure if this have any collateral effect, so I'm leaving the question open.

Answer 1

Looks like answered on github. copy/past here

You can try 'mixins' feature, all you need is to create requireJS module with extended method like this:

default_mixin.js:

define(function () {
    'use strict';

    var mixin = {

        methodToExtend: function () {
            //...
        }
    };

    return function (target) { // target == Result that Magento_Ui/.../default returns.
        return target.extend(mixin); // new result that all other modules receive 
    };
});

requirejs-config.js:

config: {
    mixins: {
        'My_Module/js/payment/default': {  // Target module
            'My_Module/js/payment/default_mixin': true  // Extender module
        }
    }
}

Answer 2

I'm not sure what you want, but you can use my solution. I use mixins.

define([
    //'Magento_Ui/js/grid/massactions'
], function (/*massactions*/) {
    'use strict';

    return function (target) {
        return target.extend({
            applyAction: function (actionIndex) {
                console.log('my version');
                // call parent
                //return this._super(actionIndex);
            }
        });
    };
});