@skalfa/skalfa-component 1.0.53 → 1.0.54

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

package/src/input/Select.component.tsx

@@ -15,6 +15,8 @@ export interface SelectOptionProps {
   value         :  string | number;
   searchable   ?:  string[];
   customLabel  ?:  ReactNode;
+  customOption ?:  ((option: any) => ReactNode) | ReactNode;
+  [key: string] :  any;
 };
 
 export interface SelectProps {
@@ -35,7 +37,7 @@ export interface SelectProps {
 
   options              ?:  SelectOptionProps[];
   searchable           ?:  boolean;
-  serverOptionControl  ?:  ApiType & { cacheName?: string | false };
+  serverOptionControl  ?:  ApiType & { cacheName?: string | boolean; selectableOption?: string[] };
   idbOptionControl     ?:  { store: string, labelKey: string, valueKey: string };
   serverSearchable     ?:  boolean;
   includedOptions      ?:  SelectOptionProps[];
@@ -45,6 +47,8 @@ export interface SelectProps {
   maxShowOption        ?:  number;
   creatable            ?:  boolean | string;
   creatableLabel       ?:  string;
+  customOption         ?:  (option: any) => ReactNode;
+  selectableOption     ?:  string[];
 
   onChange  ?:  (value: any, data?: any) => any;
   register    ?:  (name: string, validations?: ValidationRules) => void;
@@ -83,9 +87,11 @@ export function SelectComponent({
   exceptOptions = [],
   tempOptions,
   newOption,
-  maxShowOption = 10,
+  maxShowOption,
   creatable,
   creatableLabel,
+  customOption,
+  selectableOption,
 
   register,
   unregister,
@@ -184,13 +190,27 @@ export function SelectComponent({
       let newFilteredOptions: SelectOptionProps[] = [];
 
       if (searchable && !serverSearchable && dataOptions?.length) {
-        if (e.target.value) {
-          newFilteredOptions = dataOptions.filter((Option) => (Option.label as string)?.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1).slice(0, maxShowOption);
+        if (e?.target?.value) {
+          const val = e.target.value.toLowerCase();
+          const matched = dataOptions.filter((opt) => {
+            if (opt.searchable?.some((s) => s.toLowerCase().indexOf(val) > -1)) return true;
+            if (typeof opt.label === "string" && opt.label.toLowerCase().indexOf(val) > -1) return true;
+            if (typeof opt.code === "string" && opt.code.toLowerCase().indexOf(val) > -1) return true;
+            if (typeof opt.name === "string" && opt.name.toLowerCase().indexOf(val) > -1) return true;
+            return false;
+          });
+          newFilteredOptions = typeof maxShowOption === "number" && maxShowOption > 0
+            ? matched.slice(0, maxShowOption)
+            : matched;
         } else {
-          newFilteredOptions = dataOptions.slice(0, maxShowOption);
+          newFilteredOptions = typeof maxShowOption === "number" && maxShowOption > 0
+            ? dataOptions.slice(0, maxShowOption)
+            : dataOptions;
         }
       } else {
-        newFilteredOptions = dataOptions || [];
+        newFilteredOptions = typeof maxShowOption === "number" && maxShowOption > 0
+          ? (dataOptions || []).slice(0, maxShowOption)
+          : (dataOptions || []);
       }
 
       setActiveOption(-1);
@@ -251,40 +271,68 @@ export function SelectComponent({
   const fetchOptions = async () => {
     setLoadingOption(true);
 
+    const selectableOpt = selectableOption || serverOptionControl?.selectableOption || serverOptionControl?.params?.selectableOption;
+
     const serverControl = {
       ...serverOptionControl,
-      params: serverSearchable ? { search: keywordSearch, ...(serverOptionControl?.params || {}) } : (serverOptionControl?.params || {}),
-      headers: { "X-Option": 1 }
+      params: {
+        ...(serverOptionControl?.params || {}),
+        ...(selectableOpt ? { selectableOption: selectableOpt } : {}),
+        ...(serverSearchable ? { search: keywordSearch } : {}),
+      },
+      headers: { "X-Option": 1, ...(serverOptionControl?.headers || {}) }
     };
 
-    const getCacheOptions = await cavity.get(serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`)
-    const cacheOptions = (getCacheOptions?.data || []) as SelectOptionProps[];
-    
-    if (cacheOptions?.length) {
-      setDataOptions(
-        [...cacheOptions, ...includedOptions].filter(
-          (op: SelectOptionProps) => !exceptOptions?.includes(op.value)
-        )
-      );
-      setLoadingOption(false);
-    } else {
-      const mutateOptions = await api(serverControl || {});
-      setDataOptions(
-        [...(mutateOptions?.data?.data || []), ...(includedOptions || [])].filter(
+    const cacheKey = typeof serverOptionControl?.cacheName === "string" && serverOptionControl.cacheName.trim() !== ""
+      ? serverOptionControl.cacheName
+      : serverOptionControl?.cacheName === true
+        ? `option_${serverOptionControl?.path || serverOptionControl?.url}`
+        : null;
+
+    if (cacheKey) {
+      const getCacheOptions = await cavity.get(cacheKey);
+      const cacheData = getCacheOptions?.data;
+      const cacheOptions = (Array.isArray(cacheData?.data) ? cacheData.data : Array.isArray(cacheData) ? cacheData : []) as SelectOptionProps[];
+      
+      if (cacheOptions?.length) {
+        const cached = [...cacheOptions, ...includedOptions].filter(
           (op: SelectOptionProps) => !exceptOptions?.includes(op.value)
-        )
-      );
-      setShowOption(true);
+        );
+        setDataOptions(cached);
+        setFilteredOptions(typeof maxShowOption === "number" && maxShowOption > 0 ? cached.slice(0, maxShowOption) : cached);
+        setLoadingOption(false);
+        return;
+      }
+    }
 
-      if(serverOptionControl?.cacheName != false) {
-        cavity.set({
-          key: serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`,
-          data: mutateOptions?.data,
-          expired: 5,
-        });
+    const mutateOptions = await api(serverControl || {});
+    const fetchedData = mutateOptions?.data?.data || mutateOptions?.data || [];
+    const optionsData = Array.isArray(fetchedData) ? fetchedData.map((item: any) => {
+      if (item && typeof item === "object") {
+        return {
+          ...item,
+          name: item.name ?? item.label,
+          label: item.label ?? item.name ?? item.code ?? item.value,
+        };
       }
-      setLoadingOption(false);
+      return item;
+    }) : [];
+
+    const finalOptions = [...optionsData, ...(includedOptions || [])].filter(
+      (op: SelectOptionProps) => !exceptOptions?.includes(op.value)
+    );
+    setDataOptions(finalOptions);
+    setFilteredOptions(typeof maxShowOption === "number" && maxShowOption > 0 ? finalOptions.slice(0, maxShowOption) : finalOptions);
+    setShowOption(true);
+
+    if (cacheKey) {
+      cavity.set({
+        key: cacheKey,
+        data: mutateOptions?.data,
+        expired: 5,
+      });
     }
+    setLoadingOption(false);
   };
 
   const fetchIdbOptions = async () => {
@@ -309,6 +357,7 @@ export function SelectComponent({
       })
 
       setDataOptions(rows);
+      setFilteredOptions(typeof maxShowOption === "number" && maxShowOption > 0 ? rows.slice(0, maxShowOption) : rows);
       setLoadingOption(false);
     }
   };
@@ -402,7 +451,8 @@ export function SelectComponent({
             placeholder={!inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : ""}
             disabled={disabled}
             className={cn(
-              "input cursor-pointer",
+              "input cursor-pointer pr-10",
+              clearable && "pr-18",
               leftIcon && "input-with-left-icon",
               rightIcon && "input-with-right-icon",
               isCreatingNew && "pl-[4.8rem]",
@@ -493,22 +543,23 @@ export function SelectComponent({
                   return (
                     <div key={key} className="input-values-item">
                       <span>{dataOptions?.find((option) => option.value == item)?.label}</span>
-                      <Icon
-                        icon="solid/times"
-                        className="input-values-delete"
-                        onClick={() => {
-                          const values = Array().concat(inputHandler.value);
-                          const index = values.findIndex((val: string | number) => val == item);
-
-                          inputHandler.setValue(values.filter((_, val) => val != index));
-
-                          if (!values.filter((_, val) => val != index)?.length) {
-                            setInputShowValue("");
-                            serverSearchable && setKeyword("");
-                            onChange?.("");
-                          }
-                        }}
-                      />
+                      <div className="input-values-delete">
+                        <Icon
+                          icon="solid/times"
+                          onClick={() => {
+                            const values = Array().concat(inputHandler.value);
+                            const index = values.findIndex((val: string | number) => val == item);
+
+                            inputHandler.setValue(values.filter((_, val) => val != index));
+
+                            if (!values.filter((_, val) => val != index)?.length) {
+                              setInputShowValue("");
+                              serverSearchable && setKeyword("");
+                              onChange?.("");
+                            }
+                          }}
+                        />
+                      </div>
                     </div>
                   );
                 })}
@@ -650,7 +701,7 @@ export function SelectComponent({
                   return (
                     <li
                       className={cn(
-                        "input-suggest",
+                        "input-suggest flex items-center",
                         (key == activeOption || selected) && "input-suggest-active",
                         pcn<CT>(className, "suggest-item"),
                         (key == activeOption || selected) && pcn<CT>(className, "suggest-item", "active")
@@ -669,8 +720,11 @@ export function SelectComponent({
                         setIsCreatingNew(false);
 
                         if (!multiple) {
-                          setInputShowValue(option.label);
-                          serverSearchable && setKeyword(option.label as string);
+                          const displayLabel = typeof option.label === "string" || typeof option.label === "number"
+                            ? option.label
+                            : (option.name || option.code || option.value);
+                          setInputShowValue(displayLabel);
+                          serverSearchable && setKeyword(typeof displayLabel === "string" ? displayLabel : "");
                           inputHandler.setValue(option.value);
                           onChange?.(option.value, option);
                         } else {
@@ -700,7 +754,11 @@ export function SelectComponent({
                           className="select-suggest-check"
                         />
                       )}
-                      {option.label}
+                      {customOption
+                        ? customOption(option)
+                        : (option.customOption
+                            ? (typeof option.customOption === "function" ? option.customOption(option) : option.customOption)
+                            : (option.customLabel || option.label))}
                     </li>
                   );
                 })}