Nativescript Multi Select

Overview

Nativescript Multi Select is a popup dialog which provides multi selection, search through list and return the selected items.

Installation

This plugin supports NativeScript 7 or higher. For lower versions, you can use an older version of the plugin.

tns plugin add @codelab/nativescript-multi-select

Usage

TypeScript

import { MultiSelect, AShowType, MSOption } from '@codelab/nativescript-multi-select';

let MSelect = new MultiSelect();
let selectedItems = ["moi-a", "moi-b"];

const options: MSOption = {
  title: "Please Select",
  selectedItems: this._selectedItems,
  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 => {
    selectedItems = selectedItems;
    console.log("SELECTED ITEMS => ", selectedItems);
  },
  onItemSelected: selectedItem => {
    console.log("SELECTED ITEM => ", selectedItem);
  },
  onCancel: () => {
    console.log('CANCEL');
  },
  android: {
    titleSize: 25,
    cancelButtonTextColor: "#252323",
    confirmButtonTextColor: "#70798C",
  },
  ios: {
    cancelButtonBgColor: "#252323",
    confirmButtonBgColor: "#70798C",
    cancelButtonTextColor: "#ffffff",
    confirmButtonTextColor: "#ffffff",
    showType: AShowType.TypeBounceIn
  }
};

MSelect.show(options);

Angular

import { Component, OnInit, NgZone } from "@angular/core";
import { MultiSelect, AShowType, MSOption } from '@codelab/nativescript-multi-select';

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

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

  ngOnInit(): void {
  }

  public onSelectTapped(): void {
    const options: MSOption = {
      title: "Please Select",
      selectedItems: this.selectedItems,
      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;
          console.log("SELECTED ITEMS => ", selectedItems);
        })
      },
      onItemSelected: selectedItem => {
        console.log("SELECTED ITEM => ", selectedItem);
      },
      onCancel: () => {
        console.log('CANCEL');
      },
      android: {
        titleSize: 25,
        cancelButtonTextColor: "#252323",
        confirmButtonTextColor: "#70798C",
      },
      ios: {
        cancelButtonBgColor: "#252323",
        confirmButtonBgColor: "#70798C",
        cancelButtonTextColor: "#ffffff",
        confirmButtonTextColor: "#ffffff",
        showType: AShowType.TypeBounceIn
      }
    };

    this._MSelect.show(options);
  }
}

Vue

<script>
  import {
    MultiSelect,
    AShowType
  } from "nativescript-multi-select";
  const MSelect = new MultiSelect();

  export default {
    data() {
      selectedItems: ["moi-a", "moi-b"];
    },
    methods: {
      onSelectTapped() {
        const that = this;
        const options = {
          title: "Please Select",
          selectedItems: this.selectedItems,
          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 => {
            that.selectedItems = _selectedItems;
            console.log("SELECTED ITEMS => ", _selectedItems);
          },
          onItemSelected: selectedItem => {
            console.log("SELECTED ITEM => ", selectedItem);
          },
          onCancel: () => {
            console.log("CANCEL");
          },
          android: {
            titleSize: 25,
            cancelButtonTextColor: "#252323",
            confirmButtonTextColor: "#70798C"
          },
          ios: {
            cancelButtonBgColor: "#252323",
            confirmButtonBgColor: "#70798C",
            cancelButtonTextColor: "#ffffff",
            confirmButtonTextColor: "#ffffff",
            showType: AShowType.TypeBounceIn
          }
        };

        MSelect.show(options);
      }
    }
  };
</script>

API

MultiSelect

MSOption

MSAndroidOption (for android)

MSiOSOption (for ios)

iOS Popup: Animation AShowType ENUM

iOS Popup: Animation ADismissType ENUM

Author

Jonathan Mayunga, [email protected]

Credits

• For Android we're using the MultiSelectDialog by abumoallim,
• For iOS AAMultiSelectController by Alex Ao.

License

Apache License Version 2.0, January 2004