From 7d12899c4ff89fea010eb0554d6276a931084955 Mon Sep 17 00:00:00 2001 From: Bahattin Cinic Date: Tue, 8 Dec 2020 00:28:13 +0300 Subject: [PATCH 1/3] Added onUpdateSuggestions prop to the Editor component --- src/Editor/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index ef31dea..b9291c8 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -26,7 +26,8 @@ export class Editor extends React.Component { onHideMentions: PropTypes.func, editorStyles: PropTypes.object, placeholder: PropTypes.string, - renderMentionList: PropTypes.func + renderMentionList: PropTypes.func, + onUpdateSuggestions: PropTypes.func }; constructor(props) { @@ -135,6 +136,7 @@ export class Editor extends React.Component { this.setState({ keyword: lastKeyword }); + this.props.onUpdateSuggestions(lastKeyword); } resetTextbox() { From 4b6d80d4eec8057c6a47d12077c9f591004d3346 Mon Sep 17 00:00:00 2001 From: Bahattin Cinic Date: Tue, 8 Dec 2020 01:24:15 +0300 Subject: [PATCH 2/3] Updated readme doc. --- README.md | 2 ++ src/Editor/index.js | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/README.md b/README.md index e23e21d..8804931 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,8 @@ findMentions: (val) => { **`placeholder: string`** placeholder for empty input. +**`onUpdateSuggestions: function`** This function will be called on mention keyword change. + **`renderMentionList: function`** If you want to render totally different list. You can use this property to provide alternative mention list renderer. It will be called with certain properties to controll the functionality of list. ```js diff --git a/src/Editor/index.js b/src/Editor/index.js index b9291c8..d8f51ab 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -30,6 +30,10 @@ export class Editor extends React.Component { onUpdateSuggestions: PropTypes.func }; + static defaultProps = { + onUpdateSuggestions: () => {} + }; + constructor(props) { super(props); this.mentionsMap = new Map(); From db309c6a70fc0486eaab2ff4003632c322817060 Mon Sep 17 00:00:00 2001 From: Bahattin Cinic Date: Tue, 8 Dec 2020 01:28:45 +0300 Subject: [PATCH 3/3] doc updated --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8804931..4b67c36 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,19 @@ findMentions: (val) => { **`placeholder: string`** placeholder for empty input. -**`onUpdateSuggestions: function`** This function will be called on mention keyword change. +**`onUpdateSuggestions: function`** This function will be called on the mention keyword change. You can use this property to fetch the list from the data source. + +```js + { + this.setState({ + users: fetchUsers(keyword) + }); + }} +... +/> +``` **`renderMentionList: function`** If you want to render totally different list. You can use this property to provide alternative mention list renderer. It will be called with certain properties to controll the functionality of list.