wikimedia/mediawiki-extensions-MobileFrontend

const
    mfExtend = require( './mfExtend' ),
    util = require( './util' ),
    View = require( './View' ),
    IconButton = require( './IconButton' );

/**
 * A wrapper for creating a button.
 * FIXME: T343036 This file should be combined with IconButton, all gadgets/extentions
 * using Button.js and IconButton.js will need to be updated to reflect this
 *
 * @class Button
 * @private
 * @extends module:mobile.startup/View
 *
 * @param {Object} options Configuration options
 */
function Button( options ) {
    View.call( this, options );
}

mfExtend( Button, View, {
    /**
     * @inheritdoc
     * @memberof IconButton
     * @instance
     */
    preRender() {
        // Mapping existing props to Codex props used in IconButton
        let action = 'default';
        if ( this.options.progressive ) {
            action = 'progressive';
        } else if ( this.options.destructive ) {
            action = 'destructive';
        }
        let weight = this.options.quiet ? 'quiet' : 'normal';
        if ( this.options.progressive || this.options.destructive ) {
            weight = 'primary';
        }
        if ( this.options.block ) {
            this.options.additionalClassNames += ' mf-button-block';
        }
        const options = util.extend( {
            weight,
            action,
            isIconOnly: false,
            icon: null
        }, this.options );

        this._button = new IconButton( options );
        this.options._buttonHTML = this._button.$el.get( 0 ).outerHTML;
    },
    /**
     * @inheritdoc
     * @memberof Button
     * @instance
     */
    isTemplateMode: true,
    /**
     * @memberof Button
     * @instance
     * @mixes module:mobile.startup/View#defaults
     * @property {Object} defaults Default options hash.
     * @property {string} defaults.tagName The name of the tag in which the button is wrapped.
     * @property {boolean} defaults.block is stacked button
     * @property {boolean} defaults.progressive is progressive action
     * @property {boolean} defaults.quiet is quiet button
     * @property {boolean} defaults.destructive is destructive action
     * @property {string} defaults.additionalClassNames Additional class name(s).
     * @property {string} defaults.href url
     * @property {string} defaults.label of button
     * @property {boolean} defaults.disabled should only be used with tagName button
     */
    defaults: {
        tagName: 'a',
        disabled: false,
        block: undefined,
        progressive: undefined,
        destructive: undefined,
        quiet: undefined,
        additionalClassNames: '',
        href: undefined,
        label: undefined,
        size: 'medium'
    },
    /**
     * @memberof Button
     * @instance
     */
    template: util.template( '{{{_buttonHTML}}}' )
} );

module.exports = Button;