Partial export processing

src/containers/SkynetExport/SkynetExport.js

@@ -12,8 +12,9 @@ import {
   faCheckSquare, faChevronDown,
   faChevronRight, faFile, faFolder, faFolderOpen,
   faHSquare, faMinusSquare, faPlusSquare,
-  faSquare, faSquareFull, faSquareRootAlt
+  faSquare
 } from '@fortawesome/free-solid-svg-icons';
+import Button from '../../components/UI/Button/Button';
 
 const Constants = require('../../constants');
 
@@ -34,8 +35,10 @@ const mapDispatchToProps = dispatch => {
 export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCContainer {
   state = {
     checked: [],
+    clicked: {},
     expanded: [],
     nodes: [],
+    second_stage: false,
   }
 
   componentDidMount() {
@@ -75,6 +78,23 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
     return ret;
   }
 
+  handleNavigation = () => {
+    if (this.state.second_stage) {
+
+    } else {
+      if (this.state.checked.length === 0) {
+        this.props.notifyError('No files have been checked');
+      } else {
+        this.setState({
+          second_stage: true,
+        });
+      }
+    }
+  }
+
+  onExportSkylinksReply = (_, arg) => {
+  }
+
   onGrabSkynetTreeReply = (_, arg) => {
     if (arg.data.Success) {
       this.setState({
@@ -93,12 +113,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
     }
   }
 
-  onExportSkylinksReply = (_, arg) => {
-
-  }
-
   render() {
-    console.log(this.state.expanded);
     return this.props.AppBusy ? (<div/>) : (
       <Box dxDark dxStyle={{
         height: '90vh',
@@ -119,25 +134,69 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends IPCCon
              style={{cursor: 'pointer'}}>X</a>
         </div>
         <h1 className={'SkynetExportHeading'}>{'Export Files'}</h1>
+        <div style={{overflowX: 'auto', overflowY: 'auto', height: 'calc(90vh - 80px)'}}>
+          {
+            this.state.second_stage ? (<div/>) : (
               <CheckboxTree checked={this.state.checked}
                             expanded={this.state.expanded}
+                            expandOnClick
+                            showExpandAll
                             icons={{
-                        check: <FontAwesomeIcon icon={faCheckSquare}/>,
+                              check: <FontAwesomeIcon icon={faCheckSquare} fixedWidth
-                        uncheck: <FontAwesomeIcon icon={faSquare}/>,
+                                                      style={{padding: 0, margin: 0}}/>,
-                        halfCheck: <FontAwesomeIcon icon={faHSquare}/>,
+                              uncheck: <FontAwesomeIcon icon={faSquare} fixedWidth
-                        expandClose: <FontAwesomeIcon icon={faChevronRight}/>,
+                                                        style={{padding: 0, margin: 0}}/>,
-                        expandOpen: <FontAwesomeIcon icon={faChevronDown}/>,
+                              halfCheck: <FontAwesomeIcon icon={faHSquare} fixedWidth
-                        expandAll: <FontAwesomeIcon icon={faPlusSquare}/>,
+                                                          style={{padding: 0, margin: 0}}/>,
-                        collapseAll: <FontAwesomeIcon icon={faMinusSquare}/>,
+                              expandClose: <FontAwesomeIcon icon={faChevronRight} fixedWidth
+                                                            style={{padding: 0, margin: 0}}/>,
+                              expandOpen: <FontAwesomeIcon icon={faChevronDown} fixedWidth
+                                                           style={{padding: 0, margin: 0}}/>,
+                              expandAll: <FontAwesomeIcon icon={faPlusSquare} fixedWidth
+                                                          style={{padding: 0, margin: 0}}/>,
+                              collapseAll: <FontAwesomeIcon icon={faMinusSquare} fixedWidth
+                                                            style={{padding: 0, margin: 0}}/>,
                               parentClose: <FontAwesomeIcon icon={faFolder}
-                                                      color={'var(--heading_text_color)'}/>,
+                                                            fixedWidth
+                                                            color={'var(--heading_text_color)'}
+                                                            style={{padding: 0, margin: 0}}/>,
                               parentOpen: <FontAwesomeIcon icon={faFolderOpen}
-                                                     color={'var(--heading_text_color)'}/>,
+                                                           fixedWidth
-                        leaf: <FontAwesomeIcon icon={faFile} color={'var(--heading_text_color)'}/>
+                                                           color={'var(--heading_text_color)'}
+                                                           style={{padding: 0, margin: 0}}/>,
+                              leaf: <FontAwesomeIcon icon={faFile}
+                                                     fixedWidth
+                                                     color={'var(--text_color)'}
+                                                     style={{padding: 0, margin: 0}}/>
                             }}
                             nodes={this.state.nodes}
+                            onClick={clicked => this.setState({clicked})}
                             onCheck={checked => this.setState({checked})}
                             onExpand={expanded => this.setState({expanded})}/>
+            )
+          }
+        </div>
+        <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+          {
+            this.state.second_stage ?
+              <Button buttonStyles={{
+                height: 'auto',
+                marginLeft: 'var(--default_spacing)',
+                marginTop: 'var(--default_spacing)',
+                width: 'auto'
+              }} clicked={() => this.setState({
+                second_stage: false,
+              })}>{'Back'}</Button> :
+              null
+          }
+          <Button buttonStyles={{
+            height: 'auto',
+            marginLeft: 'var(--default_spacing)',
+            marginTop: 'var(--default_spacing)',
+            width: 'auto'
+          }}
+                  clicked={this.handleNavigation}>{this.state.second_stage ? 'Export' : 'Next'}</Button>
+        </div>
       </Box>
     );
   }