multi-table support, meta-control wrapping, viewport parameter error fix

readeral · Jul 23, 2017 · b2cfccb · b2cfccb
1 parent 127fd54
commit b2cfccb
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 94 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
     <meta name="theme-color" content="#000000">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

diff --git a/src/App.css b/src/App.css
@@ -69,25 +69,6 @@ button {
   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
 }
 
-#param-button {
-  min-width: 3%;
-  margin: 0 0 10px 10px;
-}
-
-#about-button {
-  min-width: 25%;
-  margin: 0 10px 10px 5px;
-}
-
-.desktop {
-  display: none;
-}
-
-.mobile {
-  display: inline-block;
-}
-
-
 @media (min-width : 481px) {
   .leftSub {
     width: 68%;
@@ -102,19 +83,4 @@ button {
     width: 38%;
     margin: 0 1% 0 1%;
   }
-  .desktop {
-    display: inline-block;
-  }
-  .mobile {
-    display: none;
-  }
-  #param-button {
-    min-width: 130px;
-    margin: 0 0 10px 0px;
-  }
-
-  #about-button {
-    min-width: auto;
-    margin: 0 10px 10px 5px;
-  }
 }
diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,7 @@ import ItemUpdate from "./Components/ItemUpdate";
 import Parameters from "./Components/Parameters/Parameters";
 import ControlPanel from "./Components/ControlPanel/ControlPanel";
 import MethodToggle from "./Components/MethodToggle/MethodToggle";
+import MetaControls from "./Components/MetaControls/MetaControls";
 import Papa from "papaparse";
 
 class App extends Component {
@@ -198,9 +199,10 @@ class App extends Component {
       Papa.parse(file[0], {
         header: false,
         complete: results => {
-          this.setState({
-            tabled: results.data
-          });
+          this.setState(previousState => ({
+            tabled: [...previousState.tabled, results.data]
+          }));
+          console.log(this.state.tabled);
         }
       });
       resolve();
@@ -368,20 +370,12 @@ class App extends Component {
               onClear={this.onClear}
             />
           </div>
-          <button
-            id="param-button"
-            onClick={this.switchState}
-            className="button mobile"
-          >
-            {this.state.switch === true ? "Close" : "Parameters"}
-          </button>
-          <button
-            id="about-button"
-            onClick={this.handleAbout}
-            className="button mobile"
-          >
-            About
-          </button>
+          <MetaControls
+            switch={this.state.switch}
+            switchState={this.switchState}
+            handleAbout={this.handleAbout}
+            class="mobile"
+          />
           <div
             className={
               this.state.switch === true
@@ -405,24 +399,17 @@ class App extends Component {
               </div>
             </div>
           </div>
-          <button
-            id="param-button"
-            onClick={this.switchState}
-            className="button desktop"
-          >
-            {this.state.switch === true ? "Close" : "Parameters"}
-          </button>
-          <button
-            id="about-button"
-            onClick={this.handleAbout}
-            className="button desktop"
-          >
-            About
-          </button>
+          <MetaControls
+            switch={this.state.switch}
+            switchState={this.switchState}
+            handleAbout={this.handleAbout}
+            class="desktop"
+          />
         </div>
         <div id="right">
           <h2>CSV Preview</h2>
-          <Table tabled={this.state.tabled} keyed={this.state.keyed} />
+          <Table tabled={this.state.tabled} />
+
         </div>
       </div>
     );

diff --git a/src/Components/MetaControls/MetaControls.css b/src/Components/MetaControls/MetaControls.css
@@ -0,0 +1,38 @@
+
+#param-button {
+  min-width: 3%;
+  margin: 0 0 10px 10px;
+}
+
+#about-button {
+  min-width: 25%;
+  margin: 0 10px 10px 5px;
+}
+
+
+
+.desktop {
+  display: none;
+}
+
+.mobile {
+  display: inline-block;
+}
+
+@media (min-width : 481px) {
+  .desktop {
+    display: inline-block;
+  }
+  .mobile {
+    display: none;
+  }
+  #param-button {
+    min-width: 130px;
+    margin: 0 0 10px 0px;
+  }
+
+  #about-button {
+    min-width: auto;
+    margin: 0 10px 10px 5px;
+  }
+}
diff --git a/src/Components/MetaControls/MetaControls.js b/src/Components/MetaControls/MetaControls.js
@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import "./MetaControls.css";
+
+class MetaControls extends Component {
+  render() {
+    return (
+      <div id="meta-control" className={this.props.class}>
+        <button
+          id="param-button"
+          onClick={this.props.switchState}
+          className="button"
+        >
+          {this.props.switch === true ? "Close" : "Parameters"}
+        </button>
+        <button
+          id="about-button"
+          onClick={this.props.handleAbout}
+          className="button"
+        >
+          About
+        </button>
+      </div>
+    );
+  }
+}
+
+export default MetaControls;
diff --git a/src/Components/MethodToggle/MethodToggle.css b/src/Components/MethodToggle/MethodToggle.css
@@ -11,7 +11,7 @@
   }
 }
 
-label input {
+.label100 {
   width: 100%;
 }
 

diff --git a/src/Components/MethodToggle/MethodToggle.js b/src/Components/MethodToggle/MethodToggle.js
@@ -14,12 +14,16 @@ class MethodToggle extends Component {
         }}
       >
         <Radio value="increment" id="increment" />
-        <label htmlFor="increment" className="button-simple">Increment</label>
+        <label htmlFor="increment" className="button-simple label100">
+          Increment
+        </label>
 
         <Radio value="decrement" id="decrement" />
-        <label htmlFor="decrement" className="button-simple">Decrement</label>
+        <label htmlFor="decrement" className="button-simple label100">
+          Decrement
+        </label>
         <Radio value="set" id="set" />
-        <label htmlFor="set" className="button-simple">Set</label>
+        <label htmlFor="set" className="button-simple label100">Set</label>
       </RadioGroup>
     );
   }

diff --git a/src/Components/Table/RenderList.js b/src/Components/Table/RenderList.js
@@ -7,15 +7,6 @@ const RenderList = props => (
         {index === 0
           ? row.map((val, index) => <th key={index}>{val}</th>)
           : row.map((val, index) => <td key={index}>{val}</td>)}
-        <td>
-          <form>
-            <input
-              className="form-checkbox"
-              name={"n" + index}
-              type="checkbox"
-            />
-          </form>
-        </td>
       </tr>
     ))}
   </tbody>

diff --git a/src/Components/Table/Table.css b/src/Components/Table/Table.css
@@ -17,8 +17,10 @@ table, th, td {
     border: 1px solid black;
 }
 
-#table {
+
+.tab-content {
 overflow-y: auto;
 overflow-x: auto;
-height: calc(100vh - 80px);
+height: calc(100vh - 150px);
+width: 100%;
 }
diff --git a/src/Components/Table/Table.js b/src/Components/Table/Table.js
@@ -3,21 +3,11 @@ import RenderList from "./RenderList";
 import "./Table.css";
 
 class Table extends Component {
-  constructor(props) {
-    super(props);
-    this.handleFormSubmit = this.handleFormSubmit.bind(this);
-  }
-
-  handleFormSubmit() {}
-
   render() {
     return (
-      <div id="table">
+      <div className="tab-content" id="table">
         <table id="cooltable">
-          <RenderList
-            data={this.props.tabled}
-            onSubmit={this.handleFormSubmit}
-          />
+          {this.props.tabled.map((one, index) => <RenderList data={one} />)}
         </table>
       </div>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
       }
     }
-    label input {
+    .label100 {
       width: 100%;
     }
@@ Expand Down @@