diff --git a/src/console/components/console.jsx b/src/console/components/Console.jsx
similarity index 87%
rename from src/console/components/console.jsx
rename to src/console/components/Console.jsx
index b792088..6a9cebd 100644
--- a/src/console/components/console.jsx
+++ b/src/console/components/Console.jsx
@@ -1,14 +1,15 @@
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 PropTypes from 'prop-types';
+import Input from './console/Input';
+import Completion from './console/Completion';
+import Message from './console/Message';
import * as consoleActions from '../../console/actions/console';
const COMPLETION_MAX_ITEMS = 33;
-class ConsoleComponent extends React.Component {
+class Console extends React.Component {
onBlur() {
if (this.props.mode === 'command' || this.props.mode === 'find') {
return this.props.dispatch(consoleActions.hideCommand());
@@ -137,5 +138,15 @@ class ConsoleComponent extends React.Component {
}
}
+Console.propTypes = {
+ mode: PropTypes.string,
+ onBlur: PropTypes.func,
+ onKeyDown: PropTypes.func,
+ onInput: PropTypes.func,
+ consoleText: PropTypes.string,
+ messageText: PropTypes.string,
+ children: PropTypes.string,
+};
+
const mapStateToProps = state => state;
-export default connect(mapStateToProps)(ConsoleComponent);
+export default connect(mapStateToProps)(Console);
diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/Completion.jsx
similarity index 68%
rename from src/console/components/console/completion.jsx
rename to src/console/components/console/Completion.jsx
index 5d248a0..5477cb6 100644
--- a/src/console/components/console/completion.jsx
+++ b/src/console/components/console/Completion.jsx
@@ -1,29 +1,9 @@
import React from 'react';
+import PropTypes from 'prop-types';
+import CompletionItem from './CompletionItem';
+import CompletionTitle from './CompletionTitle';
-const CompletionTitle = (props) => {
- return
{props.title};
-};
-
-const CompletionItem = (props) => {
- let className = 'vimvixen-console-completion-item';
- if (props.highlight) {
- className += ' vimvixen-completion-selected';
- }
- return
- {props.caption}
- {props.url}
- ;
-};
-
-
-class CompletionComponent extends React.Component {
+class Completion extends React.Component {
constructor() {
super();
this.state = { viewOffset: 0, select: -1 };
@@ -63,9 +43,13 @@ class CompletionComponent extends React.Component {
let index = 0;
for (let group of this.props.completions) {
- eles.push();
+ eles.push();
for (let item of group.items) {
eles.push( {
+ let className = 'vimvixen-console-completion-item';
+ if (props.highlight) {
+ className += ' vimvixen-completion-selected';
+ }
+ return
+ {props.caption}
+ {props.url}
+ ;
+};
+
+CompletionItem.propTypes = {
+ highlight: PropTypes.bool,
+ caption: PropTypes.string,
+ url: PropTypes.string,
+};
+
+export default CompletionItem;
diff --git a/src/console/components/console/CompletionTitle.jsx b/src/console/components/console/CompletionTitle.jsx
new file mode 100644
index 0000000..4fcba3f
--- /dev/null
+++ b/src/console/components/console/CompletionTitle.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CompletionTitle = (props) => {
+ return
+ {props.title}
+ ;
+};
+
+CompletionTitle.propTypes = {
+ title: PropTypes.string,
+};
+
+export default CompletionTitle;
diff --git a/src/console/components/console/input.jsx b/src/console/components/console/Input.jsx
similarity index 72%
rename from src/console/components/console/input.jsx
rename to src/console/components/console/Input.jsx
index 3ac075e..c85d252 100644
--- a/src/console/components/console/input.jsx
+++ b/src/console/components/console/Input.jsx
@@ -1,6 +1,7 @@
import React from 'react';
+import PropTypes from 'prop-types';
-export default class InputComponent extends React.Component {
+class Input extends React.Component {
focus() {
this.input.focus();
}
@@ -30,3 +31,13 @@ export default class InputComponent extends React.Component {
);
}
}
+
+Input.propTypes = {
+ mode: PropTypes.string,
+ value: PropTypes.string,
+ onBlur: PropTypes.func,
+ onKeyDown: PropTypes.func,
+ onInput: PropTypes.func,
+};
+
+export default Input;
diff --git a/src/console/components/console/message.jsx b/src/console/components/console/Message.jsx
similarity index 69%
rename from src/console/components/console/message.jsx
rename to src/console/components/console/Message.jsx
index 6c8297f..dd96248 100644
--- a/src/console/components/console/message.jsx
+++ b/src/console/components/console/Message.jsx
@@ -1,6 +1,7 @@
import React from 'react';
+import PropTypes from 'prop-types';
-export default function Message(props) {
+const Message = (props) => {
switch (props.mode) {
case 'error':
return (
@@ -15,4 +16,10 @@ export default function Message(props) {
);
}
-}
+};
+
+Message.propTypes = {
+ children: PropTypes.string,
+};
+
+export default Message;
diff --git a/src/console/index.jsx b/src/console/index.jsx
index 0d0a8b9..3190a9a 100644
--- a/src/console/index.jsx
+++ b/src/console/index.jsx
@@ -4,7 +4,7 @@ import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import * as consoleActions from 'console/actions/console';
import { Provider } from 'react-redux';
-import Console from './components/console';
+import Console from './components/Console';
import React from 'react';
import ReactDOM from 'react-dom';