aboutsummaryrefslogtreecommitdiff
path: root/src/console
diff options
context:
space:
mode:
Diffstat (limited to 'src/console')
-rw-r--r--src/console/actions/console.ts34
-rw-r--r--src/console/actions/index.ts76
-rw-r--r--src/console/components/Console.tsx43
-rw-r--r--src/console/components/console/Completion.tsx45
-rw-r--r--src/console/components/console/CompletionItem.tsx9
-rw-r--r--src/console/components/console/CompletionTitle.tsx11
-rw-r--r--src/console/components/console/Input.tsx31
-rw-r--r--src/console/components/console/Message.tsx13
-rw-r--r--src/console/index.tsx10
-rw-r--r--src/console/reducers/index.ts23
10 files changed, 197 insertions, 98 deletions
diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts
index 3713a76..ceb419c 100644
--- a/src/console/actions/console.ts
+++ b/src/console/actions/console.ts
@@ -1,40 +1,40 @@
-import messages from 'shared/messages';
-import actions from 'console/actions';
+import messages from '../../shared/messages';
+import * as actions from './index';
-const hide = () => {
+const hide = (): actions.ConsoleAction => {
return {
type: actions.CONSOLE_HIDE,
};
};
-const showCommand = (text) => {
+const showCommand = (text: string): actions.ConsoleAction => {
return {
type: actions.CONSOLE_SHOW_COMMAND,
text: text
};
};
-const showFind = () => {
+const showFind = (): actions.ConsoleAction => {
return {
type: actions.CONSOLE_SHOW_FIND,
};
};
-const showError = (text) => {
+const showError = (text: string): actions.ConsoleAction => {
return {
type: actions.CONSOLE_SHOW_ERROR,
text: text
};
};
-const showInfo = (text) => {
+const showInfo = (text: string): actions.ConsoleAction => {
return {
type: actions.CONSOLE_SHOW_INFO,
text: text
};
};
-const hideCommand = () => {
+const hideCommand = (): actions.ConsoleAction => {
window.top.postMessage(JSON.stringify({
type: messages.CONSOLE_UNFOCUS,
}), '*');
@@ -43,15 +43,17 @@ const hideCommand = () => {
};
};
-const enterCommand = async(text) => {
+const enterCommand = async(
+ text: string,
+): Promise<actions.ConsoleAction> => {
await browser.runtime.sendMessage({
type: messages.CONSOLE_ENTER_COMMAND,
text,
});
- return hideCommand(text);
+ return hideCommand();
};
-const enterFind = (text) => {
+const enterFind = (text: string): actions.ConsoleAction => {
window.top.postMessage(JSON.stringify({
type: messages.CONSOLE_ENTER_FIND,
text,
@@ -59,14 +61,14 @@ const enterFind = (text) => {
return hideCommand();
};
-const setConsoleText = (consoleText) => {
+const setConsoleText = (consoleText: string): actions.ConsoleAction => {
return {
type: actions.CONSOLE_SET_CONSOLE_TEXT,
consoleText,
};
};
-const getCompletions = async(text) => {
+const getCompletions = async(text: string): Promise<actions.ConsoleAction> => {
let completions = await browser.runtime.sendMessage({
type: messages.CONSOLE_QUERY_COMPLETIONS,
text,
@@ -78,13 +80,13 @@ const getCompletions = async(text) => {
};
};
-const completionNext = () => {
+const completionNext = (): actions.ConsoleAction => {
return {
type: actions.CONSOLE_COMPLETION_NEXT,
};
};
-const completionPrev = () => {
+const completionPrev = (): actions.ConsoleAction => {
return {
type: actions.CONSOLE_COMPLETION_PREV,
};
@@ -92,5 +94,5 @@ const completionPrev = () => {
export {
hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText,
- enterCommand, enterFind, getCompletions, completionNext, completionPrev
+ enterCommand, enterFind, getCompletions, completionNext, completionPrev,
};
diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts
index b394179..3770496 100644
--- a/src/console/actions/index.ts
+++ b/src/console/actions/index.ts
@@ -1,13 +1,63 @@
-export default {
- // console commands
- CONSOLE_HIDE: 'console.hide',
- CONSOLE_SHOW_COMMAND: 'console.show.command',
- CONSOLE_SHOW_ERROR: 'console.show.error',
- CONSOLE_SHOW_INFO: 'console.show.info',
- CONSOLE_HIDE_COMMAND: 'console.hide.command',
- CONSOLE_SET_CONSOLE_TEXT: 'console.set.command',
- CONSOLE_SET_COMPLETIONS: 'console.set.completions',
- CONSOLE_COMPLETION_NEXT: 'console.completion.next',
- CONSOLE_COMPLETION_PREV: 'console.completion.prev',
- CONSOLE_SHOW_FIND: 'console.show.find',
-};
+// console commands
+export const CONSOLE_HIDE = 'console.hide';
+export const CONSOLE_SHOW_COMMAND = 'console.show.command';
+export const CONSOLE_SHOW_ERROR = 'console.show.error';
+export const CONSOLE_SHOW_INFO = 'console.show.info';
+export const CONSOLE_HIDE_COMMAND = 'console.hide.command';
+export const CONSOLE_SET_CONSOLE_TEXT = 'console.set.command';
+export const CONSOLE_SET_COMPLETIONS = 'console.set.completions';
+export const CONSOLE_COMPLETION_NEXT = 'console.completion.next';
+export const CONSOLE_COMPLETION_PREV = 'console.completion.prev';
+export const CONSOLE_SHOW_FIND = 'console.show.find';
+
+interface HideAction {
+ type: typeof CONSOLE_HIDE;
+}
+
+interface ShowCommand {
+ type: typeof CONSOLE_SHOW_COMMAND;
+ text: string;
+}
+
+interface ShowFindAction {
+ type: typeof CONSOLE_SHOW_FIND;
+}
+
+interface ShowErrorAction {
+ type: typeof CONSOLE_SHOW_ERROR;
+ text: string;
+}
+
+interface ShowInfoAction {
+ type: typeof CONSOLE_SHOW_INFO;
+ text: string;
+}
+
+interface HideCommandAction {
+ type: typeof CONSOLE_HIDE_COMMAND;
+}
+
+interface SetConsoleTextAction {
+ type: typeof CONSOLE_SET_CONSOLE_TEXT;
+ consoleText: string;
+}
+
+interface SetCompletionsAction {
+ type: typeof CONSOLE_SET_COMPLETIONS;
+ completions: any[];
+ completionSource: string;
+}
+
+interface CompletionNextAction {
+ type: typeof CONSOLE_COMPLETION_NEXT;
+}
+
+interface CompletionPrevAction {
+ type: typeof CONSOLE_COMPLETION_PREV;
+}
+
+export type ConsoleAction =
+ HideAction | ShowCommand | ShowFindAction | ShowErrorAction |
+ ShowInfoAction | HideCommandAction | SetConsoleTextAction |
+ SetCompletionsAction | CompletionNextAction | CompletionPrevAction;
+
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 5427e43..09c0f50 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -1,7 +1,6 @@
import './console.scss';
import { connect } from 'react-redux';
import React from 'react';
-import PropTypes from 'prop-types';
import Input from './console/Input';
import Completion from './console/Completion';
import Message from './console/Message';
@@ -9,14 +8,29 @@ import * as consoleActions from '../../console/actions/console';
const COMPLETION_MAX_ITEMS = 33;
-class Console extends React.Component {
+interface Props {
+ mode?: string;
+ consoleText?: string;
+ messageText?: string;
+ children?: string;
+}
+
+class Console extends React.Component<Props> {
+ private input: HTMLInputElement | null;
+
+ constructor(props: Props) {
+ super(props);
+
+ this.input = null;
+ }
+
onBlur() {
if (this.props.mode === 'command' || this.props.mode === 'find') {
return this.props.dispatch(consoleActions.hideCommand());
}
}
- doEnter(e) {
+ doEnter(e: React.KeyboardEvent<HTMLInputElement>) {
e.stopPropagation();
e.preventDefault();
@@ -28,19 +42,19 @@ class Console extends React.Component {
}
}
- selectNext(e) {
+ selectNext(e: React.KeyboardEvent<HTMLInputElement>) {
this.props.dispatch(consoleActions.completionNext());
e.stopPropagation();
e.preventDefault();
}
- selectPrev(e) {
+ selectPrev(e: React.KeyboardEvent<HTMLInputElement>) {
this.props.dispatch(consoleActions.completionPrev());
e.stopPropagation();
e.preventDefault();
}
- onKeyDown(e) {
+ onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
this.props.dispatch(consoleActions.hideCommand());
}
@@ -81,7 +95,7 @@ class Console extends React.Component {
}
}
- onChange(e) {
+ onChange(e: React.ChangeEvent<HTMLInputElement>) {
let text = e.target.value;
this.props.dispatch(consoleActions.setConsoleText(text));
if (this.props.mode === 'command') {
@@ -90,7 +104,7 @@ class Console extends React.Component {
}
- componentDidUpdate(prevProps) {
+ componentDidUpdate(prevProps: Props) {
if (!this.input) {
return;
}
@@ -134,16 +148,11 @@ class Console extends React.Component {
focus() {
window.focus();
- this.input.focus();
+ if (this.input) {
+ this.input.focus();
+ }
}
}
-Console.propTypes = {
- mode: PropTypes.string,
- consoleText: PropTypes.string,
- messageText: PropTypes.string,
- children: PropTypes.string,
-};
-
-const mapStateToProps = state => state;
+const mapStateToProps = (state: any) => state;
export default connect(mapStateToProps)(Console);
diff --git a/src/console/components/console/Completion.tsx b/src/console/components/console/Completion.tsx
index 5477cb6..169a39c 100644
--- a/src/console/components/console/Completion.tsx
+++ b/src/console/components/console/Completion.tsx
@@ -1,15 +1,36 @@
import React from 'react';
-import PropTypes from 'prop-types';
import CompletionItem from './CompletionItem';
import CompletionTitle from './CompletionTitle';
-class Completion extends React.Component {
- constructor() {
- super();
+interface Item {
+ icon?: string;
+ caption?: string;
+ url?: string;
+}
+
+interface Group {
+ name: string;
+ items: Item[];
+}
+
+interface Props {
+ select: number;
+ size: number;
+ completions: Group[];
+}
+
+interface State {
+ viewOffset: number;
+ select: number;
+}
+
+class Completion extends React.Component<Props, State> {
+ constructor(props: Props) {
+ super(props);
this.state = { viewOffset: 0, select: -1 };
}
- static getDerivedStateFromProps(nextProps, prevState) {
+ static getDerivedStateFromProps(nextProps: Props, prevState: State) {
if (prevState.select === nextProps.select) {
return null;
}
@@ -24,6 +45,7 @@ class Completion extends React.Component {
}
index += g.items.length;
}
+ return -1;
})();
let viewOffset = 0;
@@ -70,17 +92,4 @@ class Completion extends React.Component {
}
}
-Completion.propTypes = {
- select: PropTypes.number,
- size: PropTypes.number,
- completions: PropTypes.arrayOf(PropTypes.shape({
- name: PropTypes.string,
- items: PropTypes.arrayOf(PropTypes.shape({
- icon: PropTypes.string,
- caption: PropTypes.string,
- url: PropTypes.string,
- })),
- })),
-};
-
export default Completion;
diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx
index 3dc552b..1cbf3de 100644
--- a/src/console/components/console/CompletionItem.tsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,7 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
-const CompletionItem = (props) => {
+interface Props {
+ highlight: boolean;
+ caption?: string;
+ url?: string;
+ icon?: string;
+}
+
+const CompletionItem = (props: Props) => {
let className = 'vimvixen-console-completion-item';
if (props.highlight) {
className += ' vimvixen-completion-selected';
diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx
index 4fcba3f..2543619 100644
--- a/src/console/components/console/CompletionTitle.tsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,14 +1,13 @@
import React from 'react';
-import PropTypes from 'prop-types';
-const CompletionTitle = (props) => {
+interface Props {
+ title: string;
+}
+
+const CompletionTitle = (props: Props) => {
return <li className='vimvixen-console-completion-title'>
{props.title}
</li>;
};
-CompletionTitle.propTypes = {
- title: PropTypes.string,
-};
-
export default CompletionTitle;
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index cbd3348..d0348bd 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -1,9 +1,26 @@
import React from 'react';
-import PropTypes from 'prop-types';
-class Input extends React.Component {
+interface Props {
+ mode: string;
+ value: string;
+ onBlur: (e: React.FocusEvent<Element>) => void;
+ onKeyDown: (e: React.KeyboardEvent<Element>) => void;
+ onChange: (e: React.ChangeEvent<Element>) => void;
+}
+
+class Input extends React.Component<Props> {
+ private input: HTMLInputElement | null;
+
+ constructor(props: Props) {
+ super(props);
+
+ this.input = null;
+ }
+
focus() {
- this.input.focus();
+ if (this.input) {
+ this.input.focus();
+ }
}
render() {
@@ -32,12 +49,4 @@ class Input extends React.Component {
}
}
-Input.propTypes = {
- mode: PropTypes.string,
- value: PropTypes.string,
- onBlur: PropTypes.func,
- onKeyDown: PropTypes.func,
- onChange: PropTypes.func,
-};
-
export default Input;
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index dd96248..07a929e 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -1,7 +1,11 @@
import React from 'react';
-import PropTypes from 'prop-types';
-const Message = (props) => {
+interface Props {
+ mode: string;
+ children: string[];
+}
+
+const Message = (props: Props) => {
switch (props.mode) {
case 'error':
return (
@@ -16,10 +20,7 @@ const Message = (props) => {
</p>
);
}
-};
-
-Message.propTypes = {
- children: PropTypes.string,
+ return null;
};
export default Message;
diff --git a/src/console/index.tsx b/src/console/index.tsx
index 3190a9a..ee3a8ee 100644
--- a/src/console/index.tsx
+++ b/src/console/index.tsx
@@ -1,8 +1,8 @@
-import messages from 'shared/messages';
-import reducers from 'console/reducers';
+import messages from '../shared/messages';
+import reducers from './reducers';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
-import * as consoleActions from 'console/actions/console';
+import * as consoleActions from './actions/console';
import { Provider } from 'react-redux';
import Console from './components/Console';
import React from 'react';
@@ -22,7 +22,7 @@ window.addEventListener('load', () => {
wrapper);
});
-const onMessage = (message) => {
+const onMessage = (message: any): any => {
switch (message.type) {
case messages.CONSOLE_SHOW_COMMAND:
return store.dispatch(consoleActions.showCommand(message.command));
@@ -38,5 +38,5 @@ const onMessage = (message) => {
};
browser.runtime.onMessage.addListener(onMessage);
-let port = browser.runtime.connect({ name: 'vimvixen-console' });
+let port = browser.runtime.connect(undefined, { name: 'vimvixen-console' });
port.onMessage.addListener(onMessage);
diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts
index 614a72f..37ed715 100644
--- a/src/console/reducers/index.ts
+++ b/src/console/reducers/index.ts
@@ -1,4 +1,14 @@
-import actions from 'console/actions';
+import * as actions from '../actions';
+
+interface State {
+ mode: string;
+ messageText: string;
+ consoleText: string;
+ completionSource: string;
+ completions: any[],
+ select: number;
+ viewIndex: number;
+}
const defaultState = {
mode: '',
@@ -10,7 +20,7 @@ const defaultState = {
viewIndex: 0,
};
-const nextSelection = (state) => {
+const nextSelection = (state: State): number => {
if (state.completions.length === 0) {
return -1;
}
@@ -27,7 +37,7 @@ const nextSelection = (state) => {
return -1;
};
-const prevSelection = (state) => {
+const prevSelection = (state: State): number => {
let length = state.completions
.map(g => g.items.length)
.reduce((x, y) => x + y);
@@ -37,7 +47,7 @@ const prevSelection = (state) => {
return state.select - 1;
};
-const nextConsoleText = (completions, select, defaults) => {
+const nextConsoleText = (completions: any[], select: number, defaults: any) => {
if (select < 0) {
return defaults;
}
@@ -46,7 +56,10 @@ const nextConsoleText = (completions, select, defaults) => {
};
// eslint-disable-next-line max-lines-per-function
-export default function reducer(state = defaultState, action = {}) {
+export default function reducer(
+ state: State = defaultState,
+ action: actions.ConsoleAction,
+): State {
switch (action.type) {
case actions.CONSOLE_HIDE:
return { ...state,
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-08 14:12:55 +0000