import * as React from 'react';
 


import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';

class App extends React.PureComponent<{}, IListBoxProps> {

    private myListBox = React.createRef<JqxListBox>();

    constructor(props: {}) {
        super(props);

        this.state = {
            source: [
                { value: "AF", label: "Afghanistan" },
                { value: "AL", label: "Albania" },
                { value: "DZ", label: "Algeria" },
                { value: "AS", label: "American Samoa" },
                { value: "AD", label: "Andorra" },
                { value: "AO", label: "Angola" },
                { value: "AI", label: "Anguilla" },
                { value: "AQ", label: "Antarctica" },
                { value: "AG", label: "Antigua and Barbuda" },
                { value: "AR", label: "Argentina" },
                { value: "AM", label: "Armenia" },
                { value: "AW", label: "Aruba" },
                { value: "AU", label: "Australia" },
                { value: "AT", label: "Austria" },
                { value: "AZ", label: "Azerbaijan" },
                { value: "BS", label: "Bahamas" },
                { value: "BH", label: "Bahrain" },
                { value: "BD", label: "Bangladesh" },
                { value: "BB", label: "Barbados" },
                { value: "BY", label: "Belarus" },
                { value: "BE", label: "Belgium" },
                { value: "BZ", label: "Belize" },
                { value: "BJ", label: "Benin" },
                { value: "BM", label: "Bermuda" },
                { value: "BT", label: "Bhutan" },
                { value: "BO", label: "Bolivia" },
                { value: "BA", label: "Bosnia and Herzegovina" },
                { value: "BW", label: "Botswana" },
                { value: "BV", label: "Bouvet Island" },
                { value: "BR", label: "Brazil" },
                { value: "BN", label: "Brunei" },
                { value: "BG", label: "Bulgaria" },
                { value: "BF", label: "Burkina Faso" },
                { value: "BI", label: "Burundi" },
                { value: "KH", label: "Cambodia" },
                { value: "CM", label: "Cameroon" },
                { value: "CA", label: "Canada" },
                { value: "CV", label: "Cape Verde" },
                { value: "KY", label: "Cayman Islands" },
                { value: "CF", label: "Central African Republic" },
                { value: "TD", label: "Chad" },
                { value: "CL", label: "Chile" },
                { value: "CN", label: "China" },
                { value: "CX", label: "Christmas Island" },
                { value: "CC", label: "Cocos (Keeling) Islands" },
                { value: "CO", label: "Columbia" },
                { value: "KM", label: "Comoros" },
                { value: "CG", label: "Congo" },
                { value: "CK", label: "Cook Islands" },
                { value: "CR", label: "Costa Rica" },
                { value: "CI", label: "Cote D'Ivorie" },
                { value: "HR", label: "Croatia (Hrvatska)" },
                { value: "CU", label: "Cuba" },
                { value: "CY", label: "Cyprus" },
                { value: "CZ", label: "Czech Republic" },
                { value: "DK", label: "Denmark" },
                { value: "DJ", label: "Djibouti" },
                { value: "DM", label: "Dominica" },
                { value: "DO", label: "Dominican Republic" },
                { value: "TP", label: "East Timor" },
                { value: "EC", label: "Ecuador" },
                { value: "EG", label: "Egypt" },
                { value: "SV", label: "El Salvador" },
                { value: "GQ", label: "Equatorial Guinea" },
                { value: "ER", label: "Eritrea" },
                { value: "EE", label: "Estonia" },
                { value: "ET", label: "Ethiopia" },
                { value: "FO", label: "Faroe Islands" },
                { value: "FJ", label: "Fiji" },
                { value: "FI", label: "Finland" },
                { value: "FR", label: "France" },
                { value: "GF", label: "French Guinea" },
                { value: "PF", label: "French Polynesia" },
                { value: "GA", label: "Gabon" },
                { value: "GM", label: "Gambia" },
                { value: "GE", label: "Georgia" },
                { value: "DE", label: "Germany" },
                { value: "GH", label: "Ghana" },
                { value: "GI", label: "Gibraltar" },
                { value: "GR", label: "Greece" },
                { value: "GL", label: "Greenland" },
                { value: "GD", label: "Grenada" },
                { value: "GP", label: "Guadeloupe" },
                { value: "GU", label: "Guam" },
                { value: "GT", label: "Guatemala" },
                { value: "GN", label: "Guinea" },
                { value: "GW", label: "Guinea-Bissau" },
                { value: "GY", label: "Guyana" },
                { value: "HT", label: "Haiti" },
                { value: "HN", label: "Honduras" },
                { value: "HK", label: "Hong Kong" },
                { value: "HU", label: "Hungary" },
                { value: "IS", label: "Iceland" },
                { value: "IN", label: "India" },
                { value: "ID", label: "Indonesia" },
                { value: "IR", label: "Iran" },
                { value: "IQ", label: "Iraq" },
                { value: "IE", label: "Ireland" },
                { value: "IL", label: "Israel" },
                { value: "IT", label: "Italy" },
                { value: "JM", label: "Jamaica" },
                { value: "JP", label: "Japan" },
                { value: "JO", label: "Jordan" },
                { value: "KZ", label: "Kazakhstan" },
                { value: "KE", label: "Kenya" },
                { value: "KI", label: "Kiribati" },
                { value: "KW", label: "Kuwait" },
                { value: "KG", label: "Kyrgyzstan" },
                { value: "LA", label: "Laos" },
                { value: "LV", label: "Latvia" },
                { value: "LB", label: "Lebanon" },
                { value: "LS", label: "Lesotho" },
                { value: "LR", label: "Liberia" },
                { value: "LY", label: "Libya" },
                { value: "LI", label: "Liechtenstein" },
                { value: "LT", label: "Lithuania" },
                { value: "LU", label: "Luxembourg" },
                { value: "MO", label: "Macau" },
                { value: "MK", label: "Macedonia" },
                { value: "MG", label: "Madagascar" },
                { value: "MW", label: "Malawi" },
                { value: "MY", label: "Malaysia" },
                { value: "MV", label: "Maldives" },
                { value: "ML", label: "Mali" },
                { value: "MT", label: "Malta" },
                { value: "MH", label: "Marshall Islands" },
                { value: "MQ", label: "Martinique" },
                { value: "MR", label: "Mauritania" },
                { value: "MU", label: "Mauritius" },
                { value: "YT", label: "Mayotte" },
                { value: "MX", label: "Mexico" },
                { value: "FM", label: "Micronesia" },
                { value: "MD", label: "Moldova" },
                { value: "MC", label: "Monaco" },
                { value: "MN", label: "Mongolia" },
                { value: "MS", label: "Montserrat" },
                { value: "MA", label: "Morocco" },
                { value: "MZ", label: "Mozambique" },
                { value: "MM", label: "Myanmar (Burma)" },
                { value: "NA", label: "Namibia" },
                { value: "NR", label: "Nauru" },
                { value: "NP", label: "Nepal" },
                { value: "NL", label: "Netherlands" },
                { value: "AN", label: "Netherlands Antilles" },
                { value: "NC", label: "New Caledonia" },
                { value: "NZ", label: "New Zealand" },
                { value: "NI", label: "Nicaragua" },
                { value: "NE", label: "Niger" },
                { value: "NG", label: "Nigeria" },
                { value: "NU", label: "Niue" },
                { value: "NF", label: "Norfolk Island" },
                { value: "KP", label: "North Korea" },
                { value: "NO", label: "Norway" },
                { value: "OM", label: "Oman" },
                { value: "PK", label: "Pakistan" },
                { value: "PW", label: "Palau" },
                { value: "PA", label: "Panama" },
                { value: "PG", label: "Papua New Guinea" },
                { value: "PY", label: "Paraguay" },
                { value: "PE", label: "Peru" },
                { value: "PH", label: "Philippines" },
                { value: "PN", label: "Pitcairn" },
                { value: "PL", label: "Poland" },
                { value: "PT", label: "Portugal" },
                { value: "PR", label: "Puerto Rico" },
                { value: "QA", label: "Qatar" },
                { value: "RE", label: "Reunion" },
                { value: "RO", label: "Romania" },
                { value: "RU", label: "Russia" },
                { value: "RW", label: "Rwanda" },
                { value: "SH", label: "Saint Helena" },
                { value: "KN", label: "Saint Kitts and Nevis" },
                { value: "LC", label: "Saint Lucia" },
                { value: "SM", label: "San Marino" },
                { value: "SA", label: "Saudi Arabia" },
                { value: "SN", label: "Senegal" },
                { value: "SC", label: "Seychelles" },
                { value: "SL", label: "Sierra Leone" },
                { value: "SG", label: "Singapore" },
                { value: "SK", label: "Slovak Republic" },
                { value: "SI", label: "Slovenia" },
                { value: "SB", label: "Solomon Islands" },
                { value: "SO", label: "Somalia" },
                { value: "ZA", label: "South Africa" },
                { value: "GS", label: "South Georgia" },
                { value: "KR", label: "South Korea" },
                { value: "ES", label: "Spain" },
                { value: "LK", label: "Sri Lanka" },
                { value: "SD", label: "Sudan" },
                { value: "SR", label: "Suriname" },
                { value: "SZ", label: "Swaziland" },
                { value: "SE", label: "Sweden" },
                { value: "CH", label: "Switzerland" },
                { value: "SY", label: "Syria" },
                { value: "TW", label: "Taiwan" },
                { value: "TJ", label: "Tajikistan" },
                { value: "TZ", label: "Tanzania" },
                { value: "TH", label: "Thailand" },
                { value: "TG", label: "Togo" },
                { value: "TK", label: "Tokelau" },
                { value: "TO", label: "Tonga" },
                { value: "TT", label: "Trinidad and Tobago" },
                { value: "TN", label: "Tunisia" },
                { value: "TR", label: "Turkey" },
                { value: "TM", label: "Turkmenistan" },
                { value: "TC", label: "Turks and Caicos Islands" },
                { value: "TV", label: "Tuvalu" },
                { value: "UG", label: "Uganda" },
                { value: "UA", label: "Ukraine" },
                { value: "AE", label: "United Arab Emirates" },
                { value: "UK", label: "United Kingdom" },
                { value: "US", label: "United States" },
                { value: "UY", label: "Uruguay" },
                { value: "UZ", label: "Uzbekistan" },
                { value: "VU", label: "Vanuatu" },
                { value: "VA", label: "Vatican City (Holy See)" },
                { value: "VE", label: "Venezuela" },
                { value: "VN", label: "Vietnam" },
                { value: "VG", label: "Virgin Islands (British)" },
                { value: "VI", label: "Virgin Islands (US)" },
                { value: "WF", label: "Wallis and Futuna Islands" },
                { value: "EH", label: "Western Sahara" },
                { value: "WS", label: "Western Samoa" },
                { value: "YE", label: "Yemen" },
                { value: "YU", label: "Yugoslavia" },
                { value: "ZM", label: "Zambia" },
                { value: "ZW", label: "Zimbabwe" }
            ]
        }
    }

