Skip to content

Allows embedded keys with data #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 26, 2018
Merged

Allows embedded keys with data #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c262d2b
Allows embedded keys with data
alecklandgraf Mar 24, 2018
cdcacda
fix lint warning
alecklandgraf Mar 25, 2018
61ea124
docs(readme): inform about optional key
jukben Mar 25, 2018
8d870bd
updates to use Array.isArray, adds test to check keys
alecklandgraf Mar 25, 2018
f1956ca
Merge branch 'aleck--fix-trigger-provider-error' of github.com:aleckl…
alecklandgraf Mar 25, 2018
f2b79e0
Make key an optional coersed string type within the textToReplaceType…
alecklandgraf Mar 26, 2018
a01344b
refactor: better check for key
jukben Mar 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion .all-contributorsrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,16 @@
"bug",
"code"
]
},
{
"login": "alecklandgraf",
"name": "Aleck Landgraf",
"avatar_url": "https://avatars0.githubusercontent.com/u/2336595?v=4",
"profile": "http://aleck.me",
"contributions": [
"code"
]
}
]
],
"repoType": "github"
}
23 changes: 17 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-8-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors)
<hr>

</div>
Expand Down Expand Up @@ -118,9 +118,20 @@ export default App;
```javascript
{
[triggerChar: string]: {|
?output: (item: Object | string, trigger?: string) => {| text: string, caretPosition: "start" | "end" | "next" | number |} | string,
dataProvider: (token: string) => Promise<Array<Object | string>> | Array<Object | string>,
component: ReactClass<*>,
output?: (
item: Object | string,
trigger?: string
) =>
| {|
key?: ?string,
text: string,
caretPosition: "start" | "end" | "next" | number
|}
| string,
dataProvider: (
token: string
) => Promise<Array<Object | string>> | Array<Object | string>,
component: ReactClass<*>
|},
}
```
Expand All @@ -131,7 +142,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.
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`.

## [Example of usage](http://react-textarea-autocomplete.surge.sh/)
`create-react-app example && cd example && yarn add @jukben/emoji-search @webscopeio/react-textarea-autocomplete`
Expand Down Expand Up @@ -225,7 +236,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/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") |
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
Expand Down
201 changes: 201 additions & 0 deletions __tests__/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,207 @@ exports[`object-based items match the snapshot of dropdown, list, and item 3`] =
</li>
`;

exports[`object-based items with keys match the snapshot 1`] = `
<div
className="rta my-rta-container"
style={
Object {
"background": "orange",
}
}
>
<textarea
className="rta__textarea my-rta"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onSelect={[Function]}
placeholder="Write a message."
style={
Object {
"background": "red",
}
}
value="Controlled text"
/>
</div>
`;

exports[`object-based items with keys match the snapshot of dropdown, list, and item 1`] = `
<div
class="rta__autocomplete "
>
<ul
class="rta__list my-rta-list"
>
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity rta__entity--selected"
role="button"
tabindex="0"
>
<div>
<!-- react-text: 10 -->

<!-- /react-text -->
<!-- react-text: 11 -->
:)
<!-- /react-text -->
<!-- react-text: 12 -->

<!-- /react-text -->
</div>
</div>
</li>
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity "
role="button"
tabindex="0"
>
<div>
<!-- react-text: 16 -->

<!-- /react-text -->
<!-- react-text: 17 -->
:(
<!-- /react-text -->
<!-- react-text: 18 -->

<!-- /react-text -->
</div>
</div>
</li>
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity "
role="button"
tabindex="0"
>
<div>
<!-- react-text: 22 -->

<!-- /react-text -->
<!-- react-text: 23 -->
:|
<!-- /react-text -->
<!-- react-text: 24 -->

<!-- /react-text -->
</div>
</div>
</li>
</ul>
</div>
`;

exports[`object-based items with keys match the snapshot of dropdown, list, and item 2`] = `
<ul
class="rta__list my-rta-list"
>
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity rta__entity--selected"
role="button"
tabindex="0"
>
<div>
<!-- react-text: 10 -->

<!-- /react-text -->
<!-- react-text: 11 -->
:)
<!-- /react-text -->
<!-- react-text: 12 -->

<!-- /react-text -->
</div>
</div>
</li>
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity "
role="button"
tabindex="0"
>
<div>
<!-- react-text: 16 -->

<!-- /react-text -->
<!-- react-text: 17 -->
:(
<!-- /react-text -->
<!-- react-text: 18 -->

<!-- /react-text -->
</div>
</div>
</li>
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity "
role="button"
tabindex="0"
>
<div>
<!-- react-text: 22 -->

<!-- /react-text -->
<!-- react-text: 23 -->
:|
<!-- /react-text -->
<!-- react-text: 24 -->

<!-- /react-text -->
</div>
</div>
</li>
</ul>
`;

exports[`object-based items with keys match the snapshot of dropdown, list, and item 3`] = `
<li
class="rta__item my-rta-item"
style="background: green;"
>
<div
class="rta__entity rta__entity--selected"
role="button"
tabindex="0"
>
<div>
<!-- react-text: 10 -->

<!-- /react-text -->
<!-- react-text: 11 -->
:)
<!-- /react-text -->
<!-- react-text: 12 -->

<!-- /react-text -->
</div>
</div>
</li>
`;

exports[`string-based items w/o output fn match match the snapshot 1`] = `
<div
className="rta "
Expand Down
Loading