Default commands option

src/actions/findbar.js

@@ -6,7 +6,6 @@ export const LIST_POSTS = 'LIST_POSTS';
 export const LIST_FAQ = 'LIST_FAQ';
 export const HELP = 'HELP';
 
-
 export function run(commandName, payload) {
   return { type: RUN_COMMAND, command: commandName, payload };
 }

src/containers/App.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
-import { LIST_POSTS, LIST_FAQ, HELP } from '../actions/findbar';
+import { LIST_POSTS, LIST_FAQ, HELP, MORE_COMMANDS } from '../actions/findbar';
 import FindBar from './FindBar';
 
 class App extends React.Component {

src/containers/FindBar.js

@@ -121,6 +121,8 @@ class FindBar extends Component {
         value: '',
         placeholder: PLACEHOLDER,
         activeScope: null
+      }, () => {
+        this._input.blur();
       });
       const payload = paramName ? { [paramName]: enteredParamValue } : null;
       this.props.dispatch(runCommand(command.id, payload));
@@ -137,11 +139,18 @@ class FindBar extends Component {
   }
 
   getSuggestions() {
-    return this._getSuggestions(this.state.value, this.state.activeScope, this._compiledCommands);
+    return this._getSuggestions(this.state.value, this.state.activeScope, this._compiledCommands, this.props.defaultCommands);
   }
   // Memoized version
-  _getSuggestions(value, scope, commands) {
+  _getSuggestions(value, scope, commands, defaultCommands) {
     if (scope) return []; // No autocomplete for scoped input
+    if (value.length === 0 && defaultCommands) {
+      return commands
+        .filter(command => defaultCommands.indexOf(command.id) !== -1)
+        .map(result => (
+          Object.assign({}, result, { string: result.token }
+        )));
+    }
 
     const results = fuzzy.filter(value, commands, {
       pre: '<strong>',
@@ -205,9 +214,12 @@ class FindBar extends Component {
         break;
       case 'Escape':
         this.setState({
+          value: '',
           highlightedIndex: 0,
-          isOpen: false
+          isOpen: false,
-        }, this.maybeRemoveActiveScope);
+          activeScope: null,
+          placeholder: PLACEHOLDER
+        });
         break;
       case 'Backspace':
         this.setState({
@@ -348,6 +360,7 @@ FindBar.propTypes = {
     id: PropTypes.string.isRequired,
     pattern: PropTypes.string.isRequired
   })).isRequired,
+  defaultCommands: PropTypes.arrayOf(PropTypes.string),
   dispatch: PropTypes.func.isRequired,
 };
 

src/containers/stories/FindBar.js

@@ -3,14 +3,26 @@ import { storiesOf, action } from '@kadira/storybook';
 
 import { FindBar } from '../FindBar';
 
+const CREATE_COLLECTION = 'CREATE_COLLECTION';
+const CREATE_POST = 'CREATE_POST';
+const CREATE_ARTICLE = 'CREATE_ARTICLE';
+const CREATE_FAQ = 'CREATE_FAQ';
+const ADD_NEWS = 'ADD_NEWS';
+const ADD_USER = 'ADD_USER';
+const OPEN_SETTINGS = 'OPEN_SETTINGS';
+const HELP = 'HELP';
+const MORE_COMMANDS = 'MORE_COMMANDS';
+
 const commands = [
-  { id:'CREATE_COLLECTION', pattern: 'Create new Collection(:collectionName)' },
+  { id: CREATE_COLLECTION, pattern: 'Create new Collection(:collectionName)' },
-  { id:'CREATE_POST', pattern: 'Create new Post(:postName)' },
+  { id: CREATE_POST, pattern: 'Create new Post(:postName)' },
-  { id:'CREATE_ARTICLE', pattern: 'Create new Article(:articleName)' },
+  { id: CREATE_ARTICLE, pattern: 'Create new Article(:articleName)' },
-  { id:'CREATE_FAQ', pattern: 'Create new FAQ item(:faqName as FAQ item name)' },
+  { id: CREATE_FAQ, pattern: 'Create new FAQ item(:faqName as FAQ item name)' },
-  { id:'ADD_NEWS', pattern: 'Add news item(:headline)' },
+  { id: ADD_NEWS, pattern: 'Add news item(:headline)' },
-  { id:'ADD_USER', pattern: 'Add new User(:userName as User name)' },
+  { id: ADD_USER, pattern: 'Add new User(:userName as User name)' },
-  { id:'OPEN_SETTINGS', pattern: 'Go to Settings' },
+  { id: OPEN_SETTINGS, pattern: 'Go to Settings' },
+  { id: HELP, pattern: 'Help' },
+  { id: MORE_COMMANDS, pattern: 'More Commands...' },
 ];
 
 const style = {
@@ -25,6 +37,7 @@ storiesOf('FindBar', module)
     <div style={style}>
       <FindBar
           commands={commands}
+          defaultCommands={[CREATE_POST, CREATE_COLLECTION, OPEN_SETTINGS, HELP, MORE_COMMANDS]}
           dispatch={f => f(dispatch)}
       />
     </div>