blacklist form

jh-changes
Shin'ya Ueoka 7 years ago
parent bbad1c6c6a
commit df10208ed5
  1. 47
      src/settings/components/form/blacklist-form.jsx
  2. 9
      src/settings/components/form/blacklist-form.scss
  3. 29
      src/settings/components/index.jsx
  4. 3
      src/shared/default-settings.js

@ -0,0 +1,47 @@
import './blacklist-form.scss';
import DeleteButton from '../ui/delete-button';
import { h, Component } from 'preact';
class BlacklistForm extends Component {
render() {
let value = this.props.value;
if (!value) {
value = [];
}
return <div className='form-blacklist-form'>
{
value.map((url, index) => {
return <div key={index} className='form-blacklist-form-row'>
<input data-index={index} type='text' name='url'
className='column-url' value={url}
onChange={this.bindValue.bind(this)} />
<DeleteButton data-index={index} name='delete'
onClick={this.bindValue.bind(this)} />
</div>;
})
}
</div>;
}
bindValue(e) {
if (!this.props.onChange) {
return;
}
let name = e.target.name;
let index = e.target.getAttribute('data-index');
let next = this.props.value.slice();
if (name === 'url') {
next[index] = e.target.value;
} else if (name === 'delete') {
next.splice(index, 1);
}
this.props.onChange(next);
}
}
export default BlacklistForm;

@ -0,0 +1,9 @@
.form-blacklist-form {
&-row {
display: flex;
.column-url {
flex: 1;
}
}
}

@ -3,6 +3,7 @@ import { h, Component } from 'preact';
import Input from './ui/input'; import Input from './ui/input';
import SearchEngineForm from './form/search-engine-form'; import SearchEngineForm from './form/search-engine-form';
import KeymapsForm from './form/keymaps-form'; import KeymapsForm from './form/keymaps-form';
import BlacklistForm from './form/blacklist-form';
import * as settingActions from 'settings/actions/setting'; import * as settingActions from 'settings/actions/setting';
import * as validator from 'shared/validators/setting'; import * as validator from 'shared/validators/setting';
@ -42,14 +43,21 @@ class SettingsComponent extends Component {
<legend>Keybindings</legend> <legend>Keybindings</legend>
<KeymapsForm <KeymapsForm
value={this.state.settings.form.keymaps} value={this.state.settings.form.keymaps}
onChange={this.bindKeymapsForm.bind(this)} onChange={value => this.bindForm('keymaps', value)}
/> />
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Search Engines</legend> <legend>Search Engines</legend>
<SearchEngineForm <SearchEngineForm
value={this.state.settings.form.search} value={this.state.settings.form.search}
onChange={this.bindSearchForm.bind(this)} onChange={value => this.bindForm('search', value)}
/>
</fieldset>
<fieldset>
<legend>Blacklist</legend>
<BlacklistForm
value={this.state.settings.form.blacklist}
onChange={value => this.bindForm('blacklist', value)}
/> />
</fieldset> </fieldset>
</div>; </div>;
@ -110,16 +118,13 @@ class SettingsComponent extends Component {
} }
} }
bindSearchForm(value) { bindForm(name, value) {
let next = Object.assign({}, this.state); let next = Object.assign({}, this.state, {
next.settings.form.search = value; settings: Object.assign({}, this.state.settings, {
this.setState(next); form: Object.assign({}, this.state.settings.form)
this.context.store.dispatch(settingActions.save(next.settings)); })
} });
next.settings.form[name] = value;
bindKeymapsForm(value) {
let next = Object.assign({}, this.state);
next.settings.form.keymaps = value;
this.setState(next); this.setState(next);
this.context.store.dispatch(settingActions.save(next.settings)); this.context.store.dispatch(settingActions.save(next.settings));
} }

@ -125,6 +125,7 @@ export default {
['twitter', 'https,//twitter.com/search?q={}'], ['twitter', 'https,//twitter.com/search?q={}'],
['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'], ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'],
] ]
} },
'blacklist': [],
} }
}; };