@skalfa/skalfa-component 1.0.52 → 1.0.54

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>
   );
 };

package/src/input/InputTime.component.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC, InputHTMLAttributes, ReactNode, useEffect, useMemo, useState } from "react";
+import { FC, InputHTMLAttributes, ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "@skalfa/skalfa-icon";
 import { cn, pcn, useInputHandler, useInputRandomId, useResponsive, useValidation, validation, ValidationRules } from "@utils";
 import { BottomSheetComponent } from "../modal/BottomSheet.component";
@@ -12,21 +12,22 @@ import { OutsideClickComponent } from "../wrap/OutsideClick.component";
 type CT = "label" | "tip" | "error" | "input"| "icon";
 
 export interface InputTimeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-  label      ?:  string;
-  tip        ?:  string | ReactNode;
-  leftIcon   ?:  any;
-  rightIcon  ?:  any;
+  label        ?:  string;
+  tip          ?:  string | ReactNode;
+  leftIcon     ?:  any;
+  rightIcon    ?:  any;
 
   value        ?:  string;
   invalid      ?:  string;
   validations  ?:  ValidationRules;
+  showSeconds  ?:  boolean;
 
-  onChange  ?:  (value: string) => any;
+  onChange    ?:  (value: string) => any;
   register    ?:  (name: string, validations?: ValidationRules) => void;
   unregister  ?:  (name: string) => void;
 
   /** Use custom class with: "label::", "tip::", "error::", "icon::". */
-  className  ?:  string;
+  className    ?:  string;
 }
 
 
