move getRootProps to Card

siriwatknp · Oct 31, 2023 · eccf23b · eccf23b
1 parent 43db1ef
commit eccf23b
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 68 deletions.
diff --git a/blocks/card-upload-document/src/CardUploadDocument.tsx b/blocks/card-upload-document/src/CardUploadDocument.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { useDropzone } from "react-dropzone";
+import { DropzoneRootProps, useDropzone } from "react-dropzone";
 import { Typography } from "@mui/joy";
 import Box from "@mui/joy/Box";
 import Button from "@mui/joy/Button";
@@ -10,7 +10,7 @@ import SvgIcon from "@mui/joy/SvgIcon";
 export default function CardUploadDocument() {
   const onDrop = useCallback((acceptedFiles: File[]) => {
     // Do something with the files
-    console.log(acceptedFiles);
+    alert(`${acceptedFiles.length} files uploaded.`);
   }, []);
   const { getRootProps, isDragActive } = useDropzone({
     onDrop,
@@ -19,73 +19,72 @@ export default function CardUploadDocument() {
   });
 
   return (
-    <div {...getRootProps()}>
-      <Card
-        variant="plain"
-        sx={{ minWidth: 300, borderRadius: "xl", boxShadow: "lg" }}
-        size="sm"
+    <Card
+      {...(getRootProps() as Omit<DropzoneRootProps, "color">)}
+      variant="plain"
+      sx={{ minWidth: 300, borderRadius: "xl", boxShadow: "lg" }}
+      size="sm"
+    >
+      <CardContent
+        sx={{
+          border: "1px dashed",
+          borderColor: isDragActive
+            ? "var(--variant-outlinedBorder, var(--joy-palette-neutral-outlinedBorder, var(--joy-palette-neutral-300, #CDD7E1)))"
+            : "transparent",
+          padding: "2rem",
+          textAlign: "center",
+          alignItems: "center",
+          borderRadius: "var(--Card-radius)",
+          gap: "1rem",
+        }}
       >
-        <CardContent
-          sx={{
-            border: "1px dashed",
-            borderColor: isDragActive
-              ? "var(--variant-outlinedBorder, var(--joy-palette-neutral-outlinedBorder, var(--joy-palette-neutral-300, #CDD7E1)))"
-              : "transparent",
-            padding: "2rem",
-            textAlign: "center",
-            alignItems: "center",
-            borderRadius: "var(--Card-radius)",
-            gap: "1rem",
-          }}
+        <div>
+          <Typography level="title-md">Drop document here</Typography>
+          <Typography level="body-sm">or upload it manually</Typography>
+        </div>
+        <Button
+          component="label"
+          role={undefined}
+          tabIndex={-1}
+          sx={{ borderRadius: "xl" }}
+          color="primary"
+          endDecorator={
+            <SvgIcon>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M5 12h14" />
+                <path d="M12 5v14" />
+              </svg>
+            </SvgIcon>
+          }
         >
-          <div>
-            <Typography level="title-md">Drop document here</Typography>
-            <Typography level="body-sm">or upload it manually</Typography>
-          </div>
-          <Button
-            component="label"
-            role={undefined}
-            tabIndex={-1}
-            sx={{ borderRadius: "xl" }}
-            color="primary"
-            endDecorator={
-              <SvgIcon>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M5 12h14" />
-                  <path d="M12 5v14" />
-                </svg>
-              </SvgIcon>
-            }
-          >
-            Upload manually
-            <Box
-              component="input"
-              type="file"
-              sx={{
-                clip: "rect(0 0 0 0)",
-                clipPath: "inset(50%)",
-                height: "1px",
-                overflow: "hidden",
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                whiteSpace: "nowrap",
-                width: "1px",
-              }}
-            />
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
+          Upload manually
+          <Box
+            component="input"
+            type="file"
+            sx={{
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              whiteSpace: "nowrap",
+              width: "1px",
+            }}
+          />
+        </Button>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/blocks/card-upload-document/usage.mdx b/blocks/card-upload-document/usage.mdx
@@ -7,6 +7,8 @@ import raw from "./src/CardUploadDocument?raw";
 
 This block uses [react-dropzone](https://react-dropzone.js.org/) to implement the drag-and-drop experience.
 
+Make sure to install it in your project in order to use this block:
+
 ## CLI
 
 ```sh