sprint-asia-custom-component 0.1.145 → 0.1.146

package/package.json

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

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

@@ -12,9 +12,54 @@ const DropzoneUploadPhoto = ({
   error = "",
   disabled,
   layout = "box",
+  validateResolution = false, // Enable/Disable resolution validation
+  minResolution = { width: 300, height: 300 }, // Minimum resolution
+  maxResolution = { width: 5000, height: 5000 }, // Maximum resolution
 }) => {
   const [errorMessage, setErrorMessage] = useState("");
 
+  const validateImageResolution = (file) => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = URL.createObjectURL(file);
+      img.onload = () => {
+        if (
+          img.naturalWidth < minResolution.width ||
+          img.naturalHeight < minResolution.height ||
+          img.naturalWidth > maxResolution.width ||
+          img.naturalHeight > maxResolution.height
+        ) {
+          reject(
+            `Invalid image resolution.\nAllowed: ${minResolution.width}x${minResolution.height} px to ${maxResolution.width}x${maxResolution.height} px.`
+          );
+        } else {
+          resolve();
+        }
+      };
+      img.onerror = () => reject("Error loading image.");
+    });
+  };
+
+  const handleDrop = async (acceptedFiles) => {
+    setErrorMessage(""); // Clear previous error messages
+    const validFiles = [];
+
+    for (const file of acceptedFiles) {
+      try {
+        if (validateResolution) {
+          await validateImageResolution(file);
+        }
+        validFiles.push(file);
+      } catch (err) {
+        setErrorMessage(err);
+      }
+    }
+
+    if (validFiles.length > 0 && onDrop) {
+      onDrop(validFiles);
+    }
+  };
+
   const onDropRejected = (rejectedFiles) => {
     const file = rejectedFiles[0];
     if (file.errors[0]?.code === "file-too-large") {
@@ -25,7 +70,7 @@ const DropzoneUploadPhoto = ({
   };
 
   const { getRootProps, getInputProps } = useDropzone({
-    onDrop,
+    onDrop: handleDrop,
     maxFiles,
     accept: {
       "image/jpeg": [".jpeg", ".jpg"],
@@ -61,7 +106,7 @@ const DropzoneUploadPhoto = ({
                 <PiPlus size={24} className="text-neutral300" />
                 <p className="text-sm text-neutral300">Upload Photo</p>
                 {errorMessage && (
-                  <p className="text-danger500 mt-1" style={{ fontSize: 10 }}>
+                  <p className="text-danger500 mt-1 whitespace-pre-line" style={{ fontSize: 10 }}>
                     {errorMessage}
                   </p>
                 )}

package/src/templates/index.js

@@ -863,9 +863,9 @@ const Templates = () => {
           titleRightButton="Submit"
           isActiveLeftButton
           isActiveRightButton
-          onClickLeftButton={() => { }}
-          onClickRightButton={() => { }}
-          additionalButton={<PrimaryButton title={"Additional"} onClick={() => { }} isActive={true} />}
+          onClickLeftButton={() => {}}
+          onClickRightButton={() => {}}
+          additionalButton={<PrimaryButton title={"Additional"} onClick={() => {}} isActive={true} />}
         />
       </div>
 
@@ -1097,22 +1097,20 @@ const Templates = () => {
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Dropdown Button</p>
-      <DropdownButton
-        defaultType="Voucher Type" 
-      />
+      <DropdownButton defaultType="Voucher Type" />
 
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Description</p>
       <Description
         title="Sample Title"
         value={"This is a sample description.\n HHEHEEH \n LOh"}
-      // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
+        // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
       />
       <Description
         title="Sample Title"
         value={"This is a sample description.\n HHEHEEH \n LOh"}
         icon={<PiCalendarBlank size={20} />}
-      // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
+        // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
       />
 
       <div className="m-9"></div>
@@ -1159,6 +1157,9 @@ const Templates = () => {
         title="Upload a photos with minimum resolution 300 x 300 px and maximum 5000 x 5000 px."
         subtitle="Format File PNG, JPEG, or JPG, Maximal File 5 MB"
         required={true}
+        validateResolution={true}
+        minResolution={{ height: 300, width: 300 }}
+        maxResolution={{ height: 5000, width: 5000 }}
       />
 
       <div className="m-9"></div>
@@ -1185,11 +1186,11 @@ const Templates = () => {
         options={[
           {
             option: "Option1",
-            value: "value 1"
+            value: "value 1",
           },
           {
             option: "Option2",
-            value: "value 2"
+            value: "value 2",
           },
         ]}
         buttonText="Division"
@@ -1197,9 +1198,7 @@ const Templates = () => {
         onSelect={setValueSelectFilter}
       />
 
-      {
-        console.log("ini value select", valueSelectFilter)
-      }
+      {console.log("ini value select", valueSelectFilter)}
 
       <div className="m-9"></div>
       <FilterDropdown