//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//wijmo
import * as wjInput from 'wijmo/wijmo.react.input';
//Application
import { DataService } from '../services/DataSvc';
export class ArraysSource extends React.Component<any, any> {

    countries = DataService.default.getAllCountries(); 
    selectedCountries = ['Belgium', 'Vietnam'];   
    constructor(props) {
        super(props);
    }


    render() {
        return <div>
            <h4>
                MultiAutoComplete with string arrays
            </h4>
                    <p>
                        The MultiAutoComplete control below uses a string array as its <b>itemsSource</b>.<br />
                        The maximum number of selected items is set to 4.
            </p>

            <wjInput.MultiAutoComplete
                placeholder="Countries"
                maxSelectedItems={4}
                itemsSource={this.countries}
                selectedItems={this.selectedCountries} />
        </div>;
    }
}

