use react in settings
This commit is contained in:
Shin'ya Ueoka
parent
7ee6396cb6
commit
6669f6b6ef
6 changed files with 97 additions and 70 deletions
78
src/settings/components/index.jsx
Normal file
78
src/settings/components/index.jsx
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
import './site.scss';
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import * as settingActions from 'settings/actions/setting';
|
||||||
|
import { validate } from 'shared/validators/setting';
|
||||||
|
|
||||||
|
class SettingsComponent extends React.Component {
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
settings: {
|
||||||
|
json: '',
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.context.store.subscribe(this.stateChanged.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.context.store.dispatch(settingActions.load());
|
||||||
|
}
|
||||||
|
|
||||||
|
stateChanged() {
|
||||||
|
let settings = this.context.store.getState();
|
||||||
|
this.setState({ settings });
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Configure Vim-Vixen</h1>
|
||||||
|
|
||||||
|
<form id='vimvixen-settings-form' className='vimvixen-settings-form'
|
||||||
|
onSubmit={this.saveSettings.bind(this)}>
|
||||||
|
<label htmlFor='load-from-json'>Load from JSON:</label>
|
||||||
|
<textarea name='plain-json' spellCheck='false'
|
||||||
|
onInput={this.onPlainJsonChanged.bind(this)}
|
||||||
|
onChange={this.bindValue.bind(this)}
|
||||||
|
value={this.state.settings.json} />
|
||||||
|
<button type='submit'>Save</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
saveSettings(e) {
|
||||||
|
let settings = {
|
||||||
|
json: e.target.elements['plain-json'].value,
|
||||||
|
};
|
||||||
|
this.context.store.dispatch(settingActions.save(settings));
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onPlainJsonChanged(e) {
|
||||||
|
try {
|
||||||
|
let settings = JSON.parse(e.target.value);
|
||||||
|
validate(settings);
|
||||||
|
e.target.setCustomValidity('');
|
||||||
|
} catch (err) {
|
||||||
|
e.target.setCustomValidity(err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bindValue(e) {
|
||||||
|
let next = Object.assign({}, this.state, {
|
||||||
|
settings: {
|
||||||
|
'json': e.target.value,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.setState(next);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SettingsComponent.contextTypes = {
|
||||||
|
store: PropTypes.any,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SettingsComponent;
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import * as settingActions from 'settings/actions/setting';
|
|
||||||
import { validate } from 'shared/validators/setting';
|
|
||||||
|
|
||||||
export default class SettingComponent {
|
|
||||||
constructor(wrapper, store) {
|
|
||||||
this.wrapper = wrapper;
|
|
||||||
this.store = store;
|
|
||||||
|
|
||||||
let doc = wrapper.ownerDocument;
|
|
||||||
let form = doc.getElementById('vimvixen-settings-form');
|
|
||||||
form.addEventListener('submit', this.onSubmit.bind(this));
|
|
||||||
|
|
||||||
let plainJson = form.elements['plain-json'];
|
|
||||||
plainJson.addEventListener('input', this.onPlainJsonChanged.bind(this));
|
|
||||||
|
|
||||||
store.dispatch(settingActions.load());
|
|
||||||
}
|
|
||||||
|
|
||||||
onSubmit(e) {
|
|
||||||
let settings = {
|
|
||||||
json: e.target.elements['plain-json'].value,
|
|
||||||
};
|
|
||||||
this.store.dispatch(settingActions.save(settings));
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
onPlainJsonChanged(e) {
|
|
||||||
try {
|
|
||||||
let settings = JSON.parse(e.target.value);
|
|
||||||
validate(settings);
|
|
||||||
e.target.setCustomValidity('');
|
|
||||||
} catch (err) {
|
|
||||||
e.target.setCustomValidity(err.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
let settings = this.store.getState();
|
|
||||||
|
|
||||||
let doc = this.wrapper.ownerDocument;
|
|
||||||
let form = doc.getElementById('vimvixen-settings-form');
|
|
||||||
let plainJsonInput = form.elements['plain-json'];
|
|
||||||
plainJsonInput.value = settings.json;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -4,15 +4,7 @@
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Configure</h1>
|
<div id='vimvixen-settings'></div>
|
||||||
|
|
||||||
<h2>Home page</h2>
|
|
||||||
<form id='vimvixen-settings-form' class='vimvixen-settings-form'>
|
|
||||||
<label for='load-from-json'>Load from JSON:</label>
|
|
||||||
<textarea name='plain-json' spellcheck='false'></textarea>
|
|
||||||
|
|
||||||
<button type='submit'>Save</button>
|
|
||||||
</form>
|
|
||||||
<script src='settings.js'></script>
|
<script src='settings.js'></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import './site.scss';
|
|
||||||
import SettingComponent from 'settings/components/setting';
|
|
||||||
import settingReducer from 'settings/reducers/setting';
|
|
||||||
import { createStore } from 'shared/store';
|
|
||||||
|
|
||||||
const store = createStore(settingReducer);
|
|
||||||
let settingComponent = null;
|
|
||||||
|
|
||||||
store.subscribe(() => {
|
|
||||||
settingComponent.update();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
settingComponent = new SettingComponent(document.body, store);
|
|
||||||
});
|
|
||||||
18
src/settings/index.jsx
Normal file
18
src/settings/index.jsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import SettingsComponent from './components';
|
||||||
|
import reducer from 'settings/reducers/setting';
|
||||||
|
import Provider from 'shared/store/provider';
|
||||||
|
import { createStore } from 'shared/store';
|
||||||
|
|
||||||
|
const store = createStore(reducer);
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
let wrapper = document.getElementById('vimvixen-settings');
|
||||||
|
ReactDOM.render(
|
||||||
|
<Provider store={store}>
|
||||||
|
<SettingsComponent />
|
||||||
|
</Provider>,
|
||||||
|
wrapper
|
||||||
|
);
|
||||||
|
});
|
||||||
Reference in a new issue