Export modal drop area

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/components/Modals/Modal.styles.ts

@@ -369,3 +369,83 @@ export const StyledModalEditableList = styled.ul<StyledModalEditableListProps>`
     border-bottom-left-radius: 5px;
   }
 `;
+
+interface StyledModelDropAreaProps {
+  text?: string;
+  bgColor?: string;
+  hoverColor?: string;
+  buttonColor?: string;
+  borderColor?: string;
+  hoverBorderColor?: string;
+  roundness?: number;
+  active?: boolean;
+}
+
+const handleActive = (p: StyledModelDropAreaProps) => {
+  if (p.active) {
+    return `
+      background-color: ${p.borderColor ?? primaryColor} !important;
+      border-color: ${p.hoverBorderColor ?? primaryColor} !important;
+    `;
+  }
+};
+
+export const StyledModalDropArea = styled.label<StyledModelDropAreaProps>`
+  position: relative;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  padding: 20px;
+  border-radius: ${(p) => p.roundness ?? 1}px;
+  margin-bottom: 10px;
+  border: 2px dashed ${(p) => p.borderColor ?? primaryColor};
+  color: ${(p) => p.text ?? primaryColor};
+  cursor: pointer;
+  transition:
+    background 0.2s ease-in-out,
+    border 0.2s ease-in-out;
+  &:hover {
+    background: ${(p) => p.borderColor ?? primaryColor};
+    border-color: ${(p) => p.hoverBorderColor ?? primaryColor};
+  }
+
+  & span {
+    color: ${(p) => p.text ?? primaryColor};
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    transition: color 0.2s ease-in-out;
+  }
+
+  & input {
+    width: 350px;
+    border: 2px solid ${(p) => p.borderColor ?? primaryColor};
+    color: ${(p) => p.text ?? primaryColor};
+    font-size: medium;
+    background-color: ${(p) => p.bgColor ?? primaryColor};
+    border-radius: ${(p) => p.roundness ?? 1}px;
+    padding: 5px;
+    font-size: medium;
+    outline: none;
+
+    &::file-selector-button {
+      margin-right: 20px;
+      border: none;
+      background: ${(p) => p.buttonColor ?? primaryColor};
+      padding: 10px 20px;
+      border-radius: ${(p) => p.roundness ?? 1}px;
+      color: ${(p) => p.text ?? primaryColor};
+      cursor: pointer;
+      transition: background 0.2s ease-in-out;
+    }
+
+    &::file-selector-button:hover {
+      background: ${(p) => p.hoverColor ?? primaryColor};
+    }
+  }
+
+  ${handleActive}
+`;

src/components/Modals/Modal.tsx

@@ -5,6 +5,7 @@ import {
   StyledModalButtonRow,
   StyledModalCloseButton,
   StyledModalContent,
+  StyledModalDropArea,
   StyledModalEditableList,
   StyledModalInput,
   StyledModalInputRowContainer,
@@ -328,3 +329,58 @@ export const ModalInputDropdown = ({
     </StyledModalInput>
   );
 };
+
+interface ModalInputDropAreaProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  areaRef: React.RefObject<HTMLLabelElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  id: string;
+  dropTitle: string;
+  onChange: (event: any) => void;
+  onDrop: (event: any) => void;
+}
+
+export const ModalInputDropArea = ({
+  areaRef,
+  inputRef,
+  id,
+  dropTitle,
+  onChange,
+  onDrop,
+  ...props
+}: ModalInputDropAreaProps) => {
+  const theme = useTheme();
+  const [dropActive, setDropActive] = useState<boolean>(false);
+
+  return (
+    <StyledModalDropArea
+      ref={areaRef}
+      htmlFor={id}
+      onDragOver={(e) => {
+        e.preventDefault();
+      }}
+      onDragEnter={() => setDropActive(true)}
+      onDragLeave={() => setDropActive(false)}
+      onDrop={(e) => onDrop(e)}
+      text={theme.palette.text}
+      bgColor={theme.palette.background}
+      buttonColor={theme.palette.primary}
+      hoverColor={theme.palette.secondary}
+      borderColor={theme.palette.primary}
+      hoverBorderColor={theme.palette.background}
+      roundness={theme.roundness}
+      active={dropActive}
+    >
+      <span className="bt-modal-drop-title">{dropTitle}</span>
+      or
+      <input
+        ref={inputRef}
+        id={id}
+        name={id}
+        title={dropTitle}
+        onChange={onChange}
+        {...props}
+      />
+    </StyledModalDropArea>
+  );
+};

