@skalfa/skalfa-component 1.0.52 → 1.0.53

package/dist/input/InputImage.component.d.ts

@@ -17,6 +17,8 @@ export declare const InputImageComponent: React.FC<InputImageProps>;
 interface CropperProps {
     src: string;
     aspect: number;
+    fileName?: string;
+    fileType?: string;
     onDone?: (file: File) => void;
 }
 export declare const CanvasCropper: React.FC<CropperProps>;

package/dist/input/InputImage.component.js

@@ -16,6 +16,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
     const [preview, setPreview] = (0, react_1.useState)("");
     const [drag, setDrag] = (0, react_1.useState)(false);
     const [cropSrc, setCropSrc] = (0, react_1.useState)(null);
+    const [cropFile, setCropFile] = (0, react_1.useState)(null);
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
     const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true, unregister);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
@@ -35,6 +36,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
         }
     }, [value]);
     const openCropper = (file) => {
+        setCropFile(file);
         const reader = new FileReader();
         reader.onload = () => {
             setCropSrc(reader.result);
@@ -68,10 +70,14 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
     };
     const onCropCancel = () => {
         setOpenCrop(false);
+        setCropFile(null);
+        setCropSrc(null);
         inputRef.current.value = "";
     };
     const remove = () => {
         setPreview("");
+        setCropFile(null);
+        setCropSrc(null);
         onChange?.(null);
         inputRef.current && (inputRef.current.value = "");
     };
@@ -99,12 +105,11 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect, invali
                     }, onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => {
                         e.preventDefault();
                         setDrag(true);
-                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-fit max-w-[90vw]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), onDone: onCropDone }) })) }))] }));
+                    }, onDragLeave: () => setDrag(false), onDrop: onDropFile, children: [preview && !containerAspect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative group w-full h-full flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: preview, alt: "Preview", className: "w-full h-auto max-h-[400px] object-contain rounded-lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center text-white rounded-lg", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/images", className: "text-3xl mb-2" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-center", children: "Klik atau seret untuk ganti Gambar" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "input-image-dropzone-content", children: [(0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: drag ? "solid/hand-holding" : "solid/images", className: "text-3xl" }), (0, jsx_runtime_1.jsx)("p", { className: "input-image-dropzone-text", children: drag ? "Letakkan di sini" : preview ? "Klik atau seret untuk ganti Gambar" : "Klik atau seret gambar" })] })), (0, jsx_runtime_1.jsx)("input", { id: randomId, ref: inputRef, type: "file", accept: "image/*", className: "hidden", disabled: disabled, onChange: onUpload })] }) }), preview && !disabled && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: "solid/times", paint: "danger", size: "sm", className: "absolute top-10 right-4", onClick: remove })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage })), !isSm ? ((0, jsx_runtime_1.jsx)(Modal_component_1.ModalComponent, { show: openCrop, onClose: onCropCancel, title: "Sesuaikan Gambar", className: "w-fit max-w-[90vw]", children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), fileName: cropFile?.name, fileType: cropFile?.type, onDone: onCropDone }) })) })) : ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: openCrop, onClose: onCropCancel, size: 400, children: cropSrc && ((0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.CanvasCropper, { src: cropSrc, aspect: eval(currentAspect.replace(":", "/")), fileName: cropFile?.name, fileType: cropFile?.type, onDone: onCropDone }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
-const CanvasCropper = ({ src, aspect, onDone, }) => {
+const CanvasCropper = ({ src, aspect, fileName, fileType, onDone, }) => {
     const canvasRef = (0, react_1.useRef)(null);
-    const previewRef = (0, react_1.useRef)(null);
     const pinchDistRef = (0, react_1.useRef)(0);
     const pinchStartZoomRef = (0, react_1.useRef)(1);
     const [img, setImg] = (0, react_1.useState)(null);
@@ -130,8 +135,8 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
         canvas.width = CROP_W;
         canvas.height = CROP_SIZE;
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const scaledW = img.width * zoom;
-        const scaledH = img.height * zoom;
+        const scaledW = img.naturalWidth * zoom;
+        const scaledH = img.naturalHeight * zoom;
         const x = pos.x - scaledW / 2 + CROP_W / 2;
         const y = pos.y - scaledH / 2 + CROP_SIZE / 2;
         ctx.drawImage(img, x, y, scaledW, scaledH);
@@ -178,19 +183,50 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
     const performCrop = () => {
         if (!img)
             return;
-        const preview = previewRef.current;
-        const pctx = preview.getContext("2d");
-        preview.width = CROP_W;
-        preview.height = CROP_SIZE;
-        const scaledW = img.width * zoom;
-        const scaledH = img.height * zoom;
-        const x = pos.x - scaledW / 2 + CROP_W / 2;
-        const y = pos.y - scaledH / 2 + CROP_SIZE / 2;
-        pctx.drawImage(img, x, y, scaledW, scaledH);
-        preview.toBlob((blob) => {
-            const file = new File([blob], "cropped.png", { type: "image/png" });
+        const scaleFactor = 1 / zoom;
+        const scaledW = img.naturalWidth * zoom;
+        const scaledH = img.naturalHeight * zoom;
+        const cropDisplayX = (scaledW - CROP_W) / 2 - pos.x;
+        const cropDisplayY = (scaledH - CROP_SIZE) / 2 - pos.y;
+        const sourceX = cropDisplayX * scaleFactor;
+        const sourceY = cropDisplayY * scaleFactor;
+        const sourceW = CROP_W * scaleFactor;
+        const sourceH = CROP_SIZE * scaleFactor;
+        const sx = Math.max(0, Math.min(img.naturalWidth - 1, sourceX));
+        const sy = Math.max(0, Math.min(img.naturalHeight - 1, sourceY));
+        const sw = Math.min(sourceW, img.naturalWidth - sx);
+        const sh = Math.min(sourceH, img.naturalHeight - sy);
+        let targetW = Math.round(sw);
+        let targetH = Math.round(sh);
+        const MAX_DIMENSION = 2560;
+        if (targetW > MAX_DIMENSION || targetH > MAX_DIMENSION) {
+            if (targetW >= targetH) {
+                targetH = Math.round((targetH * MAX_DIMENSION) / targetW);
+                targetW = MAX_DIMENSION;
+            }
+            else {
+                targetW = Math.round((targetW * MAX_DIMENSION) / targetH);
+                targetH = MAX_DIMENSION;
+            }
+        }
+        const outputCanvas = document.createElement("canvas");
+        outputCanvas.width = targetW;
+        outputCanvas.height = targetH;
+        const octx = outputCanvas.getContext("2d");
+        if (!octx)
+            return;
+        octx.imageSmoothingEnabled = true;
+        octx.imageSmoothingQuality = "high";
+        octx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH);
+        const type = fileType || "image/jpeg";
+        const name = fileName || (type === "image/png" ? "cropped.png" : "cropped.jpg");
+        const quality = type === "image/png" ? undefined : 0.92;
+        outputCanvas.toBlob((blob) => {
+            if (!blob)
+                return;
+            const file = new File([blob], name, { type, lastModified: Date.now() });
             onDone?.(file);
-        });
+        }, type, quality);
     };
     const handleWheel = (e) => {
         e.preventDefault();
@@ -276,6 +312,6 @@ const CanvasCropper = ({ src, aspect, onDone, }) => {
         setDragging(false);
         pinchDistRef.current = 0;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) }), (0, jsx_runtime_1.jsx)("canvas", { ref: previewRef, className: "hidden" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { touchAction: "none" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-wrapper", style: { width: CROP_W, height: CROP_SIZE }, onMouseMove: handleMove, onMouseUp: handleUp, onMouseLeave: handleUp, onWheel: handleWheel, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: CROP_W, height: CROP_SIZE, onMouseDown: handleDown, className: "cursor-move" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-image-cropper-grid-container", style: { width: CROP_W, height: CROP_SIZE }, children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-border" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-h input-image-cropper-grid-line-h-2" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-1" }), (0, jsx_runtime_1.jsx)("div", { className: "input-image-cropper-grid-line-v input-image-cropper-grid-line-v-2" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 pb-2", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: performCrop, block: true }) })] }));
 };
 exports.CanvasCropper = CanvasCropper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/input/InputImage.component.tsx

