add sample

Yinger · Sep 21, 2020 · 6908def · 6908def
1 parent 8a61189
commit 6908def
Show file tree

Hide file tree

Showing 6 changed files with 352 additions and 12 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -99,12 +99,6 @@ function App() {
     }
   };
 
-  const onDiffClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-
-    diff(leftsheetdata, rightsheetdata, hotTableComponentDiffResult);
-  };
-
   return (
     <div className="App">
       <Row>
@@ -122,7 +116,11 @@ function App() {
           <DiffButtonHooks
             btntext={diffBtnText}
             onDiffBtnClick={(e) => {
-              onDiffClick(e);
+              diff(leftsheetdata, rightsheetdata, hotTableComponentDiffResult);
+            }}
+            onSampleBtnClick={(e) => {
+              setLeftSheetData(ExcelHelper.SampleDataLeft);
+              setRightSheetData(ExcelHelper.SampleDataRight);
             }}
           />
         </Col>

diff --git a/src/components/DiffBtn.tsx b/src/components/DiffBtn.tsx
@@ -5,16 +5,26 @@ import { Button } from "antd";
 interface DiffBtn {
   btntext: string;
   onDiffBtnClick(e: React.MouseEvent<HTMLElement, MouseEvent>): any;
+  onSampleBtnClick(e: React.MouseEvent<HTMLElement, MouseEvent>): any;
 }
 
 const DiffButtonHooks = (props: DiffBtn) => {
   return (
     <div style={{ textAlign: "center" }}>
+      <Button
+        type="dashed"
+        size="small"
+        style={{ marginTop: 150 }}
+        onClick={(e) => props.onSampleBtnClick(e)}
+      >
+        {"< Sample >"}
+      </Button>
       <Button
         ref={React.createRef()}
         id="btn-diff"
         type="primary"
-        style={{ marginTop: 150 }}
+        style={{ marginTop: 10 }}
+        size="large"
         onClick={(e) => props.onDiffBtnClick(e)}
       >
         {props.btntext}

diff --git a/src/components/Import.tsx b/src/components/Import.tsx
@@ -14,11 +14,11 @@ const ImportHooks = (props: Import) => {
   return (
     <Input.Group
       compact
-      style={{ marginRight: 10, marginTop: -15, marginBottom: 3 }}
+      style={{ marginRight: 10, marginTop: -25, marginBottom: 3 }}
     >
       <input
         name={"file-upload"}
-        style={{ width: "50%" }}
+        style={{ width: "50%", marginTop: 10 }}
         type="file"
         accept={ExcelHelper.SheetJSFT()}
         aria-label="Select original file"

diff --git a/src/components/Left.tsx b/src/components/Left.tsx
@@ -27,7 +27,7 @@ const LeftHooks = (props: Left) => {
   };
   return (
     <>
-      <div className="left" style={{ padding: 10 }}>
+      <div className="left" style={{ padding: 10, marginTop: -25 }}>
         <h1 style={{ marginLeft: 3 }}>{"<元・original>"}</h1>
         <ImportHooks
           sheetname={props.sheetname}

diff --git a/src/components/Right.tsx b/src/components/Right.tsx
@@ -27,7 +27,7 @@ const RightHooks = (props: Right) => {
   };
   return (
     <>
-      <div className="right" style={{ padding: 10 }}>
+      <div className="right" style={{ padding: 10, marginTop: -25 }}>
         <h1 style={{ marginLeft: 3 }}>{"<先・modified>"}</h1>
         <ImportHooks
           sheetname={props.sheetname}