Merge pull request #169 from rdjpalmer/autocomplete

Unstyled `<AutoComplete />` component

components/Forms/AutoComplete/AutoComplete.js

@@ -0,0 +1,2 @@
+import AutoSuggest from 'react-autosuggest';
+export default AutoSuggest;

components/Forms/AutoComplete/AutoComplete.story.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import AutoComplete from './AutoComplete';
+
+storiesOf('AutoComplete', module)
+  .add('Default', () => (
+    <AutoComplete
+      suggestions={ ['Richard', 'Jordan', 'Simon', 'Nick', 'Nique', 'Mike', 'Ben', 'Melita'] }
+      onSuggestionsFetchRequested={ action('Fetching suggestions') }
+      onSuggestionsClearRequested={ action('Clearing suggestions') }
+      onSuggestionSelected={ action('Selecting suggestion') }
+      inputProps={ {
+        value: '',
+        onChange: action('input onChange'),
+      } }
+      renderSuggestion={ (suggestion) => <span>{ suggestion }</span> }
+      getSuggestionValue={ val => val }
+      focusFirstSuggestion
+      alwaysRenderSuggestions
+    />
+  ));

components/Forms/AutoComplete/AutoComplete.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import noop from '../../../utils/noop';
+import AutoComplete from './AutoComplete';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(
+    <AutoComplete
+      suggestions={ [] }
+      onSuggestionsFetchRequested={ noop }
+      onSuggestionsClearRequested={ noop }
+      getSuggestionValue={ noop }
+      renderSuggestion={ () => <span /> }
+      inputProps={ {
+        onChange: noop,
+        value: '',
+      } }
+    />,
+    div
+  );
+});

package.json

@@ -102,6 +102,7 @@
     "object-fit-images": "^2.5.9",
     "react": "^15.3.2",
     "react-addons-css-transition-group": "^15.3.2",
+    "react-autosuggest": "^8.0.0",
     "react-container-query": "^0.6.0",
     "react-dom": "^15.3.1",
     "react-html5video": "^1.2.12",

utils/splitPreservingDelimiter/splitPreservingDelimiter.js

@@ -0,0 +1,5 @@
+const splitPreservingDelimiter = (string, delimiter) => string
+  .replace(new RegExp(delimiter, 'gi'), `,${delimiter},`)
+  .split(',');
+
+export default splitPreservingDelimiter;

utils/splitPreservingDelimiter/splitPreservingDelimiter.test.js

@@ -0,0 +1,8 @@
+import splitPreservingDelimiter from './splitPreservingDelimiter';
+
+it('splits a string, preserving the delimiter string', () => {
+  const string = 'somefancystring';
+  const delimiter = 'fancy';
+
+  expect(splitPreservingDelimiter(string, delimiter)).toEqual(['some', 'fancy', 'string']);
+});

yarn.lock

@@ -4184,6 +4184,10 @@ [email protected], object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
 object-fit-images@^2.5.9:
   version "2.5.9"
   resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-2.5.9.tgz#be1ad438f167d15b69c3daf690c8f06c243d49f1"
@@ -4892,6 +4896,20 @@ react-addons-test-utils@^15.3.1:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.3.2.tgz#c09a44f583425a4a9c1b38444d7a6c3e6f0f41f6"
 
+react-autosuggest@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/react-autosuggest/-/react-autosuggest-8.0.0.tgz#dca8211f07d0f6956f41b7904eef18bf3437c725"
+  dependencies:
+    react-autowhatever "^7.0.0"
+    shallow-equal "^1.0.0"
+
+react-autowhatever@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-autowhatever/-/react-autowhatever-7.0.0.tgz#7ea19f8024183acf1568fc8e4b76c0d0cc250d00"
+  dependencies:
+    react-themeable "^1.1.0"
+    section-iterator "^2.0.0"
+
 react-container-query@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/react-container-query/-/react-container-query-0.6.0.tgz#026ffc6792626cd3a84a5ee59d23d646bfb0a2f2"
@@ -4994,6 +5012,12 @@ react-stickynode@^1.2.1:
     react-addons-shallow-compare "^0.14.2 || ^15.0.0"
     subscribe-ui-event "^1.0.0"
 
+react-themeable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"
+  dependencies:
+    object-assign "^3.0.0"
+
 react@^15.3.1, react@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
@@ -5302,6 +5326,10 @@ sax@^1.1.4, sax@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
+section-iterator@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -5383,6 +5411,10 @@ [email protected]:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
 
+shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.0.0.tgz#508d1838b3de590ab8757b011b25e430900945f7"
+
 [email protected]:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"