From 767d01984b8f551d8796bdd0eb2aa802036e8b6e Mon Sep 17 00:00:00 2001 From: Igor Vaynberg Date: Thu, 27 Jun 2019 16:48:13 -0700 Subject: [PATCH] define data format, separate options into multi and single to make them more clear --- .ignore | 1 + bridge/src/select25.tsx | 161 +++--- control/src/abstract-select.tsx | 44 +- control/src/multi-select.tsx | 7 +- .../multi-select.unit.test.tsx.snap | 8 +- control/test/countries.ts | 486 +++++++++--------- control/test/multi-select.unit.test.tsx | 8 +- control/test/preact-util.ts | 2 +- dev/index.html | 23 +- dist/select25.js | 95 ++-- dist/select25.js.map | 2 +- 11 files changed, 411 insertions(+), 426 deletions(-) create mode 100644 .ignore diff --git a/.ignore b/.ignore new file mode 100644 index 00000000..a261f291 --- /dev/null +++ b/.ignore @@ -0,0 +1 @@ +dist/* diff --git a/bridge/src/select25.tsx b/bridge/src/select25.tsx index 5470da67..2534a29a 100644 --- a/bridge/src/select25.tsx +++ b/bridge/src/select25.tsx @@ -1,6 +1,6 @@ /** jsx:pragma h */ import { Component, h, render } from 'preact'; -import { ItemRenderer, QueryFunction } from '../../control/src/abstract-select'; +import { DataItem, DataItemRenderer, QueryFunction } from '../../control/src/abstract-select'; import { Dictionary } from '../../control/src/dictionary'; import { MultiSelect } from '../../control/src/multi-select'; import '../../control/src/select25.scss'; @@ -16,16 +16,12 @@ enum StoreKeys { targetElement = 'te' } -export interface Options { - multiple: boolean; +interface BaseSelectOptions { containerStyle?: string; containerClass?: string; - hiddenValue?: (values: any, options: Options) => string; tabIndex?: number; - itemId: ((item: any) => string) | string; - itemLabel: ((item: any) => string) | string; - valueContent?: ItemRenderer; - resultContent?: ItemRenderer; + valueContent?: DataItemRenderer; + resultContent?: DataItemRenderer; query?: QueryFunction; data?: DataFunction; ajax?: Ajax; @@ -33,55 +29,50 @@ export interface Options { minimumCharacters?: number; openOnFocus?: boolean; dictionary?: string | Dictionary; - - value: any; - values: any[]; - allowClear?: boolean; - placeholder?: string; - - /** Single Select Label */ - label?: string; - - /** Multi Select Selected Values Listbox Label */ - valuesLabel?: string; - /** Multi Select Add Value Combobox Label */ - comboboxLabel?: string; - - allowDuplicates: boolean; } -const DEFAULT_OPTIONS = { - allowClear: false, - dictionary: 'en_us', - hiddenValue: (values: any, options: Options) => { - const id = (item: any) => { - if (typeof options.itemId === 'function') { - return options.itemId(item); - } else { - return '' + item[options.itemId]; - } - }; +interface MultiSelectOptions extends BaseSelectOptions { + hiddenValue?: (values: DataItem[], options: MultiSelectOptions) => string; + valuesLabel?: string; + comboboxLabel?: string; + allowDuplicates: boolean; + values: DataItem[]; +} - if (values) { - if (Array.isArray(values)) { - if (values.length > 0) { - return values.map(id).join(','); - } else { - return ''; - } - } else { - return id(values); - } +interface SingleSelectOptions extends BaseSelectOptions { + hiddenValue?: (value: DataItem, options: SingleSelectOptions) => string; + label?: string; + value: DataItem; + allowClear?: boolean; + placeholder?: string; +} + +const BASE_DEFAULT_OPTIONS = { + dictionary: 'en_us', + minimumCharacters: 0, + openOnFocus: false +}; + +const DEFAULT_MULTI_SELECT_OPTIONS = extend({}, BASE_DEFAULT_OPTIONS, { + hiddenValue: (values: DataItem[], options: MultiSelectOptions) => { + if (values && values.length > 0) { + return values.map(item => item.id).join(','); } else { return ''; } - }, - itemId: 'id', - itemLabel: 'text', - minimumCharacters: 0, - multiple: false, - openOnFocus: false -}; + } +}); + +const DEFAULT_SINGLE_SELECT_OPTIONS = extend({}, BASE_DEFAULT_OPTIONS, { + allowClear: false, + hiddenValue: (value: DataItem, options: SingleSelectOptions) => { + if (value) { + return value.id; + } else { + return ''; + } + } +}); function triggerOnChange(element: HTMLElement, data: any) { const event = document.createEvent('HTMLEvents'); @@ -93,13 +84,13 @@ function triggerOnChange(element: HTMLElement, data: any) { class MultiSelectWrapper extends Component< { element: HTMLInputElement; - options: Options; + options: MultiSelectOptions; }, - { values: any } + { values?: DataItem[] } > { constructor(props) { super(props); - this.state = { values: props.options.values }; + this.state = { values: props.options.values || [] }; } public componentDidUpdate() { @@ -118,8 +109,6 @@ class MultiSelectWrapper extends Component< containerStyle={opts.containerStyle} valuesLabel={opts.valuesLabel} comboboxLabel={opts.comboboxLabel} - itemId={opts.itemId} - itemLabel={opts.itemLabel} valueContent={opts.valueContent} resultContent={opts.resultContent} query={opts.query} @@ -149,10 +138,10 @@ class MultiSelectWrapper extends Component< class SingleSelectWrapper extends Component< { - options: Options; + options: SingleSelectOptions; element: HTMLInputElement; }, - { value: any } + { value?: DataItem } > { constructor(props) { super(props); @@ -172,13 +161,10 @@ class SingleSelectWrapper extends Component< return ( ); } - public onChange = (value: any) => { + public onChange = (value: DataItem) => { this.setState({ value }); this.setHiddenValue(value); triggerOnChange(this.props.element, value); }; - private setHiddenValue(value: any) { + private setHiddenValue(value: DataItem) { const { element, options } = this.props; element.value = options.hiddenValue(value, options); } } -function create(element: HTMLInputElement, options: Options) { - // TODO make sure we are attached to hidden input +function createSingleSelect(element: HTMLInputElement, options: SingleSelectOptions) { + options = extend({}, DEFAULT_SINGLE_SELECT_OPTIONS, options); + fillBaseOptions(element, options); const store = Store.getStore(element); - options = extend({}, DEFAULT_OPTIONS, options); + // create placeholder element into which the control will be rendered + const parentElement = element.parentElement; + const targetElement = document.createElement('div'); + parentElement.insertBefore(targetElement, element); + store.set(StoreKeys.targetElement, targetElement); + + render(, parentElement, targetElement); +} + +function createMultiSelect(element: HTMLInputElement, options: SingleSelectOptions) { + options = extend({}, DEFAULT_SINGLE_SELECT_OPTIONS, options); + fillBaseOptions(element, options); + + const store = Store.getStore(element); + + // create placeholder element into which the control will be rendered + const parentElement = element.parentElement; + const targetElement = document.createElement('div'); + parentElement.insertBefore(targetElement, element); + store.set(StoreKeys.targetElement, targetElement); + + render(, parentElement, targetElement); +} + +function fillBaseOptions(element: HTMLInputElement, options: BaseSelectOptions) { if (!options.query) { if (options.ajax) { options.query = createQueryFromAjax(options.ajax); @@ -241,20 +251,6 @@ function create(element: HTMLInputElement, options: Options) { clazz += element.getAttribute('data-s25-container-class'); options.containerClass = clazz; } - - // create placeholder element into which the control will be rendered - const parentElement = element.parentElement; - const targetElement = document.createElement('div'); - parentElement.insertBefore(targetElement, element); - - store.set(StoreKeys.targetElement, targetElement); - - // render the replacement - if (options.multiple) { - render(, parentElement, targetElement); - } else { - render(, parentElement, targetElement); - } } function destroy(element: HTMLElement) { @@ -270,7 +266,8 @@ function destroy(element: HTMLElement) { } const select25 = { - create, + createMultiSelect, + createSingleSelect, destroy }; diff --git a/control/src/abstract-select.tsx b/control/src/abstract-select.tsx index 88ec9acb..971c8179 100644 --- a/control/src/abstract-select.tsx +++ b/control/src/abstract-select.tsx @@ -6,12 +6,17 @@ const forceImportOfH = h; type ToString = (item: any) => string; -export type ItemRenderer = (string) | ((item: any, h: typeof createElement) => ComponentChild); +export type DataItemRenderer = (string) | ((item: any, h: typeof createElement) => ComponentChild); export type QueryFunction = (search: string, page: number, token: string) => Promise; +export interface DataItem { + id: any; + text: string; +} + export interface QueryResult { - values: any[]; + values: DataItem[]; more: boolean; token: string; } @@ -38,10 +43,8 @@ export interface Props { containerStyle?: string; containerClass?: string; tabIndex?: number; - itemId: ToString | string; - itemLabel: ToString | string; - valueContent?: ItemRenderer; - resultContent?: ItemRenderer; + valueContent?: DataItemRenderer; + resultContent?: DataItemRenderer; query: QueryFunction; quiet?: number; @@ -57,8 +60,6 @@ function MarkupRenderer({ markup }) { export const DEFAULT_PROPS: Partial = { allowDuplicates: false, - itemId: 'id', - itemLabel: 'text', minimumCharacters: 0, quiet: 50, tabIndex: 0 @@ -91,34 +92,25 @@ export abstract class AbstractSelect

extends C }; } - public getItemId = (item: any): string => { - const id = this.props.itemId; - if (typeof id === 'function') { - return (id as ToString)(item); - } else { - return '' + item[id]; - } + public getItemId = (item: DataItem): string => { + return item.id; }; - public getItemLabel = (item: any): string => { - const label = this.props.itemLabel; - if (typeof label === 'function') { - return (label as ToString)(item); - } else { - return '' + item[label]; - } + public getItemLabel = (item: DataItem): string => { + const label = item.text; + return item.text; }; - public renderValue = (item: any): ComponentChild => { + public renderValue = (item: DataItem): ComponentChild => { return this.renderItem(item, 'valueContent'); }; - public renderResult = (item: any): ComponentChild => { + public renderResult = (item: DataItem): ComponentChild => { return this.renderItem(item, 'resultContent'); }; - private renderItem = (item: any, rendererName: keyof Props): ComponentChild => { - const renderer = this.props[rendererName] as ItemRenderer; + private renderItem = (item: DataItem, rendererName: (keyof Props) & DataItemRenderer): ComponentChild => { + const renderer = this.props[rendererName] as DataItemRenderer; if (renderer) { if (typeof renderer === 'function') { const render = renderer(item, createElement); diff --git a/control/src/multi-select.tsx b/control/src/multi-select.tsx index b4998051..55de4cd3 100644 --- a/control/src/multi-select.tsx +++ b/control/src/multi-select.tsx @@ -1,6 +1,7 @@ import { createRef, Fragment, h, RefObject } from 'preact'; import { AbstractSelect, + DataItem, DEFAULT_PROPS as ABSTRACT_DEFAULT_PROPS, Props as SearchControllerProps, State as AbstractSelectState @@ -17,8 +18,8 @@ const forceImportOfH = h; export interface Props extends SearchControllerProps { valuesLabel: string; comboboxLabel: string; - values: any[]; - onChange: (values: any[]) => void; + values: DataItem[]; + onChange: (values: DataItem[]) => void; } interface ValueListState { @@ -115,7 +116,7 @@ export class MultiSelect extends AbstractSelect { onBlur={this.onValuesBlur} onKeyDown={this.onValuesKeyDown} > - {values.map((value: any, index: number) => { + {values.map((value: DataItem, index: number) => { const isSelected = selected[index]; const isActive = active === index; const css = cn(style.item, { diff --git a/control/test/__snapshots__/multi-select.unit.test.tsx.snap b/control/test/__snapshots__/multi-select.unit.test.tsx.snap index 5566f008..668ac50e 100644 --- a/control/test/__snapshots__/multi-select.unit.test.tsx.snap +++ b/control/test/__snapshots__/multi-select.unit.test.tsx.snap @@ -35,14 +35,14 @@ exports[`MultiSelect renders with values 1`] = `

-
+
- +
-
+
- +
diff --git a/control/test/countries.ts b/control/test/countries.ts index e88387a7..755d8e00 100644 --- a/control/test/countries.ts +++ b/control/test/countries.ts @@ -1,245 +1,245 @@ export const countries = [ - { name: 'United States', code: 'US' }, - { name: 'Mexico', code: 'MX' }, - { name: 'Afghanistan', code: 'AF' }, - { name: 'Aland Islands', code: 'AX' }, - { name: 'Albania', code: 'AL' }, - { name: 'Algeria', code: 'DZ' }, - { name: 'American Samoa', code: 'AS' }, - { name: 'Andorra', code: 'AD' }, - { name: 'Angola', code: 'AO' }, - { name: 'Anguilla', code: 'AI' }, - { name: 'Antarctica', code: 'AQ' }, - { name: 'Antigua and Barbuda', code: 'AG' }, - { name: 'Argentina', code: 'AR' }, - { name: 'Armenia', code: 'AM' }, - { name: 'Aruba', code: 'AW' }, - { name: 'Australia', code: 'AU' }, - { name: 'Austria', code: 'AT' }, - { name: 'Azerbaijan', code: 'AZ' }, - { name: 'Bahamas', code: 'BS' }, - { name: 'Bahrain', code: 'BH' }, - { name: 'Bangladesh', code: 'BD' }, - { name: 'Barbados', code: 'BB' }, - { name: 'Belarus', code: 'BY' }, - { name: 'Belgium', code: 'BE' }, - { name: 'Belize', code: 'BZ' }, - { name: 'Benin', code: 'BJ' }, - { name: 'Bermuda', code: 'BM' }, - { name: 'Bhutan', code: 'BT' }, - { name: 'Bolivia', code: 'BO' }, - { name: 'Bosnia and Herzegovina', code: 'BA' }, - { name: 'Botswana', code: 'BW' }, - { name: 'Bouvet Island', code: 'BV' }, - { name: 'Brazil', code: 'BR' }, - { name: 'British Indian Ocean Territory', code: 'IO' }, - { name: 'Brunei Darussalam', code: 'BN' }, - { name: 'Bulgaria', code: 'BG' }, - { name: 'Burkina Faso', code: 'BF' }, - { name: 'Burundi', code: 'BI' }, - { name: 'Cambodia', code: 'KH' }, - { name: 'Cameroon', code: 'CM' }, - { name: 'Canada', code: 'CA' }, - { name: 'Cape Verde', code: 'CV' }, - { name: 'Cayman Islands', code: 'KY' }, - { name: 'Central African Republic', code: 'CF' }, - { name: 'Chad', code: 'TD' }, - { name: 'Chile', code: 'CL' }, - { name: 'China', code: 'CN' }, - { name: 'Christmas Island', code: 'CX' }, - { name: 'Cocos (Keeling) Islands', code: 'CC' }, - { name: 'Colombia', code: 'CO' }, - { name: 'Comoros', code: 'KM' }, - { name: 'Congo', code: 'CG' }, - { name: 'Congo, The Democratic Republic of the', code: 'CD' }, - { name: 'Cook Islands', code: 'CK' }, - { name: 'Costa Rica', code: 'CR' }, - { name: "Cote D'Ivoire", code: 'CI' }, - { name: 'Croatia', code: 'HR' }, - { name: 'Cuba', code: 'CU' }, - { name: 'Cyprus', code: 'CY' }, - { name: 'Czech Republic', code: 'CZ' }, - { name: 'Denmark', code: 'DK' }, - { name: 'Djibouti', code: 'DJ' }, - { name: 'Dominica', code: 'DM' }, - { name: 'Dominican Republic', code: 'DO' }, - { name: 'Ecuador', code: 'EC' }, - { name: 'Egypt', code: 'EG' }, - { name: 'El Salvador', code: 'SV' }, - { name: 'Equatorial Guinea', code: 'GQ' }, - { name: 'Eritrea', code: 'ER' }, - { name: 'Estonia', code: 'EE' }, - { name: 'Ethiopia', code: 'ET' }, - { name: 'Falkland Islands (Malvinas)', code: 'FK' }, - { name: 'Faroe Islands', code: 'FO' }, - { name: 'Fiji', code: 'FJ' }, - { name: 'Finland', code: 'FI' }, - { name: 'France', code: 'FR' }, - { name: 'French Guiana', code: 'GF' }, - { name: 'French Polynesia', code: 'PF' }, - { name: 'French Southern Territories', code: 'TF' }, - { name: 'Gabon', code: 'GA' }, - { name: 'Gambia', code: 'GM' }, - { name: 'Georgia', code: 'GE' }, - { name: 'Germany', code: 'DE' }, - { name: 'Ghana', code: 'GH' }, - { name: 'Gibraltar', code: 'GI' }, - { name: 'Greece', code: 'GR' }, - { name: 'Greenland', code: 'GL' }, - { name: 'Grenada', code: 'GD' }, - { name: 'Guadeloupe', code: 'GP' }, - { name: 'Guam', code: 'GU' }, - { name: 'Guatemala', code: 'GT' }, - { name: 'Guernsey', code: 'GG' }, - { name: 'Guinea', code: 'GN' }, - { name: 'Guinea-Bissau', code: 'GW' }, - { name: 'Guyana', code: 'GY' }, - { name: 'Haiti', code: 'HT' }, - { name: 'Heard Island and Mcdonald Islands', code: 'HM' }, - { name: 'Holy See (Vatican City State)', code: 'VA' }, - { name: 'Honduras', code: 'HN' }, - { name: 'Hong Kong', code: 'HK' }, - { name: 'Hungary', code: 'HU' }, - { name: 'Iceland', code: 'IS' }, - { name: 'India', code: 'IN' }, - { name: 'Indonesia', code: 'ID' }, - { name: 'Iran, Islamic Republic Of', code: 'IR' }, - { name: 'Iraq', code: 'IQ' }, - { name: 'Ireland', code: 'IE' }, - { name: 'Isle of Man', code: 'IM' }, - { name: 'Israel', code: 'IL' }, - { name: 'Italy', code: 'IT' }, - { name: 'Jamaica', code: 'JM' }, - { name: 'Japan', code: 'JP' }, - { name: 'Jersey', code: 'JE' }, - { name: 'Jordan', code: 'JO' }, - { name: 'Kazakhstan', code: 'KZ' }, - { name: 'Kenya', code: 'KE' }, - { name: 'Kiribati', code: 'KI' }, - { name: "Korea, Democratic People'S Republic of", code: 'KP' }, - { name: 'Korea, Republic of', code: 'KR' }, - { name: 'Kuwait', code: 'KW' }, - { name: 'Kyrgyzstan', code: 'KG' }, - { name: "Lao People'S Democratic Republic", code: 'LA' }, - { name: 'Latvia', code: 'LV' }, - { name: 'Lebanon', code: 'LB' }, - { name: 'Lesotho', code: 'LS' }, - { name: 'Liberia', code: 'LR' }, - { name: 'Libyan Arab Jamahiriya', code: 'LY' }, - { name: 'Liechtenstein', code: 'LI' }, - { name: 'Lithuania', code: 'LT' }, - { name: 'Luxembourg', code: 'LU' }, - { name: 'Macao', code: 'MO' }, - { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' }, - { name: 'Madagascar', code: 'MG' }, - { name: 'Malawi', code: 'MW' }, - { name: 'Malaysia', code: 'MY' }, - { name: 'Maldives', code: 'MV' }, - { name: 'Mali', code: 'ML' }, - { name: 'Malta', code: 'MT' }, - { name: 'Marshall Islands', code: 'MH' }, - { name: 'Martinique', code: 'MQ' }, - { name: 'Mauritania', code: 'MR' }, - { name: 'Mauritius', code: 'MU' }, - { name: 'Mayotte', code: 'YT' }, - { name: 'Micronesia, Federated States of', code: 'FM' }, - { name: 'Moldova, Republic of', code: 'MD' }, - { name: 'Monaco', code: 'MC' }, - { name: 'Mongolia', code: 'MN' }, - { name: 'Montserrat', code: 'MS' }, - { name: 'Morocco', code: 'MA' }, - { name: 'Mozambique', code: 'MZ' }, - { name: 'Myanmar', code: 'MM' }, - { name: 'Namibia', code: 'NA' }, - { name: 'Nauru', code: 'NR' }, - { name: 'Nepal', code: 'NP' }, - { name: 'Netherlands', code: 'NL' }, - { name: 'Netherlands Antilles', code: 'AN' }, - { name: 'New Caledonia', code: 'NC' }, - { name: 'New Zealand', code: 'NZ' }, - { name: 'Nicaragua', code: 'NI' }, - { name: 'Niger', code: 'NE' }, - { name: 'Nigeria', code: 'NG' }, - { name: 'Niue', code: 'NU' }, - { name: 'Norfolk Island', code: 'NF' }, - { name: 'Northern Mariana Islands', code: 'MP' }, - { name: 'Norway', code: 'NO' }, - { name: 'Oman', code: 'OM' }, - { name: 'Pakistan', code: 'PK' }, - { name: 'Palau', code: 'PW' }, - { name: 'Palestinian Territory, Occupied', code: 'PS' }, - { name: 'Panama', code: 'PA' }, - { name: 'Papua New Guinea', code: 'PG' }, - { name: 'Paraguay', code: 'PY' }, - { name: 'Peru', code: 'PE' }, - { name: 'Philippines', code: 'PH' }, - { name: 'Pitcairn', code: 'PN' }, - { name: 'Poland', code: 'PL' }, - { name: 'Portugal', code: 'PT' }, - { name: 'Puerto Rico', code: 'PR' }, - { name: 'Qatar', code: 'QA' }, - { name: 'Reunion', code: 'RE' }, - { name: 'Romania', code: 'RO' }, - { name: 'Russian Federation', code: 'RU' }, - { name: 'RWANDA', code: 'RW' }, - { name: 'Saint Helena', code: 'SH' }, - { name: 'Saint Kitts and Nevis', code: 'KN' }, - { name: 'Saint Lucia', code: 'LC' }, - { name: 'Saint Pierre and Miquelon', code: 'PM' }, - { name: 'Saint Vincent and the Grenadines', code: 'VC' }, - { name: 'Samoa', code: 'WS' }, - { name: 'San Marino', code: 'SM' }, - { name: 'Sao Tome and Principe', code: 'ST' }, - { name: 'Saudi Arabia', code: 'SA' }, - { name: 'Senegal', code: 'SN' }, - { name: 'Serbia and Montenegro', code: 'CS' }, - { name: 'Seychelles', code: 'SC' }, - { name: 'Sierra Leone', code: 'SL' }, - { name: 'Singapore', code: 'SG' }, - { name: 'Slovakia', code: 'SK' }, - { name: 'Slovenia', code: 'SI' }, - { name: 'Solomon Islands', code: 'SB' }, - { name: 'Somalia', code: 'SO' }, - { name: 'South Africa', code: 'ZA' }, - { name: 'South Georgia and the South Sandwich Islands', code: 'GS' }, - { name: 'Spain', code: 'ES' }, - { name: 'Sri Lanka', code: 'LK' }, - { name: 'Sudan', code: 'SD' }, - { name: 'Suriname', code: 'SR' }, - { name: 'Svalbard and Jan Mayen', code: 'SJ' }, - { name: 'Swaziland', code: 'SZ' }, - { name: 'Sweden', code: 'SE' }, - { name: 'Switzerland', code: 'CH' }, - { name: 'Syrian Arab Republic', code: 'SY' }, - { name: 'Taiwan, Province of China', code: 'TW' }, - { name: 'Tajikistan', code: 'TJ' }, - { name: 'Tanzania, United Republic of', code: 'TZ' }, - { name: 'Thailand', code: 'TH' }, - { name: 'Timor-Leste', code: 'TL' }, - { name: 'Togo', code: 'TG' }, - { name: 'Tokelau', code: 'TK' }, - { name: 'Tonga', code: 'TO' }, - { name: 'Trinidad and Tobago', code: 'TT' }, - { name: 'Tunisia', code: 'TN' }, - { name: 'Turkey', code: 'TR' }, - { name: 'Turkmenistan', code: 'TM' }, - { name: 'Turks and Caicos Islands', code: 'TC' }, - { name: 'Tuvalu', code: 'TV' }, - { name: 'Uganda', code: 'UG' }, - { name: 'Ukraine', code: 'UA' }, - { name: 'United Arab Emirates', code: 'AE' }, - { name: 'United Kingdom', code: 'GB' }, - { name: 'United States Minor Outlying Islands', code: 'UM' }, - { name: 'Uruguay', code: 'UY' }, - { name: 'Uzbekistan', code: 'UZ' }, - { name: 'Vanuatu', code: 'VU' }, - { name: 'Venezuela', code: 'VE' }, - { name: 'Viet Nam', code: 'VN' }, - { name: 'Virgin Islands, British', code: 'VG' }, - { name: 'Virgin Islands, U.S.', code: 'VI' }, - { name: 'Wallis and Futuna', code: 'WF' }, - { name: 'Western Sahara', code: 'EH' }, - { name: 'Yemen', code: 'YE' }, - { name: 'Zambia', code: 'ZM' }, - { name: 'Zimbabwe', code: 'ZW' } + { text: 'United States', id: 'US' }, + { text: 'Mexico', id: 'MX' }, + { text: 'Afghanistan', id: 'AF' }, + { text: 'Aland Islands', id: 'AX' }, + { text: 'Albania', id: 'AL' }, + { text: 'Algeria', id: 'DZ' }, + { text: 'American Samoa', id: 'AS' }, + { text: 'Andorra', id: 'AD' }, + { text: 'Angola', id: 'AO' }, + { text: 'Anguilla', id: 'AI' }, + { text: 'Antarctica', id: 'AQ' }, + { text: 'Antigua and Barbuda', id: 'AG' }, + { text: 'Argentina', id: 'AR' }, + { text: 'Armenia', id: 'AM' }, + { text: 'Aruba', id: 'AW' }, + { text: 'Australia', id: 'AU' }, + { text: 'Austria', id: 'AT' }, + { text: 'Azerbaijan', id: 'AZ' }, + { text: 'Bahamas', id: 'BS' }, + { text: 'Bahrain', id: 'BH' }, + { text: 'Bangladesh', id: 'BD' }, + { text: 'Barbados', id: 'BB' }, + { text: 'Belarus', id: 'BY' }, + { text: 'Belgium', id: 'BE' }, + { text: 'Belize', id: 'BZ' }, + { text: 'Benin', id: 'BJ' }, + { text: 'Bermuda', id: 'BM' }, + { text: 'Bhutan', id: 'BT' }, + { text: 'Bolivia', id: 'BO' }, + { text: 'Bosnia and Herzegovina', id: 'BA' }, + { text: 'Botswana', id: 'BW' }, + { text: 'Bouvet Island', id: 'BV' }, + { text: 'Brazil', id: 'BR' }, + { text: 'British Indian Ocean Territory', id: 'IO' }, + { text: 'Brunei Darussalam', id: 'BN' }, + { text: 'Bulgaria', id: 'BG' }, + { text: 'Burkina Faso', id: 'BF' }, + { text: 'Burundi', id: 'BI' }, + { text: 'Cambodia', id: 'KH' }, + { text: 'Cameroon', id: 'CM' }, + { text: 'Canada', id: 'CA' }, + { text: 'Cape Verde', id: 'CV' }, + { text: 'Cayman Islands', id: 'KY' }, + { text: 'Central African Republic', id: 'CF' }, + { text: 'Chad', id: 'TD' }, + { text: 'Chile', id: 'CL' }, + { text: 'China', id: 'CN' }, + { text: 'Christmas Island', id: 'CX' }, + { text: 'Cocos (Keeling) Islands', id: 'CC' }, + { text: 'Colombia', id: 'CO' }, + { text: 'Comoros', id: 'KM' }, + { text: 'Congo', id: 'CG' }, + { text: 'Congo, The Democratic Republic of the', id: 'CD' }, + { text: 'Cook Islands', id: 'CK' }, + { text: 'Costa Rica', id: 'CR' }, + { text: "Cote D'Ivoire", id: 'CI' }, + { text: 'Croatia', id: 'HR' }, + { text: 'Cuba', id: 'CU' }, + { text: 'Cyprus', id: 'CY' }, + { text: 'Czech Republic', id: 'CZ' }, + { text: 'Denmark', id: 'DK' }, + { text: 'Djibouti', id: 'DJ' }, + { text: 'Dominica', id: 'DM' }, + { text: 'Dominican Republic', id: 'DO' }, + { text: 'Ecuador', id: 'EC' }, + { text: 'Egypt', id: 'EG' }, + { text: 'El Salvador', id: 'SV' }, + { text: 'Equatorial Guinea', id: 'GQ' }, + { text: 'Eritrea', id: 'ER' }, + { text: 'Estonia', id: 'EE' }, + { text: 'Ethiopia', id: 'ET' }, + { text: 'Falkland Islands (Malvinas)', id: 'FK' }, + { text: 'Faroe Islands', id: 'FO' }, + { text: 'Fiji', id: 'FJ' }, + { text: 'Finland', id: 'FI' }, + { text: 'France', id: 'FR' }, + { text: 'French Guiana', id: 'GF' }, + { text: 'French Polynesia', id: 'PF' }, + { text: 'French Southern Territories', id: 'TF' }, + { text: 'Gabon', id: 'GA' }, + { text: 'Gambia', id: 'GM' }, + { text: 'Georgia', id: 'GE' }, + { text: 'Germany', id: 'DE' }, + { text: 'Ghana', id: 'GH' }, + { text: 'Gibraltar', id: 'GI' }, + { text: 'Greece', id: 'GR' }, + { text: 'Greenland', id: 'GL' }, + { text: 'Grenada', id: 'GD' }, + { text: 'Guadeloupe', id: 'GP' }, + { text: 'Guam', id: 'GU' }, + { text: 'Guatemala', id: 'GT' }, + { text: 'Guernsey', id: 'GG' }, + { text: 'Guinea', id: 'GN' }, + { text: 'Guinea-Bissau', id: 'GW' }, + { text: 'Guyana', id: 'GY' }, + { text: 'Haiti', id: 'HT' }, + { text: 'Heard Island and Mcdonald Islands', id: 'HM' }, + { text: 'Holy See (Vatican City State)', id: 'VA' }, + { text: 'Honduras', id: 'HN' }, + { text: 'Hong Kong', id: 'HK' }, + { text: 'Hungary', id: 'HU' }, + { text: 'Iceland', id: 'IS' }, + { text: 'India', id: 'IN' }, + { text: 'Indonesia', id: 'ID' }, + { text: 'Iran, Islamic Republic Of', id: 'IR' }, + { text: 'Iraq', id: 'IQ' }, + { text: 'Ireland', id: 'IE' }, + { text: 'Isle of Man', id: 'IM' }, + { text: 'Israel', id: 'IL' }, + { text: 'Italy', id: 'IT' }, + { text: 'Jamaica', id: 'JM' }, + { text: 'Japan', id: 'JP' }, + { text: 'Jersey', id: 'JE' }, + { text: 'Jordan', id: 'JO' }, + { text: 'Kazakhstan', id: 'KZ' }, + { text: 'Kenya', id: 'KE' }, + { text: 'Kiribati', id: 'KI' }, + { text: "Korea, Democratic People'S Republic of", id: 'KP' }, + { text: 'Korea, Republic of', id: 'KR' }, + { text: 'Kuwait', id: 'KW' }, + { text: 'Kyrgyzstan', id: 'KG' }, + { text: "Lao People'S Democratic Republic", id: 'LA' }, + { text: 'Latvia', id: 'LV' }, + { text: 'Lebanon', id: 'LB' }, + { text: 'Lesotho', id: 'LS' }, + { text: 'Liberia', id: 'LR' }, + { text: 'Libyan Arab Jamahiriya', id: 'LY' }, + { text: 'Liechtenstein', id: 'LI' }, + { text: 'Lithuania', id: 'LT' }, + { text: 'Luxembourg', id: 'LU' }, + { text: 'Macao', id: 'MO' }, + { text: 'Macedonia, The Former Yugoslav Republic of', id: 'MK' }, + { text: 'Madagascar', id: 'MG' }, + { text: 'Malawi', id: 'MW' }, + { text: 'Malaysia', id: 'MY' }, + { text: 'Maldives', id: 'MV' }, + { text: 'Mali', id: 'ML' }, + { text: 'Malta', id: 'MT' }, + { text: 'Marshall Islands', id: 'MH' }, + { text: 'Martinique', id: 'MQ' }, + { text: 'Mauritania', id: 'MR' }, + { text: 'Mauritius', id: 'MU' }, + { text: 'Mayotte', id: 'YT' }, + { text: 'Micronesia, Federated States of', id: 'FM' }, + { text: 'Moldova, Republic of', id: 'MD' }, + { text: 'Monaco', id: 'MC' }, + { text: 'Mongolia', id: 'MN' }, + { text: 'Montserrat', id: 'MS' }, + { text: 'Morocco', id: 'MA' }, + { text: 'Mozambique', id: 'MZ' }, + { text: 'Myanmar', id: 'MM' }, + { text: 'Namibia', id: 'NA' }, + { text: 'Nauru', id: 'NR' }, + { text: 'Nepal', id: 'NP' }, + { text: 'Netherlands', id: 'NL' }, + { text: 'Netherlands Antilles', id: 'AN' }, + { text: 'New Caledonia', id: 'NC' }, + { text: 'New Zealand', id: 'NZ' }, + { text: 'Nicaragua', id: 'NI' }, + { text: 'Niger', id: 'NE' }, + { text: 'Nigeria', id: 'NG' }, + { text: 'Niue', id: 'NU' }, + { text: 'Norfolk Island', id: 'NF' }, + { text: 'Northern Mariana Islands', id: 'MP' }, + { text: 'Norway', id: 'NO' }, + { text: 'Oman', id: 'OM' }, + { text: 'Pakistan', id: 'PK' }, + { text: 'Palau', id: 'PW' }, + { text: 'Palestinian Territory, Occupied', id: 'PS' }, + { text: 'Panama', id: 'PA' }, + { text: 'Papua New Guinea', id: 'PG' }, + { text: 'Paraguay', id: 'PY' }, + { text: 'Peru', id: 'PE' }, + { text: 'Philippines', id: 'PH' }, + { text: 'Pitcairn', id: 'PN' }, + { text: 'Poland', id: 'PL' }, + { text: 'Portugal', id: 'PT' }, + { text: 'Puerto Rico', id: 'PR' }, + { text: 'Qatar', id: 'QA' }, + { text: 'Reunion', id: 'RE' }, + { text: 'Romania', id: 'RO' }, + { text: 'Russian Federation', id: 'RU' }, + { text: 'RWANDA', id: 'RW' }, + { text: 'Saint Helena', id: 'SH' }, + { text: 'Saint Kitts and Nevis', id: 'KN' }, + { text: 'Saint Lucia', id: 'LC' }, + { text: 'Saint Pierre and Miquelon', id: 'PM' }, + { text: 'Saint Vincent and the Grenadines', id: 'VC' }, + { text: 'Samoa', id: 'WS' }, + { text: 'San Marino', id: 'SM' }, + { text: 'Sao Tome and Principe', id: 'ST' }, + { text: 'Saudi Arabia', id: 'SA' }, + { text: 'Senegal', id: 'SN' }, + { text: 'Serbia and Montenegro', id: 'CS' }, + { text: 'Seychelles', id: 'SC' }, + { text: 'Sierra Leone', id: 'SL' }, + { text: 'Singapore', id: 'SG' }, + { text: 'Slovakia', id: 'SK' }, + { text: 'Slovenia', id: 'SI' }, + { text: 'Solomon Islands', id: 'SB' }, + { text: 'Somalia', id: 'SO' }, + { text: 'South Africa', id: 'ZA' }, + { text: 'South Georgia and the South Sandwich Islands', id: 'GS' }, + { text: 'Spain', id: 'ES' }, + { text: 'Sri Lanka', id: 'LK' }, + { text: 'Sudan', id: 'SD' }, + { text: 'Suriname', id: 'SR' }, + { text: 'Svalbard and Jan Mayen', id: 'SJ' }, + { text: 'Swaziland', id: 'SZ' }, + { text: 'Sweden', id: 'SE' }, + { text: 'Switzerland', id: 'CH' }, + { text: 'Syrian Arab Republic', id: 'SY' }, + { text: 'Taiwan, Province of China', id: 'TW' }, + { text: 'Tajikistan', id: 'TJ' }, + { text: 'Tanzania, United Republic of', id: 'TZ' }, + { text: 'Thailand', id: 'TH' }, + { text: 'Timor-Leste', id: 'TL' }, + { text: 'Togo', id: 'TG' }, + { text: 'Tokelau', id: 'TK' }, + { text: 'Tonga', id: 'TO' }, + { text: 'Trinidad and Tobago', id: 'TT' }, + { text: 'Tunisia', id: 'TN' }, + { text: 'Turkey', id: 'TR' }, + { text: 'Turkmenistan', id: 'TM' }, + { text: 'Turks and Caicos Islands', id: 'TC' }, + { text: 'Tuvalu', id: 'TV' }, + { text: 'Uganda', id: 'UG' }, + { text: 'Ukraine', id: 'UA' }, + { text: 'United Arab Emirates', id: 'AE' }, + { text: 'United Kingdom', id: 'GB' }, + { text: 'United States Minor Outlying Islands', id: 'UM' }, + { text: 'Uruguay', id: 'UY' }, + { text: 'Uzbekistan', id: 'UZ' }, + { text: 'Vanuatu', id: 'VU' }, + { text: 'Venezuela', id: 'VE' }, + { text: 'Viet Nam', id: 'VN' }, + { text: 'Virgin Islands, British', id: 'VG' }, + { text: 'Virgin Islands, U.S.', id: 'VI' }, + { text: 'Wallis and Futuna', id: 'WF' }, + { text: 'Western Sahara', id: 'EH' }, + { text: 'Yemen', id: 'YE' }, + { text: 'Zambia', id: 'ZM' }, + { text: 'Zimbabwe', id: 'ZW' } ]; diff --git a/control/test/multi-select.unit.test.tsx b/control/test/multi-select.unit.test.tsx index 03b65352..b3452133 100644 --- a/control/test/multi-select.unit.test.tsx +++ b/control/test/multi-select.unit.test.tsx @@ -9,13 +9,11 @@ describe('MultiSelect', () => { it('renders with empty values', () => { const tree = shallow( { + onChange={values => { /* noop */ }} /> @@ -26,13 +24,11 @@ describe('MultiSelect', () => { it('renders with values', () => { const tree = shallow( { + onChange={values => { /* noop */ }} /> diff --git a/control/test/preact-util.ts b/control/test/preact-util.ts index 514090c2..f63f5224 100644 --- a/control/test/preact-util.ts +++ b/control/test/preact-util.ts @@ -18,7 +18,7 @@ export const query: QueryFunction = (search, page, token) => const limit = 10; const offset = page * limit; for (const country of countries) { - if (country.name.toLowerCase().indexOf(search.toLowerCase()) >= 0) { + if (country.text.toLowerCase().indexOf(search.toLowerCase()) >= 0) { if (count >= offset) { results.push(country); } diff --git a/dev/index.html b/dev/index.html index 07b1ef7e..8422293c 100644 --- a/dev/index.html +++ b/dev/index.html @@ -57,6 +57,11 @@