From 55f15c9350cc531324e6182895f494eeb8174bc6 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 29 Apr 2019 09:13:59 +0900 Subject: Move to react --- src/console/components/console.jsx | 34 ++++++++++++++------------- src/console/components/console/completion.jsx | 4 ++-- src/console/components/console/input.jsx | 4 ++-- src/console/components/console/message.jsx | 2 -- src/console/index.html | 4 +++- src/console/index.jsx | 12 +++++----- 6 files changed, 31 insertions(+), 29 deletions(-) (limited to 'src/console') diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx index 7994f78..b792088 100644 --- a/src/console/components/console.jsx +++ b/src/console/components/console.jsx @@ -1,6 +1,6 @@ import './console.scss'; -import { connect } from 'preact-redux'; -import { Component, h } from 'preact'; +import { connect } from 'react-redux'; +import React from 'react'; import Input from './console/input'; import Completion from './console/completion'; import Message from './console/message'; @@ -8,10 +8,10 @@ import * as consoleActions from '../../console/actions/console'; const COMPLETION_MAX_ITEMS = 33; -class ConsoleComponent extends Component { +class ConsoleComponent extends React.Component { onBlur() { if (this.props.mode === 'command' || this.props.mode === 'find') { - return this.context.store.dispatch(consoleActions.hideCommand()); + return this.props.dispatch(consoleActions.hideCommand()); } } @@ -21,45 +21,45 @@ class ConsoleComponent extends Component { let value = e.target.value; if (this.props.mode === 'command') { - return this.context.store.dispatch(consoleActions.enterCommand(value)); + return this.props.dispatch(consoleActions.enterCommand(value)); } else if (this.props.mode === 'find') { - return this.context.store.dispatch(consoleActions.enterFind(value)); + return this.props.dispatch(consoleActions.enterFind(value)); } } selectNext(e) { - this.context.store.dispatch(consoleActions.completionNext()); + this.props.dispatch(consoleActions.completionNext()); e.stopPropagation(); e.preventDefault(); } selectPrev(e) { - this.context.store.dispatch(consoleActions.completionPrev()); + this.props.dispatch(consoleActions.completionPrev()); e.stopPropagation(); e.preventDefault(); } onKeyDown(e) { if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { - this.context.store.dispatch(consoleActions.hideCommand()); + this.props.dispatch(consoleActions.hideCommand()); } switch (e.keyCode) { case KeyboardEvent.DOM_VK_ESCAPE: - return this.context.store.dispatch(consoleActions.hideCommand()); + return this.props.dispatch(consoleActions.hideCommand()); case KeyboardEvent.DOM_VK_RETURN: return this.doEnter(e); case KeyboardEvent.DOM_VK_TAB: if (e.shiftKey) { - this.context.store.dispatch(consoleActions.completionPrev()); + this.props.dispatch(consoleActions.completionPrev()); } else { - this.context.store.dispatch(consoleActions.completionNext()); + this.props.dispatch(consoleActions.completionNext()); } e.stopPropagation(); e.preventDefault(); break; case KeyboardEvent.DOM_VK_OPEN_BRACKET: if (e.ctrlKey) { - return this.context.store.dispatch(consoleActions.hideCommand()); + return this.props.dispatch(consoleActions.hideCommand()); } break; case KeyboardEvent.DOM_VK_M: @@ -82,9 +82,9 @@ class ConsoleComponent extends Component { onInput(e) { let text = e.target.value; - this.context.store.dispatch(consoleActions.setConsoleText(text)); + this.props.dispatch(consoleActions.setConsoleText(text)); if (this.props.mode === 'command') { - this.context.store.dispatch(consoleActions.getCompletions(text)); + this.props.dispatch(consoleActions.getCompletions(text)); } } @@ -94,7 +94,7 @@ class ConsoleComponent extends Component { return; } if (prevProps.mode !== 'command' && this.props.mode === 'command') { - this.context.store.dispatch( + this.props.dispatch( consoleActions.getCompletions(this.props.consoleText)); this.focus(); } else if (prevProps.mode !== 'find' && this.props.mode === 'find') { @@ -126,6 +126,8 @@ class ConsoleComponent extends Component { return { this.props.messageText } ; + default: + return null; } } diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx index d836cec..5d248a0 100644 --- a/src/console/components/console/completion.jsx +++ b/src/console/components/console/completion.jsx @@ -1,4 +1,4 @@ -import { Component, h } from 'preact'; +import React from 'react'; const CompletionTitle = (props) => { return
  • {props.title}
    • ; @@ -23,7 +23,7 @@ const CompletionItem = (props) => { }; -class CompletionComponent extends Component { +class CompletionComponent extends React.Component { constructor() { super(); this.state = { viewOffset: 0, select: -1 }; diff --git a/src/console/components/console/input.jsx b/src/console/components/console/input.jsx index d59e6e7..3ac075e 100644 --- a/src/console/components/console/input.jsx +++ b/src/console/components/console/input.jsx @@ -1,6 +1,6 @@ -import { Component, h } from 'preact'; +import React from 'react'; -export default class InputComponent extends Component { +export default class InputComponent extends React.Component { focus() { this.input.focus(); } diff --git a/src/console/components/console/message.jsx b/src/console/components/console/message.jsx index 5b60af4..0370f01 100644 --- a/src/console/components/console/message.jsx +++ b/src/console/components/console/message.jsx @@ -1,5 +1,3 @@ -import { h } from 'preact'; - export default function Message(props) { switch (props.mode) { case 'error': diff --git a/src/console/index.html b/src/console/index.html index 5c1e99c..73e1e23 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -5,5 +5,7 @@ VimVixen console - + +
    + diff --git a/src/console/index.jsx b/src/console/index.jsx index dfd323e..0d0a8b9 100644 --- a/src/console/index.jsx +++ b/src/console/index.jsx @@ -3,11 +3,10 @@ import reducers from 'console/reducers'; import { createStore, applyMiddleware } from 'redux'; import promise from 'redux-promise'; import * as consoleActions from 'console/actions/console'; - -import { Provider } from 'preact-redux'; +import { Provider } from 'react-redux'; import Console from './components/console'; - -import { render, h } from 'preact'; +import React from 'react'; +import ReactDOM from 'react-dom'; const store = createStore( reducers, @@ -15,11 +14,12 @@ const store = createStore( ); window.addEventListener('load', () => { - render( + let wrapper = document.getElementById('vimvixen-console'); + ReactDOM.render( , - document.body); + wrapper); }); const onMessage = (message) => { -- cgit v1.2.3