aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/settings/components/index.tsx')
-rw-r--r--src/settings/components/index.tsx222
1 files changed, 118 insertions, 104 deletions
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<typeof mapStateToProps>;
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<Props> {
componentDidMount() {
@@ -34,97 +38,103 @@ class SettingsComponent extends React.Component<Props> {
}
renderFormFields(form: FormSettings) {
- return <div>
- <fieldset>
- <legend>Keybindings</legend>
- <KeymapsForm
- value={form.keymaps}
- onChange={this.bindKeymapsForm.bind(this)}
- onBlur={this.save.bind(this)}
- />
- </fieldset>
- <fieldset>
- <legend>Search Engines</legend>
- <SearchForm
- value={form.search}
- onChange={this.bindSearchForm.bind(this)}
- onBlur={this.save.bind(this)}
- />
- </fieldset>
- <fieldset>
- <legend>Blacklist</legend>
- <BlacklistForm
- value={form.blacklist}
- onChange={this.bindBlacklistForm.bind(this)}
- onBlur={this.save.bind(this)}
- />
- </fieldset>
- <fieldset>
- <legend>Partial blacklist</legend>
- <PartialBlacklistForm
- value={form.blacklist}
- onChange={this.bindBlacklistForm.bind(this)}
- onBlur={this.save.bind(this)}
- />
- </fieldset>
- <fieldset>
- <legend>Properties</legend>
- <PropertiesForm
- types={Properties.types()}
- value={form.properties.toJSON()}
- onChange={this.bindPropertiesForm.bind(this)}
- onBlur={this.save.bind(this)}
- />
- </fieldset>
- </div>;
+ return (
+ <div>
+ <fieldset>
+ <legend>Keybindings</legend>
+ <KeymapsForm
+ value={form.keymaps}
+ onChange={this.bindKeymapsForm.bind(this)}
+ onBlur={this.save.bind(this)}
+ />
+ </fieldset>
+ <fieldset>
+ <legend>Search Engines</legend>
+ <SearchForm
+ value={form.search}
+ onChange={this.bindSearchForm.bind(this)}
+ onBlur={this.save.bind(this)}
+ />
+ </fieldset>
+ <fieldset>
+ <legend>Blacklist</legend>
+ <BlacklistForm
+ value={form.blacklist}
+ onChange={this.bindBlacklistForm.bind(this)}
+ onBlur={this.save.bind(this)}
+ />
+ </fieldset>
+ <fieldset>
+ <legend>Partial blacklist</legend>
+ <PartialBlacklistForm
+ value={form.blacklist}
+ onChange={this.bindBlacklistForm.bind(this)}
+ onBlur={this.save.bind(this)}
+ />
+ </fieldset>
+ <fieldset>
+ <legend>Properties</legend>
+ <PropertiesForm
+ types={Properties.types()}
+ value={form.properties.toJSON()}
+ onChange={this.bindPropertiesForm.bind(this)}
+ onBlur={this.save.bind(this)}
+ />
+ </fieldset>
+ </div>
+ );
}
renderJsonFields(json: JSONTextSettings, error: string) {
- return <div>
- <Input
- type='textarea'
- name='json'
- label='Plain JSON'
- spellCheck={false}
- error={error}
- onValueChange={this.bindJson.bind(this)}
- onBlur={this.save.bind(this)}
- value={json.toJSONText()}
- />
- </div>;
+ return (
+ <div>
+ <Input
+ type="textarea"
+ name="json"
+ label="Plain JSON"
+ spellCheck={false}
+ error={error}
+ onValueChange={this.bindJson.bind(this)}
+ onBlur={this.save.bind(this)}
+ value={json.toJSONText()}
+ />
+ </div>
+ );
}
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 (
<div>
<h1>Configure Vim-Vixen</h1>
- <form className='vimvixen-settings-form'>
+ <form className="vimvixen-settings-form">
<Input
- type='radio'
- id='setting-source-form'
- name='source'
- label='Use form'
- checked={this.props.source === 'form'}
- value='form'
+ type="radio"
+ id="setting-source-form"
+ name="source"
+ label="Use form"
+ checked={this.props.source === "form"}
+ value="form"
onValueChange={this.bindSource.bind(this)}
- disabled={disabled} />
+ disabled={disabled}
+ />
<Input
- type='radio'
- name='source'
- label='Use plain JSON'
- checked={this.props.source === 'json'}
- value='json'
+ type="radio"
+ name="source"
+ label="Use plain JSON"
+ checked={this.props.source === "json"}
+ value="json"
onValueChange={this.bindSource.bind(this)}
- disabled={disabled} />
- { fields }
+ disabled={disabled}
+ />
+ {fields}
</form>
</div>
);
@@ -142,7 +152,8 @@ class SettingsComponent extends React.Component<Props> {
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<Props> {
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<Props> {
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 }))
+ );
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 08:17:44 +0000