jab2870/Vim-Vixen
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

use react in settings

Browse source
This commit is contained in:
Shin'ya Ueoka 2017-10-09 13:42:16 +09:00
parent 7ee6396cb6
commit 6669f6b6ef
6 changed files with 97 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/settings/components/index.jsx Normal file
View 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;

46
src/settings/components/setting.js
View file

@ -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;
}
}

0
src/settings/site.scss → src/settings/components/site.scss
View file

10
src/settings/index.html
View file

@ -4,15 +4,7 @@
<meta charset='utf-8'>
</head>
<body>
<h1>Configure</h1>
<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>
<div id='vimvixen-settings'></div>
<script src='settings.js'></script>
</body>
</html>

15
src/settings/index.js
View file

@ -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
View 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
);
});