Use single index on completions of the console

jh-changes
Shin'ya Ueoka 5 years ago
parent 21788740c1
commit 0c2fcf74bb
  1. 8
      src/console/components/console/completion.jsx
  2. 69
      src/console/reducers/index.js
  3. 38
      test/console/reducers/console.test.js

@ -27,19 +27,17 @@ const CompletionItem = (props) => {
class CompletionComponent extends Component { class CompletionComponent extends Component {
render() { render() {
let eles = []; let eles = [];
let index = 0;
for (let i = 0; i < this.props.completions.length; ++i) { for (let i = 0; i < this.props.completions.length; ++i) {
let group = this.props.completions[i]; let group = this.props.completions[i];
eles.push(<CompletionTitle title={ group.name }/>); 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 item = group.items[j];
let selected =
i === this.props.groupSelection &&
j === this.props.itemSelection;
eles.push(<CompletionItem eles.push(<CompletionItem
icon={item.icon} icon={item.icon}
caption={item.caption} caption={item.caption}
url={item.url} url={item.url}
highlight={selected} highlight={index === this.props.select}
/ >); / >);
} }
} }

@ -6,52 +6,42 @@ const defaultState = {
consoleText: '', consoleText: '',
completionSource: '', completionSource: '',
completions: [], completions: [],
groupSelection: -1, select: -1,
itemSelection: -1,
}; };
const nextSelection = (state) => { const nextSelection = (state) => {
if (state.completions.length === 0) { if (state.completions.length === 0) {
return [-1, -1]; return -1;
} }
if (state.groupSelection < 0) { if (state.select < 0) {
return [0, 0]; return 0;
} }
let group = state.completions[state.groupSelection]; let length = state.completions
if (state.groupSelection + 1 >= state.completions.length && .map(g => g.items.length)
state.itemSelection + 1 >= group.items.length) { .reduce((x, y) => x + y);
return [-1, -1]; if (state.select + 1 < length) {
return state.select + 1;
} }
if (state.itemSelection + 1 >= group.items.length) { return -1;
return [state.groupSelection + 1, 0];
}
return [state.groupSelection, state.itemSelection + 1];
}; };
const prevSelection = (state) => { const prevSelection = (state) => {
if (state.groupSelection < 0) { let length = state.completions
return [ .map(g => g.items.length)
state.completions.length - 1, .reduce((x, y) => x + y);
state.completions[state.completions.length - 1].items.length - 1 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) => { const nextConsoleText = (completions, select, defaults) => {
if (group < 0 || item < 0) { if (select < 0) {
return defaults; 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 // eslint-disable-next-line max-lines-per-function
@ -90,25 +80,20 @@ export default function reducer(state = defaultState, action = {}) {
return { ...state, return { ...state,
completions: action.completions, completions: action.completions,
completionSource: action.completionSource, completionSource: action.completionSource,
groupSelection: -1, select: -1 };
itemSelection: -1, };
case actions.CONSOLE_COMPLETION_NEXT: { case actions.CONSOLE_COMPLETION_NEXT: {
let next = nextSelection(state); let select = nextSelection(state);
return { ...state, return { ...state,
groupSelection: next[0], select: select,
itemSelection: next[1],
consoleText: nextConsoleText( consoleText: nextConsoleText(
state.completions, next[0], next[1], state.completions, select, state.completionSource) };
state.completionSource), };
} }
case actions.CONSOLE_COMPLETION_PREV: { case actions.CONSOLE_COMPLETION_PREV: {
let next = prevSelection(state); let select = prevSelection(state);
return { ...state, return { ...state,
groupSelection: next[0], select: select,
itemSelection: next[1],
consoleText: nextConsoleText( consoleText: nextConsoleText(
state.completions, next[0], next[1], state.completions, select, state.completionSource) };
state.completionSource), };
} }
default: default:
return state; return state;

@ -8,8 +8,7 @@ describe("console reducer", () => {
expect(state).to.have.property('messageText', ''); expect(state).to.have.property('messageText', '');
expect(state).to.have.property('consoleText', ''); expect(state).to.have.property('consoleText', '');
expect(state).to.have.deep.property('completions', []); expect(state).to.have.deep.property('completions', []);
expect(state).to.have.property('groupSelection', -1); expect(state).to.have.property('select', -1);
expect(state).to.have.property('itemSelection', -1);
}); });
it('return next state for CONSOLE_HIDE', () => { it('return next state for CONSOLE_HIDE', () => {
@ -60,8 +59,7 @@ describe("console reducer", () => {
it ('return next state for CONSOLE_SET_COMPLETIONS', () => { it ('return next state for CONSOLE_SET_COMPLETIONS', () => {
let state = { let state = {
groupSelection: 0, select: 0,
itemSelection: 0,
completions: [], completions: [],
} }
let action = { let action = {
@ -76,15 +74,13 @@ describe("console reducer", () => {
} }
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('completions', action.completions); expect(state).to.have.property('completions', action.completions);
expect(state).to.have.property('groupSelection', -1); expect(state).to.have.property('select', -1);
expect(state).to.have.property('itemSelection', -1);
}); });
it ('return next state for CONSOLE_COMPLETION_NEXT', () => { it ('return next state for CONSOLE_COMPLETION_NEXT', () => {
let action = { type: actions.CONSOLE_COMPLETION_NEXT }; let action = { type: actions.CONSOLE_COMPLETION_NEXT };
let state = { let state = {
groupSelection: -1, select: -1,
itemSelection: -1,
completions: [{ completions: [{
name: 'Apple', name: 'Apple',
items: [1, 2] items: [1, 2]
@ -95,24 +91,22 @@ describe("console reducer", () => {
}; };
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('groupSelection', 0); expect(state).to.have.property('select', 0);
expect(state).to.have.property('itemSelection', 0);
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('groupSelection', 0); expect(state).to.have.property('select', 1);
expect(state).to.have.property('itemSelection', 1);
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('select', 2);
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('groupSelection', -1); expect(state).to.have.property('select', -1);
expect(state).to.have.property('itemSelection', -1);
}); });
it ('return next state for CONSOLE_COMPLETION_PREV', () => { it ('return next state for CONSOLE_COMPLETION_PREV', () => {
let action = { type: actions.CONSOLE_COMPLETION_PREV }; let action = { type: actions.CONSOLE_COMPLETION_PREV };
let state = { let state = {
groupSelection: -1, select: -1,
itemSelection: -1,
completions: [{ completions: [{
name: 'Apple', name: 'Apple',
items: [1, 2] items: [1, 2]
@ -123,17 +117,15 @@ describe("console reducer", () => {
}; };
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('groupSelection', 1); expect(state).to.have.property('select', 2);
expect(state).to.have.property('itemSelection', 0);
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('groupSelection', 0); expect(state).to.have.property('select', 1);
expect(state).to.have.property('itemSelection', 1);
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('select', 0);
state = reducer(state, action); state = reducer(state, action);
expect(state).to.have.property('groupSelection', -1); expect(state).to.have.property('select', -1);
expect(state).to.have.property('itemSelection', -1);
}); });
}); });