Use single index on completions of the console
This commit is contained in:
		
							parent
							
								
									21788740c1
								
							
						
					
					
						commit
						0c2fcf74bb
					
				
					 3 changed files with 45 additions and 70 deletions
				
			
		|  | @ -27,19 +27,17 @@ const CompletionItem = (props) => { | |||
| class CompletionComponent extends Component { | ||||
|   render() { | ||||
|     let eles = []; | ||||
|     let index = 0; | ||||
|     for (let i = 0; i < this.props.completions.length; ++i) { | ||||
|       let group = this.props.completions[i]; | ||||
|       eles.push(<CompletionTitle title={ group.name }/>); | ||||
|       for (let j = 0; j < group.items.length; ++j) { | ||||
|       for (let j = 0; j < group.items.length; ++j, ++index) { | ||||
|         let item = group.items[j]; | ||||
|         let selected = | ||||
|           i === this.props.groupSelection && | ||||
|           j === this.props.itemSelection; | ||||
|         eles.push(<CompletionItem | ||||
|           icon={item.icon} | ||||
|           caption={item.caption} | ||||
|           url={item.url} | ||||
|           highlight={selected} | ||||
|           highlight={index === this.props.select} | ||||
|         / >); | ||||
|       } | ||||
|     } | ||||
|  |  | |||
|  | @ -6,52 +6,42 @@ const defaultState = { | |||
|   consoleText: '', | ||||
|   completionSource: '', | ||||
|   completions: [], | ||||
|   groupSelection: -1, | ||||
|   itemSelection: -1, | ||||
|   select: -1, | ||||
| }; | ||||
| 
 | ||||
| const nextSelection = (state) => { | ||||
|   if (state.completions.length === 0) { | ||||
|     return [-1, -1]; | ||||
|     return -1; | ||||
|   } | ||||
|   if (state.groupSelection < 0) { | ||||
|     return [0, 0]; | ||||
|   if (state.select < 0) { | ||||
|     return 0; | ||||
|   } | ||||
| 
 | ||||
|   let group = state.completions[state.groupSelection]; | ||||
|   if (state.groupSelection + 1 >= state.completions.length && | ||||
|     state.itemSelection + 1 >= group.items.length) { | ||||
|     return [-1, -1]; | ||||
|   let length = state.completions | ||||
|     .map(g => g.items.length) | ||||
|     .reduce((x, y) => x + y); | ||||
|   if (state.select + 1 < length) { | ||||
|     return state.select + 1; | ||||
|   } | ||||
|   if (state.itemSelection + 1 >= group.items.length) { | ||||
|     return [state.groupSelection + 1, 0]; | ||||
|   } | ||||
|   return [state.groupSelection, state.itemSelection + 1]; | ||||
|   return -1; | ||||
| }; | ||||
| 
 | ||||
| const prevSelection = (state) => { | ||||
|   if (state.groupSelection < 0) { | ||||
|     return [ | ||||
|       state.completions.length - 1, | ||||
|       state.completions[state.completions.length - 1].items.length - 1 | ||||
|     ]; | ||||
|   let length = state.completions | ||||
|     .map(g => g.items.length) | ||||
|     .reduce((x, y) => x + y); | ||||
|   if (state.select < 0) { | ||||
|     return length - 1; | ||||
|   } | ||||
|   if (state.groupSelection === 0 && state.itemSelection === 0) { | ||||
|     return [-1, -1]; | ||||
|   } else if (state.itemSelection === 0) { | ||||
|     return [ | ||||
|       state.groupSelection - 1, | ||||
|       state.completions[state.groupSelection - 1].items.length - 1 | ||||
|     ]; | ||||
|   } | ||||
|   return [state.groupSelection, state.itemSelection - 1]; | ||||
|   return state.select - 1; | ||||
| }; | ||||
| 
 | ||||
| const nextConsoleText = (completions, group, item, defaults) => { | ||||
|   if (group < 0 || item < 0) { | ||||
| const nextConsoleText = (completions, select, defaults) => { | ||||
|   if (select < 0) { | ||||
|     return defaults; | ||||
|   } | ||||
|   return completions[group].items[item].content; | ||||
|   let items = completions.map(g => g.items).reduce((g1, g2) => g1.concat(g2)); | ||||
|   return items[select].content; | ||||
| }; | ||||
| 
 | ||||
| // eslint-disable-next-line max-lines-per-function
 | ||||
|  | @ -90,25 +80,20 @@ export default function reducer(state = defaultState, action = {}) { | |||
|     return { ...state, | ||||
|       completions: action.completions, | ||||
|       completionSource: action.completionSource, | ||||
|       groupSelection: -1, | ||||
|       itemSelection: -1, }; | ||||
|       select: -1 }; | ||||
|   case actions.CONSOLE_COMPLETION_NEXT: { | ||||
|     let next = nextSelection(state); | ||||
|     let select = nextSelection(state); | ||||
|     return { ...state, | ||||
|       groupSelection: next[0], | ||||
|       itemSelection: next[1], | ||||
|       select: select, | ||||
|       consoleText: nextConsoleText( | ||||
|         state.completions, next[0], next[1], | ||||
|         state.completionSource), }; | ||||
|         state.completions, select, state.completionSource) }; | ||||
|   } | ||||
|   case actions.CONSOLE_COMPLETION_PREV: { | ||||
|     let next = prevSelection(state); | ||||
|     let select = prevSelection(state); | ||||
|     return { ...state, | ||||
|       groupSelection: next[0], | ||||
|       itemSelection: next[1], | ||||
|       select: select, | ||||
|       consoleText: nextConsoleText( | ||||
|         state.completions, next[0], next[1], | ||||
|         state.completionSource), }; | ||||
|         state.completions, select, state.completionSource) }; | ||||
|   } | ||||
|   default: | ||||
|     return state; | ||||
|  |  | |||
|  | @ -8,8 +8,7 @@ describe("console reducer", () => { | |||
|     expect(state).to.have.property('messageText', ''); | ||||
|     expect(state).to.have.property('consoleText', ''); | ||||
|     expect(state).to.have.deep.property('completions', []); | ||||
|     expect(state).to.have.property('groupSelection', -1); | ||||
|     expect(state).to.have.property('itemSelection', -1); | ||||
|     expect(state).to.have.property('select', -1); | ||||
|   }); | ||||
| 
 | ||||
|   it('return next state for CONSOLE_HIDE', () => { | ||||
|  | @ -60,8 +59,7 @@ describe("console reducer", () => { | |||
| 
 | ||||
|   it ('return next state for CONSOLE_SET_COMPLETIONS', () => { | ||||
|     let state = { | ||||
|       groupSelection: 0, | ||||
|       itemSelection: 0, | ||||
|       select: 0, | ||||
|       completions: [], | ||||
|     } | ||||
|     let action = { | ||||
|  | @ -76,15 +74,13 @@ describe("console reducer", () => { | |||
|     } | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('completions', action.completions); | ||||
|     expect(state).to.have.property('groupSelection', -1); | ||||
|     expect(state).to.have.property('itemSelection', -1); | ||||
|     expect(state).to.have.property('select', -1); | ||||
|   }); | ||||
| 
 | ||||
|   it ('return next state for CONSOLE_COMPLETION_NEXT', () => { | ||||
|     let action = { type: actions.CONSOLE_COMPLETION_NEXT }; | ||||
|     let state = { | ||||
|       groupSelection: -1, | ||||
|       itemSelection: -1, | ||||
|       select: -1, | ||||
|       completions: [{ | ||||
|         name: 'Apple', | ||||
|         items: [1, 2] | ||||
|  | @ -95,24 +91,22 @@ describe("console reducer", () => { | |||
|     }; | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('groupSelection', 0); | ||||
|     expect(state).to.have.property('itemSelection', 0); | ||||
|     expect(state).to.have.property('select', 0); | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('groupSelection', 0); | ||||
|     expect(state).to.have.property('itemSelection', 1); | ||||
|     expect(state).to.have.property('select', 1); | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('select', 2); | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('groupSelection', -1); | ||||
|     expect(state).to.have.property('itemSelection', -1); | ||||
|     expect(state).to.have.property('select', -1); | ||||
|   }); | ||||
| 
 | ||||
|   it ('return next state for CONSOLE_COMPLETION_PREV', () => { | ||||
|     let action = { type: actions.CONSOLE_COMPLETION_PREV }; | ||||
|     let state = { | ||||
|       groupSelection: -1, | ||||
|       itemSelection: -1, | ||||
|       select: -1, | ||||
|       completions: [{ | ||||
|         name: 'Apple', | ||||
|         items: [1, 2] | ||||
|  | @ -123,17 +117,15 @@ describe("console reducer", () => { | |||
|     }; | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('groupSelection', 1); | ||||
|     expect(state).to.have.property('itemSelection', 0); | ||||
|     expect(state).to.have.property('select', 2); | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('groupSelection', 0); | ||||
|     expect(state).to.have.property('itemSelection', 1); | ||||
|     expect(state).to.have.property('select', 1); | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('select', 0); | ||||
| 
 | ||||
|     state = reducer(state, action); | ||||
|     expect(state).to.have.property('groupSelection', -1); | ||||
|     expect(state).to.have.property('itemSelection', -1); | ||||
|     expect(state).to.have.property('select', -1); | ||||
|   }); | ||||
| 
 | ||||
| }); | ||||
|  |  | |||
		Reference in a new issue