@@ -40,6 +41,7 @@ export function InputTimeComponent({
   value,
   invalid,
   validations,
+  showSeconds,
 
   register,
   unregister,
@@ -145,8 +147,11 @@ export function InputTimeComponent({
             {!isSm && inputHandler.focus && (
               <div className="input-time-picker-popover">
                 <InputTimePickerComponent
+                  value={inputHandler.value}
+                  showSeconds={showSeconds}
                   onChange={(time) => {
                     inputHandler.setValue(time);
+                    inputHandler.setIdle(false);
                     onChange?.(time);
                   }}
                 />
@@ -178,8 +183,11 @@ export function InputTimeComponent({
         >
           <div className="p-4">
             <InputTimePickerComponent
+              value={inputHandler.value}
+              showSeconds={showSeconds}
               onChange={(time) => {
                 inputHandler.setValue(time);
+                inputHandler.setIdle(false);
                 onChange?.(time);
               }}
             />
@@ -192,7 +200,9 @@ export function InputTimeComponent({
 
 
 
-interface InputTimePickerProps {
+export interface InputTimePickerProps {
+  value         ?:  string;
+  showSeconds   ?:  boolean;
   onChange      ?:  (time: string) => void;
   rightElement  ?:  ReactNode;
 };
@@ -201,79 +211,229 @@ interface InputTimePickerProps {
 
 
 export const InputTimePickerComponent: FC<InputTimePickerProps> = ({
+  value,
+  showSeconds = false,
   onChange,
   rightElement,
 }) => {
-  const [hour, setHour]      =  useState(0);
-  const [minute, setMinute]  =  useState(0);
-  const [second, setSecond]  =  useState(0);
+  const parsed = useMemo(() => {
+    if (!value || typeof value !== "string") {
+      return { h: 0, m: 0, s: 0, hasValue: false };
+    }
+    const parts = value.split(":").map((p) => parseInt(p, 10));
+    return {
+      h: isNaN(parts[0]) ? 0 : Math.min(23, Math.max(0, parts[0])),
+      m: isNaN(parts[1]) ? 0 : Math.min(59, Math.max(0, parts[1])),
+      s: isNaN(parts[2]) ? 0 : Math.min(59, Math.max(0, parts[2])),
+      hasValue: true,
+    };
+  }, [value]);
+
+  const [hour, setHour]      =  useState(parsed.h);
+  const [minute, setMinute]  =  useState(parsed.m);
+  const [second, setSecond]  =  useState(parsed.s);
+
+  const shouldShowSeconds = showSeconds || (typeof value === "string" && value.split(":").length >= 3 && value.split(":")[2] !== "");
+
+  useEffect(() => {
+    if (parsed.hasValue) {
+      setHour(parsed.h);
+      setMinute(parsed.m);
+      setSecond(parsed.s);
+    }
+  }, [parsed]);
 
   const hours    =  Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
   const minutes  =  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const seconds  =  Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
 
-  const handleSelect = (type: "h" | "m" | "s", val: string) => {
-    if (type === "h") setHour(Number(val));
-    if (type === "m") setMinute(Number(val));
-    if (type === "s") setSecond(Number(val));
+  const presetContainerRef  =  useRef<HTMLDivElement | null>(null);
+  const activePresetRef     =  useRef<HTMLDivElement | null>(null);
+
+  const hourContainerRef    =  useRef<HTMLDivElement | null>(null);
+  const activeHourRef       =  useRef<HTMLDivElement | null>(null);
+
+  const minuteContainerRef  =  useRef<HTMLDivElement | null>(null);
+  const activeMinuteRef     =  useRef<HTMLDivElement | null>(null);
+
+  const secondContainerRef  =  useRef<HTMLDivElement | null>(null);
+  const activeSecondRef     =  useRef<HTMLDivElement | null>(null);
+
+  const scrollToActive = (container: HTMLDivElement | null, active: HTMLDivElement | null) => {
+    if (container && active) {
+      container.scrollTop = active.offsetTop - container.offsetTop - (container.clientHeight / 2) + (active.clientHeight / 2);
+    }
   };
 
   useEffect(() => {
-    const formatted = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`;
+    scrollToActive(hourContainerRef.current, activeHourRef.current);
+    scrollToActive(minuteContainerRef.current, activeMinuteRef.current);
+    if (shouldShowSeconds) {
+      scrollToActive(secondContainerRef.current, activeSecondRef.current);
+    }
+    scrollToActive(presetContainerRef.current, activePresetRef.current);
+  }, []);
+
+  const emitChange = (newH: number, newM: number, newS: number) => {
+    const hh = String(newH).padStart(2, "0");
+    const mm = String(newM).padStart(2, "0");
+    const ss = String(newS).padStart(2, "0");
+    const formatted = shouldShowSeconds ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
     onChange?.(formatted);
-  }, [hour, minute, second]);
-
-  const renderColumn = (items: string[], type: "h" | "m" | "s", activeValue: number) => (
-    <div className="flex-1 overflow-y-auto text-center input-scroll">
-      {items.map((item) => {
-        const active = Number(item) === activeValue;
+  };
 
-        return (
-          <div
-            key={item}
-            onClick={() => handleSelect(type, item)}
-            className={cn(
-              "p-2 cursor-pointer rounded text-sm",
-              active ? "bg-primary text-background font-semibold" : "hover:bg-light-primary"
-            )}
-          >{item}</div>
-        );
-      })}
-    </div>
-  );
+  const handleSelect = (type: "h" | "m" | "s", val: number) => {
+    let newH = hour;
+    let newM = minute;
+    let newS = second;
+
+    if (type === "h") {
+      newH = val;
+      setHour(val);
+    } else if (type === "m") {
+      newM = val;
+      setMinute(val);
+    } else if (type === "s") {
+      newS = val;
+      setSecond(val);
+    }
 
-  const timeSlots = useMemo(() => {
-    const newTimeSlots = [];
+    emitChange(newH, newM, newS);
+  };
 
-    for (let i = 0; i <= 24 * 60; i += 30) {
-      const hours    =  Math.floor(i / 60);
-      const minutes  =  i % 60;
-      const label    =  `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+  const handlePresetSelect = (presetStr: string) => {
+    const parts = presetStr.split(":").map(Number);
+    const newH = parts[0] ?? 0;
+    const newM = parts[1] ?? 0;
+    const newS = 0;
+    setHour(newH);
+    setMinute(newM);
+    setSecond(newS);
+    emitChange(newH, newM, newS);
+  };
 
-      newTimeSlots.push(label);
+  const timeSlots = useMemo(() => {
+    const slots: string[] = [];
+    for (let i = 0; i < 24 * 60; i += 30) {
+      const h = Math.floor(i / 60);
+      const m = i % 60;
+      slots.push(`${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
     }
-
-    return newTimeSlots;
-  }, [])
+    return slots;
+  }, []);
 
   return (
-    <div className="w-full max-h-[260] flex gap-2">
-      <div className="w-1/3 overflow-y-auto bg-background rounded-[6px] input-scroll">
-        {timeSlots.map((time) => (
-          <div
-            key={time}
-            className="p-2 text-sm rounded cursor-pointer hover:bg-light-primary text-center"
-            onClick={() => onChange?.(time)}
-          >{time}</div>
-        ))}
+    <div className="w-full flex gap-2 h-[260px] select-none text-xs">
+      {/* 1. Presets Column */}
+      <div className="w-20 shrink-0 h-full flex flex-col border-r border-stroke pr-1.5">
+        <div className="text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke">
+          Preset
+        </div>
+        <div className="flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5" ref={presetContainerRef}>
+          {timeSlots.map((time) => {
+            const isPresetActive = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}` === time;
+            return (
+              <div
+                key={time}
+                ref={isPresetActive ? activePresetRef : null}
+                className={cn(
+                  "py-1.5 px-1 text-center font-medium rounded-md cursor-pointer transition-colors",
+                  isPresetActive
+                    ? "bg-primary text-white font-semibold"
+                    : "hover:bg-light-primary text-foreground"
+                )}
+                onClick={() => handlePresetSelect(time)}
+              >
+                {time}
+              </div>
+            );
+          })}
+        </div>
       </div>
 
-      <div className="w-2/3 flex gap-2">
-        {renderColumn(hours, "h", hour)}
-        {renderColumn(minutes, "m", minute)}
-        {renderColumn(seconds, "s", second)}
+      {/* 2. Hour Column */}
+      <div className="flex-1 h-full flex flex-col">
+        <div className="text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke">
+          Jam
+        </div>
+        <div className="flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5" ref={hourContainerRef}>
+          {hours.map((item) => {
+            const active = Number(item) === hour;
+            return (
+              <div
+                key={item}
+                ref={active ? activeHourRef : null}
+                onClick={() => handleSelect("h", Number(item))}
+                className={cn(
+                  "py-1.5 text-center font-medium rounded-md cursor-pointer transition-colors",
+                  active
+                    ? "bg-primary text-white font-semibold"
+                    : "hover:bg-light-primary text-foreground"
+                )}
+              >
+                {item}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 3. Minute Column */}
+      <div className="flex-1 h-full flex flex-col">
+        <div className="text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke">
+          Menit
+        </div>
+        <div className="flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5" ref={minuteContainerRef}>
+          {minutes.map((item) => {
+            const active = Number(item) === minute;
+            return (
+              <div
+                key={item}
+                ref={active ? activeMinuteRef : null}
+                onClick={() => handleSelect("m", Number(item))}
+                className={cn(
+                  "py-1.5 text-center font-medium rounded-md cursor-pointer transition-colors",
+                  active
+                    ? "bg-primary text-white font-semibold"
+                    : "hover:bg-light-primary text-foreground"
+                )}
+              >
+                {item}
+              </div>
+            );
+          })}
+        </div>
       </div>
 
+      {/* 4. Second Column (Optional) */}
+      {shouldShowSeconds && (
+        <div className="flex-1 h-full flex flex-col">
+          <div className="text-[11px] font-semibold text-light-foreground text-center py-1 mb-1 border-b border-stroke">
+            Detik
+          </div>
+          <div className="flex-1 overflow-y-auto input-scroll flex flex-col gap-0.5" ref={secondContainerRef}>
+            {seconds.map((item) => {
+              const active = Number(item) === second;
+              return (
+                <div
+                  key={item}
+                  ref={active ? activeSecondRef : null}
+                  onClick={() => handleSelect("s", Number(item))}
+                  className={cn(
+                    "py-1.5 text-center font-medium rounded-md cursor-pointer transition-colors",
+                    active
+                      ? "bg-primary text-white font-semibold"
+                      : "hover:bg-light-primary text-foreground"
+                  )}
+                >
+                  {item}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
       {rightElement && <div>{rightElement}</div>}
     </div>
   );