diff --git a/README.md b/README.md index 04e8f046..e93dd6c6 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,8 @@ const commands = [{ * ```open``` a _boolean_, when set to true it forces the command palette to be displayed. Defaults to "false". +* ```showAllCommandsWhenNoneMatches``` a boolean, Set it to true if you'd like to render all suggestions when the input query matches none. Defaults to "true". + * ```alwaysRenderCommands``` a boolean, Set it to true if you'd like to render suggestions even when the input is not focused. * ```display``` one of "modal" or "inline", when set to "modal" the command palette is rendered centered inside a modal. When set to "inline", it is render inline with other page content. Defaults to "modal". diff --git a/src/command-palette.js b/src/command-palette.js index 80738e7e..3b56e3b9 100644 --- a/src/command-palette.js +++ b/src/command-palette.js @@ -108,10 +108,8 @@ class CommandPalette extends React.Component { } if (!equal(prevProps.commands, commands)) { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ - suggestions: this.fetchData(), - }); + this.fetchData(); // set this.allCommands + this.onSuggestionsFetchRequested({ value: this.state.value }); // updates matching suggestions } } @@ -160,9 +158,9 @@ class CommandPalette extends React.Component { // Autosuggest will call this function every time you need to update suggestions. // You already implemented this logic above, so just use it. onSuggestionsFetchRequested({ value }) { - const { options, filterSearchQuery } = this.props; + const { options, filterSearchQuery, showAllCommandsWhenNoneMatches } = this.props; this.setState({ - suggestions: getSuggestions(value, this.allCommands, options, filterSearchQuery), + suggestions: getSuggestions(value, this.allCommands, options, filterSearchQuery, showAllCommandsWhenNoneMatches), }); } @@ -367,6 +365,7 @@ class CommandPalette extends React.Component { } CommandPalette.defaultProps = { + showAllCommandsWhenNoneMatches: true, alwaysRenderCommands: true, placeholder: "Type a command", hotKeys: "command+shift+p", @@ -393,6 +392,10 @@ CommandPalette.defaultProps = { }; CommandPalette.propTypes = { + /** showAllCommandsWhenNoneMatches a boolean, Set it to true if you'd like to render all suggestions + * the input query matches none. Defaults to "true". */ + showAllCommandsWhenNoneMatches: PropTypes.bool, + /** alwaysRenderCommands a boolean, Set it to true if you'd like to render suggestions * even when the input is not focused. */ alwaysRenderCommands: PropTypes.bool, diff --git a/src/suggestions.js b/src/suggestions.js index eeaa5ccd..064d7501 100644 --- a/src/suggestions.js +++ b/src/suggestions.js @@ -32,7 +32,7 @@ function filterFuzzySortSearch(search, filterSearchQuery) { } // Teach Autosuggest how to calculate suggestions for any given input value. -const getSuggestions = function (unfilteredSearch, allCommands, options, filterSearchQuery) { +const getSuggestions = function (unfilteredSearch, allCommands, options, filterSearchQuery, showAllCommandsWhenNoneMatches) { const search = filterFuzzySortSearch(unfilteredSearch, filterSearchQuery); @@ -45,13 +45,17 @@ const getSuggestions = function (unfilteredSearch, allCommands, options, filterS // allCommands.forEach(s => (s.namePrepared = fuzzysort.prepare(s.name))); // }); + // if the user didnt suggest a specific term or there's a search term + // but no matches were found return all the commands + if (!search) { + return allCommands; + } + // If the user specified an autosuggest term // search for close matches const suggestionResults = fuzzysort.go(search, allCommands, options); - // if the user didnt suggest a specific term or there's a search term - // but no matches were found return all the commands - if (!search || !suggestionResults.length) { + if (showAllCommandsWhenNoneMatches && !suggestionResults.length) { return allCommands; }