move on change to context

This commit is contained in:
casperlamboo 2017-11-13 10:45:23 +01:00
parent 45e0f02936
commit 83d96d88ec
2 changed files with 41 additions and 43 deletions

View File

@ -36,25 +36,25 @@ export const SelectField = (props, context) => (
<MaterialUISelectField <MaterialUISelectField
{ ...props } { ...props }
value={context.state[props.name]} 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) => ( export const TextField = (props, context) => (
<MaterialUITextField <MaterialUITextField
{ ...props } { ...props }
value={_.get(context.state, props.name)} 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) => ( export const Checkbox = (props, context) => (
<MaterialUICheckbox <MaterialUICheckbox
{ ...props } { ...props }
checked={_.get(context.state, props.name)} 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 };

View File

@ -51,7 +51,7 @@ class Settings extends React.Component {
}; };
getChildContext() { getChildContext() {
return { state: this.state }; return { state: this.state, onChange: this.changeSettings };
} }
render() { render() {
@ -61,17 +61,17 @@ class Settings extends React.Component {
<Tabs> <Tabs>
<Tab label="basic settings"> <Tab label="basic settings">
<div className={classes.content}> <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 }]) => ( {Object.entries(printers).map(([value, { title }]) => (
<MenuItem key={value} value={value} primaryText={title} /> <MenuItem key={value} value={value} primaryText={title} />
))} ))}
</SelectField> </SelectField>
<SelectField name="quality" floatingLabelText="Quality" fullWidth onChange={this.changeSettings}> <SelectField name="quality" floatingLabelText="Quality" fullWidth>
{Object.entries(quality).map(([value, { title }]) => ( {Object.entries(quality).map(([value, { title }]) => (
<MenuItem key={value} value={value} primaryText={title} /> <MenuItem key={value} value={value} primaryText={title} />
))} ))}
</SelectField> </SelectField>
<SelectField name="material" floatingLabelText="Material" fullWidth onChange={this.changeSettings}> <SelectField name="material" floatingLabelText="Material" fullWidth>
{Object.entries(material).map(([value, { title }]) => ( {Object.entries(material).map(([value, { title }]) => (
<MenuItem key={value} value={value} primaryText={title} /> <MenuItem key={value} value={value} primaryText={title} />
))} ))}
@ -82,62 +82,62 @@ class Settings extends React.Component {
<div className={classes.content}> <div className={classes.content}>
<SettingsGroup name="Printer dimensions"> <SettingsGroup name="Printer dimensions">
<div className={classes.textFieldRow}> <div className={classes.textFieldRow}>
<TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" 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" onChange={this.changeSettings} /> <TextField name="settings.dimensions.y" fullWidth floatingLabelText="Y" type="number" />
<TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" onChange={this.changeSettings} /> <TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" />
</div> </div>
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Nozzle"> <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>
<SettingsGroup name="Bed"> <SettingsGroup name="Bed">
<TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" onChange={this.changeSettings} /> <TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" />
<Checkbox name="settings.heatedBed" label="Heated" onChange={this.changeSettings} /> <Checkbox name="settings.heatedBed" label="Heated" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Material"> <SettingsGroup name="Material">
<TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" onChange={this.changeSettings} /> <TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" />
<TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" onChange={this.changeSettings} /> <TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Thickness"> <SettingsGroup name="Thickness">
<TextField name="settings.thickness.top" fullWidth floatingLabelText="top" 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" onChange={this.changeSettings} /> <TextField name="settings.thickness.bottom" fullWidth floatingLabelText="bottom" type="number" />
<TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" onChange={this.changeSettings} /> <TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Retraction"> <SettingsGroup name="Retraction">
<Checkbox name="settings.retraction.enabled" label="Enabled" onChange={this.changeSettings} /> <Checkbox name="settings.retraction.enabled" label="Enabled" />
<TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" onChange={this.changeSettings} /> <TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" />
<TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" onChange={this.changeSettings} /> <TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" />
<TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" onChange={this.changeSettings} /> <TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Travel"> <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" /> <Checkbox name="settings.combing" label="Combing" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Inner shell"> <SettingsGroup name="Inner shell">
<TextField name="settings.innerShell.speed" fullWidth floatingLabelText="Speed" 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" onChange={this.changeSettings} /> <TextField name="settings.innerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Outer shell"> <SettingsGroup name="Outer shell">
<TextField name="settings.outerShell.speed" fullWidth floatingLabelText="Speed" 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" onChange={this.changeSettings} /> <TextField name="settings.outerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Inner infill"> <SettingsGroup name="Inner infill">
<TextField name="settings.innerInfill.gridSize" fullWidth floatingLabelText="Grid size" 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" onChange={this.changeSettings} /> <TextField name="settings.innerInfill.speed" fullWidth floatingLabelText="Speed" type="number" />
<TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} /> <TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Outer infill"> <SettingsGroup name="Outer infill">
<TextField name="settings.outerInfill.speed" fullWidth floatingLabelText="Speed" 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" onChange={this.changeSettings} /> <TextField name="settings.outerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="Brim"> <SettingsGroup name="Brim">
<TextField name="settings.brim.offset" fullWidth floatingLabelText="Offset" 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" onChange={this.changeSettings} /> <TextField name="settings.brim.speed" fullWidth floatingLabelText="Speed" type="number" />
<TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" onChange={this.changeSettings} /> <TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
</SettingsGroup> </SettingsGroup>
<SettingsGroup name="First layer"> <SettingsGroup name="First layer">
<TextField name="settings.firstLayer.speed" fullWidth floatingLabelText="Speed" 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" onChange={this.changeSettings} /> <TextField name="settings.firstLayer.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
</SettingsGroup> </SettingsGroup>
</div> </div>
</Tab> </Tab>
@ -145,9 +145,7 @@ class Settings extends React.Component {
); );
} }
} }
Settings.childContextTypes = { Settings.childContextTypes = { state: PropTypes.object, onChange: PropTypes.func };
state: PropTypes.object
};
Settings.propTypes = { Settings.propTypes = {
classes: PropTypes.objectOf(PropTypes.string), classes: PropTypes.objectOf(PropTypes.string),
onChange: PropTypes.func, onChange: PropTypes.func,