add reset

Yinger · Sep 22, 2020 · cd7abf5 · cd7abf5
1 parent db6bbb2
commit cd7abf5
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 225 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { WorkBook } from "xlsx/types";
 import { Row, Col, Select } from "antd";
 
@@ -19,19 +19,22 @@ function App() {
   const [leftsheetlist, setLeftSheetlist] = useState<any[] | null>(null);
   const [hotTableComponentLeft] = useState(React.createRef());
   const [leftsheetdata, setLeftSheetData] = useState(
-    JSON.parse(JSON.stringify(ExcelHelper.BlankData(12, 10)))
+    JSON.parse(JSON.stringify(ExcelHelper.BlankData(12, 8)))
   );
   const [leftWorkbook, setLeftWorkbook] = useState<WorkBook>();
   const [rightsheetname, setRightSheetname] = useState("Sheet1");
   const [rightsheetlist, setRightSheetlist] = useState<any[] | null>(null);
   const [hotTableComponentRight] = useState(React.createRef());
   const [rightsheetdata, setRightSheetData] = useState(
-    JSON.parse(JSON.stringify(ExcelHelper.BlankData(12, 10)))
+    JSON.parse(JSON.stringify(ExcelHelper.BlankData(12, 8)))
   );
   const [rightWorkbook, setRightWorkbook] = useState<WorkBook>();
   const [diffBtnText] = useState(">> Diff <<");
   const [hotTableComponentDiffResult] = useState(React.createRef());
 
+  const leftFileSelectRef = useRef<any>(null);
+  const rightFileSelectRef = useRef<any>(null);
+
   const fileHandler = (
     event: React.ChangeEvent<HTMLInputElement>,
     field: string
@@ -110,6 +113,7 @@ function App() {
             onSheetSelectChange={(e) => onSheetFieldChange(e, "left")}
             hotTableComponentLeft={hotTableComponentLeft}
             sheetdata={leftsheetdata}
+            fileRef={leftFileSelectRef}
           />
         </Col>
         <Col span={2}>
@@ -122,6 +126,21 @@ function App() {
               setLeftSheetData(ExcelHelper.SampleDataLeft);
               setRightSheetData(ExcelHelper.SampleDataRight);
             }}
+            onResetBtnClick={(e) => {
+              // window.location.reload();
+              leftFileSelectRef.current.value = "";
+              rightFileSelectRef.current.value = "";
+              setLeftSheetlist(null);
+              setRightSheetlist(null);
+              setLeftSheetname("Sheet1");
+              setRightSheetname("Sheet1");
+              setLeftSheetData(
+                JSON.parse(JSON.stringify(ExcelHelper.BlankData(12, 8)))
+              );
+              setRightSheetData(
+                JSON.parse(JSON.stringify(ExcelHelper.BlankData(12, 8)))
+              );
+            }}
           />
         </Col>
         <Col span={11}>
@@ -132,6 +151,7 @@ function App() {
             onSheetSelectChange={(e) => onSheetFieldChange(e, "right")}
             hotTableComponentRight={hotTableComponentRight}
             sheetdata={rightsheetdata}
+            fileRef={rightFileSelectRef}
           />
         </Col>
         <Col span={24} style={{ textAlign: "center" }}>

diff --git a/src/components/Center.tsx b/src/components/Center.tsx
@@ -6,6 +6,7 @@ interface DiffBtn {
   btntext: string;
   onDiffBtnClick(e: React.MouseEvent<HTMLElement, MouseEvent>): any;
   onSampleBtnClick(e: React.MouseEvent<HTMLElement, MouseEvent>): any;
+  onResetBtnClick(e: React.MouseEvent<HTMLElement, MouseEvent>): any;
 }
 
 const CenterHooks = (props: DiffBtn) => {
@@ -29,6 +30,15 @@ const CenterHooks = (props: DiffBtn) => {
       >
         {props.btntext}
       </Button>
+      <Button
+        ref={React.createRef()}
+        id="btn-clean"
+        type="default"
+        style={{ marginTop: 10 }}
+        onClick={(e) => props.onResetBtnClick(e)}
+      >
+        {" << reset >> "}
+      </Button>
     </div>
   );
 };

diff --git a/src/components/Import.tsx b/src/components/Import.tsx
@@ -6,6 +6,7 @@ import "antd/dist/antd.css";
 interface Import {
   sheetname: string;
   sheetlist: any;
+  fileRef: React.RefObject<any>;
   onFileSelectChange(e: React.ChangeEvent<HTMLInputElement>): any;
   onSheetSelectChange(e: string): any;
 }
@@ -23,6 +24,7 @@ const ImportHooks = (props: Import) => {
         accept={ExcelHelper.SheetJSFT()}
         aria-label="Select original file"
         onChange={(e) => props.onFileSelectChange(e)}
+        ref={props.fileRef}
       ></input>
       <Select
         style={{ width: "40%" }}

diff --git a/src/components/Left.tsx b/src/components/Left.tsx
@@ -6,6 +6,7 @@ import ImportHooks from "../components/Import";
 interface Left {
   sheetname: string;
   sheetlist: any;
+  fileRef: React.RefObject<any>;
 
   sheetdata: any[][] | Handsontable.RowObject[];
   hotTableComponentLeft: React.RefObject<any>;
@@ -19,9 +20,9 @@ const LeftHooks = (props: Left) => {
     colHeaders: true,
     rowHeaders: true,
     height: 305,
-    minRows: 5,
-    minCols: 5,
-    colWidth: 100,
+    minRows: 12,
+    minCols: 8,
+    // colWidth: 100,
     licenseKey: "non-commercial-and-evaluation",
     id: "table-left",
   };
@@ -36,11 +37,12 @@ const LeftHooks = (props: Left) => {
             props.onFileSelectChange(e)
           }
           onSheetSelectChange={(e: string) => props.onSheetSelectChange(e)}
+          fileRef={props.fileRef}
         />
         <HotTable
           ref={props.hotTableComponentLeft}
           data={props.sheetdata}
-          style={{ width: "100%" }}
+          style={{ width: "98%" }}
           settings={hotLeftSettings}
           stretchH={"all"}
         />

diff --git a/src/components/Right.tsx b/src/components/Right.tsx
@@ -6,6 +6,7 @@ import ImportHooks from "../components/Import";
 interface Right {
   sheetname: string;
   sheetlist: any;
+  fileRef: React.RefObject<any>;
 
   sheetdata: any[][] | Handsontable.RowObject[];
   hotTableComponentRight: React.RefObject<any>;
@@ -19,9 +20,9 @@ const RightHooks = (props: Right) => {
     colHeaders: true,
     rowHeaders: true,
     height: 305,
-    minRows: 5,
-    minCols: 5,
-    colWidth: 100,
+    minRows: 12,
+    minCols: 8,
+    // colWidth: 100,
     licenseKey: "non-commercial-and-evaluation",
     id: "table-right",
   };
@@ -36,11 +37,12 @@ const RightHooks = (props: Right) => {
             props.onFileSelectChange(e)
           }
           onSheetSelectChange={(e: string) => props.onSheetSelectChange(e)}
+          fileRef={props.fileRef}
         />
         <HotTable
           ref={props.hotTableComponentRight}
           data={props.sheetdata}
-          style={{ width: "100%" }}
+          style={{ width: "98%" }}
           settings={hotRightSettings}
           stretchH={"all"}
         />