From 55f15c9350cc531324e6182895f494eeb8174bc6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
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 ++++-----
src/settings/components/form/blacklist-form.jsx | 4 +--
src/settings/components/form/keymaps-form.jsx | 4 +--
src/settings/components/form/properties-form.jsx | 4 +--
src/settings/components/form/search-form.jsx | 4 +--
src/settings/components/index.jsx | 8 +++---
src/settings/components/ui/add-button.jsx | 4 +--
src/settings/components/ui/delete-button.jsx | 4 +--
src/settings/components/ui/input.jsx | 4 +--
src/settings/index.jsx | 4 +--
15 files changed, 51 insertions(+), 49 deletions(-)
(limited to 'src')
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 <Message mode={ this.props.mode } >
{ this.props.messageText }
</Message>;
+ 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 <li className='vimvixen-console-completion-title' >{props.title}</li>;
@@ -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 @@
<title>VimVixen console</title>
<script src='console.js'></script>
</head>
- <body class='vimvixen-console'></body>
+ <body>
+ <div id='vimvixen-console' class='vimvixen-console'></div>
+ </body>
</html>
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(
<Provider store={store} >
<Console></Console>
</Provider>,
- document.body);
+ wrapper);
});
const onMessage = (message) => {
diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 7ae9652..492c3af 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -1,9 +1,9 @@
import './blacklist-form.scss';
import AddButton from '../ui/add-button';
import DeleteButton from '../ui/delete-button';
-import { h, Component } from 'preact';
+import React from 'react';
-class BlacklistForm extends Component {
+class BlacklistForm extends React.Component {
render() {
let value = this.props.value;
diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx
index ca51c96..8c0a83f 100644
--- a/src/settings/components/form/keymaps-form.jsx
+++ b/src/settings/components/form/keymaps-form.jsx
@@ -1,5 +1,5 @@
import './keymaps-form.scss';
-import { h, Component } from 'preact';
+import React from 'react';
import Input from '../ui/input';
const KeyMapFields = [
@@ -72,7 +72,7 @@ const KeyMapFields = [
const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
-class KeymapsForm extends Component {
+class KeymapsForm extends React.Component {
render() {
let values = this.props.value;
diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/properties-form.jsx
index ceb79d7..7d591d5 100644
--- a/src/settings/components/form/properties-form.jsx
+++ b/src/settings/components/form/properties-form.jsx
@@ -1,7 +1,7 @@
import './properties-form.scss';
-import { h, Component } from 'preact';
+import React from 'react';
-class PropertiesForm extends Component {
+class PropertiesForm extends React.Component {
render() {
let types = this.props.types;
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
index 2d5f01b..81204f3 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/search-form.jsx
@@ -1,9 +1,9 @@
import './search-form.scss';
-import { h, Component } from 'preact';
+import React from 'react';
import AddButton from '../ui/add-button';
import DeleteButton from '../ui/delete-button';
-class SearchForm extends Component {
+class SearchForm extends React.Component {
render() {
let value = this.props.value;
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 9633359..9dae25e 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -1,6 +1,6 @@
import './site.scss';
-import { h, Component } from 'preact';
-import { connect } from 'preact-redux';
+import React from 'react';
+import { connect } from 'react-redux';
import Input from './ui/input';
import SearchForm from './form/search-form';
import KeymapsForm from './form/keymaps-form';
@@ -13,7 +13,7 @@ const DO_YOU_WANT_TO_CONTINUE =
'Some settings in JSON can be lost when migrating. ' +
'Do you want to continue?';
-class SettingsComponent extends Component {
+class SettingsComponent extends React.Component {
componentDidMount() {
this.props.dispatch(settingActions.load());
}
@@ -136,7 +136,7 @@ class SettingsComponent extends Component {
this.props.dispatch(settingActions.switchToForm(this.props.json));
}
- let settings = this.context.store.getState();
+ let settings = this.props.getState();
this.props.dispatch(settingActions.save(settings));
}
}
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx
index 79292d8..031d28b 100644
--- a/src/settings/components/ui/add-button.jsx
+++ b/src/settings/components/ui/add-button.jsx
@@ -1,7 +1,7 @@
import './add-button.scss';
-import { h, Component } from 'preact';
+import React from 'react';
-class AddButton extends Component {
+class AddButton extends React.Component {
render() {
return <input
className='ui-add-button' type='button' value='✚'
diff --git a/src/settings/components/ui/delete-button.jsx b/src/settings/components/ui/delete-button.jsx
index 8077a76..3dfe14a 100644
--- a/src/settings/components/ui/delete-button.jsx
+++ b/src/settings/components/ui/delete-button.jsx
@@ -1,7 +1,7 @@
import './delete-button.scss';
-import { h, Component } from 'preact';
+import React from 'react';
-class DeleteButton extends Component {
+class DeleteButton extends React.Component {
render() {
return <input
className='ui-delete-button' type='button' value='✖'
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
index e99dbc7..2f42b62 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/input.jsx
@@ -1,7 +1,7 @@
-import { h, Component } from 'preact';
+import React from 'react';
import './input.scss';
-class Input extends Component {
+class Input extends React.Component {
renderText(props) {
let inputClassName = props.error ? 'input-error' : '';
diff --git a/src/settings/index.jsx b/src/settings/index.jsx
index 8097d31..9df1073 100644
--- a/src/settings/index.jsx
+++ b/src/settings/index.jsx
@@ -1,7 +1,7 @@
-import { h, render } from 'preact';
+import { render } from 'react';
import SettingsComponent from './components';
import reducer from './reducers/setting';
-import { Provider } from 'preact-redux';
+import { Provider } from 'react-redux';
import promise from 'redux-promise';
import { createStore, applyMiddleware } from 'redux';
--
cgit v1.2.3