diff --git a/src/actions/findbar.js b/src/actions/findbar.js index db178b82..b231b46f 100644 --- a/src/actions/findbar.js +++ b/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 }; } diff --git a/src/containers/App.js b/src/containers/App.js index cc105bc7..290a6d4a 100644 --- a/src/containers/App.js +++ b/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 { diff --git a/src/containers/FindBar.js b/src/containers/FindBar.js index bbe3b93d..18a8feac 100644 --- a/src/containers/FindBar.js +++ b/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: '', @@ -205,9 +214,12 @@ class FindBar extends Component { break; case 'Escape': this.setState({ + value: '', highlightedIndex: 0, - isOpen: false - }, this.maybeRemoveActiveScope); + isOpen: false, + 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, }; diff --git a/src/containers/stories/FindBar.js b/src/containers/stories/FindBar.js index 05a20a65..e8a73ec9 100644 --- a/src/containers/stories/FindBar.js +++ b/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_POST', pattern: 'Create new Post(:postName)' }, - { id:'CREATE_ARTICLE', pattern: 'Create new Article(:articleName)' }, - { id:'CREATE_FAQ', pattern: 'Create new FAQ item(:faqName as FAQ item name)' }, - { id:'ADD_NEWS', pattern: 'Add news item(:headline)' }, - { id:'ADD_USER', pattern: 'Add new User(:userName as User name)' }, - { id:'OPEN_SETTINGS', pattern: 'Go to Settings' }, + { id: CREATE_COLLECTION, pattern: 'Create new Collection(:collectionName)' }, + { id: CREATE_POST, pattern: 'Create new Post(:postName)' }, + { id: CREATE_ARTICLE, pattern: 'Create new Article(:articleName)' }, + { id: CREATE_FAQ, pattern: 'Create new FAQ item(:faqName as FAQ item name)' }, + { id: ADD_NEWS, pattern: 'Add news item(:headline)' }, + { id: ADD_USER, pattern: 'Add new User(:userName as User name)' }, + { 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)
f(dispatch)} />