WIP

package-lock.json

@@ -1184,6 +1184,14 @@
         "minimist": "^1.2.0"
       }
     },
+    "@createnl/grouped-checkboxes": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@createnl/grouped-checkboxes/-/grouped-checkboxes-1.1.2.tgz",
+      "integrity": "sha512-F4SoFF7UwktrpVeJPs/cQFP5Nn+1wpUm5v1/vzUcgseDGxvjXjLrs+F99ivH/TA3VDJbeFdBPi7gymmw2cessQ==",
+      "requires": {
+        "lodash.debounce": "^4.0.8"
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -10897,6 +10905,11 @@
       "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
       "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.flow": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
+    "@createnl/grouped-checkboxes": "^1.1.2",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4.5.3",
     "bufferutil": "^4.0.1",

src/common/table.js

@@ -34,7 +34,8 @@ class CustomTable extends Component {
   }
 
   static defaultProps = {
-    width: null
+    width: null,
+    checked: true
   };
 
   onClick(event, row, column) {

src/signal/edit-signal-mapping.js

@@ -134,6 +134,10 @@ class EditSignalMapping extends React.Component {
 
   };
 
+  handleRemove = () => {
+
+  }
+
   handleAdd = (configID = null) => {
 
     if(typeof this.props.configs !== "undefined"){
@@ -173,6 +177,10 @@ class EditSignalMapping extends React.Component {
       this.setState({signals: signals})
   }
 
+  onSignalChecked(index, signal) {
+    console.log(index);
+  }
+
   render() {
 
       const buttonStyle = {
@@ -185,7 +193,7 @@ class EditSignalMapping extends React.Component {
           show={this.props.show}
           title="Edit Signal Mapping"
           buttonTitle="Save"
-          blendOutCancel = {true}
+          blendOutCancel = {false}
           onClose={(c) => this.onClose(c)}
           onReset={() => this.resetState()}
           valid={true}
@@ -194,7 +202,8 @@ class EditSignalMapping extends React.Component {
           <FormGroup>
               <FormLabel>{this.props.direction} Mapping</FormLabel>
               <FormText>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</FormText>
-              <Table data={this.state.signals}>
+              <Table checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} data={this.state.signals}>
+                  <TableColumn checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} width='30' />
                   <TableColumn title='Index' dataKey='index' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
                   <TableColumn title='Name' dataKey='name' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
                   <TableColumn title='Unit' dataKey='unit' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
@@ -202,8 +211,9 @@ class EditSignalMapping extends React.Component {
                   <TableColumn title='Remove' deleteButton onDelete={(index) => this.handleDelete(index)} />
               </Table>
 
-              <div style={{ float: 'right' }}>
-                <Button key={50} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal</Button>
+              <div >
+                <Button key={50} style={{ float: 'left' }} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
+                <Button key={51} style={{ float: 'right' }} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
               </div>
               <div>
                 <Collapse isOpened={this.state.openCollapse}>