Skip to content

Commit 7bd61f9

Browse files
alecklandgrafjukben
alecklandgraf
authored and
jukben
committed
Allows embedded keys with data (#57)
* Allows embedded keys with data * fix lint warning * docs(readme): inform about optional key * updates to use Array.isArray, adds test to check keys * Make key an optional coersed string type within the textToReplaceType type * refactor: better check for key
1 parent 519b596 commit 7bd61f9

File tree

7 files changed

+364
-11
lines changed

7 files changed

+364
-11
lines changed

‎.all-contributorsrc‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,16 @@
8686
"bug",
8787
"code"
8888
]
89+
},
90+
{
91+
"login": "alecklandgraf",
92+
"name": "Aleck Landgraf",
93+
"avatar_url": "https://avatars0.githubusercontent.com/u/2336595?v=4",
94+
"profile": "http://aleck.me",
95+
"contributions": [
96+
"code"
97+
]
8998
}
90-
]
99+
],
100+
"repoType": "github"
91101
}

‎README.md‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Enhanced textarea to achieve autocomplete functionality.
55

66
[![MIT License][license-badge]][License]
77
[![PRs Welcome][prs-badge]][prs]
8-
[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors)
8+
[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors)
99
<hr>
1010

1111
</div>
@@ -118,9 +118,20 @@ export default App;
118118
```javascript
119119
{
120120
[triggerChar: string]: {|
121-
?output: (item: Object | string, trigger?: string) => {| text: string, caretPosition: "start" | "end" | "next" | number |} | string,
122-
dataProvider: (token: string) => Promise<Array<Object | string>> | Array<Object | string>,
123-
component: ReactClass<*>,
121+
output?: (
122+
item: Object | string,
123+
trigger?: string
124+
) =>
125+
| {|
126+
key?: ?string,
127+
text: string,
128+
caretPosition: "start" | "end" | "next" | number
129+
|}
130+
| string,
131+
dataProvider: (
132+
token: string
133+
) => Promise<Array<Object | string>> | Array<Object | string>,
134+
component: ReactClass<*>
124135
|},
125136
}
126137
```
@@ -131,7 +142,7 @@ export default App;
131142

132143
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.
133144

134-
Default behavior for string based item is string: `<TRIGGER><ITEM><TRIGGER>`). This method should **always** return a unique string.
145+
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`.
135146

136147
## [Example of usage](http://react-textarea-autocomplete.surge.sh/)
137148
`create-react-app example && cd example && yarn add @jukben/emoji-search @webscopeio/react-textarea-autocomplete`
@@ -225,7 +236,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
225236
<!-- prettier-ignore -->
226237
| [<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") |
227238
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
228-
| [<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") |
239+
| [<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") |
229240
<!-- ALL-CONTRIBUTORS-LIST:END -->
230241
231242
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

‎__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,207 @@ exports[`object-based items match the snapshot of dropdown, list, and item 3`] =
157157
</li>
158158
`;
159159

