aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/form
diff options
context:
space:
mode:
Diffstat (limited to 'src/settings/components/form')
-rw-r--r--src/settings/components/form/BlacklistForm.tsx71
-rw-r--r--src/settings/components/form/KeymapsForm.tsx54
-rw-r--r--src/settings/components/form/PartialBlacklistForm.tsx100
-rw-r--r--src/settings/components/form/PropertiesForm.tsx66
-rw-r--r--src/settings/components/form/SearchForm.tsx112
5 files changed, 231 insertions, 172 deletions
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<Props> {
};
render() {
- return <div className='form-blacklist-form'>
- {
- this.props.value.items.map((item, index) => {
+ return (
+ <div className="form-blacklist-form">
+ {this.props.value.items.map((item, index) => {
if (item.partial) {
return null;
}
- return <div key={index} className='form-blacklist-form-row'>
- <input data-index={index} type='text' name='url'
- className='column-url' value={item.pattern}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <DeleteButton data-index={index} name='delete'
- onClick={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- </div>;
- })
- }
- <AddButton name='add' style={{ float: 'right' }}
- onClick={this.bindValue.bind(this)} />
- </div>;
+ return (
+ <div key={index} className="form-blacklist-form-row">
+ <input
+ data-index={index}
+ type="text"
+ name="url"
+ className="column-url"
+ value={item.pattern}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ <DeleteButton
+ data-index={index}
+ name="delete"
+ onClick={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </div>
+ );
+ })}
+ <AddButton
+ name="add"
+ style={{ float: "right" }}
+ onClick={this.bindValue.bind(this)}
+ />
+ </div>
+ );
}
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<Props> {
render() {
const values = this.props.value.toJSON();
- return <div className='form-keymaps-form'>
- {
- keymaps.fields.map((group, index) => {
- return <div key={index} className='form-keymaps-form-field-group'>
- {
- group.map(([name, label]) => {
- const value = values[name] || '';
- return <Input
- type='text' id={name} name={name} key={name}
- label={label} value={value}
- onValueChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />;
- })
- }
- </div>;
- })
- }
- </div>;
+ return (
+ <div className="form-keymaps-form">
+ {keymaps.fields.map((group, index) => {
+ return (
+ <div key={index} className="form-keymaps-form-field-group">
+ {group.map(([name, label]) => {
+ const value = values[name] || "";
+ return (
+ <Input
+ type="text"
+ id={name}
+ name={name}
+ key={name}
+ label={label}
+ value={value}
+ onValueChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ );
+ })}
+ </div>
+ );
+ })}
+ </div>
+ );
}
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<Props> {
};
render() {
- return <div className='form-partial-blacklist-form'>
- <div className='form-partial-blacklist-form-header'>
- <div className='column-url'>URL</div>
- <div className='column-keys'>Keys</div>
- </div>
- {
- this.props.value.items.map((item, index) => {
+ return (
+ <div className="form-partial-blacklist-form">
+ <div className="form-partial-blacklist-form-header">
+ <div className="column-url">URL</div>
+ <div className="column-keys">Keys</div>
+ </div>
+ {this.props.value.items.map((item, index) => {
if (!item.partial) {
return null;
}
- return <div key={index} className='form-partial-blacklist-form-row'>
- <input data-index={index} type='text' name='url'
- className='column-url' value={item.pattern}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <input data-index={index} type='text' name='keys'
- className='column-keys' value={item.keys.join(',')}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <DeleteButton data-index={index} name='delete'
- onClick={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- </div>;
- })
- }
- <AddButton name='add' style={{ float: 'right' }}
- onClick={this.bindValue.bind(this)} />
- </div>;
+ return (
+ <div key={index} className="form-partial-blacklist-form-row">
+ <input
+ data-index={index}
+ type="text"
+ name="url"
+ className="column-url"
+ value={item.pattern}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ <input
+ data-index={index}
+ type="text"
+ name="keys"
+ className="column-keys"
+ value={item.keys.join(",")}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ <DeleteButton
+ data-index={index}
+ name="delete"
+ onClick={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ </div>
+ );
+ })}
+ <AddButton
+ name="add"
+ style={{ float: "right" }}
+ onClick={this.bindValue.bind(this)}
+ />
+ </div>
+ );
}
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<Props> {
const types = this.props.types;
const values = this.props.value;
- return <div className='form-properties-form'>
- {
- Object.keys(types).map((name) => {
+ return (
+ <div className="form-properties-form">
+ {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<Props> {
} else {
return null;
}
- return <div key={name} className='form-properties-form-row'>
- <label>
- <span className='column-name'>{name}</span>
- <input type={inputType} name={name}
- className='column-input'
- value={values[name] ? values[name] : ''}
- onChange={onChange}
- onBlur={this.props.onBlur}
- checked={values[name]}
- />
- </label>
- </div>;
- })
- }
- </div>;
+ return (
+ <div key={name} className="form-properties-form-row">
+ <label>
+ <span className="column-name">{name}</span>
+ <input
+ type={inputType}
+ name={name}
+ className="column-input"
+ value={values[name] ? values[name] : ""}
+ onChange={onChange}
+ onBlur={this.props.onBlur}
+ checked={values[name]}
+ />
+ </label>
+ </div>
+ );
+ })}
+ </div>
+ );
}
bindValue(e: React.ChangeEvent<HTMLInputElement>) {
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<Props> {
public static defaultProps: Props = {
- value: FormSearch.fromJSON({ default: '', engines: []}),
+ value: FormSearch.fromJSON({ default: "", engines: [] }),
onChange: () => {},
onBlur: () => {},
};
render() {
const value = this.props.value.toJSON();
- return <div className='form-search-form'>
- <div className='form-search-form-header'>
- <div className='column-name'>Name</div>
- <div className='column-url'>URL</div>
- <div className='column-option'>Default</div>
- </div>
- {
- value.engines.map((engine, index) => {
- return <div key={index} className='form-search-form-row'>
- <input data-index={index} type='text' name='name'
- className='column-name' value={engine[0]}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <input data-index={index} type='text' name='url'
- placeholder='http://example.com/?q={}'
- className='column-url' value={engine[1]}
- onChange={this.bindValue.bind(this)}
- onBlur={this.props.onBlur}
- />
- <div className='column-option'>
- <input data-index={index} type='radio' name='default'
- checked={value.default === engine[0]}
- onChange={this.bindValue.bind(this)} />
- <DeleteButton data-index={index} name='delete'
- onClick={this.bindValue.bind(this)} />
+ return (
+ <div className="form-search-form">
+ <div className="form-search-form-header">
+ <div className="column-name">Name</div>
+ <div className="column-url">URL</div>
+ <div className="column-option">Default</div>
+ </div>
+ {value.engines.map((engine, index) => {
+ return (
+ <div key={index} className="form-search-form-row">
+ <input
+ data-index={index}
+ type="text"
+ name="name"
+ className="column-name"
+ value={engine[0]}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ <input
+ data-index={index}
+ type="text"
+ name="url"
+ placeholder="http://example.com/?q={}"
+ className="column-url"
+ value={engine[1]}
+ onChange={this.bindValue.bind(this)}
+ onBlur={this.props.onBlur}
+ />
+ <div className="column-option">
+ <input
+ data-index={index}
+ type="radio"
+ name="default"
+ checked={value.default === engine[0]}
+ onChange={this.bindValue.bind(this)}
+ />
+ <DeleteButton
+ data-index={index}
+ name="delete"
+ onClick={this.bindValue.bind(this)}
+ />
+ </div>
</div>
- </div>;
- })
- }
- <AddButton name='add' style={{ float: 'right' }}
- onClick={this.bindValue.bind(this)} />
- </div>;
+ );
+ })}
+ <AddButton
+ name="add"
+ style={{ float: "right" }}
+ onClick={this.bindValue.bind(this)}
+ />
+ </div>
+ );
}
// 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<Props> {
}
this.props.onChange(FormSearch.fromJSON(next));
- if (name === 'delete' || name === 'default') {
+ if (name === "delete" || name === "default") {
this.props.onBlur();
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-16 19:08:32 +0000