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

use react in settings

Browse Source
jh-changes
Shin'ya Ueoka 7 years ago
parent 7ee6396cb6
commit 6669f6b6ef
6 changed files with 97 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      src/settings/components/index.jsx
  2. 46
      src/settings/components/setting.js
  3. 0
      src/settings/components/site.scss
  4. 10
      src/settings/index.html
  5. 15
      src/settings/index.js
  6. 18
      src/settings/index.jsx

78
src/settings/components/index.jsx
Unescape 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
Unescape 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
Unescape View File

10
src/settings/index.html
Unescape View File

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

15
src/settings/index.js
Unescape 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
Unescape 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
);
});