    public componentDidMount() {
        this.myListBox.current!.focus();
    }

    public render() {
        return (
            <div>
                <JqxListBox theme={'material-purple'} ref={this.myListBox}
                    width={200} height={250} source={this.state.source}
                    selectedIndex={3} multipleextended={true} />

                <div style={{ fontFamily: 'Verdana', fontSize: '12px', width: '400px', marginLeft: '20px', float: 'left' }}>
                    <ul>
                        <li><b>Tab</b> - Like other widgets, the jqxListBox widget receives focus by tabbing into it. Once focus is received, users will be able to use the keyboard to change the jqxListBox's selection. A second tab will take the user out of the widget.</li>
                        <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous focusable element in the tab order.</li>
                        <li><b>Up/Down</b> arrow keys - select previous or next item.</li>
                        <li><b>Page Up/Page Down</b> keys - navigate up or down with one page.</li>
                        <li><b>Home/End</b> keys - navigate to the first or last item.</li>
                        <li>Hold <b>SHIFT</b> and press Up or Down arrow keys to select multiple items.</li>
                        <li>Hold <b>SHIFT</b> or <b>Ctrl</b> and click with the mouse to select multiple items.</li>
                        <li>
                            <b>Incremental Search</b> - start typing to select the matching item.
                        </li>
                        <li><b>First letter</b> - press a key to navigate to a matching item. Subsequent press on the same key will iterate over the matches.</li>
                    </ul>
                </div>
            </div>
        );
    }
}

export default App;