From e1dac618a8b8929f601c7ec8aca3842c5ebf9d03 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 13 Apr 2020 20:37:36 +0900 Subject: Use plugin:prettier/recommended --- src/settings/components/form/BlacklistForm.tsx | 71 ++++--- src/settings/components/form/KeymapsForm.tsx | 54 ++--- .../components/form/PartialBlacklistForm.tsx | 100 ++++++---- src/settings/components/form/PropertiesForm.tsx | 66 +++--- src/settings/components/form/SearchForm.tsx | 112 ++++++----- src/settings/components/index.tsx | 222 +++++++++++---------- src/settings/components/ui/AddButton.tsx | 15 +- src/settings/components/ui/DeleteButton.tsx | 15 +- src/settings/components/ui/Input.tsx | 89 +++++---- 9 files changed, 418 insertions(+), 326 deletions(-) (limited to 'src/settings/components') diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx index 51c32f4..859cb9f 100644 --- a/src/settings/components/form/BlacklistForm.tsx +++ b/src/settings/components/form/BlacklistForm.tsx @@ -1,8 +1,8 @@ -import './BlacklistForm.scss'; -import AddButton from '../ui/AddButton'; -import DeleteButton from '../ui/DeleteButton'; -import React from 'react'; -import Blacklist, { BlacklistItem } from '../../../shared/settings/Blacklist'; +import "./BlacklistForm.scss"; +import AddButton from "../ui/AddButton"; +import DeleteButton from "../ui/DeleteButton"; +import React from "react"; +import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist"; interface Props { value: Blacklist; @@ -18,45 +18,56 @@ class BlacklistForm extends React.Component { }; render() { - return
- { - this.props.value.items.map((item, index) => { + return ( +
+ {this.props.value.items.map((item, index) => { if (item.partial) { return null; } - return
- - -
; - }) - } - -
; + return ( +
+ + +
+ ); + })} + +
+ ); } bindValue(e: any) { const name = e.target.name; - const index = e.target.getAttribute('data-index'); + const index = e.target.getAttribute("data-index"); const items = this.props.value.items; - if (name === 'url') { + if (name === "url") { items[index] = new BlacklistItem(e.target.value, false, []); - } else if (name === 'add') { - items.push(new BlacklistItem('', false, [])); - } else if (name === 'delete') { + } else if (name === "add") { + items.push(new BlacklistItem("", false, [])); + } else if (name === "delete") { items.splice(index, 1); } this.props.onChange(new Blacklist(items)); - if (name === 'delete') { + if (name === "delete") { this.props.onBlur(); } } diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx index dc74de3..b9af0df 100644 --- a/src/settings/components/form/KeymapsForm.tsx +++ b/src/settings/components/form/KeymapsForm.tsx @@ -1,8 +1,8 @@ -import './KeymapsForm.scss'; -import React from 'react'; -import Input from '../ui/Input'; -import keymaps from '../../keymaps'; -import { FormKeymaps } from '../../../shared/SettingData'; +import "./KeymapsForm.scss"; +import React from "react"; +import Input from "../ui/Input"; +import keymaps from "../../keymaps"; +import { FormKeymaps } from "../../../shared/SettingData"; interface Props { value: FormKeymaps; @@ -19,25 +19,31 @@ class KeymapsForm extends React.Component { render() { const values = this.props.value.toJSON(); - return
- { - keymaps.fields.map((group, index) => { - return
- { - group.map(([name, label]) => { - const value = values[name] || ''; - return ; - }) - } -
; - }) - } -
; + return ( +
+ {keymaps.fields.map((group, index) => { + return ( +
+ {group.map(([name, label]) => { + const value = values[name] || ""; + return ( + + ); + })} +
+ ); + })} +
+ ); } bindValue(name: string, value: string) { diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx index 1807e28..95beee8 100644 --- a/src/settings/components/form/PartialBlacklistForm.tsx +++ b/src/settings/components/form/PartialBlacklistForm.tsx @@ -1,8 +1,8 @@ -import './PartialBlacklistForm.scss'; -import AddButton from '../ui/AddButton'; -import DeleteButton from '../ui/DeleteButton'; -import React from 'react'; -import Blacklist, { BlacklistItem } from '../../../shared/settings/Blacklist'; +import "./PartialBlacklistForm.scss"; +import AddButton from "../ui/AddButton"; +import DeleteButton from "../ui/DeleteButton"; +import React from "react"; +import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist"; interface Props { value: Blacklist; @@ -18,59 +18,77 @@ class PartialBlacklistForm extends React.Component { }; render() { - return
-
-
URL
-
Keys
-
- { - this.props.value.items.map((item, index) => { + return ( +
+
+
URL
+
Keys
+
+ {this.props.value.items.map((item, index) => { if (!item.partial) { return null; } - return
- - - -
; - }) - } - -
; + return ( +
+ + + +
+ ); + })} + +
+ ); } bindValue(e: any) { const name = e.target.name; - const index = e.target.getAttribute('data-index'); + const index = e.target.getAttribute("data-index"); const items = this.props.value.items; - if (name === 'url') { + if (name === "url") { const current = items[index]; items[index] = new BlacklistItem(e.target.value, true, current.keys); - } else if (name === 'keys') { + } else if (name === "keys") { const current = items[index]; items[index] = new BlacklistItem( - current.pattern, true, e.target.value.split(',')); - } else if (name === 'add') { - items.push(new BlacklistItem('', true, [])); - } else if (name === 'delete') { + current.pattern, + true, + e.target.value.split(",") + ); + } else if (name === "add") { + items.push(new BlacklistItem("", true, [])); + } else if (name === "delete") { items.splice(index, 1); } this.props.onChange(new Blacklist(items)); - if (name === 'delete') { + if (name === "delete") { this.props.onBlur(); } } diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx index e648971..aebd9b1 100644 --- a/src/settings/components/form/PropertiesForm.tsx +++ b/src/settings/components/form/PropertiesForm.tsx @@ -1,9 +1,9 @@ -import './PropertiesForm.scss'; -import React from 'react'; +import "./PropertiesForm.scss"; +import React from "react"; interface Props { - types: {[key: string]: string}; - value: {[key: string]: any}; + types: { [key: string]: string }; + value: { [key: string]: any }; onChange: (value: any) => void; onBlur: () => void; } @@ -20,18 +20,18 @@ class PropertiesForm extends React.Component { const types = this.props.types; const values = this.props.value; - return
- { - Object.keys(types).map((name) => { + return ( +
+ {Object.keys(types).map((name) => { const type = types[name]; - let inputType = ''; + let inputType = ""; let onChange = this.bindValue.bind(this); - if (type === 'string') { - inputType = 'text'; - } else if (type === 'number') { - inputType = 'number'; - } else if (type === 'boolean') { - inputType = 'checkbox'; + if (type === "string") { + inputType = "text"; + } else if (type === "number") { + inputType = "number"; + } else if (type === "boolean") { + inputType = "checkbox"; // Settings are saved onBlur, but checkbox does not fire it onChange = (e) => { @@ -41,29 +41,33 @@ class PropertiesForm extends React.Component { } else { return null; } - return
- -
; - }) - } -
; + return ( +
+ +
+ ); + })} +
+ ); } bindValue(e: React.ChangeEvent) { const name = e.target.name; const next = { ...this.props.value }; - if (e.target.type.toLowerCase() === 'checkbox') { + if (e.target.type.toLowerCase() === "checkbox") { next[name] = e.target.checked; - } else if (e.target.type.toLowerCase() === 'number') { + } else if (e.target.type.toLowerCase() === "number") { next[name] = Number(e.target.value); } else { next[name] = e.target.value; diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx index 5dc786b..a4d923d 100644 --- a/src/settings/components/form/SearchForm.tsx +++ b/src/settings/components/form/SearchForm.tsx @@ -1,8 +1,8 @@ -import './SearchForm.scss'; -import React from 'react'; -import AddButton from '../ui/AddButton'; -import DeleteButton from '../ui/DeleteButton'; -import { FormSearch } from '../../../shared/SettingData'; +import "./SearchForm.scss"; +import React from "react"; +import AddButton from "../ui/AddButton"; +import DeleteButton from "../ui/DeleteButton"; +import { FormSearch } from "../../../shared/SettingData"; interface Props { value: FormSearch; @@ -12,68 +12,88 @@ interface Props { class SearchForm extends React.Component { public static defaultProps: Props = { - value: FormSearch.fromJSON({ default: '', engines: []}), + value: FormSearch.fromJSON({ default: "", engines: [] }), onChange: () => {}, onBlur: () => {}, }; render() { const value = this.props.value.toJSON(); - return
-
-
Name
-
URL
-
Default
-
- { - value.engines.map((engine, index) => { - return
- - -
- - + return ( +
+
+
Name
+
URL
+
Default
+
+ {value.engines.map((engine, index) => { + return ( +
+ + +
+ + +
-
; - }) - } - -
; + ); + })} + +
+ ); } // eslint-disable-next-line max-statements bindValue(e: any) { const value = this.props.value.toJSON(); const name = e.target.name; - const index = Number(e.target.getAttribute('data-index')); + const index = Number(e.target.getAttribute("data-index")); const next: typeof value = { default: value.default, engines: value.engines.slice(), }; - if (name === 'name') { + if (name === "name") { next.engines[index][0] = e.target.value; next.default = value.engines[index][0]; - } else if (name === 'url') { + } else if (name === "url") { next.engines[index][1] = e.target.value; - } else if (name === 'default') { + } else if (name === "default") { next.default = value.engines[index][0]; - } else if (name === 'add') { - next.engines.push(['', '']); - } else if (name === 'delete' && value.engines.length > 1) { + } else if (name === "add") { + next.engines.push(["", ""]); + } else if (name === "delete" && value.engines.length > 1) { next.engines.splice(index, 1); if (value.engines[index][0] === value.default) { const nextIndex = Math.min(index, next.engines.length - 1); @@ -82,7 +102,7 @@ class SearchForm extends React.Component { } this.props.onChange(FormSearch.fromJSON(next)); - if (name === 'delete' || name === 'default') { + if (name === "delete" || name === "default") { this.props.onBlur(); } } diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx index f4f0326..5793a8f 100644 --- a/src/settings/components/index.tsx +++ b/src/settings/components/index.tsx @@ -1,32 +1,36 @@ -import './site.scss'; -import React from 'react'; -import { connect } from 'react-redux'; -import Input from './ui/Input'; -import SearchForm from './form/SearchForm'; -import KeymapsForm from './form/KeymapsForm'; -import BlacklistForm from './form/BlacklistForm'; -import PropertiesForm from './form/PropertiesForm'; -import PartialBlacklistForm from './form/PartialBlacklistForm'; -import * as settingActions from '../../settings/actions/setting'; +import "./site.scss"; +import React from "react"; +import { connect } from "react-redux"; +import Input from "./ui/Input"; +import SearchForm from "./form/SearchForm"; +import KeymapsForm from "./form/KeymapsForm"; +import BlacklistForm from "./form/BlacklistForm"; +import PropertiesForm from "./form/PropertiesForm"; +import PartialBlacklistForm from "./form/PartialBlacklistForm"; +import * as settingActions from "../../settings/actions/setting"; import SettingData, { - FormKeymaps, FormSearch, FormSettings, JSONTextSettings, -} from '../../shared/SettingData'; -import { State as AppState } from '../reducers/setting'; -import Properties from '../../shared/settings/Properties'; -import Blacklist from '../../shared/settings/Blacklist'; + FormKeymaps, + FormSearch, + FormSettings, + JSONTextSettings, +} from "../../shared/SettingData"; +import { State as AppState } from "../reducers/setting"; +import Properties from "../../shared/settings/Properties"; +import Blacklist from "../../shared/settings/Blacklist"; const DO_YOU_WANT_TO_CONTINUE = - 'Some settings in JSON can be lost when migrating. ' + - 'Do you want to continue?'; + "Some settings in JSON can be lost when migrating. " + + "Do you want to continue?"; type StateProps = ReturnType; interface DispatchProps { - dispatch: (action: any) => void, + dispatch: (action: any) => void; } -type Props = StateProps & DispatchProps & { - // FIXME - store: any; -}; +type Props = StateProps & + DispatchProps & { + // FIXME + store: any; + }; class SettingsComponent extends React.Component { componentDidMount() { @@ -34,97 +38,103 @@ class SettingsComponent extends React.Component { } renderFormFields(form: FormSettings) { - return
-
- Keybindings - -
-
- Search Engines - -
-
- Blacklist - -
-
- Partial blacklist - -
-
- Properties - -
-
; + return ( +
+
+ Keybindings + +
+
+ Search Engines + +
+
+ Blacklist + +
+
+ Partial blacklist + +
+
+ Properties + +
+
+ ); } renderJsonFields(json: JSONTextSettings, error: string) { - return
- -
; + return ( +
+ +
+ ); } render() { let fields = null; const disabled = this.props.error.length > 0; - if (this.props.source === 'form') { + if (this.props.source === "form") { fields = this.renderFormFields(this.props.form!!); - } else if (this.props.source === 'json') { + } else if (this.props.source === "json") { fields = this.renderJsonFields(this.props.json!!, this.props.error); } return (

Configure Vim-Vixen

-
+ + disabled={disabled} + /> - { fields } + disabled={disabled} + /> + {fields}
); @@ -142,7 +152,8 @@ class SettingsComponent extends React.Component { const data = new SettingData({ source: this.props.source, form: (this.props.form as FormSettings).buildWithSearch( - FormSearch.fromJSON(value)), + FormSearch.fromJSON(value) + ), }); this.props.dispatch(settingActions.set(data)); } @@ -159,7 +170,8 @@ class SettingsComponent extends React.Component { const data = new SettingData({ source: this.props.source, form: (this.props.form as FormSettings).buildWithProperties( - Properties.fromJSON(value)) + Properties.fromJSON(value) + ), }); this.props.dispatch(settingActions.set(data)); } @@ -174,27 +186,29 @@ class SettingsComponent extends React.Component { bindSource(_name: string, value: string) { const from = this.props.source; - if (from === 'form' && value === 'json') { - this.props.dispatch(settingActions.switchToJson( - this.props.form as FormSettings)); + if (from === "form" && value === "json") { + this.props.dispatch( + settingActions.switchToJson(this.props.form as FormSettings) + ); this.save(); - } else if (from === 'json' && value === 'form') { + } else if (from === "json" && value === "form") { const b = window.confirm(DO_YOU_WANT_TO_CONTINUE); if (!b) { this.forceUpdate(); return; } this.props.dispatch( - settingActions.switchToForm(this.props.json as JSONTextSettings)); + settingActions.switchToForm(this.props.json as JSONTextSettings) + ); this.save(); } } save() { const { source, json, form } = this.props.store.getState(); - this.props.dispatch(settingActions.save( - new SettingData({ source, json, form }), - )); + this.props.dispatch( + settingActions.save(new SettingData({ source, json, form })) + ); } } diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx index bb76d08..c15a732 100644 --- a/src/settings/components/ui/AddButton.tsx +++ b/src/settings/components/ui/AddButton.tsx @@ -1,13 +1,18 @@ -import './AddButton.scss'; -import React from 'react'; +import "./AddButton.scss"; +import React from "react"; type Props = React.AllHTMLAttributes; class AddButton extends React.Component { render() { - return ; + return ( + + ); } } diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx index e666426..df8976e 100644 --- a/src/settings/components/ui/DeleteButton.tsx +++ b/src/settings/components/ui/DeleteButton.tsx @@ -1,13 +1,18 @@ -import './DeleteButton.scss'; -import React from 'react'; +import "./DeleteButton.scss"; +import React from "react"; type Props = React.AllHTMLAttributes; class DeleteButton extends React.Component { render() { - return ; + return ( + + ); } } diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx index 69c14b3..6819ddb 100644 --- a/src/settings/components/ui/Input.tsx +++ b/src/settings/components/ui/Input.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import './Input.scss'; +import React from "react"; +import "./Input.scss"; interface Props extends React.AllHTMLAttributes { name: string; @@ -13,66 +13,75 @@ interface Props extends React.AllHTMLAttributes { class Input extends React.Component { renderText(props: Props) { - const inputClassName = props.error ? 'input-error' : ''; + const inputClassName = props.error ? "input-error" : ""; const pp = { ...props }; delete pp.onValueChange; - return
- - -
; + return ( +
+ + +
+ ); } renderRadio(props: Props) { - const inputClassName = props.error ? 'input-error' : ''; + const inputClassName = props.error ? "input-error" : ""; const pp = { ...props }; delete pp.onValueChange; - return
- -
; + return ( +
+ +
+ ); } renderTextArea(props: Props) { - const inputClassName = props.error ? 'input-error' : ''; + const inputClassName = props.error ? "input-error" : ""; const pp = { ...props }; delete pp.onValueChange; - return
- -