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 {
|
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 state.select - 1;
|
||||||
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];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Reference in a new issue