feat(custom-dropzone): customize react-dropzone

src/components/custom-dropzone.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
+import styled from "@emotion/styled";
+import { Text } from ".";
+
+const Container = styled.div`
+  border: 1px solid var(--color-dark);
+  margin-bottom: var(--spacing-y-sm);
+  padding: var(--spacing-y-lg) var(--spacing-x-sm);
+  text-align: center;
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px var(--color-dark);
+  }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+`;
+
+export default function CustomDropzone({ name, files, setFiles, ...other }) {
+  const onDrop = useCallback(acceptedFiles => {
+    setFiles(acceptedFiles[0]);
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+  return (
+    <Container {...getRootProps()} {...other}>
+      <input name={name} {...getInputProps()} />
+      {isDragActive ? (
+        <Text noMargin>Drop the images here</Text>
+      ) : (
+        <Text noMargin>
+          Drop your images here, or click to select the files
+        </Text>
+      )}
+    </Container>
+  );
+}

src/components/index.js

@@ -1,6 +1,7 @@
 export { default as Button } from "./button";
 export { default as Card } from "./card";
 export { default as Content } from "./content";
+export { default as CustomDropzone } from "./custom-dropzone";
 export { default as CustomGallery } from "./custom-gallery";
 export { default as CustomSlick } from "./custom-slick";
 export { default as Footer } from "./footer";
@@ -20,7 +21,7 @@ export { default as NavLink } from "./nav-link";
 export { default as Nav } from "./nav";
 export { default as ReviewSummary } from "./review-summary";
 export { default as Section } from "./section";
-export { default as Select } from './select';
+export { default as Select } from "./select";
 export { default as Table } from "./table";
 export { default as Text } from "./text";
 export { default as Tile } from "./tile";

src/pages/contact.js

@@ -1,10 +1,10 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { graphql } from "gatsby";
 import { Marker } from "google-maps-react";
-import { useDropzone } from "react-dropzone";
 import Layout from "../layout";
 import {
   Button,
+  CustomDropzone,
   Grid,
   Header,
   Heading,
@@ -33,12 +33,9 @@ const encode = data => {
 
 export default function Index({ data }) {
   const [submitted, setSubmitted] = useState();
+  const [uploadFiles, setUploadFiles] = useState();
   const [files, setFiles] = useState({});
 
-  const onDrop = useCallback(acceptedFiles => {
-    setFiles(acceptedFiles[0]);
-  }, []);
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
   const handleSubmit = e => {
     e.preventDefault();
     const body = encode({
@@ -196,6 +193,7 @@ export default function Index({ data }) {
                     id="contact-start"
                     name="start"
                     options={[
+                      { value: "", label: "" },
                       { value: "urgently", label: "Urgently" },
                       { value: "1week", label: "Within 1 week" },
                       { value: "2weeks", label: "Within 2 weeks" },
@@ -211,6 +209,7 @@ export default function Index({ data }) {
                     id="contact-stage"
                     name="stage"
                     options={[
+                      { value: "", label: "" },
                       { value: "ready", label: "I'm ready to hire" },
                       {
                         value: "budgeting",
@@ -229,6 +228,7 @@ export default function Index({ data }) {
                     id="contact-status"
                     name="status"
                     options={[
+                      { value: "", label: "" },
                       { value: "owner", label: "I own the property" },
                       { value: "landlord", label: "I am the landlord" },
                       { value: "tenant", label: "I am a tenant" },
@@ -239,17 +239,21 @@ export default function Index({ data }) {
                     Describe what needs to be done
                   </Label>
                   <InputText id="contact-message" name="message" textArea />
-                  <div {...getRootProps()}>
-                    <input name="files" {...getInputProps()} />
-                    {isDragActive ? (
-                      <Text>Drop the images here</Text>
-                    ) : (
-                      <Text>
-                        Drop your images here, or click to select the files
-                      </Text>
-                    )}
-                  </div>
-                  <Button type="submit">Submit</Button>
+                  <Button
+                    style={{ display: uploadFiles ? "none" : "inline-block" }}
+                    onClick={() => setUploadFiles(true)}
+                  >
+                    Upload images
+                  </Button>
+                  <CustomDropzone
+                    style={{ display: uploadFiles ? "block" : "none" }}
+                    name="files"
+                    files={files}
+                    setFiles={setFiles}
+                  />
+                  <Button type="submit" float="right">
+                    Submit
+                  </Button>
                 </form>
               </>
             )}