From 0c2fcf74bbb49727163ea64486da2a611feebbe7 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 12 Feb 2019 21:16:38 +0900 Subject: Use single index on completions of the console --- src/console/reducers/index.js | 69 +++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 42 deletions(-) (limited to 'src/console/reducers') diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js index 7dcad17..bcc7a2e 100644 --- a/src/console/reducers/index.js +++ b/src/console/reducers/index.js @@ -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 - ]; - } - 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 - ]; + let length = state.completions + .map(g => g.items.length) + .reduce((x, y) => x + y); + if (state.select < 0) { + return 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; -- cgit v1.2.3 From 014963b32700d251bbb6991ce150025f578ea971 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Wed, 13 Feb 2019 22:11:35 +0900 Subject: Implement completion scroll --- .eslintrc | 1 + src/console/components/console/completion.jsx | 51 ++++++++++++++++++++++++--- src/console/reducers/index.js | 1 + 3 files changed, 49 insertions(+), 4 deletions(-) (limited to 'src/console/reducers') diff --git a/.eslintrc b/.eslintrc index cf11670..0f41e10 100644 --- a/.eslintrc +++ b/.eslintrc @@ -40,6 +40,7 @@ "no-alert": "off", "no-bitwise": "off", "no-console": ["error", { "allow": ["warn", "error"] }], + "no-continue": "off", "no-empty-function": "off", "no-magic-numbers": "off", "no-mixed-operators": "off", diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx index 5f128d7..096653b 100644 --- a/src/console/components/console/completion.jsx +++ b/src/console/components/console/completion.jsx @@ -1,6 +1,8 @@ import { Component, h } from 'preact'; import { connect } from 'preact-redux'; +const COMPLETION_MAX_ITEMS = 33; + const CompletionTitle = (props) => { return
  • {props.title}
    • ; }; @@ -25,23 +27,64 @@ const CompletionItem = (props) => { class CompletionComponent extends Component { + constructor() { + super(); + this.state = { viewOffset: 0, select: -1 }; + } + + static getDerivedStateFromProps(nextProps, prevState) { + if (prevState.select === nextProps.select) { + return null; + } + + let viewSelect = (() => { + let view = 0; + let index = 0; + for (let group of nextProps.completions) { + ++view; + // TODO refactor + for (let _ of group.items) { + if (index === nextProps.select) { + return view; + } + ++view; + ++index; + } + } + })(); + + let viewOffset = 0; + if (nextProps.select < 0) { + viewOffset = 0; + } else if (prevState.select < nextProps.select) { + viewOffset = Math.max(prevState.viewOffset, + viewSelect - COMPLETION_MAX_ITEMS + 1); + } else if (prevState.select > nextProps.select) { + viewOffset = Math.min(prevState.viewOffset, viewSelect); + } + return { viewOffset, select: nextProps.select }; + } + render() { let eles = []; let index = 0; - for (let i = 0; i < this.props.completions.length; ++i) { - let group = this.props.completions[i]; + + for (let group of this.props.completions) { eles.push(); - for (let j = 0; j < group.items.length; ++j, ++index) { - let item = group.items[j]; + for (let item of group.items) { eles.push(); + ++index; } } + let viewOffset = this.state.viewOffset; + eles = eles.slice(viewOffset, viewOffset + COMPLETION_MAX_ITEMS); + return (
      { eles } diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js index bcc7a2e..614a72f 100644 --- a/src/console/reducers/index.js +++ b/src/console/reducers/index.js @@ -7,6 +7,7 @@ const defaultState = { completionSource: '', completions: [], select: -1, + viewIndex: 0, }; const nextSelection = (state) => { -- cgit v1.2.3