Clean settings components
This commit is contained in:
parent
25111f9de4
commit
be900aa25c
18 changed files with 77 additions and 74 deletions
|
@ -1,8 +1,8 @@
|
|||
import actions from 'settings/actions';
|
||||
import * as validator from 'shared/settings/validator';
|
||||
import KeymapsForm from '../components/form/keymaps-form';
|
||||
import * as settingsValues from 'shared/settings/values';
|
||||
import * as settingsStorage from 'shared/settings/storage';
|
||||
import keymaps from '../keymaps';
|
||||
|
||||
const load = async() => {
|
||||
let settings = await settingsStorage.loadRaw();
|
||||
|
@ -29,8 +29,7 @@ const save = async(settings) => {
|
|||
const switchToForm = (json) => {
|
||||
try {
|
||||
validator.validate(JSON.parse(json));
|
||||
// AllowdOps filters operations, this is dirty dependency
|
||||
let form = settingsValues.formFromJson(json, KeymapsForm.AllowdOps);
|
||||
let form = settingsValues.formFromJson(json, keymaps.allowedOps);
|
||||
return {
|
||||
type: actions.SETTING_SWITCH_TO_FORM,
|
||||
form,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import './blacklist-form.scss';
|
||||
import AddButton from '../ui/add-button';
|
||||
import DeleteButton from '../ui/delete-button';
|
||||
import './BlacklistForm.scss';
|
||||
import AddButton from '../ui/AddButton';
|
||||
import DeleteButton from '../ui/DeleteButton';
|
||||
import React from 'react';
|
||||
|
||||
class BlacklistForm extends React.Component {
|
||||
|
@ -23,7 +23,7 @@ class BlacklistForm extends React.Component {
|
|||
</div>;
|
||||
})
|
||||
}
|
||||
<AddButton name='add' style='float:right'
|
||||
<AddButton name='add' style={{ float: 'right' }}
|
||||
onClick={this.bindValue.bind(this)} />
|
||||
</div>;
|
||||
}
|
47
src/settings/components/form/KeymapsForm.jsx
Normal file
47
src/settings/components/form/KeymapsForm.jsx
Normal file
|
@ -0,0 +1,47 @@
|
|||
import './KeymapsForm.scss';
|
||||
import React from 'react';
|
||||
import Input from '../ui/Input';
|
||||
import keymaps from '../../keymaps';
|
||||
|
||||
class KeymapsForm extends React.Component {
|
||||
|
||||
render() {
|
||||
let values = this.props.value;
|
||||
if (!values) {
|
||||
values = {};
|
||||
}
|
||||
return <div className='form-keymaps-form'>
|
||||
{
|
||||
keymaps.fields.map((group, index) => {
|
||||
return <div key={index} className='form-keymaps-form-field-group'>
|
||||
{
|
||||
group.map((field) => {
|
||||
let name = field[0];
|
||||
let label = field[1];
|
||||
let value = values[name];
|
||||
return <Input
|
||||
type='text' id={name} name={name} key={name}
|
||||
label={label} value={value}
|
||||
onChange={this.bindValue.bind(this)}
|
||||
/>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
|
||||
bindValue(e) {
|
||||
if (!this.props.onChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
let next = { ...this.props.value };
|
||||
next[e.target.name] = e.target.value;
|
||||
|
||||
this.props.onChange(next);
|
||||
}
|
||||
}
|
||||
|
||||
export default KeymapsForm;
|
|
@ -1,4 +1,4 @@
|
|||
import './properties-form.scss';
|
||||
import './PropertiesForm.scss';
|
||||
import React from 'react';
|
||||
|
||||
class PropertiesForm extends React.Component {
|
|
@ -1,7 +1,7 @@
|
|||
import './search-form.scss';
|
||||
import './SearchForm.scss';
|
||||
import React from 'react';
|
||||
import AddButton from '../ui/add-button';
|
||||
import DeleteButton from '../ui/delete-button';
|
||||
import AddButton from '../ui/AddButton';
|
||||
import DeleteButton from '../ui/DeleteButton';
|
||||
|
||||
class SearchForm extends React.Component {
|
||||
|
||||
|
@ -40,7 +40,7 @@ class SearchForm extends React.Component {
|
|||
</div>;
|
||||
})
|
||||
}
|
||||
<AddButton name='add' style='float:right'
|
||||
<AddButton name='add' style={{ float: 'right' }}
|
||||
onClick={this.bindValue.bind(this)} />
|
||||
</div>;
|
||||
}
|
|
@ -1,11 +1,11 @@
|
|||
import './site.scss';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Input from './ui/input';
|
||||
import SearchForm from './form/search-form';
|
||||
import KeymapsForm from './form/keymaps-form';
|
||||
import BlacklistForm from './form/blacklist-form';
|
||||
import PropertiesForm from './form/properties-form';
|
||||
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 * as properties from 'shared/settings/properties';
|
||||
import * as settingActions from 'settings/actions/setting';
|
||||
|
||||
|
@ -136,7 +136,7 @@ class SettingsComponent extends React.Component {
|
|||
this.props.dispatch(settingActions.switchToForm(this.props.json));
|
||||
}
|
||||
|
||||
let settings = this.props.getState();
|
||||
let settings = this.props.store.getState();
|
||||
this.props.dispatch(settingActions.save(settings));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import './add-button.scss';
|
||||
import './AddButton.scss';
|
||||
import React from 'react';
|
||||
|
||||
class AddButton extends React.Component {
|
|
@ -1,4 +1,4 @@
|
|||
import './delete-button.scss';
|
||||
import './DeleteButton.scss';
|
||||
import React from 'react';
|
||||
|
||||
class DeleteButton extends React.Component {
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import './input.scss';
|
||||
import './Input.scss';
|
||||
|
||||
class Input extends React.Component {
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { render } from 'react';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import SettingsComponent from './components';
|
||||
import reducer from './reducers/setting';
|
||||
import { Provider } from 'react-redux';
|
||||
|
@ -12,9 +13,9 @@ const store = createStore(
|
|||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
let wrapper = document.getElementById('vimvixen-settings');
|
||||
render(
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<SettingsComponent />
|
||||
<SettingsComponent store={store} />
|
||||
</Provider>,
|
||||
wrapper
|
||||
);
|
||||
|
|
|
@ -1,8 +1,4 @@
|
|||
import './keymaps-form.scss';
|
||||
import React from 'react';
|
||||
import Input from '../ui/input';
|
||||
|
||||
const KeyMapFields = [
|
||||
const fields = [
|
||||
[
|
||||
['scroll.vertically?{"count":1}', 'Scroll down'],
|
||||
['scroll.vertically?{"count":-1}', 'Scroll up'],
|
||||
|
@ -70,49 +66,9 @@ const KeyMapFields = [
|
|||
]
|
||||
];
|
||||
|
||||
const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
|
||||
const allowedOps = [].concat(...fields.map(group => group.map(e => e[0])));
|
||||
|
||||
class KeymapsForm extends React.Component {
|
||||
|
||||
render() {
|
||||
let values = this.props.value;
|
||||
if (!values) {
|
||||
values = {};
|
||||
}
|
||||
return <div className='form-keymaps-form'>
|
||||
{
|
||||
KeyMapFields.map((group, index) => {
|
||||
return <div key={index} className='form-keymaps-form-field-group'>
|
||||
{
|
||||
group.map((field) => {
|
||||
let name = field[0];
|
||||
let label = field[1];
|
||||
let value = values[name];
|
||||
return <Input
|
||||
type='text' id={name} name={name} key={name}
|
||||
label={label} value={value}
|
||||
onChange={this.bindValue.bind(this)}
|
||||
/>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
})
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
|
||||
bindValue(e) {
|
||||
if (!this.props.onChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
let next = { ...this.props.value };
|
||||
next[e.target.name] = e.target.value;
|
||||
|
||||
this.props.onChange(next);
|
||||
}
|
||||
}
|
||||
|
||||
KeymapsForm.AllowdOps = AllowdOps;
|
||||
|
||||
export default KeymapsForm;
|
||||
export default {
|
||||
fields,
|
||||
allowedOps,
|
||||
};
|
Reference in a new issue