Re-rendering when changing options
This commit is contained in:
parent
38e52e3a49
commit
a262963906
|
@ -4,7 +4,7 @@ import OptionContainer from "./OptionContainer";
|
||||||
import "../styles/CategoryContainer.scss";
|
import "../styles/CategoryContainer.scss";
|
||||||
|
|
||||||
export default props => {
|
export default props => {
|
||||||
const { category, elements } = props;
|
const { category, elements, currentValues = {} } = props;
|
||||||
return (
|
return (
|
||||||
<li className="categoryContainer">
|
<li className="categoryContainer">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
|
@ -16,11 +16,11 @@ export default props => {
|
||||||
<ul className="categoryElements">
|
<ul className="categoryElements">
|
||||||
{elements.map((option, index) => (
|
{elements.map((option, index) => (
|
||||||
<div key={index}>
|
<div key={index}>
|
||||||
<OptionContainer {...option}>
|
<OptionContainer {...option} currentValue={currentValues[option.id]}>
|
||||||
{option.hasOwnProperty("childElements") && (
|
{option.hasOwnProperty("childElements") && (
|
||||||
<ul className="childElements">
|
<ul className="childElements">
|
||||||
{option.childElements.map((option, index) => (
|
{option.childElements.map((option, index) => (
|
||||||
<OptionContainer {...option} key={index} />
|
<OptionContainer {...option} currentValue={currentValues[option.id]} key={index} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import browser from "webextension-polyfill";
|
import browser from "webextension-polyfill";
|
||||||
import { setSettings, getSettings } from "src/settings/settings";
|
import { setSettings } from "src/settings/settings";
|
||||||
import KeyboardShortcutForm from "./KeyboardShortcutForm";
|
import KeyboardShortcutForm from "./KeyboardShortcutForm";
|
||||||
import "../styles/OptionContainer.scss";
|
import "../styles/OptionContainer.scss";
|
||||||
|
|
||||||
export default props => {
|
export default props => {
|
||||||
const { title, captions, type, id, children } = props;
|
const { title, captions, type, id, children, currentValue } = props;
|
||||||
|
|
||||||
const handleValueChange = e => {
|
const handleValueChange = e => {
|
||||||
let value = e.target.value;
|
let value = e.target.value;
|
||||||
|
@ -35,7 +35,7 @@ export default props => {
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id={formId}
|
id={formId}
|
||||||
onChange={handleCheckedChange}
|
onChange={handleCheckedChange}
|
||||||
defaultChecked={getSettings(id)}
|
defaultChecked={currentValue}
|
||||||
/>
|
/>
|
||||||
<span className="checkbox" />
|
<span className="checkbox" />
|
||||||
</label>
|
</label>
|
||||||
|
@ -52,7 +52,7 @@ export default props => {
|
||||||
step={props.step}
|
step={props.step}
|
||||||
placeholder={props.placeholder}
|
placeholder={props.placeholder}
|
||||||
onChange={handleValueChange}
|
onChange={handleValueChange}
|
||||||
defaultValue={getSettings(id)}
|
defaultValue={currentValue}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
@ -64,7 +64,7 @@ export default props => {
|
||||||
id={formId}
|
id={formId}
|
||||||
placeholder={props.placeholder}
|
placeholder={props.placeholder}
|
||||||
onChange={handleValueChange}
|
onChange={handleValueChange}
|
||||||
defaultValue={getSettings(id)}
|
defaultValue={currentValue}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
@ -76,7 +76,7 @@ export default props => {
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
placeholder={props.placeholder}
|
placeholder={props.placeholder}
|
||||||
onChange={handleValueChange}
|
onChange={handleValueChange}
|
||||||
defaultValue={getSettings(id)}
|
defaultValue={currentValue}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
@ -90,7 +90,7 @@ export default props => {
|
||||||
name={id}
|
name={id}
|
||||||
value={props.value}
|
value={props.value}
|
||||||
onChange={handleValueChange}
|
onChange={handleValueChange}
|
||||||
defaultChecked={props.value === getSettings(id) ? "checked" : ""}
|
defaultChecked={props.value === currentValue ? "checked" : ""}
|
||||||
/>
|
/>
|
||||||
<span className="radio" />
|
<span className="radio" />
|
||||||
</label>
|
</label>
|
||||||
|
@ -104,7 +104,7 @@ export default props => {
|
||||||
type="color"
|
type="color"
|
||||||
id={formId}
|
id={formId}
|
||||||
onChange={handleValueChange}
|
onChange={handleValueChange}
|
||||||
defaultValue={getSettings(id)}
|
defaultValue={currentValue}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
|
@ -113,7 +113,7 @@ export default props => {
|
||||||
formId = id;
|
formId = id;
|
||||||
optionForm = (
|
optionForm = (
|
||||||
<div className="selectWrap">
|
<div className="selectWrap">
|
||||||
<select id={formId} onChange={handleValueChange} defaultValue={getSettings(id)}>
|
<select id={formId} onChange={handleValueChange} defaultValue={currentValue}>
|
||||||
{props.options.map((option, index) => (
|
{props.options.map((option, index) => (
|
||||||
<option value={option.value} key={index}>
|
<option value={option.value} key={index}>
|
||||||
{props.useRawOptionName ? option.name : browser.i18n.getMessage(option.name)}
|
{props.useRawOptionName ? option.name : browser.i18n.getMessage(option.name)}
|
||||||
|
@ -156,7 +156,8 @@ export default props => {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
const shouldShow = props.shouldShow == undefined || props.shouldShow;
|
const shouldShow = props.shouldShow == undefined
|
||||||
|
|| (typeof props.shouldShow === 'function' ? props.shouldShow() : props.shouldShow);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
shouldShow && (
|
shouldShow && (
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import browser from "webextension-polyfill";
|
import browser from "webextension-polyfill";
|
||||||
import { updateLogLevel, overWriteLogLevel } from "src/common/log";
|
import { updateLogLevel, overWriteLogLevel } from "src/common/log";
|
||||||
import { initSettings, resetAllSettings, exportSettings, importSettings } from "src/settings/settings";
|
import { initSettings, getAllSettings, resetAllSettings, exportSettings, importSettings, handleSettingsChange } from "src/settings/settings";
|
||||||
import defaultSettings from "src/settings/defaultSettings";
|
import defaultSettings from "src/settings/defaultSettings";
|
||||||
import CategoryContainer from "./CategoryContainer";
|
import CategoryContainer from "./CategoryContainer";
|
||||||
|
|
||||||
|
@ -9,7 +9,8 @@ export default class SettingsPage extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
isInit: false
|
isInit: false,
|
||||||
|
currentValues: {}
|
||||||
};
|
};
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
@ -18,16 +19,21 @@ export default class SettingsPage extends Component {
|
||||||
await initSettings();
|
await initSettings();
|
||||||
overWriteLogLevel();
|
overWriteLogLevel();
|
||||||
updateLogLevel();
|
updateLogLevel();
|
||||||
this.setState({ isInit: true });
|
this.setState({ isInit: true, currentValues: getAllSettings() });
|
||||||
|
browser.storage.onChanged.addListener(changes => {
|
||||||
|
const newSettings = handleSettingsChange(changes);
|
||||||
|
if (newSettings) this.setState({ currentValues: newSettings });
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { isInit, currentValues } = this.state;
|
||||||
const settingsContent = (
|
const settingsContent = (
|
||||||
<ul>
|
<ul>
|
||||||
{defaultSettings.map((category, index) => (
|
{defaultSettings.map((category, index) => (
|
||||||
<CategoryContainer {...category} key={index} />
|
<CategoryContainer {...category} key={index} currentValues={currentValues} />
|
||||||
))}
|
))}
|
||||||
<CategoryContainer {...additionalCategory} />
|
<CategoryContainer {...additionalCategory} currentValues={currentValues} />
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -35,7 +41,7 @@ export default class SettingsPage extends Component {
|
||||||
<div>
|
<div>
|
||||||
<p className="contentTitle">{browser.i18n.getMessage("settingsLabel")}</p>
|
<p className="contentTitle">{browser.i18n.getMessage("settingsLabel")}</p>
|
||||||
<hr />
|
<hr />
|
||||||
{this.state.isInit ? settingsContent : ""}
|
{isInit ? settingsContent : ""}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,6 +45,10 @@ export const getSettings = id => {
|
||||||
return currentSettings[id];
|
return currentSettings[id];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getAllSettings = () => {
|
||||||
|
return currentSettings;
|
||||||
|
};
|
||||||
|
|
||||||
export const resetAllSettings = async () => {
|
export const resetAllSettings = async () => {
|
||||||
log.info(logDir, "resetAllSettings()");
|
log.info(logDir, "resetAllSettings()");
|
||||||
currentSettings = {};
|
currentSettings = {};
|
||||||
|
@ -55,7 +59,9 @@ export const resetAllSettings = async () => {
|
||||||
export const handleSettingsChange = (changes, area) => {
|
export const handleSettingsChange = (changes, area) => {
|
||||||
if (Object.keys(changes).includes("Settings")) {
|
if (Object.keys(changes).includes("Settings")) {
|
||||||
currentSettings = changes.Settings.newValue;
|
currentSettings = changes.Settings.newValue;
|
||||||
|
return currentSettings;
|
||||||
}
|
}
|
||||||
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const exportSettings = async () => {
|
export const exportSettings = async () => {
|
||||||
|
|
Loading…
Reference in a new issue