ractive-ez-combobox/lib/EzMultiBox.js

Ractive Ez UI Combobox

import Ractive      from 'ractive';
import EzSelectBox  from './EzSelectBox.js';
import './EzMultiBox.less';

const EzMultiBox = Ractive.components.EzMultiBox = EzSelectBox.extend({

    partials: {
        value: require("./EzMultiBox.value.html")
    },

    data() {
        return {
            type: "ez-multibox",
            values: []
        }
    },

    oninit() {

        this._super();

        this.on("select", (ctx, value) => {
            const index = this.findItemIndex(this.get("values"), value);

            if (index == -1) {
                if (!this.get("values")) {
                    this.set("values", []);
                }

                if (value != null) {
                    this.push("values", value);
                    this.renderOptions();
                    this.fire("add", {}, value);
                    this.fire("change", {}, this.get("values"));
                }
            }
        });

    },

    unselect(value = this.get("values")[this.get("values").length - 1]) {
        const compare = this.get("compare") || utils.compare;
        const index = this.get("values").findIndex(val => compare(val, value));

        if (index != -1) {
            this.splice("values", index, 1);
            this.renderOptions();
            this.fire("remove", {}, value);
            this.fire("change", {}, this.get("values"));
        }
    },

    handleEnterKey(txt, cancel) {
        if (txt) {
            cancel();
            this.select();
            this.set("_state.isFiltered", false);
            this.preview(null);
            this.filter();
        }
    },

    handleTabKey(txt, cancel) {
        this.handleEnterKey(txt, cancel);
    },

    handleBackspaceKey(txt, cancel) {
        txt ? this._super(txt, cancel) : this.unselect();
    },

    handleEscapeKey(txt, cancel) {
        this.preview(null);
        this._super();
    },

    handleValueButtonClick(event, value) {
        this.unselect(value);
        this.close();
    }

});

export default EzMultiBox;