From 25111f9de4b7959cdd97b51bfdd2f1c2a7124e48 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 29 Apr 2019 10:31:58 +0900 Subject: [PATCH] Declare component prop types on console --- .../components/{console.jsx => Console.jsx} | 21 ++++++-- .../{completion.jsx => Completion.jsx} | 49 +++++++++---------- .../components/console/CompletionItem.jsx | 28 +++++++++++ .../components/console/CompletionTitle.jsx | 14 ++++++ .../console/{input.jsx => Input.jsx} | 13 ++++- .../console/{message.jsx => Message.jsx} | 11 ++++- src/console/index.jsx | 2 +- 7 files changed, 103 insertions(+), 35 deletions(-) rename src/console/components/{console.jsx => Console.jsx} (87%) rename src/console/components/console/{completion.jsx => Completion.jsx} (68%) create mode 100644 src/console/components/console/CompletionItem.jsx create mode 100644 src/console/components/console/CompletionTitle.jsx rename src/console/components/console/{input.jsx => Input.jsx} (72%) rename src/console/components/console/{message.jsx => Message.jsx} (69%) 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';