From 83d96d88ec28e84ef4f1272767b5b6a93597afca Mon Sep 17 00:00:00 2001
From: casperlamboo <casperlamboo@gmail.com>
Date: Mon, 13 Nov 2017 10:45:23 +0100
Subject: [PATCH] move on change to context

---
 src/interface/FormComponents.js | 12 +++---
 src/interface/Settings.js       | 72 ++++++++++++++++-----------------
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/src/interface/FormComponents.js b/src/interface/FormComponents.js
index 4c70ed4..8776dcd 100644
--- a/src/interface/FormComponents.js
+++ b/src/interface/FormComponents.js
@@ -36,25 +36,25 @@ export const SelectField = (props, context) => (
   <MaterialUISelectField
     { ...props }
     value={context.state[props.name]}
-    onChange={(event, index, value) => props.onChange(props.name, value)}
+    onChange={(event, index, value) => context.onChange(props.name, value)}
   />
 );
-SelectField.contextTypes = { state: PropTypes.object };
+SelectField.contextTypes = { state: PropTypes.object, onChange: PropTypes.func };
 
 export const TextField = (props, context) => (
   <MaterialUITextField
     { ...props }
     value={_.get(context.state, props.name)}
-    onChange={(event, value) => props.onChange(props.name, value)}
+    onChange={(event, value) => context.onChange(props.name, value)}
   />
 );
-TextField.contextTypes = { state: PropTypes.object };
+TextField.contextTypes = { state: PropTypes.object, onChange: PropTypes.func };
 
 export const Checkbox = (props, context) => (
   <MaterialUICheckbox
     { ...props }
     checked={_.get(context.state, props.name)}
-    onCheck={(event, value) => props.onChange(props.name, value)}
+    onCheck={(event, value) => context.onChange(props.name, value)}
   />
 );
-Checkbox.contextTypes = { state: PropTypes.object };
+Checkbox.contextTypes = { state: PropTypes.object, onChange: PropTypes.func };
diff --git a/src/interface/Settings.js b/src/interface/Settings.js
index e0fc3c8..703cf30 100644
--- a/src/interface/Settings.js
+++ b/src/interface/Settings.js
@@ -51,7 +51,7 @@ class Settings extends React.Component {
   };
 
   getChildContext() {
-    return { state: this.state };
+    return { state: this.state, onChange: this.changeSettings };
   }
 
   render() {
@@ -61,17 +61,17 @@ class Settings extends React.Component {
       <Tabs>
         <Tab label="basic settings">
           <div className={classes.content}>
-            <SelectField name="printers" floatingLabelText="Printer" fullWidth onChange={this.changeSettings}>
+            <SelectField name="printers" floatingLabelText="Printer" fullWidth>
               {Object.entries(printers).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
               ))}
             </SelectField>
-            <SelectField name="quality" floatingLabelText="Quality" fullWidth onChange={this.changeSettings}>
+            <SelectField name="quality" floatingLabelText="Quality" fullWidth>
               {Object.entries(quality).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
               ))}
             </SelectField>
-            <SelectField name="material" floatingLabelText="Material" fullWidth onChange={this.changeSettings}>
+            <SelectField name="material" floatingLabelText="Material" fullWidth>
               {Object.entries(material).map(([value, { title }]) => (
                 <MenuItem key={value} value={value} primaryText={title} />
               ))}
@@ -82,62 +82,62 @@ class Settings extends React.Component {
           <div className={classes.content}>
             <SettingsGroup name="Printer dimensions">
               <div className={classes.textFieldRow}>
-                <TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" type="number" onChange={this.changeSettings} />
-                <TextField name="settings.dimensions.y" fullWidth floatingLabelText="Y" type="number" onChange={this.changeSettings} />
-                <TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" onChange={this.changeSettings} />
+                <TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" type="number" />
+                <TextField name="settings.dimensions.y" fullWidth floatingLabelText="Y" type="number" />
+                <TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" />
               </div>
             </SettingsGroup>
             <SettingsGroup name="Nozzle">
-              <TextField name="settings.nozzleDiameter" fullWidth floatingLabelText="Diameter" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.nozzleDiameter" fullWidth floatingLabelText="Diameter" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Bed">
-              <TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" onChange={this.changeSettings} />
-              <Checkbox name="settings.heatedBed" label="Heated" onChange={this.changeSettings} />
+              <TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" />
+              <Checkbox name="settings.heatedBed" label="Heated" />
             </SettingsGroup>
             <SettingsGroup name="Material">
-              <TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" />
+              <TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Thickness">
-              <TextField name="settings.thickness.top" fullWidth floatingLabelText="top" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.thickness.bottom" fullWidth floatingLabelText="bottom" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.thickness.top" fullWidth floatingLabelText="top" type="number" />
+              <TextField name="settings.thickness.bottom" fullWidth floatingLabelText="bottom" type="number" />
+              <TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Retraction">
-              <Checkbox name="settings.retraction.enabled" label="Enabled" onChange={this.changeSettings} />
-              <TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" onChange={this.changeSettings} />
+              <Checkbox name="settings.retraction.enabled" label="Enabled" />
+              <TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" />
+              <TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Travel">
-              <TextField name="settings.travel.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.travel.speed" fullWidth floatingLabelText="Speed" type="number" />
               <Checkbox name="settings.combing" label="Combing" />
             </SettingsGroup>
             <SettingsGroup name="Inner shell">
-              <TextField name="settings.innerShell.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.innerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.innerShell.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.innerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Outer shell">
-              <TextField name="settings.outerShell.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.outerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.outerShell.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.outerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Inner infill">
-              <TextField name="settings.innerInfill.gridSize" fullWidth floatingLabelText="Grid size" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.innerInfill.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.innerInfill.gridSize" fullWidth floatingLabelText="Grid size" type="number" />
+              <TextField name="settings.innerInfill.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Outer infill">
-              <TextField name="settings.outerInfill.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.outerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.outerInfill.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.outerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
             </SettingsGroup>
             <SettingsGroup name="Brim">
-              <TextField name="settings.brim.offset" fullWidth floatingLabelText="Offset" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.brim.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.brim.offset" fullWidth floatingLabelText="Offset" type="number" />
+              <TextField name="settings.brim.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
             </SettingsGroup>
             <SettingsGroup name="First layer">
-              <TextField name="settings.firstLayer.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} />
-              <TextField name="settings.firstLayer.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} />
+              <TextField name="settings.firstLayer.speed" fullWidth floatingLabelText="Speed" type="number" />
+              <TextField name="settings.firstLayer.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
             </SettingsGroup>
           </div>
         </Tab>
@@ -145,9 +145,7 @@ class Settings extends React.Component {
     );
   }
 }
-Settings.childContextTypes = {
-  state: PropTypes.object
-};
+Settings.childContextTypes = { state: PropTypes.object, onChange: PropTypes.func };
 Settings.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string),
   onChange: PropTypes.func,