sprint-asia-custom-component 0.1.100 → 0.1.101

package/dist/index.js

@@ -26093,7 +26093,7 @@
       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,
@@ -26105,12 +26105,12 @@
     }, errorMessage)) : typeof selectedFile === "string" ? /*#__PURE__*/React__default["default"].createElement("img", {
       src: selectedFile,
       alt: "Selected",
-      className: "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: "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.100",
+  "version": "0.1.101",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

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

@@ -53,21 +53,23 @@ const DropzoneUploadPhoto = ({
         >
           <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="object-contain rounded-lg" />
-              ) : (
-                <img src={URL.createObjectURL(selectedFile)} alt="Selected" className="object-contain rounded-lg" />
-              )}
-            </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="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>

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" },
@@ -1109,10 +1113,10 @@ const Templates = () => {
 
       <div className="m-9"></div>
       <DropzoneUploadPhoto
-        onFileChange={handleFileChange}
-        disabled={true}
-        layout="rectangle"
-        selectedFile={`http://192.168.4.224:8081/voucher/27bf0b31-39e2-4995-874d-1363fe578423.jpg`}
+        onDrop={handleFileChange}
+        // disabled={true}
+        // layout="rectangle"
+        selectedFile={currentImage}
       />
 
       <div className="m-9"></div>