Skip to content
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

Add onItemHighlighted prop #192

Merged
merged 2 commits into from
Jun 23, 2020
Merged

Add onItemHighlighted prop #192

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1dbf019
Add onItemHighlighted prop
SamuelBolduc Jun 19, 2020
373b338
Revert version bump
SamuelBolduc Jun 22, 2020
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ or there is UMD build available. [Check out this pen as example](https://codepen
| boundariesElement | string \| HTMLElement | Element which should prevent autocomplete to overflow. Defaults to _body_. |
| textAreaComponent | React.Component \| {component: React.Component, ref: string} | What component use for as textarea. Default is `textarea`. (You can combine this with [react-autosize-textarea](https://github.com/buildo/react-autosize-textarea) for instance) |
| renderToBody | boolean | When set to `true` the autocomplete will be rendered at the end of the `<body>`. Default is `false`. |
| onItemHighlighted | ({currentTrigger: string \| null, item: string \| Object \| null}) => void | Callback get called everytime item is highlighted in the list |
| onItemSelected | ({currentTrigger: string, item: string \| Object}) => void | Callback get called everytime item is selected |
| style | Style Object | Style's of textarea |
| listStyle | Style Object | Styles of list's wrapper |
Expand Down
14 changes: 13 additions & 1 deletion cypress/integration/textarea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,19 @@ describe("React Textarea Autocomplete", () => {
cy.get('[data-test="minChar"]').clear({ force: true });
});

it("onSelectItem should return correct item and trigger", () => {
it("onItemHighlighted should return correct item and trigger", () => {
cy.get(".rta__textarea").type(":ro{uparrow}{uparrow}");
cy.window().then(async win => {
const shouldSelectItem = {
currentTrigger: ":",
item: { name: "rofl", char: "🤣" }
};

expect(win.__lastHighlightedItem).to.deep.equal(shouldSelectItem);
});
});

it("onItemSelected should return correct item and trigger", () => {
cy.get(".rta__textarea").type(":ro{uparrow}{uparrow}{enter}");
cy.window().then(async win => {
const shouldSelectItem = {
Expand Down
4 changes: 4 additions & 0 deletions example/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,10 @@ class App extends React.Component {
}}
movePopupAsYouType={movePopupAsYouType}
onCaretPositionChange={this._onCaretPositionChangeHandle}
onItemHighlighted={info => {
// save highlighted item to window; use it later in E2E tests
window.__lastHighlightedItem = info;
}}
onItemSelected={info => {
// save selected item to window; use it later in E2E tests
window.__lastSelectedItem = info;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@webscopeio/react-textarea-autocomplete",
"version": "4.6.3",
"version": "4.7.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please remove this change? I will do it during release process. I agree it should be 4.7.0 🙏

"description": "Offers autocomplete over textarea in style of GitHub.",
"repository": {
"type": "git",
Expand Down
4 changes: 4 additions & 0 deletions src/List.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,13 @@ export default class List extends React.Component<ListProps, ListState> {
};

selectItem = (item: Object | string, keyboard: boolean = false) => {
const { onItemHighlighted } = this.props;

if (this.state.selectedItem === item) return;

this.setState({ selectedItem: item }, () => {
onItemHighlighted(item);

if (keyboard) {
this.props.dropdownScroll(this.itemsRef[this.getId(item)]);
}
Expand Down
23 changes: 21 additions & 2 deletions src/Textarea.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,11 +666,14 @@ class ReactTextareaAutocomplete extends React.Component<
* Close autocomplete, also clean up trigger (to avoid slow promises)
*/
_closeAutocomplete = () => {
const { currentTrigger } = this.state;
this.escListenerDestroy();
this.setState({
data: null,
dataLoading: false,
currentTrigger: null
}, () => {
if(currentTrigger) this._onItemHighlightedHandler(null);
});
};

Expand Down Expand Up @@ -703,7 +706,8 @@ class ReactTextareaAutocomplete extends React.Component<
"movePopupAsYouType",
"textAreaComponent",
"renderToBody",
"onItemSelected"
"onItemSelected",
"onItemHighlighted"
];

// eslint-disable-next-line
Expand Down Expand Up @@ -951,6 +955,18 @@ class ReactTextareaAutocomplete extends React.Component<
this._closeAutocomplete();
};

_onItemHighlightedHandler = (item: Object | string | null) => {
const { onItemHighlighted } = this.props;
const { currentTrigger } = this.state;
if(onItemHighlighted) {
if(typeof onItemHighlighted === "function") {
onItemHighlighted({currentTrigger, item});
} else {
throw new Error("`onItemHighlighted` has to be a function");
}
}
}

_dropdownScroll = (item: HTMLDivElement) => {
const { scrollToItem } = this.props;

Expand Down Expand Up @@ -1087,6 +1103,7 @@ class ReactTextareaAutocomplete extends React.Component<
itemClassName={itemClassName}
itemStyle={itemStyle}
getTextToReplace={textToReplace}
onItemHighlighted={this._onItemHighlightedHandler}
onSelect={this._onSelect}
dropdownScroll={this._dropdownScroll}
/>
Expand Down Expand Up @@ -1197,7 +1214,9 @@ ReactTextareaAutocomplete.propTypes = {
dropdownClassName: PropTypes.string,
boundariesElement: containerPropCheck, //eslint-disable-line
trigger: triggerPropsCheck, //eslint-disable-line
renderToBody: PropTypes.bool
renderToBody: PropTypes.bool,
onItemSelected: PropTypes.func,
onItemHighlighted: PropTypes.func,
};

export default ReactTextareaAutocomplete;
2 changes: 2 additions & 0 deletions src/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export type ListProps = {
itemStyle: ?Object,
className: ?string,
itemClassName: ?string,
onItemHighlighted: (Object | string ) => void,
onSelect: (Object | string) => void,
dropdownScroll: HTMLDivElement => void
};
Expand Down Expand Up @@ -79,6 +80,7 @@ export type TextareaProps = {
| boolean
| ((container: HTMLDivElement, item: HTMLDivElement) => void),
closeOnClickOutside?: boolean,
onItemHighlighted?: ({ currentTrigger: ?string, item: ?Object | ?string }) => void,
onItemSelected?: ({ currentTrigger: string, item: Object | string }) => void,
movePopupAsYouType?: boolean,
boundariesElement: string | HTMLElement,
Expand Down