From 176fd9676dcf87dfa68204ee062098b123690882 Mon Sep 17 00:00:00 2001
From: Misha Moroshko <michael.moroshko@gmail.com>
Date: Tue, 25 Oct 2016 13:42:22 +1100
Subject: [PATCH] Started to work on Playground
---
demo/src/components/App/App.js | 4 +-
.../components/CustomRender/CustomRender.js | 7 +-
.../App/components/Playground/Playground.js | 124 ++
.../App/components/Playground/Playground.less | 63 ++
.../App/components/Playground/countries.js | 1002 +++++++++++++++++
.../App/components/Playground/theme.less | 79 ++
package.json | 4 +-
test/plain-list/AutosuggestApp.js | 7 +-
8 files changed, 1281 insertions(+), 9 deletions(-)
create mode 100644 demo/src/components/App/components/Playground/Playground.js
create mode 100644 demo/src/components/App/components/Playground/Playground.less
create mode 100644 demo/src/components/App/components/Playground/countries.js
create mode 100644 demo/src/components/App/components/Playground/theme.less
diff --git a/demo/src/components/App/App.js b/demo/src/components/App/App.js
index 72b3a082..f0d85603 100644
--- a/demo/src/components/App/App.js
+++ b/demo/src/components/App/App.js
@@ -3,7 +3,7 @@ import styles from './App.less';
import React from 'react';
import Header from 'Header/Header';
import Features from 'Features/Features';
-import Examples from 'Examples/Examples';
+import Playground from 'Playground/Playground';
import Footer from 'Footer/Footer';
export default function App() {
@@ -11,7 +11,7 @@ export default function App() {
<div className={styles.container}>
<Header />
<Features />
- <Examples />
+ <Playground />
<Footer />
</div>
);
diff --git a/demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js b/demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js
index be91b5ce..35259ca3 100644
--- a/demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js
+++ b/demo/src/components/App/components/Examples/components/CustomRender/CustomRender.js
@@ -3,7 +3,8 @@ import theme from './theme.less';
import React, { Component } from 'react';
import isMobile from 'ismobilejs';
-import highlight from 'autosuggest-highlight';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
import Link from 'Link/Link';
import Autosuggest from 'AutosuggestContainer';
import people from './people';
@@ -29,8 +30,8 @@ function getSuggestionValue(suggestion) {
function renderSuggestion(suggestion, { query }) {
const suggestionText = `${suggestion.first} ${suggestion.last}`;
- const matches = highlight.match(suggestionText, query);
- const parts = highlight.parse(suggestionText, matches);
+ const matches = match(suggestionText, query);
+ const parts = parse(suggestionText, matches);
return (
<span className={theme.suggestionContent + ' ' + theme[suggestion.twitter]}>
diff --git a/demo/src/components/App/components/Playground/Playground.js b/demo/src/components/App/components/Playground/Playground.js
new file mode 100644
index 00000000..5a28f343
--- /dev/null
+++ b/demo/src/components/App/components/Playground/Playground.js
@@ -0,0 +1,124 @@
+import styles from './Playground.less';
+import theme from './theme.less';
+
+import React, { Component } from 'react';
+import Autosuggest from 'AutosuggestContainer';
+import IsolatedScroll from 'react-isolated-scroll';
+import createTrie from 'autosuggest-trie';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import countries from './countries';
+
+const trie = createTrie(countries, 'name', {
+ comparator: (countryA, countryB) =>
+ countryA.population > countryB.population ? -1 : 1
+});
+
+const getSuggestions = value => trie.getMatches(value.trim());
+
+const getSuggestionValue = suggestion => suggestion.name;
+
+// TODO:
+// - match diacritics (e.g. Réunion)
+// - match 'Saint-Martin'
+
+const renderSuggestionsContainer = ({ ref, ...rest }) => { // eslint-disable-line react/prop-types
+ const callRef = isolatedScroll => {
+ if (isolatedScroll !== null) {
+ ref(isolatedScroll.component);
+ }
+ };
+
+ return (
+ <IsolatedScroll {...rest} ref={callRef} />
+ );
+};
+
+const renderSuggestion = (suggestion, { query }) => {
+ const matches = match(suggestion.name, query);
+ const parts = parse(suggestion.name, matches);
+
+ return (
+ <div>
+ <div>
+ {
+ parts.map((part, index) => (
+ <span
+ className={part.highlight ? styles.highlightedText : null}
+ key={index}>
+ {part.text}
+ </span>
+ ))
+ }
+ </div>
+ <div className={styles.population}>
+ Population: {suggestion.population}
+ </div>
+ </div>
+ );
+};
+
+export default class Playground extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ value: '',
+ suggestions: []
+ };
+ }
+
+ onChange = (event, { newValue }) => {
+ this.setState({
+ value: newValue
+ });
+ };
+
+ onSuggestionsFetchRequested = ({ value }) => {
+ this.setState({
+ suggestions: getSuggestions(value)
+ });
+ };
+
+ onSuggestionsClearRequested = () => {
+ this.setState({
+ suggestions: []
+ });
+ };
+
+ render() {
+ const { value, suggestions } = this.state;
+ const inputProps = {
+ placeholder: 'Search countries...',
+ value,
+ onChange: this.onChange
+ };
+
+ return (
+ <div className={styles.container}>
+ <h2 className={styles.header}>
+ Playground
+ </h2>
+ <div className={styles.content}>
+ <div className={styles.togglesContainer}>
+ Toggles go here...
+ </div>
+ <div className={styles.autosuggestContainer}>
+ <Autosuggest
+ multiSection={false}
+ suggestions={suggestions}
+ onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+ onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+ getSuggestionValue={getSuggestionValue}
+ renderSuggestion={renderSuggestion}
+ inputProps={inputProps}
+ focusInputOnSuggestionClick={false}
+ renderSuggestionsContainer={renderSuggestionsContainer}
+ theme={theme}
+ id="playground" />
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/demo/src/components/App/components/Playground/Playground.less b/demo/src/components/App/components/Playground/Playground.less
new file mode 100644
index 00000000..56edc4d1
--- /dev/null
+++ b/demo/src/components/App/components/Playground/Playground.less
@@ -0,0 +1,63 @@
+@import '~variables';
+
+@vertical: ~"(max-width: 719px)";
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: (11 * @rows) 0;
+ color: #212121;
+
+ @media @small {
+ padding: (7 * @rows) 0;
+ }
+}
+
+.header {
+ margin: 0;
+ font-size: 50px;
+ font-weight: 300;
+
+ @media @small {
+ font-size: 34px;
+ }
+}
+
+.content {
+ display: flex;
+ justify-content: space-between;
+ width: 34 * @columns;
+ margin: (11 * @rows) (0.5 * @column) 0;
+
+ @media @vertical {
+ flex-direction: column;
+ width: 14 * @columns;
+ margin-top: 9 * @rows;
+ }
+
+ @media @small {
+ margin-top: 7 * @rows;
+ }
+}
+
+.togglesContainer {
+ display: flex;
+ flex-direction: column;
+ width: 15 * @columns;
+}
+
+.autosuggestContainer {
+ @media @vertical {
+ margin-left: 0;
+ }
+}
+
+.highlightedText {
+ color: red;
+ font-weight: 400;
+}
+
+.population {
+ font-size: 12px;
+}
diff --git a/demo/src/components/App/components/Playground/countries.js b/demo/src/components/App/components/Playground/countries.js
new file mode 100644
index 00000000..c6fa04dd
--- /dev/null
+++ b/demo/src/components/App/components/Playground/countries.js
@@ -0,0 +1,1002 @@
+export default [
+ {
+ name: 'China',
+ population: 1378980000
+ },
+ {
+ name: 'India',
+ population: 1330780000
+ },
+ {
+ name: 'United States',
+ population: 324578000
+ },
+ {
+ name: 'Indonesia',
+ population: 260581000
+ },
+ {
+ name: 'Brazil',
+ population: 206716000
+ },
+ {
+ name: 'Pakistan',
+ population: 194370000
+ },
+ {
+ name: 'Nigeria',
+ population: 186988000
+ },
+ {
+ name: 'Bangladesh',
+ population: 161154000
+ },
+ {
+ name: 'Russia',
+ population: 146654366
+ },
+ {
+ name: 'Mexico',
+ population: 128632000
+ },
+ {
+ name: 'Japan',
+ population: 127110047
+ },
+ {
+ name: 'Philippines',
+ population: 103075000
+ },
+ {
+ name: 'Vietnam',
+ population: 92700000
+ },
+ {
+ name: 'Ethiopia',
+ population: 92206005
+ },
+ {
+ name: 'Egypt',
+ population: 91657200
+ },
+ {
+ name: 'Democratic Republic of the Congo',
+ population: 82310000
+ },
+ {
+ name: 'Germany',
+ population: 82175700
+ },
+ {
+ name: 'Iran',
+ population: 79566200
+ },
+ {
+ name: 'Turkey',
+ population: 78742000
+ },
+ {
+ name: 'Thailand',
+ population: 67959000
+ },
+ {
+ name: 'France',
+ population: 66763000
+ },
+ {
+ name: 'United Kingdom',
+ population: 65110000
+ },
+ {
+ name: 'Italy',
+ population: 60665551
+ },
+ {
+ name: 'South Africa',
+ population: 55653654
+ },
+ {
+ name: 'Tanzania',
+ population: 55155000
+ },
+ {
+ name: 'Myanmar',
+ population: 54363426
+ },
+ {
+ name: 'South Korea',
+ population: 50801405
+ },
+ {
+ name: 'Colombia',
+ population: 48855000
+ },
+ {
+ name: 'Kenya',
+ population: 47251000
+ },
+ {
+ name: 'Spain',
+ population: 46438422
+ },
+ {
+ name: 'Argentina',
+ population: 43590400
+ },
+ {
+ name: 'Ukraine',
+ population: 42650186
+ },
+ {
+ name: 'Sudan',
+ population: 41176000
+ },
+ {
+ name: 'Algeria',
+ population: 40400000
+ },
+ {
+ name: 'Poland',
+ population: 38437239
+ },
+ {
+ name: 'Iraq',
+ population: 37883543
+ },
+ {
+ name: 'Uganda',
+ population: 36861000
+ },
+ {
+ name: 'Canada',
+ population: 36541700
+ },
+ {
+ name: 'Morocco',
+ population: 34093800
+ },
+ {
+ name: 'Malaysia',
+ population: 31773200
+ },
+ {
+ name: 'Uzbekistan',
+ population: 31575300
+ },
+ {
+ name: 'Peru',
+ population: 31488700
+ },
+ {
+ name: 'Venezuela',
+ population: 31028700
+ },
+ {
+ name: 'Saudi Arabia',
+ population: 31015999
+ },
+ {
+ name: 'Nepal',
+ population: 28431500
+ },
+ {
+ name: 'Ghana',
+ population: 27670174
+ },
+ {
+ name: 'Afghanistan',
+ population: 27657145
+ },
+ {
+ name: 'Yemen',
+ population: 27478000
+ },
+ {
+ name: 'Mozambique',
+ population: 26423700
+ },
+ {
+ name: 'Angola',
+ population: 25789024
+ },
+ {
+ name: 'North Korea',
+ population: 24213510
+ },
+ {
+ name: 'Australia',
+ population: 24200400
+ },
+ {
+ name: 'Taiwan',
+ population: 23514750
+ },
+ {
+ name: 'Cameroon',
+ population: 22709892
+ },
+ {
+ name: 'Ivory Coast',
+ population: 22671331
+ },
+ {
+ name: 'Madagascar',
+ population: 22434363
+ },
+ {
+ name: 'Sri Lanka',
+ population: 20966000
+ },
+ {
+ name: 'Niger',
+ population: 20715000
+ },
+ {
+ name: 'Romania',
+ population: 19760000
+ },
+ {
+ name: 'Burkina Faso',
+ population: 19034397
+ },
+ {
+ name: 'Syria',
+ population: 18564000
+ },
+ {
+ name: 'Mali',
+ population: 18341000
+ },
+ {
+ name: 'Chile',
+ population: 18191900
+ },
+ {
+ name: 'Kazakhstan',
+ population: 17753200
+ },
+ {
+ name: 'Netherlands',
+ population: 17051900
+ },
+ {
+ name: 'Malawi',
+ population: 16832910
+ },
+ {
+ name: 'Ecuador',
+ population: 16626279
+ },
+ {
+ name: 'Guatemala',
+ population: 16176133
+ },
+ {
+ name: 'Zambia',
+ population: 15933883
+ },
+ {
+ name: 'Cambodia',
+ population: 15626444
+ },
+ {
+ name: 'Senegal',
+ population: 14799859
+ },
+ {
+ name: 'Chad',
+ population: 14497000
+ },
+ {
+ name: 'Zimbabwe',
+ population: 14240168
+ },
+ {
+ name: 'Guinea',
+ population: 12947000
+ },
+ {
+ name: 'South Sudan',
+ population: 12131000
+ },
+ {
+ name: 'Rwanda',
+ population: 11553188
+ },
+ {
+ name: 'Belgium',
+ population: 11327986
+ },
+ {
+ name: 'Cuba',
+ population: 11239004
+ },
+ {
+ name: 'Tunisia',
+ population: 11154400
+ },
+ {
+ name: 'Somalia',
+ population: 11079000
+ },
+ {
+ name: 'Haiti',
+ population: 11078033
+ },
+ {
+ name: 'Bolivia',
+ population: 10985059
+ },
+ {
+ name: 'Greece',
+ population: 10858018
+ },
+ {
+ name: 'Benin',
+ population: 10653654
+ },
+ {
+ name: 'Czech Republic',
+ population: 10564866
+ },
+ {
+ name: 'Portugal',
+ population: 10341330
+ },
+ {
+ name: 'Burundi',
+ population: 10114505
+ },
+ {
+ name: 'Dominican Republic',
+ population: 10075045
+ },
+ {
+ name: 'Sweden',
+ population: 9920881
+ },
+ {
+ name: 'United Arab Emirates',
+ population: 9856000
+ },
+ {
+ name: 'Hungary',
+ population: 9823000
+ },
+ {
+ name: 'Azerbaijan',
+ population: 9755500
+ },
+ {
+ name: 'Jordan',
+ population: 9729610
+ },
+ {
+ name: 'Belarus',
+ population: 9500000
+ },
+ {
+ name: 'Austria',
+ population: 8741753
+ },
+ {
+ name: 'Honduras',
+ population: 8721014
+ },
+ {
+ name: 'Israel',
+ population: 8588060
+ },
+ {
+ name: 'Tajikistan',
+ population: 8551000
+ },
+ {
+ name: 'Switzerland',
+ population: 8341600
+ },
+ {
+ name: 'Papua New Guinea',
+ population: 8083700
+ },
+ {
+ name: 'Hong Kong (China)',
+ population: 7346700
+ },
+ {
+ name: 'Bulgaria',
+ population: 7153784
+ },
+ {
+ name: 'Togo',
+ population: 7143000
+ },
+ {
+ name: 'Serbia',
+ population: 7076372
+ },
+ {
+ name: 'Sierra Leone',
+ population: 7075641
+ },
+ {
+ name: 'Paraguay',
+ population: 6854536
+ },
+ {
+ name: 'El Salvador',
+ population: 6520675
+ },
+ {
+ name: 'Laos',
+ population: 6492400
+ },
+ {
+ name: 'Libya',
+ population: 6385000
+ },
+ {
+ name: 'Nicaragua',
+ population: 6262703
+ },
+ {
+ name: 'Kyrgyzstan',
+ population: 6088000
+ },
+ {
+ name: 'Lebanon',
+ population: 5988000
+ },
+ {
+ name: 'Denmark',
+ population: 5724456
+ },
+ {
+ name: 'Singapore',
+ population: 5535000
+ },
+ {
+ name: 'Finland',
+ population: 5498450
+ },
+ {
+ name: 'Slovakia',
+ population: 5426252
+ },
+ {
+ name: 'Eritrea',
+ population: 5352000
+ },
+ {
+ name: 'Norway',
+ population: 5236826
+ },
+ {
+ name: 'Central African Republic',
+ population: 4998000
+ },
+ {
+ name: 'Costa Rica',
+ population: 4890379
+ },
+ {
+ name: 'Palestine',
+ population: 4816503
+ },
+ {
+ name: 'Ireland',
+ population: 4757976
+ },
+ {
+ name: 'Turkmenistan',
+ population: 4751120
+ },
+ {
+ name: 'Republic of the Congo',
+ population: 4741000
+ },
+ {
+ name: 'New Zealand',
+ population: 4718460
+ },
+ {
+ name: 'Oman',
+ population: 4496760
+ },
+ {
+ name: 'Puntland (Somalia)',
+ population: 4284633
+ },
+ {
+ name: 'Croatia',
+ population: 4190669
+ },
+ {
+ name: 'Kuwait',
+ population: 4183658
+ },
+ {
+ name: 'Liberia',
+ population: 4076530
+ },
+ {
+ name: 'Somaliland (Somalia)',
+ population: 3850000
+ },
+ {
+ name: 'Panama',
+ population: 3814672
+ },
+ {
+ name: 'Georgia',
+ population: 3720400
+ },
+ {
+ name: 'Mauritania',
+ population: 3718678
+ },
+ {
+ name: 'Moldova',
+ population: 3553100
+ },
+ {
+ name: 'Bosnia and Herzegovina',
+ population: 3531159
+ },
+ {
+ name: 'Uruguay',
+ population: 3480222
+ },
+ {
+ name: 'Puerto Rico (U.S.)',
+ population: 3474182
+ },
+ {
+ name: 'Mongolia',
+ population: 3107100
+ },
+ {
+ name: 'Armenia',
+ population: 2995100
+ },
+ {
+ name: 'Albania',
+ population: 2886026
+ },
+ {
+ name: 'Lithuania',
+ population: 2862786
+ },
+ {
+ name: 'Jamaica',
+ population: 2723246
+ },
+ {
+ name: 'Qatar',
+ population: 2401598
+ },
+ {
+ name: 'Namibia',
+ population: 2324388
+ },
+ {
+ name: 'Botswana',
+ population: 2230905
+ },
+ {
+ name: 'Macedonia',
+ population: 2071278
+ },
+ {
+ name: 'Slovenia',
+ population: 2063371
+ },
+ {
+ name: 'Latvia',
+ population: 1957600
+ },
+ {
+ name: 'Lesotho',
+ population: 1916000
+ },
+ {
+ name: 'The Gambia',
+ population: 1882450
+ },
+ {
+ name: 'Kosovo',
+ population: 1836978
+ },
+ {
+ name: 'Gabon',
+ population: 1802278
+ },
+ {
+ name: 'Guinea-Bissau',
+ population: 1547777
+ },
+ {
+ name: 'Bahrain',
+ population: 1404900
+ },
+ {
+ name: 'Trinidad and Tobago',
+ population: 1349667
+ },
+ {
+ name: 'Estonia',
+ population: 1315944
+ },
+ {
+ name: 'Mauritius',
+ population: 1262879
+ },
+ {
+ name: 'Equatorial Guinea',
+ population: 1222442
+ },
+ {
+ name: 'East Timor',
+ population: 1167242
+ },
+ {
+ name: 'Swaziland',
+ population: 1132657
+ },
+ {
+ name: 'Djibouti',
+ population: 900000
+ },
+ {
+ name: 'Fiji',
+ population: 867000
+ },
+ {
+ name: 'Cyprus',
+ population: 847000
+ },
+ {
+ name: 'Réunion (France)',
+ population: 843529
+ },
+ {
+ name: 'Comoros',
+ population: 806153
+ },
+ {
+ name: 'Bhutan',
+ population: 778500
+ },
+ {
+ name: 'Guyana',
+ population: 746900
+ },
+ {
+ name: 'Macau (China)',
+ population: 652500
+ },
+ {
+ name: 'Solomon Islands',
+ population: 642000
+ },
+ {
+ name: 'Montenegro',
+ population: 621810
+ },
+ {
+ name: 'Western Sahara',
+ population: 584000
+ },
+ {
+ name: 'Luxembourg',
+ population: 576200
+ },
+ {
+ name: 'Suriname',
+ population: 541638
+ },
+ {
+ name: 'Cape Verde',
+ population: 531239
+ },
+ {
+ name: 'Transnistria',
+ population: 505153
+ },
+ {
+ name: 'Malta',
+ population: 429344
+ },
+ {
+ name: 'Brunei',
+ population: 411900
+ },
+ {
+ name: 'Guadeloupe (France)',
+ population: 400132
+ },
+ {
+ name: 'Martinique (France)',
+ population: 378243
+ },
+ {
+ name: 'Bahamas',
+ population: 378040
+ },
+ {
+ name: 'Belize',
+ population: 375909
+ },
+ {
+ name: 'Maldives',
+ population: 344023
+ },
+ {
+ name: 'Iceland',
+ population: 336060
+ },
+ {
+ name: 'Northern Cyprus',
+ population: 294396
+ },
+ {
+ name: 'Barbados',
+ population: 285000
+ },
+ {
+ name: 'Vanuatu',
+ population: 277500
+ },
+ {
+ name: 'French Polynesia (France)',
+ population: 271800
+ },
+ {
+ name: 'New Caledonia (France)',
+ population: 268767
+ },
+ {
+ name: 'French Guiana (France)',
+ population: 254541
+ },
+ {
+ name: 'Abkhazia',
+ population: 240705
+ },
+ {
+ name: 'Mayotte (France)',
+ population: 226915
+ },
+ {
+ name: 'Samoa',
+ population: 194899
+ },
+ {
+ name: 'São Tomé and Príncipe',
+ population: 187356
+ },
+ {
+ name: 'Saint Lucia',
+ population: 186000
+ },
+ {
+ name: 'Guam (U.S.)',
+ population: 184200
+ },
+ {
+ name: 'Curaçao (Netherlands)',
+ population: 158986
+ },
+ {
+ name: 'Nagorno-Karabakh Republic',
+ population: 150932
+ },
+ {
+ name: 'Kiribati',
+ population: 113400
+ },
+ {
+ name: 'Aruba (Netherlands)',
+ population: 110108
+ },
+ {
+ name: 'Saint Vincent and the Grenadines',
+ population: 109991
+ },
+ {
+ name: 'United States Virgin Islands (U.S.)',
+ population: 106000
+ },
+ {
+ name: 'Grenada',
+ population: 103328
+ },
+ {
+ name: 'Tonga',
+ population: 103252
+ },
+ {
+ name: 'Federated States of Micronesia',
+ population: 102800
+ },
+ {
+ name: 'Jersey (UK)',
+ population: 102700
+ },
+ {
+ name: 'Seychelles',
+ population: 93144
+ },
+ {
+ name: 'Antigua and Barbuda',
+ population: 86295
+ },
+ {
+ name: 'Isle of Man (UK)',
+ population: 84497
+ },
+ {
+ name: 'Andorra',
+ population: 78014
+ },
+ {
+ name: 'Dominica',
+ population: 71293
+ },
+ {
+ name: 'Guernsey (UK)',
+ population: 63001
+ },
+ {
+ name: 'Bermuda (UK)',
+ population: 61954
+ },
+ {
+ name: 'Cayman Islands (UK)',
+ population: 60413
+ },
+ {
+ name: 'American Samoa (U.S.)',
+ population: 57100
+ },
+ {
+ name: 'Northern Mariana Islands (U.S.)',
+ population: 56940
+ },
+ {
+ name: 'Greenland (Denmark)',
+ population: 56186
+ },
+ {
+ name: 'Marshall Islands',
+ population: 54880
+ },
+ {
+ name: 'South Ossetia',
+ population: 53559
+ },
+ {
+ name: 'Faroe Islands (Denmark)',
+ population: 49755
+ },
+ {
+ name: 'Saint Kitts and Nevis',
+ population: 46204
+ },
+ {
+ name: 'Monaco',
+ population: 38400
+ },
+ {
+ name: 'Sint Maarten (Netherlands)',
+ population: 38247
+ },
+ {
+ name: 'Liechtenstein',
+ population: 37623
+ },
+ {
+ name: 'Saint-Martin (France)',
+ population: 36457
+ },
+ {
+ name: 'Gibraltar (UK)',
+ population: 33140
+ },
+ {
+ name: 'San Marino',
+ population: 33005
+ },
+ {
+ name: 'Turks and Caicos Islands (UK)',
+ population: 31458
+ },
+ {
+ name: 'British Virgin Islands (UK)',
+ population: 28514
+ },
+ {
+ name: 'Bonaire (Netherlands)',
+ population: 18905
+ },
+ {
+ name: 'Cook Islands',
+ population: 18100
+ },
+ {
+ name: 'Palau',
+ population: 17950
+ },
+ {
+ name: 'Anguilla (UK)',
+ population: 13452
+ },
+ {
+ name: 'Wallis and Futuna (France)',
+ population: 11750
+ },
+ {
+ name: 'Tuvalu',
+ population: 10640
+ },
+ {
+ name: 'Nauru',
+ population: 10084
+ },
+ {
+ name: 'Saint Barthélemy (France)',
+ population: 9417
+ },
+ {
+ name: 'Saint Pierre and Miquelon (France)',
+ population: 6286
+ },
+ {
+ name: 'Montserrat (UK)',
+ population: 4922
+ },
+ {
+ name: 'Saint Helena, Ascension and Tristan da Cunha (UK)',
+ population: 4255
+ },
+ {
+ name: 'Sint Eustatius (Netherlands)',
+ population: 3877
+ },
+ {
+ name: 'Falkland Islands (UK)',
+ population: 2563
+ },
+ {
+ name: 'Norfolk Island (Australia)',
+ population: 2302
+ },
+ {
+ name: 'Christmas Island (Australia)',
+ population: 2072
+ },
+ {
+ name: 'Saba (Netherlands)',
+ population: 1811
+ },
+ {
+ name: 'Niue',
+ population: 1470
+ },
+ {
+ name: 'Tokelau (NZ)',
+ population: 1411
+ },
+ {
+ name: 'Vatican City',
+ population: 842
+ },
+ {
+ name: 'Cocos (Keeling) Islands (Australia)',
+ population: 550
+ },
+ {
+ name: 'Pitcairn Islands (UK)',
+ population: 56
+ }
+];
diff --git a/demo/src/components/App/components/Playground/theme.less b/demo/src/components/App/components/Playground/theme.less
new file mode 100644
index 00000000..a4188bec
--- /dev/null
+++ b/demo/src/components/App/components/Playground/theme.less
@@ -0,0 +1,79 @@
+@font-size: 16px;
+@border-color: #aaa;
+@border-radius: 4px;
+
+.container {
+ position: relative;
+}
+
+.input {
+ width: 240px;
+ height: 30px;
+ padding: 10px 20px;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 300;
+ font-size: @font-size;
+ border: 1px solid @border-color;
+ border-radius: @border-radius;
+ -webkit-appearance: none;
+
+ &:focus {
+ outline: none;
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+
+ .containerOpen & {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+}
+
+.suggestionsContainer {
+ display: none;
+
+ .containerOpen & {
+ display: block;
+ position: absolute;
+ top: 51px;
+ width: 280px;
+ border: 1px solid @border-color;
+ background-color: #fff;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 300;
+ font-size: @font-size;
+ border-bottom-left-radius: @border-radius;
+ border-bottom-right-radius: @border-radius;
+ max-height: 315px;
+ overflow-y: auto;
+ z-index: 2;
+ }
+}
+
+.suggestionsList {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.suggestion {
+ cursor: pointer;
+ padding: 10px 20px;
+}
+
+.suggestionFocused {
+ background-color: #ddd;
+}
+
+.sectionTitle {
+ padding: 10px 0 0 10px;
+ font-size: 12px;
+ color: #777;
+ border-top: 1px dashed #ccc;
+
+ .sectionContainer:first-child & {
+ border-top: 0;
+ }
+}
diff --git a/package.json b/package.json
index f443618a..9868d3b4 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
},
"devDependencies": {
"autoprefixer": "^6.3.6",
- "autosuggest-highlight": "^2.1.1",
+ "autosuggest-highlight": "^3.0.0",
+ "autosuggest-trie": "^2.0.0",
"babel-cli": "^6.7.7",
"babel-core": "^6.7.7",
"babel-eslint": "^6.0.3",
@@ -65,6 +66,7 @@
"react": "^15.3.1",
"react-addons-test-utils": "^15.3.1",
"react-dom": "^15.3.1",
+ "react-isolated-scroll": "^0.1.0",
"react-modal": "^1.4.0",
"react-transform-hmr": "^1.0.4",
"redux-thunk": "^2.0.1",
diff --git a/test/plain-list/AutosuggestApp.js b/test/plain-list/AutosuggestApp.js
index 82ae3386..7c2c27ed 100644
--- a/test/plain-list/AutosuggestApp.js
+++ b/test/plain-list/AutosuggestApp.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import sinon from 'sinon';
-import highlight from 'autosuggest-highlight';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
import Autosuggest from '../../src/AutosuggestContainer';
import languages from './languages';
import { escapeRegexCharacters } from '../../demo/src/components/utils/utils.js';
@@ -20,8 +21,8 @@ export const getSuggestionValue = sinon.spy(suggestion => {
});
export const renderSuggestion = sinon.spy((suggestion, { query }) => {
- const matches = highlight.match(suggestion.name, query);
- const parts = highlight.parse(suggestion.name, matches);
+ const matches = match(suggestion.name, query);
+ const parts = parse(suggestion.name, matches);
return parts.map((part, index) => {
return part.highlight ?