src/components/Modals/UploadModal.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import UploadModal from "./UploadModal";
+
+type Story = StoryObj<typeof UploadModal>;
+
+const meta: Meta<typeof UploadModal> = {
+  component: UploadModal,
+};
+
+export default meta;
+
+export const Main: Story = {
+  render: (args) => (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+      }}
+    >
+      <UploadModal
+        onSubmit={() => {}}
+        isOpen
+        onClose={() => {}}
+        upload={() => {}}
+        currentProject=""
+        location={""}
+      />
+    </div>
+  ),
+};

src/components/Modals/UploadModal.styles.ts

@@ -1,9 +1,8 @@
 import { useState, useEffect, useRef } from "react";
 
-import Modal, { ModalRow, ModalTitlebar } from "./Modal";
+import Modal, { ModalInputDropArea, ModalRow, ModalTitlebar } from "./Modal";
 import { ProgressBar } from "Components";
-import { useError, useTheme } from "Utils";
-import { StyledModalDrop } from "./UploadModal.styles";
+import { useError } from "Utils";
 
 const UploadModal = ({
   onSubmit,
@@ -20,12 +19,10 @@ const UploadModal = ({
   location: string;
   currentProject: string;
 }) => {
-  const theme = useTheme();
   const { error } = useError();
 
   const [uploadStatus, setUploadStatus] = useState("");
   const [uploadPercentage, setUploadPercentage] = useState(0);
-  const [dropActive, setDropActive] = useState<boolean>(false);
 
   const uploadInputRef = useRef<any>(null);
   const uploadAreaRef = useRef<any>(null);
@@ -120,36 +117,17 @@ const UploadModal = ({
         }}
       />
       <ModalRow>
-        <StyledModalDrop
-          ref={uploadAreaRef}
-          htmlFor="uploadDropInput"
-          onDragOver={(e) => {
-            e.preventDefault();
-          }}
-          onDragEnter={() => setDropActive(true)}
-          onDragLeave={() => setDropActive(false)}
-          onDrop={(e) => handleDrop(e)}
-          text={theme.palette.text}
-          bgColor={theme.palette.background}
-          buttonColor={theme.palette.primary}
-          hoverColor={theme.palette.secondary}
-          borderColor={theme.palette.primary}
-          hoverBorderColor={theme.palette.background}
-          roundness={theme.roundness}
-          active={dropActive}
-        >
-          <span>Drop files here</span>
-          or
-          <input
-            ref={uploadInputRef}
-            id="uploadDropInput"
-            onChange={(e) => handleAcceptedFiles(e.target.files)}
-            type="file"
-            title="Upload folder contents"
-            multiple
-            required
-          />
-        </StyledModalDrop>
+        <ModalInputDropArea
+          areaRef={uploadAreaRef}
+          inputRef={uploadInputRef}
+          id="uploadDropInput"
+          dropTitle="Drop files here"
+          onChange={(e) => handleAcceptedFiles(e.target.files)}
+          onDrop={handleDrop}
+          type="file"
+          multiple
+          required
+        />
       </ModalRow>
       {uploadStatus !== "" && <ProgressBar completed={uploadPercentage} />}
     </Modal>

src/components/Modals/UploadModal.tsx

@@ -5,6 +5,7 @@ export {
   ModalRow,
   ModalInputDropdown,
   ModalEditableList,
+  ModalInputDropArea,
 } from "./Modal";
 export { default as DeleteModal } from "./DeleteModal";
 export { default as NewFileModal } from "./NewFileModal";

src/components/Modals/index.ts

@@ -17,6 +17,7 @@ export {
   ModalInputBox,
   ModalInputDropdown,
   ModalEditableList,
+  ModalInputDropArea,
 } from "./components";
 export {
   ThemeProvider,