fix(RodEditor): Add cell/layer selection

CASL · Apr 30, 2018 · 5f9a8a9 · 5f9a8a9
1 parent d0af4b0
commit 5f9a8a9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/simput/RodEditor.js b/src/simput/RodEditor.js
@@ -11,11 +11,24 @@ export default class RodEditor extends React.Component {
     super(props);
     this.state = {};
 
+    this.onCellChange = this.onCellChange.bind(this);
     this.onLengthChange = this.onLengthChange.bind(this);
     this.addLayer = this.addLayer.bind(this);
     this.delLayer = this.delLayer.bind(this);
   }
 
+  onCellChange(layer, value) {
+    const data = this.props.data;
+    const cells = this.props.ui.domain;
+    if (data.value && data.value.length) {
+      const stack = data.value[0].stack;
+      if (value in cells) {
+        stack[layer.key].label = value;
+        this.props.onChange(data);
+      }
+    }
+  }
+
   onLengthChange(layer, value) {
     const data = this.props.data;
     if (data.value && data.value.length) {
@@ -34,12 +47,13 @@ export default class RodEditor extends React.Component {
 
   addLayer(idx) {
     const data = this.props.data;
-    if (data.value && data.value.length) {
+    const cells = Object.keys(this.props.ui.domain);
+    if (data.value && data.value.length && cells.length) {
       const stack = data.value[0].stack;
       const afterIdx = idx + 1;
       stack.splice(afterIdx, 0, {
         color: 'blue',
-        type: 'gap',
+        label: cells[0],
         length: 0,
       });
 
@@ -58,16 +72,27 @@ export default class RodEditor extends React.Component {
   }
 
   render() {
+    const cells = Object.keys(this.props.ui.domain);
+
     const columns = [
       {
         key: 'color',
         dataKey: 'color',
         label: 'Color',
       },
       {
-        key: 'type',
-        dataKey: 'label',
-        label: 'Layer Type',
+        key: 'cell',
+        dataKey: 'cell',
+        label: 'Cell/Layer Type',
+        classes: style.centeredCell,
+        render: (cellName, layer) => (
+          <select
+            className={style.cellSelect}
+            onChange={(e) => this.onCellChange(layer, e.target.value)}
+          >
+            {cells.map((name) => <option key={name}>{name}</option>)}
+          </select>
+        ),
       },
       {
         key: 'length',
@@ -115,7 +140,7 @@ RodEditor.propTypes = {
   // name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   // show: PropTypes.func.isRequired,
-  // ui: PropTypes.object.isRequired,
+  ui: PropTypes.object.isRequired,
   viewData: PropTypes.object.isRequired,
 };
 

diff --git a/src/simput/RodEditor.mcss b/src/simput/RodEditor.mcss
@@ -1,3 +1,7 @@
 .centeredCell {
     text-align: center;
+}
+
+.cellSelect {
+    width: 100%;
 }