@skalfa/skalfa-component 1.0.38 → 1.0.40

package/dist/input/InputImage.component.js

@@ -99,7 +99,7 @@ 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-max max-w-[350px]", 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-max", 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 }) })) }))] }));
 };
 exports.InputImageComponent = InputImageComponent;
 const CanvasCropper = ({ src, aspect, onDone, }) => {

package/dist/supervision/FormSupervision.component.d.ts

@@ -65,7 +65,7 @@ export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
     className?: string;
     construction?: ConstructionMap[T];
     type?: T;
-    onHide?: (values: Record<string, any>) => boolean;
+    onHide?: (values: Record<string, any>, prefix?: string) => boolean;
     onWatch?: (ctx: WatchContext) => WatchAction | undefined;
 }
 export interface formSupervisionProps {

package/dist/supervision/FormSupervision.component.js

@@ -106,15 +106,18 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
     const GroupsFromDefaults = (defaults) => {
         const groups = {};
         Object.keys(defaults).forEach((key) => {
-            const match = key.match(/^(.+?)\[(\d+)\]/);
-            if (!match)
-                return;
-            const [, groupKey, indexStr] = match;
-            const index = Number(indexStr);
-            if (!groups[groupKey]) {
-                groups[groupKey] = new Set();
+            const regex = /([a-zA-Z0-9_]+)\[(\d+)\]/g;
+            let match;
+            let currentPrefix = "";
+            while ((match = regex.exec(key)) !== null) {
+                const groupKey = currentPrefix ? `${currentPrefix}.${match[1]}` : match[1];
+                const index = parseInt(match[2], 10);
+                if (!groups[groupKey]) {
+                    groups[groupKey] = new Set();
+                }
+                groups[groupKey].add(index);
+                currentPrefix = `${groupKey}[${index}]`;
             }
-            groups[groupKey].add(index);
         });
         return Object.fromEntries(Object.entries(groups).map(([key, indexSet]) => [
             key,
@@ -191,7 +194,7 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
         const valMap = {};
         values.forEach((v) => { valMap[v.name] = v.value; });
-        if (form?.onHide?.(valMap))
+        if (form?.onHide?.(valMap, prefix))
             return null;
         const ws = watchState[name];
         if (ws?.hidden)

package/package.json

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

package/src/input/InputImage.component.tsx

@@ -237,7 +237,7 @@ export const InputImageComponent: React.FC<InputImageProps> = ({
       )}
 
       {!isSm ? (
-        <ModalComponent show={openCrop} onClose={onCropCancel} title="Sesuaikan Gambar" className="w-max max-w-[350px]">
+        <ModalComponent show={openCrop} onClose={onCropCancel} title="Sesuaikan Gambar" className="w-max">
           {cropSrc && (
             <div className="p-4">
               <CanvasCropper

package/src/supervision/FormSupervision.component.tsx

@@ -116,7 +116,7 @@ export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
   className     ?:  string;
   construction  ?:  ConstructionMap[T];
   type          ?:  T;
-  onHide        ?:  (values: Record<string, any>) => boolean;
+  onHide        ?:  (values: Record<string, any>, prefix?: string) => boolean;
   onWatch       ?:  (ctx: WatchContext) => WatchAction | undefined;
 }
 
@@ -283,17 +283,18 @@ export function FormSupervisionComponent({
     const groups: Record<string, Set<number>> = {};
 
     Object.keys(defaults).forEach((key) => {
-      const match = key.match(/^(.+?)\[(\d+)\]/);
-      if (!match) return;
-
-      const [, groupKey, indexStr] = match;
-      const index = Number(indexStr);
-
-      if (!groups[groupKey]) {
-        groups[groupKey] = new Set();
+      const regex = /([a-zA-Z0-9_]+)\[(\d+)\]/g;
+      let match;
+      let currentPrefix = "";
+      while ((match = regex.exec(key)) !== null) {
+        const groupKey = currentPrefix ? `${currentPrefix}.${match[1]}` : match[1];
+        const index = parseInt(match[2], 10);
+        if (!groups[groupKey]) {
+          groups[groupKey] = new Set();
+        }
+        groups[groupKey].add(index);
+        currentPrefix = `${groupKey}[${index}]`;
       }
-
-      groups[groupKey].add(index);
     });
 
     return Object.fromEntries(
@@ -385,7 +386,7 @@ export function FormSupervisionComponent({
     const valMap: Record<string, any> = {};
     values.forEach((v) => { valMap[v.name] = v.value; });
 
-    if (form?.onHide?.(valMap)) return null;
+    if (form?.onHide?.(valMap, prefix)) return null;
 
     const ws = watchState[name];
     if (ws?.hidden) return null;