Re-rendering when changing options

This commit is contained in:
sienori 2022-03-03 16:27:11 +09:00
parent 38e52e3a49
commit a262963906
4 changed files with 32 additions and 19 deletions

View file

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

View file

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

View file

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

View file

@ -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 () => {