aboutsummaryrefslogtreecommitdiff
path: root/src/console/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/console/components')
-rw-r--r--src/console/components/Console.tsx227
-rw-r--r--src/console/components/console/Completion.tsx39
-rw-r--r--src/console/components/console/CompletionItem.tsx30
-rw-r--r--src/console/components/console/CompletionTitle.tsx6
-rw-r--r--src/console/components/console/Input.tsx20
-rw-r--r--src/console/components/console/Message.tsx26
6 files changed, 179 insertions, 169 deletions
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 3fe5cee..d74040d 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -1,19 +1,21 @@
-import './console.scss';
-import { connect } from 'react-redux';
-import React from 'react';
-import Input from './console/Input';
-import Completion from './console/Completion';
-import Message from './console/Message';
-import * as consoleActions from '../../console/actions/console';
-import { State as AppState } from '../reducers';
-import CommandLineParser, { InputPhase } from "../commandline/CommandLineParser";
+import "./console.scss";
+import { connect } from "react-redux";
+import React from "react";
+import Input from "./console/Input";
+import Completion from "./console/Completion";
+import Message from "./console/Message";
+import * as consoleActions from "../../console/actions/console";
+import { State as AppState } from "../reducers";
+import CommandLineParser, {
+ InputPhase,
+} from "../commandline/CommandLineParser";
import { Command } from "../../shared/Command";
const COMPLETION_MAX_ITEMS = 33;
type StateProps = ReturnType<typeof mapStateToProps>;
interface DispatchProps {
- dispatch: (action: any) => void,
+ dispatch: (action: any) => void;
}
type Props = StateProps & DispatchProps;
@@ -29,7 +31,7 @@ class Console extends React.Component<Props> {
}
onBlur() {
- if (this.props.mode === 'command' || this.props.mode === 'find') {
+ if (this.props.mode === "command" || this.props.mode === "find") {
return this.props.dispatch(consoleActions.hideCommand());
}
}
@@ -39,11 +41,12 @@ class Console extends React.Component<Props> {
e.preventDefault();
const value = (e.target as HTMLInputElement).value;
- if (this.props.mode === 'command') {
+ if (this.props.mode === "command") {
return this.props.dispatch(consoleActions.enterCommand(value));
- } else if (this.props.mode === 'find') {
- return this.props.dispatch(consoleActions.enterFind(
- value === '' ? undefined : value));
+ } else if (this.props.mode === "find") {
+ return this.props.dispatch(
+ consoleActions.enterFind(value === "" ? undefined : value)
+ );
}
}
@@ -61,94 +64,95 @@ class Console extends React.Component<Props> {
onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
switch (e.key) {
- case 'Escape':
- return this.props.dispatch(consoleActions.hideCommand());
- case 'Enter':
- return this.doEnter(e);
- case 'Tab':
- if (e.shiftKey) {
- this.props.dispatch(consoleActions.completionPrev());
- } else {
- this.props.dispatch(consoleActions.completionNext());
- }
- e.stopPropagation();
- e.preventDefault();
- break;
- case '[':
- if (e.ctrlKey) {
- e.preventDefault();
- return this.props.dispatch(consoleActions.hideCommand());
- }
- break;
- case 'c':
- if (e.ctrlKey) {
- e.preventDefault();
+ case "Escape":
return this.props.dispatch(consoleActions.hideCommand());
- }
- break;
- case 'm':
- if (e.ctrlKey) {
+ case "Enter":
return this.doEnter(e);
- }
- break;
- case 'n':
- if (e.ctrlKey) {
- this.selectNext(e);
- }
- break;
- case 'p':
- if (e.ctrlKey) {
- this.selectPrev(e);
- }
- break;
+ case "Tab":
+ if (e.shiftKey) {
+ this.props.dispatch(consoleActions.completionPrev());
+ } else {
+ this.props.dispatch(consoleActions.completionNext());
+ }
+ e.stopPropagation();
+ e.preventDefault();
+ break;
+ case "[":
+ if (e.ctrlKey) {
+ e.preventDefault();
+ return this.props.dispatch(consoleActions.hideCommand());
+ }
+ break;
+ case "c":
+ if (e.ctrlKey) {
+ e.preventDefault();
+ return this.props.dispatch(consoleActions.hideCommand());
+ }
+ break;
+ case "m":
+ if (e.ctrlKey) {
+ return this.doEnter(e);
+ }
+ break;
+ case "n":
+ if (e.ctrlKey) {
+ this.selectNext(e);
+ }
+ break;
+ case "p":
+ if (e.ctrlKey) {
+ this.selectPrev(e);
+ }
+ break;
}
}
onChange(e: React.ChangeEvent<HTMLInputElement>) {
const text = e.target.value;
this.props.dispatch(consoleActions.setConsoleText(text));
- if (this.props.mode !== 'command') {
- return
+ if (this.props.mode !== "command") {
+ return;
}
- this.updateCompletions(text)
+ this.updateCompletions(text);
}
-
componentDidUpdate(prevProps: Props) {
- if (prevProps.mode !== 'command' && this.props.mode === 'command') {
+ if (prevProps.mode !== "command" && this.props.mode === "command") {
this.updateCompletions(this.props.consoleText);
this.focus();
- } else if (prevProps.mode !== 'find' && this.props.mode === 'find') {
+ } else if (prevProps.mode !== "find" && this.props.mode === "find") {
this.focus();
}
}
render() {
switch (this.props.mode) {
- case 'command':
- case 'find':
- return <div className='vimvixen-console-command-wrapper'>
- <Completion
- size={COMPLETION_MAX_ITEMS}
- completions={this.props.completions}
- select={this.props.select}
- />
- <Input
- ref={this.input}
- mode={this.props.mode}
- onBlur={this.onBlur.bind(this)}
- onKeyDown={this.onKeyDown.bind(this)}
- onChange={this.onChange.bind(this)}
- value={this.props.consoleText}
- />
- </div>;
- case 'info':
- case 'error':
- return <Message mode={ this.props.mode } >
- { this.props.messageText }
- </Message>;
- default:
- return null;
+ case "command":
+ case "find":
+ return (
+ <div className="vimvixen-console-command-wrapper">
+ <Completion
+ size={COMPLETION_MAX_ITEMS}
+ completions={this.props.completions}
+ select={this.props.select}
+ />
+ <Input
+ ref={this.input}
+ mode={this.props.mode}
+ onBlur={this.onBlur.bind(this)}
+ onKeyDown={this.onKeyDown.bind(this)}
+ onChange={this.onChange.bind(this)}
+ value={this.props.consoleText}
+ />
+ </div>
+ );
+ case "info":
+ case "error":
+ return (
+ <Message mode={this.props.mode}>{this.props.messageText}</Message>
+ );
+ default:
+ return null;
}
}
@@ -166,25 +170,40 @@ class Console extends React.Component<Props> {
} else {
const cmd = this.commandLineParser.parse(text);
switch (cmd.command) {
- case Command.Open:
- case Command.TabOpen:
- case Command.WindowOpen:
- this.props.dispatch(consoleActions.getOpenCompletions(this.props.completionTypes, text, cmd.command, cmd.args));
- break;
- case Command.Buffer:
- this.props.dispatch(consoleActions.getTabCompletions(text, cmd.command, cmd.args, false));
- break;
- case Command.BufferDelete:
- case Command.BuffersDelete:
- this.props.dispatch(consoleActions.getTabCompletions(text, cmd.command, cmd.args, true));
- break;
- case Command.BufferDeleteForce:
- case Command.BuffersDeleteForce:
- this.props.dispatch(consoleActions.getTabCompletions(text, cmd.command, cmd.args, false));
- break;
- case Command.Set:
- this.props.dispatch(consoleActions.getPropertyCompletions(text, cmd.command, cmd.args));
- break;
+ case Command.Open:
+ case Command.TabOpen:
+ case Command.WindowOpen:
+ this.props.dispatch(
+ consoleActions.getOpenCompletions(
+ this.props.completionTypes,
+ text,
+ cmd.command,
+ cmd.args
+ )
+ );
+ break;
+ case Command.Buffer:
+ this.props.dispatch(
+ consoleActions.getTabCompletions(text, cmd.command, cmd.args, false)
+ );
+ break;
+ case Command.BufferDelete:
+ case Command.BuffersDelete:
+ this.props.dispatch(
+ consoleActions.getTabCompletions(text, cmd.command, cmd.args, true)
+ );
+ break;
+ case Command.BufferDeleteForce:
+ case Command.BuffersDeleteForce:
+ this.props.dispatch(
+ consoleActions.getTabCompletions(text, cmd.command, cmd.args, false)
+ );
+ break;
+ case Command.Set:
+ this.props.dispatch(
+ consoleActions.getPropertyCompletions(text, cmd.command, cmd.args)
+ );
+ break;
}
}
}
@@ -192,6 +211,4 @@ class Console extends React.Component<Props> {
const mapStateToProps = (state: AppState) => ({ ...state });
-export default connect(
- mapStateToProps,
-)(Console);
+export default connect(mapStateToProps)(Console);
diff --git a/src/console/components/console/Completion.tsx b/src/console/components/console/Completion.tsx
index e2fa1de..9b4cf15 100644
--- a/src/console/components/console/Completion.tsx
+++ b/src/console/components/console/Completion.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import CompletionItem from './CompletionItem';
-import CompletionTitle from './CompletionTitle';
+import React from "react";
+import CompletionItem from "./CompletionItem";
+import CompletionTitle from "./CompletionTitle";
interface Item {
icon?: string;
@@ -52,8 +52,10 @@ class Completion extends React.Component<Props, State> {
if (nextProps.select < 0) {
viewOffset = 0;
} else if (prevState.select < nextProps.select) {
- viewOffset = Math.max(prevState.viewOffset,
- viewSelect - nextProps.size + 1);
+ viewOffset = Math.max(
+ prevState.viewOffset,
+ viewSelect - nextProps.size + 1
+ );
} else if (prevState.select > nextProps.select) {
viewOffset = Math.min(prevState.viewOffset, viewSelect);
}
@@ -65,18 +67,17 @@ class Completion extends React.Component<Props, State> {
let index = 0;
for (const group of this.props.completions) {
- eles.push(<CompletionTitle
- key={`group-${index}`}
- title={ group.name }
- />);
+ eles.push(<CompletionTitle key={`group-${index}`} title={group.name} />);
for (const item of group.items) {
- eles.push(<CompletionItem
- key={`item-${index}`}
- icon={item.icon}
- caption={item.caption}
- url={item.url}
- highlight={index === this.props.select}
- / >);
+ eles.push(
+ <CompletionItem
+ key={`item-${index}`}
+ icon={item.icon}
+ caption={item.caption}
+ url={item.url}
+ highlight={index === this.props.select}
+ />
+ );
++index;
}
}
@@ -84,11 +85,7 @@ class Completion extends React.Component<Props, State> {
const viewOffset = this.state.viewOffset;
eles = eles.slice(viewOffset, viewOffset + this.props.size);
- return (
- <ul className='vimvixen-console-completion'>
- { eles }
- </ul>
- );
+ return <ul className="vimvixen-console-completion">{eles}</ul>;
}
}
diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx
index 1cbf3de..657f360 100644
--- a/src/console/components/console/CompletionItem.tsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
interface Props {
highlight: boolean;
@@ -9,21 +9,21 @@ interface Props {
}
const CompletionItem = (props: Props) => {
- let className = 'vimvixen-console-completion-item';
+ let className = "vimvixen-console-completion-item";
if (props.highlight) {
- className += ' vimvixen-completion-selected';
+ className += " vimvixen-completion-selected";
}
- return <li
- className={className}
- style={{ backgroundImage: 'url(' + props.icon + ')' }}
- >
- <span
- className='vimvixen-console-completion-item-caption'
- >{props.caption}</span>
- <span
- className='vimvixen-console-completion-item-url'
- >{props.url}</span>
- </li>;
+ return (
+ <li
+ className={className}
+ style={{ backgroundImage: "url(" + props.icon + ")" }}
+ >
+ <span className="vimvixen-console-completion-item-caption">
+ {props.caption}
+ </span>
+ <span className="vimvixen-console-completion-item-url">{props.url}</span>
+ </li>
+ );
};
CompletionItem.propTypes = {
diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx
index 2543619..7257006 100644
--- a/src/console/components/console/CompletionTitle.tsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
+import React from "react";
interface Props {
title: string;
}
const CompletionTitle = (props: Props) => {
- return <li className='vimvixen-console-completion-title'>
- {props.title}
- </li>;
+ return <li className="vimvixen-console-completion-title">{props.title}</li>;
};
export default CompletionTitle;
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index 54ea251..e412a0c 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
interface Props {
mode: string;
@@ -24,20 +24,18 @@ class Input extends React.Component<Props> {
}
render() {
- let prompt = '';
- if (this.props.mode === 'command') {
- prompt = ':';
- } else if (this.props.mode === 'find') {
- prompt = '/';
+ let prompt = "";
+ if (this.props.mode === "command") {
+ prompt = ":";
+ } else if (this.props.mode === "find") {
+ prompt = "/";
}
return (
- <div className='vimvixen-console-command'>
- <i className='vimvixen-console-command-prompt'>
- { prompt }
- </i>
+ <div className="vimvixen-console-command">
+ <i className="vimvixen-console-command-prompt">{prompt}</i>
<input
- className='vimvixen-console-command-input'
+ className="vimvixen-console-command-input"
ref={this.input}
onBlur={this.props.onBlur}
onKeyDown={this.props.onKeyDown}
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index 9fa2788..fd1c9d7 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
interface Props {
mode: string;
@@ -7,18 +7,18 @@ interface Props {
const Message = (props: Props) => {
switch (props.mode) {
- case 'error':
- return (
- <p className='vimvixen-console-message vimvixen-console-error'>
- { props.children }
- </p>
- );
- case 'info':
- return (
- <p className='vimvixen-console-message vimvixen-console-info'>
- { props.children }
- </p>
- );
+ case "error":
+ return (
+ <p className="vimvixen-console-message vimvixen-console-error">
+ {props.children}
+ </p>
+ );
+ case "info":
+ return (
+ <p className="vimvixen-console-message vimvixen-console-info">
+ {props.children}
+ </p>
+ );
}
return null;
};
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 22:57:11 +0000