@@ -54,6 +54,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
   const [preview, setPreview]    =  useState("");
   const [drag, setDrag]          =  useState(false);
   const [cropSrc, setCropSrc]    =  useState<string | null>(null);
+  const [cropFile, setCropFile]  =  useState<File | null>(null);
   const [openCrop, setOpenCrop]  =  useState(false);
 
   const inputHandler                         =  useInputHandler(name, value, validations, register, true, unregister);
@@ -77,6 +78,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
   }, [value]);
 
   const openCropper = (file: File) => {
+    setCropFile(file);
     const reader = new FileReader();
     reader.onload = () => {
       setCropSrc(reader.result as string);
@@ -113,11 +115,15 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
 
   const onCropCancel = () => {
     setOpenCrop(false);
+    setCropFile(null);
+    setCropSrc(null);
     inputRef.current!.value = "";
   };
 
   const remove = () => {
     setPreview("");
+    setCropFile(null);
+    setCropSrc(null);
     onChange?.(null);
     inputRef.current && (inputRef.current.value = "");
   };
@@ -243,6 +249,8 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
               <CanvasCropper
                 src={cropSrc}
                 aspect={eval(currentAspect.replace(":", "/"))}
+                fileName={cropFile?.name}
+                fileType={cropFile?.type}
                 onDone={onCropDone}
               />
             </div>
@@ -255,6 +263,8 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
               <CanvasCropper
                 src={cropSrc}
                 aspect={eval(currentAspect.replace(":", "/"))}
+                fileName={cropFile?.name}
+                fileType={cropFile?.type}
                 onDone={onCropDone}
               />
             </div>
@@ -269,18 +279,21 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
 
 
 interface CropperProps {
-  src      :  string;
-  aspect   :  number;
-  onDone  ?:  (file: File) => void;
+  src       :  string;
+  aspect    :  number;
+  fileName ?:  string;
+  fileType ?:  string;
+  onDone   ?:  (file: File) => void;
 }
 
 export const CanvasCropper: React.FC<CropperProps> = ({
   src,
   aspect,
+  fileName,
+  fileType,
   onDone,
 }) => {
   const canvasRef                =  useRef<HTMLCanvasElement>(null);
-  const previewRef               =  useRef<HTMLCanvasElement>(null);
   const pinchDistRef             =  useRef(0);
   const pinchStartZoomRef        =  useRef(1);
 
@@ -314,8 +327,8 @@ export const CanvasCropper: React.FC<CropperProps> = ({
 
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    const scaledW  =  img.width * zoom;
-    const scaledH  =  img.height * zoom;
+    const scaledW  =  img.naturalWidth * zoom;
+    const scaledH  =  img.naturalHeight * zoom;
 
     const x        =  pos.x - scaledW / 2 + CROP_W / 2;
     const y        =  pos.y - scaledH / 2 + CROP_SIZE / 2;
@@ -376,24 +389,63 @@ export const CanvasCropper: React.FC<CropperProps> = ({
   const performCrop = () => {
     if (!img) return;
 
-    const preview   =  previewRef.current!;
-    const pctx      =  preview.getContext("2d")!;
+    const scaleFactor = 1 / zoom;
 
-    preview.width   =  CROP_W;
-    preview.height  =  CROP_SIZE;
+    const scaledW = img.naturalWidth * zoom;
+    const scaledH = img.naturalHeight * zoom;
 
-    const scaledW   = img.width * zoom;
-    const scaledH   = img.height * zoom;
+    const cropDisplayX = (scaledW - CROP_W) / 2 - pos.x;
+    const cropDisplayY = (scaledH - CROP_SIZE) / 2 - pos.y;
 
-    const x         =  pos.x - scaledW / 2 + CROP_W / 2;
-    const y         =  pos.y - scaledH / 2 + CROP_SIZE / 2;
+    const sourceX = cropDisplayX * scaleFactor;
+    const sourceY = cropDisplayY * scaleFactor;
+    const sourceW = CROP_W * scaleFactor;
+    const sourceH = CROP_SIZE * scaleFactor;
 
-    pctx.drawImage(img, x, y, scaledW, scaledH);
+    const sx = Math.max(0, Math.min(img.naturalWidth - 1, sourceX));
+    const sy = Math.max(0, Math.min(img.naturalHeight - 1, sourceY));
+    const sw = Math.min(sourceW, img.naturalWidth - sx);
+    const sh = Math.min(sourceH, img.naturalHeight - sy);
 
-    preview.toBlob((blob) => {
-      const file = new File([blob!], "cropped.png", { type: "image/png" });
-      onDone?.(file);
-    });
+    let targetW = Math.round(sw);
+    let targetH = Math.round(sh);
+
+    const MAX_DIMENSION = 2560;
+    if (targetW > MAX_DIMENSION || targetH > MAX_DIMENSION) {
+      if (targetW >= targetH) {
+        targetH = Math.round((targetH * MAX_DIMENSION) / targetW);
+        targetW = MAX_DIMENSION;
+      } else {
+        targetW = Math.round((targetW * MAX_DIMENSION) / targetH);
+        targetH = MAX_DIMENSION;
+      }
+    }
+
+    const outputCanvas = document.createElement("canvas");
+    outputCanvas.width = targetW;
+    outputCanvas.height = targetH;
+
+    const octx = outputCanvas.getContext("2d");
+    if (!octx) return;
+
+    octx.imageSmoothingEnabled = true;
+    octx.imageSmoothingQuality = "high";
+
+    octx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH);
+
+    const type = fileType || "image/jpeg";
+    const name = fileName || (type === "image/png" ? "cropped.png" : "cropped.jpg");
+    const quality = type === "image/png" ? undefined : 0.92;
+
+    outputCanvas.toBlob(
+      (blob) => {
+        if (!blob) return;
+        const file = new File([blob], name, { type, lastModified: Date.now() });
+        onDone?.(file);
+      },
+      type,
+      quality
+    );
   };
 
 
@@ -557,8 +609,6 @@ export const CanvasCropper: React.FC<CropperProps> = ({
           block
         />
       </div>
-
-      <canvas ref={previewRef} className="hidden" />
     </div>
   );
 };