sprint-asia-custom-component 0.1.99 → 0.1.101

package/dist/index.js

@@ -26046,7 +26046,9 @@
     onDrop,
     maxFiles = 1,
     selectedFile,
-    error = ""
+    error = "",
+    disabled,
+    layout = "box"
   }) => {
     const [errorMessage, setErrorMessage] = React.useState("");
     const onDropRejected = rejectedFiles => {
@@ -26066,7 +26068,8 @@
       },
       noKeyboard: true,
       maxSize: 5242881,
-      onDropRejected
+      onDropRejected,
+      disabled
     });
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "w-full"
@@ -26077,16 +26080,20 @@
     }, title), required && /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm font-normal text-danger500 ml-1"
     }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "cursor-pointer"
+      className: `${disabled ? "cursor-default" : "cursor-pointer"} w-fit`
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends$2({}, getRootProps({
       className: "dropzone"
     }), {
-      className: `bg-neutral20 w-52 h-52 rounded-lg border-2 ${error ? "border-danger500" : "border-neutral50"} border-dashed`
+      style: {
+        width: layout === "box" ? "208px" : "347px",
+        height: layout === "box" ? "208px" : "192px"
+      },
+      className: `bg-neutral20 rounded-lg ${disabled ? "border-0" : "border-2"} ${error ? "border-danger500" : "border-neutral50"} border-dashed`
     }), /*#__PURE__*/React__default["default"].createElement("input", _extends$2({}, getInputProps(), {
       required: required
     })), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex w-full h-full justify-center items-center text-center"
-    }, /*#__PURE__*/React__default["default"].createElement("div", null, !selectedFile ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, !selectedFile ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex justify-center"
     }, /*#__PURE__*/React__default["default"].createElement(PiPlus, {
       size: 16,
@@ -26098,12 +26105,12 @@
     }, errorMessage)) : typeof selectedFile === "string" ? /*#__PURE__*/React__default["default"].createElement("img", {
       src: selectedFile,
       alt: "Selected",
-      className: "w-52 h-52 object-contain rounded-lg"
+      className: "object-contain rounded-lg w-full h-full"
     }) : /*#__PURE__*/React__default["default"].createElement("img", {
       src: URL.createObjectURL(selectedFile),
       alt: "Selected",
-      className: "w-52 h-52 object-contain rounded-lg"
-    }))))), error && /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "object-contain rounded-lg w-full h-full"
+    })))), error && /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-danger500 text-xs mt-1"
     }, error), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-xs text-neutral300 mt-1"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.99",
+  "version": "0.1.101",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/dropzone/uploadphoto/index.js

@@ -3,80 +3,80 @@ import { useDropzone } from "react-dropzone";
 import { PiPlus } from "react-icons/pi";
 
 const DropzoneUploadPhoto = ({
-    title = "Title Dropzone",
-    subtitle = "Format File PNG, JPEG, or JPG, Maximal File 5 MB",
-    required = false,
-    onDrop,
-    maxFiles = 1,
-    selectedFile,
-    error = "",
+  title = "Title Dropzone",
+  subtitle = "Format File PNG, JPEG, or JPG, Maximal File 5 MB",
+  required = false,
+  onDrop,
+  maxFiles = 1,
+  selectedFile,
+  error = "",
+  disabled,
+  layout = "box",
 }) => {
-    const [errorMessage, setErrorMessage] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
 
-    const onDropRejected = (rejectedFiles) => {
-        const file = rejectedFiles[0];
-        if (file.errors[0]?.code === "file-too-large") {
-            setErrorMessage("Your file is too large, Max file size is 5 MB");
-        }
-    };
+  const onDropRejected = (rejectedFiles) => {
+    const file = rejectedFiles[0];
+    if (file.errors[0]?.code === "file-too-large") {
+      setErrorMessage("Your file is too large, Max file size is 5 MB");
+    }
+  };
 
-    const { getRootProps, getInputProps } = useDropzone({
-        onDrop,
-        maxFiles,
-        accept: {
-            "image/*": [".jpeg", ".png", ".jpg"],
-        },
-        noKeyboard: true,
-        maxSize: 5242881,
-        onDropRejected,
-    });
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    maxFiles,
+    accept: {
+      "image/*": [".jpeg", ".png", ".jpg"],
+    },
+    noKeyboard: true,
+    maxSize: 5242881,
+    onDropRejected,
+    disabled,
+  });
 
