Display settings inside accordion element

src/interface/Accordion.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import injectSheet from 'react-jss';
+import ExpandIcon from 'material-ui-icons/ExpandMore';
+
+const styles = {
+  button: {
+    cursor: 'pointer'
+  },
+  body: {
+    overflow: 'hidden'
+  },
+  closed: {
+    maxHeight: '0px'
+  },
+  title: {
+    display: 'flex',
+    alignItems: 'flex-end'
+  }
+};
+
+class Accordion extends React.Component {
+  static propTypes = {
+    elements: PropTypes.arrayOf(PropTypes.shape({ body: PropTypes.node, title: PropTypes.string })),
+    classes: PropTypes.objectOf(PropTypes.string)
+  };
+  static defaultProps: {
+    elements: []
+  };
+
+  state = {
+    openAccordion: null
+  };
+
+  changeAccordion = (name) => {
+    const { openAccordion } = this.state;
+    if (openAccordion === name) {
+      this.setState({ openAccordion: null });
+    } else {
+      this.setState({ openAccordion: name });
+    }
+  };
+
+  render() {
+    const { openAccordion } = this.state;
+    const { elements, classes } = this.props;
+
+    return elements.map(({ body, title }, i) => (
+      <span key={i}>
+        <span className={classes.title}>
+          <ExpandIcon />
+          <p onClick={() => this.changeAccordion(title)} className={classes.button}>{title}</p>
+        </span>
+        <div className={`${classes.body} ${openAccordion === title ? '' : classes.closed}`}>
+          {body}
+        </div>
+      </span>
+    ));
+  }
+}
+
+export default injectSheet(styles)(Accordion);

src/interface/Settings.js

@@ -22,6 +22,7 @@ import SettingsIcon from 'material-ui-icons/Settings';
 import ExitToAppIcon from 'material-ui-icons/ExitToApp';
 import validateIp from 'validate-ip';
 import { Doodle3DManager } from 'doodle3d-api';
+import Accordion from './Accordion.js';
 
 const DOODLE_3D_MANAGER = new Doodle3DManager();
 DOODLE_3D_MANAGER.checkNonServerBoxes = false;
@@ -445,23 +446,38 @@ class Settings extends React.Component {
           </Tab>
           <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced">
             <div>
-              <p>Layer</p>
+              <Accordion elements={[{
-              <NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" />
+                title: 'Layer',
-              <p>Thickness</p>
+                body: (<NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" />)
+              }, {
+                title: 'Thickness',
+                body: (<span>
                   <NumberField name="settings.thickness.top" min={0} fullWidth floatingLabelText="top" />
                   <NumberField name="settings.thickness.bottom" min={0} fullWidth floatingLabelText="bottom" />
                   <NumberField name="settings.thickness.shell" min={0} fullWidth floatingLabelText="shell" />
-              <p>Material</p>
+                </span>)
+              }, {
+                title: 'Material',
+                body: (<span>
                   <NumberField name="settings.filamentThickness" min={0.1} max={10} fullWidth floatingLabelText="Thickness" />
                   <NumberField name="settings.temperature" min={100} max={400} fullWidth floatingLabelText="Temperature" />
-              <p>Bed</p>
+                </span>)
+              }, {
+                title: 'Bed',
+                body: (<span>
                   <NumberField name="settings.bedTemperature" min={30} max={150} fullWidth floatingLabelText="Temperature" />
                   <Checkbox name="settings.heatedBed" label="Heated" />
-              <p>Brim</p>
+                </span>)
+              }, {
+                title: 'Brim',
+                body: (<span>
                   <NumberField name="settings.brim.size" min={0} max={20} fullWidth floatingLabelText="Size" />
                   <NumberField name="settings.brim.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.brim.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>Support</p>
+                </span>)
+              }, {
+                title: 'Support',
+                body: (<span>
                   <Checkbox name="settings.support.enabled" label="Enabled" />
                   <NumberField name="settings.support.distanceY" min={0.1} fullWidth floatingLabelText="Distance Y" />
                   <NumberField name="settings.support.density" min={0} max={100} fullWidth floatingLabelText="Density" />
@@ -469,38 +485,67 @@ class Settings extends React.Component {
                   <NumberField name="settings.support.minArea" min={1} fullWidth floatingLabelText="Min Area" />
                   <NumberField name="settings.support.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.support.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>First layer</p>
+                </span>)
+              }, {
+                title: 'First layer',
+                body: (<span>
                   <NumberField name="settings.firstLayer.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.firstLayer.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>Inner shell</p>
+                </span>)
+              }, {
+                title: 'Inner shell',
+                body: (<span>
                   <NumberField name="settings.innerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.innerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>Outer shell</p>
+                </span>)
+              }, {
+                title: 'Outer shell',
+                body: (<span>
                   <NumberField name="settings.outerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.outerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>Inner infill</p>
+                </span>)
+              }, {
+                title: 'Inner infill',
+                body: (<span>
                   <NumberField name="settings.innerInfill.density" min={0} max={100} fullWidth floatingLabelText="Density" />
                   <NumberField name="settings.innerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.innerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>Outer infill</p>
+                </span>)
+              }, {
+                title: 'Outer infill',
+                body: (<span>
                   <NumberField name="settings.outerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.outerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
-              <p>Travel</p>
+                </span>)
+              }, {
+                title: 'Travel',
+                body: (<span>
                   <NumberField name="settings.travel.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <Checkbox name="settings.combing" label="Combing" />
-              <p>Retraction</p>
+                </span>)
+              }, {
+                title: 'Retraction',
+                body: (<span>
                   <Checkbox name="settings.retraction.enabled" label="Enabled" />
                   <NumberField name="settings.retraction.amount" min={0} max={10} fullWidth floatingLabelText="Amount" />
                   <NumberField name="settings.retraction.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
                   <NumberField name="settings.retraction.minDistance" min={0} fullWidth floatingLabelText="Min distance" />
-              <p>Printer dimensions</p>
+                </span>)
+              }, {
+                title: 'Printer dimensions',
+                body: (<span>
                   <div className={classes.textFieldRow}>
                   <NumberField name="settings.dimensions.x" min={1} fullWidth floatingLabelText="X" />
                   <NumberField name="settings.dimensions.y" min={1} fullWidth floatingLabelText="Y" />
                   <NumberField name="settings.dimensions.z" min={1} fullWidth floatingLabelText="Z" />
                 </div>
-              <p>Nozzle</p>
+                </span>)
+              }, {
+                title: 'Nozzle',
+                body: (<span>
                   <NumberField name="settings.nozzleDiameter" min={0.1} max={5} fullWidth floatingLabelText="Diameter" />
+                </span>)
+              }]} />
             </div>
           </Tab>
         </Tabs>