fix(widgets): Move EditableList to paraviewweb library

Import the paraviewweb library to use an updated version of the
EditableList widget.

package.json

@@ -24,6 +24,7 @@
         "markdown-pdf": "8.1.1",
         "@doe-casl/verain-view": "1.0.1",
         "antd": "2.13.11",
+        "paraviewweb": "^3.2.0",
         "react": "16.1.1",
         "react-dom": "16.1.1",
         "react-cursor-position": "2.4.1",

rules/paraviewweb.js

@@ -0,0 +1,21 @@
+module.exports = [
+  {
+    test: /\.js$/,
+    include: /node_modules(\/|\\)paraviewweb(\/|\\)/,
+    use: [{ loader: 'babel-loader', options: { presets: ['env', 'react'] } }],
+  },
+  {
+    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+    use: [
+      {
+        loader: 'url-loader',
+        options: { limit: 600000, mimetype: 'application/font-woff' },
+      },
+    ],
+  },
+  {
+    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+    use: [{ loader: 'url-loader', options: { limit: 600000 } }],
+    include: /fonts/,
+  },
+];

src/assets/vera.mcss

@@ -371,22 +371,3 @@
   top: 10px;
   color: black;
 }
-
-.editableListTable {
-  width: 100%;
-}
-
-.editableListAddBtn {
-  position: relative;
-  top: 15px;
-  height: 25px;
-  width: 25px;
-  border-radius: 50%;
-}
-
-.editableListDelBtn {
-  margin-left: 5px;
-  height: 25px;
-  width: 25px;
-  border-radius: 50%;
-}

src/simput/CellEditor.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import EditableList from 'paraviewweb/src/React/Widgets/EditableListWidget';
+
 import ViewerWidget from '../widgets/ViewerWidget';
-import EditableList from '../widgets/EditableList';
 import ThreeDToolbar from '../widgets/ThreeDToolbar';
 import VisibilityToolbar from '../widgets/VisibilityToolbar';
 
@@ -85,13 +86,12 @@ export default class CellEditor extends React.Component {
     }
   }
 
-  addRadius(afterIdx) {
+  addRadius(idx) {
     const { data } = this.props;
     const viz = this.props.ui.domain;
     const materialIds = Object.keys(viz.colors || {});
     if (data.value && data.value.length && materialIds.length) {
       const cell = data.value[0];
-      const idx = afterIdx + 1;
       const length = cell.mats.length;
       const pitch = this.props.viewData.cell.pitch.value[0];
 
@@ -111,13 +111,14 @@ export default class CellEditor extends React.Component {
     }
   }
 
-  deleteEntry(idx) {
+  deleteEntry(key) {
     const { data } = this.props;
     if (data.value && data.value.length) {
       const cell = data.value[0];
 
-      cell.mats.splice(idx, 1);
-      cell.radii.splice(idx, 1);
+      // key is index (from the render() method)
+      cell.mats.splice(key, 1);
+      cell.radii.splice(key, 1);
 
       this.props.onChange(data);
     }