From c60d0e7392fc708e961614d6b756a045de74f458 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 30 Apr 2019 14:00:07 +0900 Subject: Rename .js/.jsx to .ts/.tsx --- src/console/actions/console.js | 96 ------------- src/console/actions/console.ts | 96 +++++++++++++ src/console/actions/index.js | 13 -- src/console/actions/index.ts | 13 ++ src/console/components/Console.jsx | 149 --------------------- src/console/components/Console.tsx | 149 +++++++++++++++++++++ src/console/components/console/Completion.jsx | 86 ------------ src/console/components/console/Completion.tsx | 86 ++++++++++++ src/console/components/console/CompletionItem.jsx | 28 ---- src/console/components/console/CompletionItem.tsx | 28 ++++ src/console/components/console/CompletionTitle.jsx | 14 -- src/console/components/console/CompletionTitle.tsx | 14 ++ src/console/components/console/Input.jsx | 43 ------ src/console/components/console/Input.tsx | 43 ++++++ src/console/components/console/Message.jsx | 25 ---- src/console/components/console/Message.tsx | 25 ++++ src/console/index.jsx | 42 ------ src/console/index.tsx | 42 ++++++ src/console/reducers/index.js | 102 -------------- src/console/reducers/index.ts | 102 ++++++++++++++ 20 files changed, 598 insertions(+), 598 deletions(-) delete mode 100644 src/console/actions/console.js create mode 100644 src/console/actions/console.ts delete mode 100644 src/console/actions/index.js create mode 100644 src/console/actions/index.ts delete mode 100644 src/console/components/Console.jsx create mode 100644 src/console/components/Console.tsx delete mode 100644 src/console/components/console/Completion.jsx create mode 100644 src/console/components/console/Completion.tsx delete mode 100644 src/console/components/console/CompletionItem.jsx create mode 100644 src/console/components/console/CompletionItem.tsx delete mode 100644 src/console/components/console/CompletionTitle.jsx create mode 100644 src/console/components/console/CompletionTitle.tsx delete mode 100644 src/console/components/console/Input.jsx create mode 100644 src/console/components/console/Input.tsx delete mode 100644 src/console/components/console/Message.jsx create mode 100644 src/console/components/console/Message.tsx delete mode 100644 src/console/index.jsx create mode 100644 src/console/index.tsx delete mode 100644 src/console/reducers/index.js create mode 100644 src/console/reducers/index.ts (limited to 'src/console') diff --git a/src/console/actions/console.js b/src/console/actions/console.js deleted file mode 100644 index 3713a76..0000000 --- a/src/console/actions/console.js +++ /dev/null @@ -1,96 +0,0 @@ -import messages from 'shared/messages'; -import actions from 'console/actions'; - -const hide = () => { - return { - type: actions.CONSOLE_HIDE, - }; -}; - -const showCommand = (text) => { - return { - type: actions.CONSOLE_SHOW_COMMAND, - text: text - }; -}; - -const showFind = () => { - return { - type: actions.CONSOLE_SHOW_FIND, - }; -}; - -const showError = (text) => { - return { - type: actions.CONSOLE_SHOW_ERROR, - text: text - }; -}; - -const showInfo = (text) => { - return { - type: actions.CONSOLE_SHOW_INFO, - text: text - }; -}; - -const hideCommand = () => { - window.top.postMessage(JSON.stringify({ - type: messages.CONSOLE_UNFOCUS, - }), '*'); - return { - type: actions.CONSOLE_HIDE_COMMAND, - }; -}; - -const enterCommand = async(text) => { - await browser.runtime.sendMessage({ - type: messages.CONSOLE_ENTER_COMMAND, - text, - }); - return hideCommand(text); -}; - -const enterFind = (text) => { - window.top.postMessage(JSON.stringify({ - type: messages.CONSOLE_ENTER_FIND, - text, - }), '*'); - return hideCommand(); -}; - -const setConsoleText = (consoleText) => { - return { - type: actions.CONSOLE_SET_CONSOLE_TEXT, - consoleText, - }; -}; - -const getCompletions = async(text) => { - let completions = await browser.runtime.sendMessage({ - type: messages.CONSOLE_QUERY_COMPLETIONS, - text, - }); - return { - type: actions.CONSOLE_SET_COMPLETIONS, - completions, - completionSource: text, - }; -}; - -const completionNext = () => { - return { - type: actions.CONSOLE_COMPLETION_NEXT, - }; -}; - -const completionPrev = () => { - return { - type: actions.CONSOLE_COMPLETION_PREV, - }; -}; - -export { - hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText, - enterCommand, enterFind, getCompletions, completionNext, completionPrev -}; diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts new file mode 100644 index 0000000..3713a76 --- /dev/null +++ b/src/console/actions/console.ts @@ -0,0 +1,96 @@ +import messages from 'shared/messages'; +import actions from 'console/actions'; + +const hide = () => { + return { + type: actions.CONSOLE_HIDE, + }; +}; + +const showCommand = (text) => { + return { + type: actions.CONSOLE_SHOW_COMMAND, + text: text + }; +}; + +const showFind = () => { + return { + type: actions.CONSOLE_SHOW_FIND, + }; +}; + +const showError = (text) => { + return { + type: actions.CONSOLE_SHOW_ERROR, + text: text + }; +}; + +const showInfo = (text) => { + return { + type: actions.CONSOLE_SHOW_INFO, + text: text + }; +}; + +const hideCommand = () => { + window.top.postMessage(JSON.stringify({ + type: messages.CONSOLE_UNFOCUS, + }), '*'); + return { + type: actions.CONSOLE_HIDE_COMMAND, + }; +}; + +const enterCommand = async(text) => { + await browser.runtime.sendMessage({ + type: messages.CONSOLE_ENTER_COMMAND, + text, + }); + return hideCommand(text); +}; + +const enterFind = (text) => { + window.top.postMessage(JSON.stringify({ + type: messages.CONSOLE_ENTER_FIND, + text, + }), '*'); + return hideCommand(); +}; + +const setConsoleText = (consoleText) => { + return { + type: actions.CONSOLE_SET_CONSOLE_TEXT, + consoleText, + }; +}; + +const getCompletions = async(text) => { + let completions = await browser.runtime.sendMessage({ + type: messages.CONSOLE_QUERY_COMPLETIONS, + text, + }); + return { + type: actions.CONSOLE_SET_COMPLETIONS, + completions, + completionSource: text, + }; +}; + +const completionNext = () => { + return { + type: actions.CONSOLE_COMPLETION_NEXT, + }; +}; + +const completionPrev = () => { + return { + type: actions.CONSOLE_COMPLETION_PREV, + }; +}; + +export { + hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText, + enterCommand, enterFind, getCompletions, completionNext, completionPrev +}; diff --git a/src/console/actions/index.js b/src/console/actions/index.js deleted file mode 100644 index b394179..0000000 --- a/src/console/actions/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default { - // console commands - CONSOLE_HIDE: 'console.hide', - CONSOLE_SHOW_COMMAND: 'console.show.command', - CONSOLE_SHOW_ERROR: 'console.show.error', - CONSOLE_SHOW_INFO: 'console.show.info', - CONSOLE_HIDE_COMMAND: 'console.hide.command', - CONSOLE_SET_CONSOLE_TEXT: 'console.set.command', - CONSOLE_SET_COMPLETIONS: 'console.set.completions', - CONSOLE_COMPLETION_NEXT: 'console.completion.next', - CONSOLE_COMPLETION_PREV: 'console.completion.prev', - CONSOLE_SHOW_FIND: 'console.show.find', -}; diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts new file mode 100644 index 0000000..b394179 --- /dev/null +++ b/src/console/actions/index.ts @@ -0,0 +1,13 @@ +export default { + // console commands + CONSOLE_HIDE: 'console.hide', + CONSOLE_SHOW_COMMAND: 'console.show.command', + CONSOLE_SHOW_ERROR: 'console.show.error', + CONSOLE_SHOW_INFO: 'console.show.info', + CONSOLE_HIDE_COMMAND: 'console.hide.command', + CONSOLE_SET_CONSOLE_TEXT: 'console.set.command', + CONSOLE_SET_COMPLETIONS: 'console.set.completions', + CONSOLE_COMPLETION_NEXT: 'console.completion.next', + CONSOLE_COMPLETION_PREV: 'console.completion.prev', + CONSOLE_SHOW_FIND: 'console.show.find', +}; diff --git a/src/console/components/Console.jsx b/src/console/components/Console.jsx deleted file mode 100644 index 5427e43..0000000 --- a/src/console/components/Console.jsx +++ /dev/null @@ -1,149 +0,0 @@ -import './console.scss'; -import { connect } from 'react-redux'; -import React from 'react'; -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 Console extends React.Component { - onBlur() { - if (this.props.mode === 'command' || this.props.mode === 'find') { - return this.props.dispatch(consoleActions.hideCommand()); - } - } - - doEnter(e) { - e.stopPropagation(); - e.preventDefault(); - - let value = e.target.value; - if (this.props.mode === 'command') { - return this.props.dispatch(consoleActions.enterCommand(value)); - } else if (this.props.mode === 'find') { - return this.props.dispatch(consoleActions.enterFind(value)); - } - } - - selectNext(e) { - this.props.dispatch(consoleActions.completionNext()); - e.stopPropagation(); - e.preventDefault(); - } - - selectPrev(e) { - this.props.dispatch(consoleActions.completionPrev()); - e.stopPropagation(); - e.preventDefault(); - } - - onKeyDown(e) { - if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { - this.props.dispatch(consoleActions.hideCommand()); - } - switch (e.keyCode) { - case KeyboardEvent.DOM_VK_ESCAPE: - return this.props.dispatch(consoleActions.hideCommand()); - case KeyboardEvent.DOM_VK_RETURN: - return this.doEnter(e); - case KeyboardEvent.DOM_VK_TAB: - if (e.shiftKey) { - this.props.dispatch(consoleActions.completionPrev()); - } else { - this.props.dispatch(consoleActions.completionNext()); - } - e.stopPropagation(); - e.preventDefault(); - break; - case KeyboardEvent.DOM_VK_OPEN_BRACKET: - if (e.ctrlKey) { - return this.props.dispatch(consoleActions.hideCommand()); - } - break; - case KeyboardEvent.DOM_VK_M: - if (e.ctrlKey) { - return this.doEnter(e); - } - break; - case KeyboardEvent.DOM_VK_N: - if (e.ctrlKey) { - this.selectNext(e); - } - break; - case KeyboardEvent.DOM_VK_P: - if (e.ctrlKey) { - this.selectPrev(e); - } - break; - } - } - - onChange(e) { - let text = e.target.value; - this.props.dispatch(consoleActions.setConsoleText(text)); - if (this.props.mode === 'command') { - this.props.dispatch(consoleActions.getCompletions(text)); - } - } - - - componentDidUpdate(prevProps) { - if (!this.input) { - return; - } - if (prevProps.mode !== 'command' && this.props.mode === 'command') { - this.props.dispatch( - consoleActions.getCompletions(this.props.consoleText)); - this.focus(); - } else if (prevProps.mode !== 'find' && this.props.mode === 'find') { - this.focus(); - } - } - - render() { - switch (this.props.mode) { - case 'command': - case 'find': - return
- - { this.input = c; }} - mode={this.props.mode} - onBlur={this.onBlur.bind(this)} - onKeyDown={this.onKeyDown.bind(this)} - onChange={this.onChange.bind(this)} - value={this.props.consoleText} - /> -
; - case 'info': - case 'error': - return - { this.props.messageText } - ; - default: - return null; - } - } - - focus() { - window.focus(); - this.input.focus(); - } -} - -Console.propTypes = { - mode: PropTypes.string, - consoleText: PropTypes.string, - messageText: PropTypes.string, - children: PropTypes.string, -}; - -const mapStateToProps = state => state; -export default connect(mapStateToProps)(Console); diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx new file mode 100644 index 0000000..5427e43 --- /dev/null +++ b/src/console/components/Console.tsx @@ -0,0 +1,149 @@ +import './console.scss'; +import { connect } from 'react-redux'; +import React from 'react'; +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 Console extends React.Component { + onBlur() { + if (this.props.mode === 'command' || this.props.mode === 'find') { + return this.props.dispatch(consoleActions.hideCommand()); + } + } + + doEnter(e) { + e.stopPropagation(); + e.preventDefault(); + + let value = e.target.value; + if (this.props.mode === 'command') { + return this.props.dispatch(consoleActions.enterCommand(value)); + } else if (this.props.mode === 'find') { + return this.props.dispatch(consoleActions.enterFind(value)); + } + } + + selectNext(e) { + this.props.dispatch(consoleActions.completionNext()); + e.stopPropagation(); + e.preventDefault(); + } + + selectPrev(e) { + this.props.dispatch(consoleActions.completionPrev()); + e.stopPropagation(); + e.preventDefault(); + } + + onKeyDown(e) { + if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { + this.props.dispatch(consoleActions.hideCommand()); + } + switch (e.keyCode) { + case KeyboardEvent.DOM_VK_ESCAPE: + return this.props.dispatch(consoleActions.hideCommand()); + case KeyboardEvent.DOM_VK_RETURN: + return this.doEnter(e); + case KeyboardEvent.DOM_VK_TAB: + if (e.shiftKey) { + this.props.dispatch(consoleActions.completionPrev()); + } else { + this.props.dispatch(consoleActions.completionNext()); + } + e.stopPropagation(); + e.preventDefault(); + break; + case KeyboardEvent.DOM_VK_OPEN_BRACKET: + if (e.ctrlKey) { + return this.props.dispatch(consoleActions.hideCommand()); + } + break; + case KeyboardEvent.DOM_VK_M: + if (e.ctrlKey) { + return this.doEnter(e); + } + break; + case KeyboardEvent.DOM_VK_N: + if (e.ctrlKey) { + this.selectNext(e); + } + break; + case KeyboardEvent.DOM_VK_P: + if (e.ctrlKey) { + this.selectPrev(e); + } + break; + } + } + + onChange(e) { + let text = e.target.value; + this.props.dispatch(consoleActions.setConsoleText(text)); + if (this.props.mode === 'command') { + this.props.dispatch(consoleActions.getCompletions(text)); + } + } + + + componentDidUpdate(prevProps) { + if (!this.input) { + return; + } + if (prevProps.mode !== 'command' && this.props.mode === 'command') { + this.props.dispatch( + consoleActions.getCompletions(this.props.consoleText)); + this.focus(); + } else if (prevProps.mode !== 'find' && this.props.mode === 'find') { + this.focus(); + } + } + + render() { + switch (this.props.mode) { + case 'command': + case 'find': + return
+ + { this.input = c; }} + mode={this.props.mode} + onBlur={this.onBlur.bind(this)} + onKeyDown={this.onKeyDown.bind(this)} + onChange={this.onChange.bind(this)} + value={this.props.consoleText} + /> +
; + case 'info': + case 'error': + return + { this.props.messageText } + ; + default: + return null; + } + } + + focus() { + window.focus(); + this.input.focus(); + } +} + +Console.propTypes = { + mode: PropTypes.string, + consoleText: PropTypes.string, + messageText: PropTypes.string, + children: PropTypes.string, +}; + +const mapStateToProps = state => state; +export default connect(mapStateToProps)(Console); diff --git a/src/console/components/console/Completion.jsx b/src/console/components/console/Completion.jsx deleted file mode 100644 index 5477cb6..0000000 --- a/src/console/components/console/Completion.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import CompletionItem from './CompletionItem'; -import CompletionTitle from './CompletionTitle'; - -class Completion extends React.Component { - constructor() { - super(); - this.state = { viewOffset: 0, select: -1 }; - } - - static getDerivedStateFromProps(nextProps, prevState) { - if (prevState.select === nextProps.select) { - return null; - } - - let viewSelect = (() => { - let index = 0; - for (let i = 0; i < nextProps.completions.length; ++i) { - ++index; - let g = nextProps.completions[i]; - if (nextProps.select + i + 1 < index + g.items.length) { - return nextProps.select + i + 1; - } - index += g.items.length; - } - })(); - - let viewOffset = 0; - if (nextProps.select < 0) { - viewOffset = 0; - } else if (prevState.select < nextProps.select) { - viewOffset = Math.max(prevState.viewOffset, - viewSelect - nextProps.size + 1); - } else if (prevState.select > nextProps.select) { - viewOffset = Math.min(prevState.viewOffset, viewSelect); - } - return { viewOffset, select: nextProps.select }; - } - - render() { - let eles = []; - let index = 0; - - for (let group of this.props.completions) { - eles.push(); - for (let item of group.items) { - eles.push(); - ++index; - } - } - - let viewOffset = this.state.viewOffset; - eles = eles.slice(viewOffset, viewOffset + this.props.size); - - return ( -
    - { eles } -
- ); - } -} - -Completion.propTypes = { - select: PropTypes.number, - size: PropTypes.number, - completions: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.string, - items: PropTypes.arrayOf(PropTypes.shape({ - icon: PropTypes.string, - caption: PropTypes.string, - url: PropTypes.string, - })), - })), -}; - -export default Completion; diff --git a/src/console/components/console/Completion.tsx b/src/console/components/console/Completion.tsx new file mode 100644 index 0000000..5477cb6 --- /dev/null +++ b/src/console/components/console/Completion.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import CompletionItem from './CompletionItem'; +import CompletionTitle from './CompletionTitle'; + +class Completion extends React.Component { + constructor() { + super(); + this.state = { viewOffset: 0, select: -1 }; + } + + static getDerivedStateFromProps(nextProps, prevState) { + if (prevState.select === nextProps.select) { + return null; + } + + let viewSelect = (() => { + let index = 0; + for (let i = 0; i < nextProps.completions.length; ++i) { + ++index; + let g = nextProps.completions[i]; + if (nextProps.select + i + 1 < index + g.items.length) { + return nextProps.select + i + 1; + } + index += g.items.length; + } + })(); + + let viewOffset = 0; + if (nextProps.select < 0) { + viewOffset = 0; + } else if (prevState.select < nextProps.select) { + viewOffset = Math.max(prevState.viewOffset, + viewSelect - nextProps.size + 1); + } else if (prevState.select > nextProps.select) { + viewOffset = Math.min(prevState.viewOffset, viewSelect); + } + return { viewOffset, select: nextProps.select }; + } + + render() { + let eles = []; + let index = 0; + + for (let group of this.props.completions) { + eles.push(); + for (let item of group.items) { + eles.push(); + ++index; + } + } + + let viewOffset = this.state.viewOffset; + eles = eles.slice(viewOffset, viewOffset + this.props.size); + + return ( +
    + { eles } +
+ ); + } +} + +Completion.propTypes = { + select: PropTypes.number, + size: PropTypes.number, + completions: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.string, + items: PropTypes.arrayOf(PropTypes.shape({ + icon: PropTypes.string, + caption: PropTypes.string, + url: PropTypes.string, + })), + })), +}; + +export default Completion; diff --git a/src/console/components/console/CompletionItem.jsx b/src/console/components/console/CompletionItem.jsx deleted file mode 100644 index 3dc552b..0000000 --- a/src/console/components/console/CompletionItem.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const CompletionItem = (props) => { - 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/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx new file mode 100644 index 0000000..3dc552b --- /dev/null +++ b/src/console/components/console/CompletionItem.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const CompletionItem = (props) => { + 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 deleted file mode 100644 index 4fcba3f..0000000 --- a/src/console/components/console/CompletionTitle.jsx +++ /dev/null @@ -1,14 +0,0 @@ -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/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx new file mode 100644 index 0000000..4fcba3f --- /dev/null +++ b/src/console/components/console/CompletionTitle.tsx @@ -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 deleted file mode 100644 index cbd3348..0000000 --- a/src/console/components/console/Input.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -class Input extends React.Component { - focus() { - this.input.focus(); - } - - render() { - let prompt = ''; - if (this.props.mode === 'command') { - prompt = ':'; - } else if (this.props.mode === 'find') { - prompt = '/'; - } - - return ( -
    - - { prompt } - - { this.input = c; }} - onBlur={this.props.onBlur} - onKeyDown={this.props.onKeyDown} - onChange={this.props.onChange} - value={this.props.value} - /> -
    - ); - } -} - -Input.propTypes = { - mode: PropTypes.string, - value: PropTypes.string, - onBlur: PropTypes.func, - onKeyDown: PropTypes.func, - onChange: PropTypes.func, -}; - -export default Input; diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx new file mode 100644 index 0000000..cbd3348 --- /dev/null +++ b/src/console/components/console/Input.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +class Input extends React.Component { + focus() { + this.input.focus(); + } + + render() { + let prompt = ''; + if (this.props.mode === 'command') { + prompt = ':'; + } else if (this.props.mode === 'find') { + prompt = '/'; + } + + return ( +
    + + { prompt } + + { this.input = c; }} + onBlur={this.props.onBlur} + onKeyDown={this.props.onKeyDown} + onChange={this.props.onChange} + value={this.props.value} + /> +
    + ); + } +} + +Input.propTypes = { + mode: PropTypes.string, + value: PropTypes.string, + onBlur: PropTypes.func, + onKeyDown: PropTypes.func, + onChange: PropTypes.func, +}; + +export default Input; diff --git a/src/console/components/console/Message.jsx b/src/console/components/console/Message.jsx deleted file mode 100644 index dd96248..0000000 --- a/src/console/components/console/Message.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const Message = (props) => { - switch (props.mode) { - case 'error': - return ( -

    - { props.children } -

    - ); - case 'info': - return ( -

    - { props.children } -

    - ); - } -}; - -Message.propTypes = { - children: PropTypes.string, -}; - -export default Message; diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx new file mode 100644 index 0000000..dd96248 --- /dev/null +++ b/src/console/components/console/Message.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Message = (props) => { + switch (props.mode) { + case 'error': + return ( +

    + { props.children } +

    + ); + case 'info': + return ( +

    + { props.children } +

    + ); + } +}; + +Message.propTypes = { + children: PropTypes.string, +}; + +export default Message; diff --git a/src/console/index.jsx b/src/console/index.jsx deleted file mode 100644 index 3190a9a..0000000 --- a/src/console/index.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import messages from 'shared/messages'; -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 'react-redux'; -import Console from './components/Console'; -import React from 'react'; -import ReactDOM from 'react-dom'; - -const store = createStore( - reducers, - applyMiddleware(promise), -); - -window.addEventListener('load', () => { - let wrapper = document.getElementById('vimvixen-console'); - ReactDOM.render( - - - , - wrapper); -}); - -const onMessage = (message) => { - switch (message.type) { - case messages.CONSOLE_SHOW_COMMAND: - return store.dispatch(consoleActions.showCommand(message.command)); - case messages.CONSOLE_SHOW_FIND: - return store.dispatch(consoleActions.showFind()); - case messages.CONSOLE_SHOW_ERROR: - return store.dispatch(consoleActions.showError(message.text)); - case messages.CONSOLE_SHOW_INFO: - return store.dispatch(consoleActions.showInfo(message.text)); - case messages.CONSOLE_HIDE: - return store.dispatch(consoleActions.hide()); - } -}; - -browser.runtime.onMessage.addListener(onMessage); -let port = browser.runtime.connect({ name: 'vimvixen-console' }); -port.onMessage.addListener(onMessage); diff --git a/src/console/index.tsx b/src/console/index.tsx new file mode 100644 index 0000000..3190a9a --- /dev/null +++ b/src/console/index.tsx @@ -0,0 +1,42 @@ +import messages from 'shared/messages'; +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 'react-redux'; +import Console from './components/Console'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const store = createStore( + reducers, + applyMiddleware(promise), +); + +window.addEventListener('load', () => { + let wrapper = document.getElementById('vimvixen-console'); + ReactDOM.render( + + + , + wrapper); +}); + +const onMessage = (message) => { + switch (message.type) { + case messages.CONSOLE_SHOW_COMMAND: + return store.dispatch(consoleActions.showCommand(message.command)); + case messages.CONSOLE_SHOW_FIND: + return store.dispatch(consoleActions.showFind()); + case messages.CONSOLE_SHOW_ERROR: + return store.dispatch(consoleActions.showError(message.text)); + case messages.CONSOLE_SHOW_INFO: + return store.dispatch(consoleActions.showInfo(message.text)); + case messages.CONSOLE_HIDE: + return store.dispatch(consoleActions.hide()); + } +}; + +browser.runtime.onMessage.addListener(onMessage); +let port = browser.runtime.connect({ name: 'vimvixen-console' }); +port.onMessage.addListener(onMessage); diff --git a/src/console/reducers/index.js b/src/console/reducers/index.js deleted file mode 100644 index 614a72f..0000000 --- a/src/console/reducers/index.js +++ /dev/null @@ -1,102 +0,0 @@ -import actions from 'console/actions'; - -const defaultState = { - mode: '', - messageText: '', - consoleText: '', - completionSource: '', - completions: [], - select: -1, - viewIndex: 0, -}; - -const nextSelection = (state) => { - if (state.completions.length === 0) { - return -1; - } - if (state.select < 0) { - return 0; - } - - let length = state.completions - .map(g => g.items.length) - .reduce((x, y) => x + y); - if (state.select + 1 < length) { - return state.select + 1; - } - return -1; -}; - -const prevSelection = (state) => { - let length = state.completions - .map(g => g.items.length) - .reduce((x, y) => x + y); - if (state.select < 0) { - return length - 1; - } - return state.select - 1; -}; - -const nextConsoleText = (completions, select, defaults) => { - if (select < 0) { - return defaults; - } - let items = completions.map(g => g.items).reduce((g1, g2) => g1.concat(g2)); - return items[select].content; -}; - -// eslint-disable-next-line max-lines-per-function -export default function reducer(state = defaultState, action = {}) { - switch (action.type) { - case actions.CONSOLE_HIDE: - return { ...state, - mode: '', }; - case actions.CONSOLE_SHOW_COMMAND: - return { ...state, - mode: 'command', - consoleText: action.text, - completions: []}; - case actions.CONSOLE_SHOW_FIND: - return { ...state, - mode: 'find', - consoleText: '', - completions: []}; - case actions.CONSOLE_SHOW_ERROR: - return { ...state, - mode: 'error', - messageText: action.text, }; - case actions.CONSOLE_SHOW_INFO: - return { ...state, - mode: 'info', - messageText: action.text, }; - case actions.CONSOLE_HIDE_COMMAND: - return { - ...state, - mode: state.mode === 'command' || state.mode === 'find' ? '' : state.mode, - }; - case actions.CONSOLE_SET_CONSOLE_TEXT: - return { ...state, - consoleText: action.consoleText, }; - case actions.CONSOLE_SET_COMPLETIONS: - return { ...state, - completions: action.completions, - completionSource: action.completionSource, - select: -1 }; - case actions.CONSOLE_COMPLETION_NEXT: { - let select = nextSelection(state); - return { ...state, - select: select, - consoleText: nextConsoleText( - state.completions, select, state.completionSource) }; - } - case actions.CONSOLE_COMPLETION_PREV: { - let select = prevSelection(state); - return { ...state, - select: select, - consoleText: nextConsoleText( - state.completions, select, state.completionSource) }; - } - default: - return state; - } -} diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts new file mode 100644 index 0000000..614a72f --- /dev/null +++ b/src/console/reducers/index.ts @@ -0,0 +1,102 @@ +import actions from 'console/actions'; + +const defaultState = { + mode: '', + messageText: '', + consoleText: '', + completionSource: '', + completions: [], + select: -1, + viewIndex: 0, +}; + +const nextSelection = (state) => { + if (state.completions.length === 0) { + return -1; + } + if (state.select < 0) { + return 0; + } + + let length = state.completions + .map(g => g.items.length) + .reduce((x, y) => x + y); + if (state.select + 1 < length) { + return state.select + 1; + } + return -1; +}; + +const prevSelection = (state) => { + let length = state.completions + .map(g => g.items.length) + .reduce((x, y) => x + y); + if (state.select < 0) { + return length - 1; + } + return state.select - 1; +}; + +const nextConsoleText = (completions, select, defaults) => { + if (select < 0) { + return defaults; + } + let items = completions.map(g => g.items).reduce((g1, g2) => g1.concat(g2)); + return items[select].content; +}; + +// eslint-disable-next-line max-lines-per-function +export default function reducer(state = defaultState, action = {}) { + switch (action.type) { + case actions.CONSOLE_HIDE: + return { ...state, + mode: '', }; + case actions.CONSOLE_SHOW_COMMAND: + return { ...state, + mode: 'command', + consoleText: action.text, + completions: []}; + case actions.CONSOLE_SHOW_FIND: + return { ...state, + mode: 'find', + consoleText: '', + completions: []}; + case actions.CONSOLE_SHOW_ERROR: + return { ...state, + mode: 'error', + messageText: action.text, }; + case actions.CONSOLE_SHOW_INFO: + return { ...state, + mode: 'info', + messageText: action.text, }; + case actions.CONSOLE_HIDE_COMMAND: + return { + ...state, + mode: state.mode === 'command' || state.mode === 'find' ? '' : state.mode, + }; + case actions.CONSOLE_SET_CONSOLE_TEXT: + return { ...state, + consoleText: action.consoleText, }; + case actions.CONSOLE_SET_COMPLETIONS: + return { ...state, + completions: action.completions, + completionSource: action.completionSource, + select: -1 }; + case actions.CONSOLE_COMPLETION_NEXT: { + let select = nextSelection(state); + return { ...state, + select: select, + consoleText: nextConsoleText( + state.completions, select, state.completionSource) }; + } + case actions.CONSOLE_COMPLETION_PREV: { + let select = prevSelection(state); + return { ...state, + select: select, + consoleText: nextConsoleText( + state.completions, select, state.completionSource) }; + } + default: + return state; + } +} -- cgit v1.2.3