-    return (
-        <div className="w-full">
-            <div className="flex items-center">
-                <p className="text-black text-sm mb-1">{title}</p>
-                {required && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
-            </div>
-            <div className="cursor-pointer">
-                <div
-                    {...getRootProps({ className: "dropzone" })}
-                    className={`bg-neutral20 w-52 h-52 rounded-lg border-2 ${
-                        error ? "border-danger500" : "border-neutral50"
-                    } border-dashed`}
-                >
-                    <input {...getInputProps()} required={required} />
-                    <div className="flex w-full h-full justify-center items-center text-center">
-                        <div>
-                            {!selectedFile ? (
-                                <>
-                                    <div className="flex justify-center">
-                                        <PiPlus size={16} className="text-neutral300" />
-                                    </div>
-                                    <p className="text-sm text-neutral300 mt-2">Upload Photo</p>
-                                    {errorMessage && <p className="text-xs text-danger500">{errorMessage}</p>}
-                                </>
-                            ) : (
-                                typeof selectedFile === "string" ?
-                                    <img
-                                        src={selectedFile}
-                                        alt="Selected"
-                                        className="w-52 h-52 object-contain rounded-lg"
-                                    />
-                                    :
-                                    <img
-                                        src={URL.createObjectURL(selectedFile)}
-                                        alt="Selected"
-                                        className="w-52 h-52 object-contain rounded-lg"
-                                    />
-                            )}
-                        </div>
-                    </div>
+  return (
+    <div className="w-full">
+      <div className="flex items-center">
+        <p className="text-black text-sm mb-1">{title}</p>
+        {required && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
+      </div>
+      <div className={`${disabled ? "cursor-default" : "cursor-pointer"} w-fit`}>
+        <div
+          {...getRootProps({ className: "dropzone" })}
+          style={{
+            width: layout === "box" ? "208px" : "347px",
+            height: layout === "box" ? "208px" : "192px",
+          }}
+          className={`bg-neutral20 rounded-lg ${disabled ? "border-0" : "border-2"} ${
+            error ? "border-danger500" : "border-neutral50"
+          } border-dashed`}
+        >
+          <input {...getInputProps()} required={required} />
+          <div className="flex w-full h-full justify-center items-center text-center">
+            {!selectedFile ? (
+              <>
+                <div className="flex justify-center">
+                  <PiPlus size={16} className="text-neutral300" />
                 </div>
-            </div>
-            {error && <p className="text-danger500 text-xs mt-1">{error}</p>}
-            <p className="text-xs text-neutral300 mt-1">{subtitle}</p>
+                <p className="text-sm text-neutral300 mt-2">Upload Photo</p>
+                {errorMessage && <p className="text-xs text-danger500">{errorMessage}</p>}
+              </>
+            ) : typeof selectedFile === "string" ? (
+              <img src={selectedFile} alt="Selected" className="object-contain rounded-lg w-full h-full" />
+            ) : (
+              <img
+                src={URL.createObjectURL(selectedFile)}
+                alt="Selected"
+                className="object-contain rounded-lg w-full h-full"
+              />
+            )}
+          </div>
         </div>
-    );
+      </div>
+      {error && <p className="text-danger500 text-xs mt-1">{error}</p>}
+      <p className="text-xs text-neutral300 mt-1">{subtitle}</p>
+    </div>
+  );
 };
 
-export default DropzoneUploadPhoto;
+export default DropzoneUploadPhoto;

package/src/templates/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useState, useEffect } from "react";
 import Alert from "../components/alert";
 import DangerButton from "../components/button/dangerbutton";
@@ -101,10 +101,14 @@ const Templates = () => {
 
   const [currentImage, setCurrentImage] = useState(null);
 
-  const handleFileChange = (file) => {
-    console.log(file);
-    setCurrentImage(URL.createObjectURL(file));
-  };
+  // const handleFileChange = (file) => {
+  //   console.log(file);
+  //   setCurrentImage(URL.createObjectURL(file));
+  // };
+
+  const handleFileChange = useCallback((acceptedFiles) => {
+    setCurrentImage(acceptedFiles[0]);
+  }, []);
 
   const [data, setData] = useState([
     { id: 1, name: "John Doe", email: "john@example.com" },
@@ -1108,7 +1112,12 @@ const Templates = () => {
       <DropzoneUploadFile title="Upload Your File" subtitle="Accepts PDF, JPEG, JPG. Max size 5 MB" required={true} />
 
       <div className="m-9"></div>
-      <DropzoneUploadPhoto onFileChange={handleFileChange} currentImage={currentImage} />
+      <DropzoneUploadPhoto
+        onDrop={handleFileChange}
+        // disabled={true}
+        // layout="rectangle"
+        selectedFile={currentImage}
+      />
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Empty Data</p>