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