Merge pull request #361 from wooferzfg/fix-toggle-state

Fix toggles not properly updating when switching views

src/ui/LayoutEditor.tsx

@@ -85,6 +85,7 @@ export class LayoutEditor extends React.Component<Props, State> {
         const settings = this.state.showComponentSettings
             ? (
                 <SettingsComponent
+                    context={`component-settings$${this.state.editor.selected_component}`}
                     factory={LiveSplit.SettingValue}
                     state={this.state.editor.component_settings}
                     setValue={(index, value) => {
@@ -94,6 +95,7 @@ export class LayoutEditor extends React.Component<Props, State> {
                 />
             ) : (
                 <SettingsComponent
+                    context={`layout-settings`}
                     factory={LiveSplit.SettingValue}
                     state={this.state.editor.general_settings}
                     setValue={(index, value) => {

src/ui/RunEditor.tsx

@@ -779,6 +779,7 @@ export class RunEditor extends React.Component<Props, State> {
                     </table>
                 }
                 <SettingsComponent
+                    context="run-editor-variables"
                     factory={new JsonSettingValueFactory()}
                     state={{ fields }}
                     setValue={(index, value) => {

src/ui/Settings.tsx

@@ -7,6 +7,7 @@ import HotkeyButton from "./HotkeyButton";
 import ToggleCheckbox from "./ToggleCheckbox";
 
 export interface Props<T> {
+    context: string,
     setValue: (index: number, value: T) => void,
     state: ExtendedSettingsDescriptionJson,
     factory: SettingValueFactory<T>,
@@ -850,7 +851,7 @@ export class SettingsComponent<T> extends React.Component<Props<T>> {
             }
 
             settingsRows.push(
-                <tr>
+                <tr key={`${this.props.context}$${valueIndex}`}>
                     <td>{field.text}</td>
                     <td>{component}</td>
                 </tr>,

src/ui/SettingsEditor.tsx

@@ -39,6 +39,7 @@ export class SettingsEditor extends React.Component<Props, State> {
         return (
             <div className="settings-editor">
                 <SettingsComponent
+                    context="settings-editor"
                     factory={SettingValue}
                     state={this.state.settings}
                     setValue={(index, value) => {

src/ui/ToggleCheckbox.tsx

@@ -18,7 +18,7 @@ export default class ToggleCheckbox extends React.Component<Props> {
         return (
             <div className="toggle-checkbox">
                 <Toggle
-                    defaultChecked={this.props.value}
+                    checked={this.props.value}
                     icons={false}
                     onChange={(event) => this.props.setValue(event.target.checked)}
                 />