From 26f6f3c975f37cce5c229994776b47daa3a92f36 Mon Sep 17 00:00:00 2001
From: Marta Glanc <60811848+MartaGlanc@users.noreply.github.com>
Date: Sun, 5 Jul 2020 18:40:11 +0200
Subject: [PATCH] Allow user to provide a custom loading indicator
---
README.md | 4 +-
demo/src/examples/CustomLoader.js | 67 +++++++++++++++++++++++++++++++
demo/src/examples/Examples.js | 2 +
src/MentionsInput.js | 3 ++
src/SuggestionsOverlay.js | 7 +++-
5 files changed, 81 insertions(+), 2 deletions(-)
create mode 100644 demo/src/examples/CustomLoader.js
diff --git a/README.md b/README.md
index 97df381d..41b297cd 100755
--- a/README.md
+++ b/README.md
@@ -64,6 +64,7 @@ The `MentionsInput` supports the following props for configuring the widget:
| suggestionsPortalHost | DOM Element | undefined | Render suggestions into the DOM in the supplied host element. |
| inputRef | React ref | undefined | Accepts a React ref to forward to the underlying input element |
| allowSuggestionsAboveCursor | boolean | false | Renders the SuggestionList above the cursor if there is not enough space below |
+| loader | element | null | An element to use as a loading indicator |
Each data source is configured using a `Mention` component, which has the following props:
@@ -74,9 +75,10 @@ Each data source is configured using a `Mention` component, which has the follow
| renderSuggestion | function (entry, search, highlightedDisplay, index, focused) | `null` | Allows customizing how mention suggestions are rendered (optional) |
| markup | string | `'@[__display__](__id__)'` | A template string for the markup to use for mentions |
| displayTransform | function (id, display) | returns `display` | Accepts a function for customizing the string that is displayed for a mention |
-| regex | RegExp | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) | |
+| regex | RegExp | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) |
| onAdd | function (id, display) | empty function | Callback invoked when a suggestion has been added (optional) |
| appendSpaceOnAdd | boolean | `false` | Append a space when a suggestion has been added (optional) |
+| isLoading | boolean | `false` | Specifies whether the mention suggestions are being loaded. Used to display a loading indicator (optional) |
If a function is passed as the `data` prop, that function will be called with the current search query as first, and a callback function as second argument. The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)
diff --git a/demo/src/examples/CustomLoader.js b/demo/src/examples/CustomLoader.js
new file mode 100644
index 00000000..f8494a14
--- /dev/null
+++ b/demo/src/examples/CustomLoader.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import useStyles from 'substyle'
+import { Mention, MentionsInput } from '../../../src'
+
+import { provideExampleValue } from './higher-order'
+import defaultStyle from './defaultStyle'
+import defaultMentionStyle from './defaultMentionStyle'
+
+const mentionStyle = {
+ suggestions: {
+ list: {
+ border: 'none',
+ },
+ },
+}
+
+const loaderStyle = {
+ color: '#d8d8d8',
+ fontSize: 12,
+ padding: 6,
+}
+
+function CustomLoader({ value, data, onChange }) {
+ const [isLoading, setIsLoading] = useState(false)
+
+ const styles = useStyles(defaultStyle, { style: mentionStyle })
+
+ const fetchUsers = (query, callback) => {
+ if (!query) return
+
+ setIsLoading(true)
+
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(data.filter((user) => user.id.includes(query)))
+ }, 1500)
+ }).then((users) => {
+ setIsLoading(false)
+ callback(users)
+ })
+ }
+
+ return (
+
+
Custom loader component
+
+ Loading...}
+ >
+ `@${login}`}
+ trigger="@"
+ data={fetchUsers}
+ style={defaultMentionStyle}
+ isLoading={isLoading}
+ />
+
+
+ )
+}
+
+const asExample = provideExampleValue('')
+
+export default asExample(CustomLoader)
diff --git a/demo/src/examples/Examples.js b/demo/src/examples/Examples.js
index a9ee75d0..af782936 100644
--- a/demo/src/examples/Examples.js
+++ b/demo/src/examples/Examples.js
@@ -12,6 +12,7 @@ import SingleLine from './SingleLine'
import SingleLineIgnoringAccents from './SingleLineIgnoringAccents'
import SuggestionPortal from './SuggestionPortal'
import BottomGuard from './BottomGuard'
+import CustomLoader from './CustomLoader'
const users = [
{
@@ -63,6 +64,7 @@ export default function Examples() {
+
)
diff --git a/src/MentionsInput.js b/src/MentionsInput.js
index 5c7d8b00..a7d090f5 100755
--- a/src/MentionsInput.js
+++ b/src/MentionsInput.js
@@ -72,6 +72,7 @@ const propTypes = {
allowSpaceInQuery: PropTypes.bool,
allowSuggestionsAboveCursor: PropTypes.bool,
ignoreAccents: PropTypes.bool,
+ loader: PropTypes.element,
value: PropTypes.string,
onKeyDown: PropTypes.func,
@@ -105,6 +106,7 @@ class MentionsInput extends React.Component {
ignoreAccents: false,
singleLine: false,
allowSuggestionsAboveCursor: false,
+ loader: null,
onKeyDown: () => null,
onSelect: () => null,
onBlur: () => null,
@@ -260,6 +262,7 @@ class MentionsInput extends React.Component {
onMouseDown={this.handleSuggestionsMouseDown}
onMouseEnter={this.handleSuggestionsMouseEnter}
isLoading={this.isLoading()}
+ loader={this.props.loader}
ignoreAccents={this.props.ignoreAccents}
>
{this.props.children}
diff --git a/src/SuggestionsOverlay.js b/src/SuggestionsOverlay.js
index aeb51eeb..01ed0938 100644
--- a/src/SuggestionsOverlay.js
+++ b/src/SuggestionsOverlay.js
@@ -16,6 +16,7 @@ class SuggestionsOverlay extends Component {
top: PropTypes.number,
scrollFocusedIntoView: PropTypes.bool,
isLoading: PropTypes.bool,
+ loader: PropTypes.element,
onSelect: PropTypes.func,
ignoreAccents: PropTypes.bool,
containerRef: PropTypes.oneOfType([
@@ -138,7 +139,11 @@ class SuggestionsOverlay extends Component {
return
}
- return
+ return (
+ this.props.loader || (
+
+ )
+ )
}
handleMouseEnter = (index, ev) => {