support of unique key generator by trigger output option (#68)

* support of unique key generator by trigger `output` option

* update snapshot

* docs(readme): fixed readme, key property

* docs(readme): added oklas to contributors;

Author: oklas

.all-contributorsrc

@@ -95,6 +95,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "oklas",
+      "name": "Serguei Okladnikov",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/8123356?v=4",
+      "profile": "https://github.com/oklas",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -5,7 +5,7 @@ Enhanced textarea to achieve autocomplete functionality.
 
 [![MIT License][license-badge]][License]
 [![PRs Welcome][prs-badge]][prs]
-[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors)
 <hr>
 
 </div>
@@ -148,7 +148,7 @@ export default App;
 
    You can also specify the behavior of caret if you return object `{text: "item", caretPosition: "start"}` the caret will be before the word once the user confirms his selection. Other possible value are "next", "end" and number, which is absolute number in contex of textarea (0 is equal position before the first char). Defaults to "next" which is space after the injected word.
 
-   Default behavior for string based item is string: `<TRIGGER><ITEM><TRIGGER>`). This method should **always** return a unique string, otherwise you have to use object notation and specify your own `key`.
+   The default behavior for string based item is a string: `<TRIGGER><ITEM><TRIGGER>`). This method should **always** return a unique string, otherwise, you have to use object notation and specify your own `key` or return object from `dataProvider` with `key` property. 
 
 ## [Example of usage](http://react-textarea-autocomplete.surge.sh/)
 `create-react-app example && cd example && yarn add @jukben/emoji-search @webscopeio/react-textarea-autocomplete`
@@ -242,7 +242,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 <!-- prettier-ignore -->
 | [<img src="https://avatars3.githubusercontent.com/u/8135252?v=4" width="100px;"/><br /><sub><b>Jakub Beneš</b></sub>](https://jukben.cz)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Code") [📖](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Documentation") [🎨](#design-jukben "Design") [🤔](#ideas-jukben "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/3114719?v=4" width="100px;"/><br /><sub><b>Andrey Taktaev</b></sub>](https://github.com/JokerNN)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=JokerNN "Code") | [<img src="https://avatars0.githubusercontent.com/u/10706203?v=4" width="100px;"/><br /><sub><b>Marcin Lichwała</b></sub>](https://github.com/marcinlichwala)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Code") [📖](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/9276511?v=4" width="100px;"/><br /><sub><b>Davidson Nascimento</b></sub>](https://github.com/davidsonsns)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=davidsonsns "Code") | [<img src="https://avatars1.githubusercontent.com/u/7477359?v=4" width="100px;"/><br /><sub><b>KajMagnus</b></sub>](http://www.effectivediscussions.org/)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Akajmagnus "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=kajmagnus "Code") | [<img src="https://avatars2.githubusercontent.com/u/1083817?v=4" width="100px;"/><br /><sub><b>Ján Vorčák</b></sub>](https://twitter.com/janvorcak)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Ajvorcak "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jvorcak "Code") | [<img src="https://avatars2.githubusercontent.com/u/9800850?v=4" width="100px;"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=Andarist "Code") [📦](#platform-Andarist "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-| [<img src="https://avatars0.githubusercontent.com/u/35139777?v=4" width="100px;"/><br /><sub><b>Deepak Pai</b></sub>](https://github.com/debugpai2)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [<img src="https://avatars0.githubusercontent.com/u/2336595?v=4" width="100px;"/><br /><sub><b>Aleck Landgraf</b></sub>](http://aleck.me)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") |
+| [<img src="https://avatars0.githubusercontent.com/u/35139777?v=4" width="100px;"/><br /><sub><b>Deepak Pai</b></sub>](https://github.com/debugpai2)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [<img src="https://avatars0.githubusercontent.com/u/2336595?v=4" width="100px;"/><br /><sub><b>Aleck Landgraf</b></sub>](http://aleck.me)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") | [<img src="https://avatars3.githubusercontent.com/u/8123356?v=4" width="100px;"/><br /><sub><b>Serguei Okladnikov</b></sub>](https://github.com/oklas)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aoklas "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=oklas "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

__tests__/__snapshots__/index.spec.js.snap

@@ -358,6 +358,22 @@ exports[`object-based items with keys match the snapshot of dropdown, list, and
 </li>
 `;
 
+exports[`object-based items without keys and custom unique generator match the snapshot 1`] = `
+<div
+  className="rta  "
+>
+  <textarea
+    className="rta__textarea "
+    onBlur={[Function]}
+    onChange={[Function]}
+    onClick={[Function]}
+    onSelect={[Function]}
+    placeholder="Write a message."
+    value="Controlled text"
+  />
+</div>
+`;
+
 exports[`string-based items w/o output fn match match the snapshot 1`] = `
 <div
   className="rta  "

__tests__/index.spec.js

@@ -443,3 +443,60 @@ describe('object-based items with keys', () => {
     expect(rta.find('textarea').node.value).toBe('some test ___happy_face___ ');
   });
 });
+
+describe('object-based items without keys and custom unique generator', () => {
+  const mockedChangeFn = jest.fn();
+  const mockedSelectFn = jest.fn();
+  const mockedCaretPositionChangeFn = jest.fn();
+
+  const rtaComponent = (
+    <ReactTextareaAutocomplete
+      placeholder={'Write a message.'}
+      value={'Controlled text'}
+      onChange={mockedChangeFn}
+      onSelect={mockedSelectFn}
+      onCaretPositionChange={mockedCaretPositionChangeFn}
+      loadingComponent={Loading}
+      trigger={{
+        ':': {
+          output: item => ({
+            key: 10 + item.value,
+            text: `___${item.text}___`,
+            caretPosition: 'next',
+          }),
+          dataProvider: () => [
+            { value: 1, label: ':)', text: 'happy_face' },
+            { value: 2, label: ':(', text: 'sad_face' },
+            { value: 3, label: ':|', text: 'sad_face' },
+          ],
+          component: SmileItemComponent,
+        },
+      }}
+    />
+  );
+  const rta = mount(rtaComponent);
+
+  it('match the snapshot', () => {
+    expect(shallow(rtaComponent)).toMatchSnapshot();
+  });
+
+  it('After the trigger was typed, it should appear list of options', () => {
+    rta
+      .find('textarea')
+      .simulate('change', { target: { value: 'some test :a' } });
+    expect(rta.find('.rta__autocomplete')).toHaveLength(1);
+  });
+
+  it('should display all items', () => {
+    expect(rta.find('.rta__autocomplete .rta__list .rta__item')).toHaveLength(
+      3
+    );
+  });
+
+  it('should generate unique value by the output generator', () => {
+    const items = rta.find(Item);
+    expect(items.at(0).key()).toEqual("11");
+    expect(items.at(1).key()).toEqual("12");
+    expect(items.at(2).key()).toEqual("13");
+  });
+});

src/List.jsx

@@ -51,8 +51,13 @@ export default class List extends React.Component<ListProps, ListState> {
   };
 
   getId = (item: textToReplaceType | string): string => {
+    const textToReplace = this.props.getTextToReplace(item);
+    if (textToReplace.key) {
+      return textToReplace.key;
+    }
+
     if (typeof item === 'string' || !item.key) {
-      return this.props.getTextToReplace(item).text;
+      return textToReplace.text;
     }
 
     return item.key;