fix(RodEditor): Show color on select dropdown

CASL · May 1, 2018 · da7d0a5 · da7d0a5
1 parent 59a4db1
commit da7d0a5
Showing 1 changed file with 20 additions and 27 deletions.
diff --git a/src/simput/RodEditor.js b/src/simput/RodEditor.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import Rod2DPreview from '../widgets/Rod2DPreview';
 import EditableList from '../widgets/EditableList';
 import VTKWidget from '../widgets/VTKWidget';
-import Color from '../widgets/Color';
 
 import vtkRodVTKViewer from '../utils/RodVTKViewer';
 import ColorManager from '../utils/ColorManager';
@@ -76,40 +75,34 @@ export default class RodEditor extends React.Component {
 
     const columns = [
       {
-        key: 'color',
-        dataKey: '',
-        label: 'Color',
+        key: 'cell',
+        dataKey: 'label',
+        label: 'Cell',
         classes: style.centeredCell,
-        render: (_, layer) => {
+        render: (cellName, layer) => {
           const color = this.props.ui.domain.cells[layer.label].color;
           // adds alpha channel
-          const out = ColorManager.toRGBA(color.concat([1]));
-          return <Color color={out} title="" border />;
+          const background = ColorManager.toRGBA(color.concat([1]));
+          return (
+            <select
+              className={style.fullWidth}
+              style={{ background }}
+              value={cellName}
+              onChange={(e) => this.onCellChange(layer, e.target.value)}
+            >
+              {cells.map((name) => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          );
         },
       },
-      {
-        key: 'cell',
-        dataKey: 'label',
-        label: 'Cell/Layer Type',
-        classes: style.centeredCell,
-        render: (cellName, layer) => (
-          <select
-            className={style.fullWidth}
-            value={cellName}
-            onChange={(e) => this.onCellChange(layer, e.target.value)}
-          >
-            {cells.map((name) => (
-              <option key={name} value={name}>
-                {name}
-              </option>
-            ))}
-          </select>
-        ),
-      },
       {
         key: 'length',
         dataKey: 'length',
-        label: 'Length',
+        label: 'Axial Length',
         classes: style.centeredCell,
         render: (value, layer) => (
           <input