From b002d70070a1b691b635220bc694c48df36faca5 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 6 May 2019 22:17:01 +0900
Subject: src/content
---
src/console/components/Console.tsx | 51 ++++++++++++++----------------
src/console/components/console/Input.tsx | 16 +++++-----
src/console/components/console/Message.tsx | 2 +-
src/console/reducers/index.ts | 2 +-
4 files changed, 34 insertions(+), 37 deletions(-)
(limited to 'src/console')
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 09c0f50..3274047 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -5,23 +5,23 @@ 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';
const COMPLETION_MAX_ITEMS = 33;
-interface Props {
- mode?: string;
- consoleText?: string;
- messageText?: string;
- children?: string;
+type StateProps = ReturnType<typeof mapStateToProps>;
+interface DispatchProps {
+ dispatch: (action: any) => void,
}
+type Props = StateProps & DispatchProps
class Console extends React.Component<Props> {
- private input: HTMLInputElement | null;
+ private input: React.RefObject<Input>;
constructor(props: Props) {
super(props);
- this.input = null;
+ this.input = React.createRef();
}
onBlur() {
@@ -34,7 +34,7 @@ class Console extends React.Component<Props> {
e.stopPropagation();
e.preventDefault();
- let value = e.target.value;
+ let value = (e.target as HTMLInputElement).value;
if (this.props.mode === 'command') {
return this.props.dispatch(consoleActions.enterCommand(value));
} else if (this.props.mode === 'find') {
@@ -55,15 +55,12 @@ class Console extends React.Component<Props> {
}
onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
- if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
- this.props.dispatch(consoleActions.hideCommand());
- }
- switch (e.keyCode) {
- case KeyboardEvent.DOM_VK_ESCAPE:
+ switch (e.key) {
+ case 'Escape':
return this.props.dispatch(consoleActions.hideCommand());
- case KeyboardEvent.DOM_VK_RETURN:
+ case 'Enter':
return this.doEnter(e);
- case KeyboardEvent.DOM_VK_TAB:
+ case 'Tab':
if (e.shiftKey) {
this.props.dispatch(consoleActions.completionPrev());
} else {
@@ -72,22 +69,22 @@ class Console extends React.Component<Props> {
e.stopPropagation();
e.preventDefault();
break;
- case KeyboardEvent.DOM_VK_OPEN_BRACKET:
+ case '[':
if (e.ctrlKey) {
return this.props.dispatch(consoleActions.hideCommand());
}
break;
- case KeyboardEvent.DOM_VK_M:
+ case 'm':
if (e.ctrlKey) {
return this.doEnter(e);
}
break;
- case KeyboardEvent.DOM_VK_N:
+ case 'n':
if (e.ctrlKey) {
this.selectNext(e);
}
break;
- case KeyboardEvent.DOM_VK_P:
+ case 'p':
if (e.ctrlKey) {
this.selectPrev(e);
}
@@ -105,9 +102,6 @@ class Console extends React.Component<Props> {
componentDidUpdate(prevProps: Props) {
- if (!this.input) {
- return;
- }
if (prevProps.mode !== 'command' && this.props.mode === 'command') {
this.props.dispatch(
consoleActions.getCompletions(this.props.consoleText));
@@ -128,7 +122,7 @@ class Console extends React.Component<Props> {
select={this.props.select}
/>
<Input
- ref={(c) => { this.input = c; }}
+ ref={this.input}
mode={this.props.mode}
onBlur={this.onBlur.bind(this)}
onKeyDown={this.onKeyDown.bind(this)}
@@ -148,11 +142,14 @@ class Console extends React.Component<Props> {
focus() {
window.focus();
- if (this.input) {
- this.input.focus();
+ if (this.input.current) {
+ this.input.current.focus();
}
}
}
-const mapStateToProps = (state: any) => state;
-export default connect(mapStateToProps)(Console);
+const mapStateToProps = (state: AppState) => ({ ...state });
+
+export default connect(
+ mapStateToProps,
+)(Console);
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index d0348bd..54ea251 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -3,23 +3,23 @@ import React from 'react';
interface Props {
mode: string;
value: string;
- onBlur: (e: React.FocusEvent<Element>) => void;
- onKeyDown: (e: React.KeyboardEvent<Element>) => void;
- onChange: (e: React.ChangeEvent<Element>) => void;
+ onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+ onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+ onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
class Input extends React.Component<Props> {
- private input: HTMLInputElement | null;
+ private input: React.RefObject<HTMLInputElement>;
constructor(props: Props) {
super(props);
- this.input = null;
+ this.input = React.createRef();
}
focus() {
- if (this.input) {
- this.input.focus();
+ if (this.input.current) {
+ this.input.current.focus();
}
}
@@ -38,7 +38,7 @@ class Input extends React.Component<Props> {
</i>
<input
className='vimvixen-console-command-input'
- ref={(c) => { this.input = c; }}
+ ref={this.input}
onBlur={this.props.onBlur}
onKeyDown={this.props.onKeyDown}
onChange={this.props.onChange}
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index 07a929e..9fa2788 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -2,7 +2,7 @@ import React from 'react';
interface Props {
mode: string;
- children: string[];
+ children: string;
}
const Message = (props: Props) => {
diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts
index 37ed715..b6be483 100644
--- a/src/console/reducers/index.ts
+++ b/src/console/reducers/index.ts
@@ -1,6 +1,6 @@
import * as actions from '../actions';
-interface State {
+export interface State {
mode: string;
messageText: string;
consoleText: string;
--
cgit v1.2.3