Nativescript Multi Select

Overview

This plugin is cloned from nativescript-multi-select. Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

Installation

ns plugin add @elgibor-solution/nativescript-multiselect

Usage

Angular

import { Component, OnInit, NgZone } from "@angular/core";
import { MultiSelect, AShowType } from '@elgibor-solution/nativescript-multiselect';

@Component({
 // ...
})
export class SomeComponent implements OnInit {
    private _MSelect: MultiSelect;
    private predefinedItems: Array<any>;
    public selectedItems: Array<any>;

    constructor(private zone: NgZone) {
        this._MSelect = new MultiSelect();
        this.predefinedItems = ["moi-a", "moi-b"];
    }

    ngOnInit(): void {
    }


    onSelectTapped(): void {
        const options: MSOption = {
            title: "Please Select",
            selectedItems: this.predefinedItems,
            items: [
                { name: "A", value: "moi-a" },
                { name: "B", value: "moi-b" },
                { name: "C", value: "moi-c" },
                { name: "D", value: "moi-d" },
            ],
            bindValue: 'value',
            displayLabel: 'name',
            onConfirm: selectedItems => {
                this.zone.run(() => {
                this.selectedItems = selectedItems;
                this.predefinedItems = selectedItems;
                console.log("SELECTED ITEMS => ", selectedItems);
                })
            },
            onItemSelected: selectedItem => {
                console.log("SELECTED ITEM => ", selectedItem);
            },
            onCancel: () => {
                console.log('CANCEL');
            }
        };

        this._MSelect.show(options);
    }
}

API

MultiSelect

| Property | Type | Description | | ------------------------- | ----------- | ------------------------ | | show(options: MSOption) | () : void | Show Multi Select Dialog |

MSOption

| Property | Type | Description | | ------------------------------------------------ | ------------------- | --------------------------------------------------------------------------------------------------- | | title | string | Dialog Title | | confirmButtonText | string | confirm button text optional | | cancelButtonText | string | cancel button text optional | | selectedItems | Array<any> | predefined items optional | | items | Array<any> | items/list that will be display | | bindValue | string | the value that will determine the property which will be return when an item is selected optional | | displayLabel | string | the value that will determine the property which will be display in the list optional | | onConfirm: (selectedItems: Array<any>) => void | Function Callback | callback which fires when the selection has been confirm/done | | onItemSelected: (selectedItem: any) => void | Function Callback | callback which fires when an item has been selected optional | | onCancel: () => void | Function Callback | callback which fires when the cancel button is tapped optional |

MSAndroidOption (for android)

| Property | Type | Description | | ------------------------ | -------- | ----------- | | titleSize | number | optional |

MSiOSOption (for ios)

| Property | Type | Description | | ------------------------ | -------- | ---------------------------------------------------------------------------- | | showType | number | popup view show type, default by AAPopupViewShowTypeFadeIn optional | | dismissType | number | popup view dismiss type, default by AAPopupViewDismissTypeFadeOut optional | | itemColor | string | item text color optional |

Author

• Febri Arief

Credits

• Jonathan Mayunga who created plugin nativescript-multi-select
• For Android we're using the MultiSelectDialog by abumoallim,
• For iOS AAMultiSelectController by Alex Ao.

License

Apache License Version 2.0