160+
exports[`object-based items with keys match the snapshot 1`] = `
161+
<div
162+
className="rta my-rta-container"
163+
style={
164+
Object {
165+
"background": "orange",
166+
}
167+
}
168+
>
169+
<textarea
170+
className="rta__textarea my-rta"
171+
onBlur={[Function]}
172+
onChange={[Function]}
173+
onClick={[Function]}
174+
onSelect={[Function]}
175+
placeholder="Write a message."
176+
style={
177+
Object {
178+
"background": "red",
179+
}
180+
}
181+
value="Controlled text"
182+
/>
183+
</div>
184+
`;
185+
186+
exports[`object-based items with keys match the snapshot of dropdown, list, and item 1`] = `
187+
<div
188+
class="rta__autocomplete "
189+
>
190+
<ul
191+
class="rta__list my-rta-list"
192+
>
193+
<li
194+
class="rta__item my-rta-item"
195+
style="background: green;"
196+
>
197+
<div
198+
class="rta__entity rta__entity--selected"
199+
role="button"
200+
tabindex="0"
201+
>
202+
<div>
203+
<!-- react-text: 10 -->
204+
205+
<!-- /react-text -->
206+
<!-- react-text: 11 -->
207+
:)
208+
<!-- /react-text -->
209+
<!-- react-text: 12 -->
210+
211+
<!-- /react-text -->
212+
</div>
213+
</div>
214+
</li>
215+
<li
216+
class="rta__item my-rta-item"
217+
style="background: green;"
218+
>
219+
<div
220+
class="rta__entity "
221+
role="button"
222+
tabindex="0"
223+
>
224+
<div>
225+
<!-- react-text: 16 -->
226+
227+
<!-- /react-text -->
228+
<!-- react-text: 17 -->
229+
:(
230+
<!-- /react-text -->
231+
<!-- react-text: 18 -->
232+
233+
<!-- /react-text -->
234+
</div>
235+
</div>
236+
</li>
237+
<li
238+
class="rta__item my-rta-item"
239+
style="background: green;"
240+
>
241+
<div
242+
class="rta__entity "
243+
role="button"
244+
tabindex="0"
245+
>
246+
<div>
247+
<!-- react-text: 22 -->
248+
249+
<!-- /react-text -->
250+
<!-- react-text: 23 -->
251+
:|
252+
<!-- /react-text -->
253+
<!-- react-text: 24 -->
254+
255+
<!-- /react-text -->
256+
</div>
257+
</div>
258+
</li>
259+
</ul>
260+
</div>
261+
`;
262+
263+
exports[`object-based items with keys match the snapshot of dropdown, list, and item 2`] = `
264+
<ul
265+
class="rta__list my-rta-list"
266+
>
267+
<li
268+
class="rta__item my-rta-item"
269+
style="background: green;"
270+
>
271+
<div
272+
class="rta__entity rta__entity--selected"
273+
role="button"
274+
tabindex="0"
275+
>
276+
<div>
277+
<!-- react-text: 10 -->
278+
279+
<!-- /react-text -->
280+
<!-- react-text: 11 -->
281+
:)
282+
<!-- /react-text -->
283+
<!-- react-text: 12 -->
284+
285+
<!-- /react-text -->
286+
</div>
287+
</div>
288+
</li>
289+
<li
290+
class="rta__item my-rta-item"
291+
style="background: green;"
292+
>
293+
<div
294+
class="rta__entity "
295+
role="button"
296+
tabindex="0"
297+
>
298+
<div>
299+
<!-- react-text: 16 -->
300+
301+
<!-- /react-text -->
302+
<!-- react-text: 17 -->
303+
:(
304+
<!-- /react-text -->
305+
<!-- react-text: 18 -->
306+
307+
<!-- /react-text -->
308+
</div>
309+
</div>
310+
</li>
311+
<li
312+
class="rta__item my-rta-item"
313+
style="background: green;"
314+
>
315+
<div
316+
class="rta__entity "
317+
role="button"
318+
tabindex="0"
319+
>
320+
<div>
321+
<!-- react-text: 22 -->
322+
323+
<!-- /react-text -->
324+
<!-- react-text: 23 -->
325+
:|
326+
<!-- /react-text -->
327+
<!-- react-text: 24 -->
328+
329+
<!-- /react-text -->
330+
</div>
331+
</div>
332+
</li>
333+
</ul>
334+
`;
335+
336+
exports[`object-based items with keys match the snapshot of dropdown, list, and item 3`] = `
337+
<li
338+
class="rta__item my-rta-item"
339+
style="background: green;"
340+
>
341+
<div
342+
class="rta__entity rta__entity--selected"
343+
role="button"
344+
tabindex="0"
345+
>
346+
<div>
347+
<!-- react-text: 10 -->
348+
349+
<!-- /react-text -->
350+
<!-- react-text: 11 -->
351+
:)
352+
<!-- /react-text -->
353+
<!-- react-text: 12 -->
354+
355+
<!-- /react-text -->
356+
</div>
357+
</div>
358+
</li>
359+
`;
360+
160361
exports[`string-based items w/o output fn match match the snapshot 1`] = `
161362
<div
162363
className="rta "

0 commit comments

Comments
 (0)