@skalfa/skalfa-component 1.0.8 → 1.0.10

package/dist/supervision/FormSupervision.component.js

@@ -4,46 +4,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormSupervisionComponent = FormSupervisionComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 const _utils_1 = require("@utils");
-const InputCheckbox_component_1 = require("../input/InputCheckbox.component");
-const Input_component_1 = require("../input/Input.component");
-const InputCurrency_component_1 = require("../input/InputCurrency.component");
-const InputDate_component_1 = require("../input/InputDate.component");
-const InputNumber_component_1 = require("../input/InputNumber.component");
-const InputOtp_component_1 = require("../input/InputOtp.component");
-const InputPassword_component_1 = require("../input/InputPassword.component");
-const InputRadio_component_1 = require("../input/InputRadio.component");
-const Select_component_1 = require("../input/Select.component");
-const Button_component_1 = require("../button/Button.component");
-const ModalConfirm_component_1 = require("../modal/ModalConfirm.component");
-const Toast_component_1 = require("../modal/Toast.component");
-const InputTime_component_1 = require("../input/InputTime.component");
-const InputImage_component_1 = require("../input/InputImage.component");
-const InputDatetime_component_1 = require("../input/InputDatetime.component");
-function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", }) {
+const __1 = require("../");
+const skalfa_icon_1 = require("@skalfa/skalfa-icon");
+const skalfa_lang_1 = require("@skalfa/skalfa-lang");
+function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", successMessage, id, }) {
+    const l = (0, skalfa_lang_1.useLang)();
     const [modal, setModal] = (0, react_1.useState)(false);
     const [fresh, setFresh] = (0, react_1.useState)(true);
     const [mapGroups, setMapGroups] = (0, react_1.useState)({});
-    const [watchState, setWatchState] = (0, react_1.useState)({});
-    const watchRef = (0, react_1.useRef)({});
-    const { formControl, setRegister, unregister, unregisterPrefix, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm } = (0, _utils_1.useForm)({
-        ...submitControl,
-        payload,
-        confirmation,
-        onSuccess: (data) => {
-            onSuccess?.(data);
-            setModal("success");
-            resetFresh();
-        },
-        onFailed: (code) => {
-            onError?.(code);
-            if (code == 422)
-                confirm.onClose();
-            else
-                setModal("failed");
-        },
+    const [{ formControl, setRegister, values, setValues, errors, setErrors, setDefaultValues, submit, loading, confirm, },] = (0, _utils_1.useForm)(submitControl, payload, confirmation, (data) => {
+        onSuccess?.(data);
+        setModal("success");
+        setTimeout(() => setModal(false), 1000);
+        resetFresh();
+    }, (code) => {
+        onError?.(code);
+        if (code == 422)
+            confirm.onClose();
+        else
+            setModal("failed");
     });
+    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();
+            }
+            groups[groupKey].add(index);
+        });
+        return Object.fromEntries(Object.entries(groups).map(([key, indexSet]) => [
+            key,
+            Array.from(indexSet)
+                .sort((a, b) => a - b)
+                .map((_, i) => i),
+        ]));
+    };
     const resetFresh = () => {
         setFresh(false);
         setTimeout(() => setFresh(true), 300);
@@ -52,102 +53,32 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         resetFresh();
     }, [fields]);
     (0, react_1.useEffect)(() => {
-        if (defaultValue)
+        if (defaultValue) {
             setDefaultValues(defaultValue);
+            const derivedGroups = GroupsFromDefaults(defaultValue);
+            setMapGroups(derivedGroups);
+            resetFresh();
+        }
         else {
             setDefaultValues(null);
+            setMapGroups({});
             resetFresh();
         }
     }, [defaultValue]);
-    // ==============================>
-    // ## Watch: collect watchers from fields
-    // ==============================>
-    const collectWatchers = (fieldList, prefix) => {
-        const result = [];
-        for (const f of fieldList) {
-            const inputType = f.type || "default";
-            const name = prefix ? `${prefix}.${f.construction?.name}` : f.construction?.name || "";
-            if (inputType === "cluster") {
-                const cluster = f.construction;
-                const groupKey = prefix ? `${prefix}.${cluster.name}` : cluster.name;
-                const group = mapGroups[groupKey] || [0];
-                for (const gIndex of group) {
-                    result.push(...collectWatchers(cluster.fields, `${cluster.name}[${gIndex}]`));
-                }
-            }
-            else if (f.watch) {
-                result.push({ name, watch: f.watch, construction: f.construction });
-            }
-        }
-        return result;
-    };
-    // ==============================>
-    // ## Watch: execute watchers on value change
-    // ==============================>
-    (0, react_1.useEffect)(() => {
-        const watchers = collectWatchers(fields);
-        if (watchers.length === 0) {
-            if (Object.keys(watchRef.current).length > 0) {
-                watchRef.current = {};
-                setWatchState({});
-            }
-            return;
-        }
-        const valMap = values.reduce((acc, v) => { acc[v.name] = v.value; return acc; }, {});
-        const nextState = {};
-        const valueUpdates = [];
-        for (const { name, watch, construction } of watchers) {
-            const prev = watchRef.current[name] || {};
-            const action = watch({ values: valMap, self: name, prev });
-            if (!action)
-                continue;
-            nextState[name] = action;
-            if (action.hidden && !prev.hidden)
-                unregister(name);
-            if (action.required !== prev.required) {
-                const baseValidations = Array.isArray(construction?.validations) ? [...construction.validations] : [];
-                const newValidations = action.required ? (baseValidations.includes("required") ? baseValidations : [...baseValidations, "required"]) : baseValidations.filter((v) => v !== "required");
-                setRegister({ name, validations: newValidations });
-            }
-            if (action.reset) {
-                const cur = valMap[name];
-                if (cur != null && cur !== "")
-                    valueUpdates.push({ name, value: "" });
-            }
-            else if (action.value !== undefined && action.value !== valMap[name]) {
-                valueUpdates.push({ name, value: action.value });
-            }
-        }
-        if (JSON.stringify(watchRef.current) !== JSON.stringify(nextState)) {
-            watchRef.current = nextState;
-            setWatchState(nextState);
-        }
-        if (valueUpdates.length > 0) {
-            const merged = [...values];
-            for (const upd of valueUpdates) {
-                const idx = merged.findIndex(v => v.name === upd.name);
-                if (idx >= 0)
-                    merged[idx] = upd;
-                else
-                    merged.push(upd);
-            }
-            setValues(merged);
-        }
-    }, [values, fields, mapGroups]);
     const generateColClass = (col) => String(col).split(" ").map((c) => (c.includes(":") ? `${c.replace(":", ":col-span-")}` : `col-span-${c}`)).join(" ");
     const inputMap = {
-        default: Input_component_1.InputComponent,
-        check: InputCheckbox_component_1.InputCheckboxComponent,
-        currency: InputCurrency_component_1.InputCurrencyComponent,
-        date: InputDate_component_1.InputDateComponent,
-        datetime: InputDatetime_component_1.InputDatetimeComponent,
-        time: InputTime_component_1.InputTimeComponent,
-        number: InputNumber_component_1.InputNumberComponent,
-        radio: InputRadio_component_1.InputRadioComponent,
-        select: Select_component_1.SelectComponent,
-        "enter-password": InputPassword_component_1.InputPasswordComponent,
-        otp: InputOtp_component_1.InputOtpComponent,
-        image: InputImage_component_1.InputImageComponent,
+        default: __1.InputComponent,
+        check: __1.InputCheckboxComponent,
+        currency: __1.InputCurrencyComponent,
+        date: __1.InputDateComponent,
+        datetime: __1.InputDatetimeComponent,
+        time: __1.InputTimeComponent,
+        number: __1.InputNumberComponent,
+        radio: __1.InputRadioComponent,
+        select: __1.SelectComponent,
+        "enter-password": __1.InputPasswordComponent,
+        otp: __1.InputOtpComponent,
+        image: __1.InputImageComponent,
         cluster: () => null,
         custom: () => null,
     };
@@ -156,26 +87,43 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         const name = prefix ? `${prefix}.${form.construction?.name}` : form.construction?.name || "input_name";
         if (form?.onHide?.(values))
             return null;
-        const ws = watchState[name];
-        if (ws?.hidden)
-            return null;
         if (inputType === "cluster") {
-            const { name: mapName, fields: innerForms, label, tip, wrap, className, min = 0 } = form.construction;
+            const { name: mapName, fields: innerForms, label, tip, wrap, className } = form.construction;
             const groupKey = prefix ? `${prefix}.${mapName}` : mapName;
-            const group = mapGroups[groupKey] || Array.from({ length: Math.max(min, 1) }, (_, i) => i);
-            const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length > 0 ? Math.max(...group) + 1 : 0] }));
-            const removeGroup = (gIndex) => {
-                setMapGroups((prev) => ({ ...prev, [groupKey]: group.filter((g) => g !== gIndex) }));
-                unregisterPrefix(`${groupKey}[${gIndex}]`);
+            const group = mapGroups[groupKey] || [0];
+            const addGroup = () => setMapGroups((prev) => ({ ...prev, [groupKey]: [...group, group.length] }));
+            const removeGroup = (index) => {
+                const filteredGroup = group.filter((_, i) => i !== index);
+                const newGroup = filteredGroup.map((_, i) => i);
+                setMapGroups((prev) => ({ ...prev, [groupKey]: newGroup }));
+                let updatedValues = values.filter((v) => {
+                    const n = String(v?.name || "");
+                    if (!n)
+                        return true;
+                    if (n.startsWith(`${groupKey}[${index}]`) || n.startsWith(`${groupKey}.${index}.`))
+                        return false;
+                    return true;
+                });
+                const regex = new RegExp(`${groupKey}\\[(\\d+)\\]`, 'g');
+                updatedValues = updatedValues.map((v) => {
+                    let name = v.name;
+                    name = name.replace(regex, (match, oldIdx) => {
+                        const oldIndex = parseInt(oldIdx, 10);
+                        const newIndex = newGroup.indexOf(oldIndex);
+                        return newIndex >= 0 ? `${groupKey}[${newIndex}]` : match;
+                    });
+                    return { ...v, name };
+                });
+                setValues(updatedValues);
             };
-            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("form-supervision-cluster-item", wrap && "form-supervision-cluster-item-wrapped", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: "input-tip", children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "form-supervision-cluster-grid", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), group.length > min && ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("form-supervision-cluster-remove-btn", wrap && "form-supervision-cluster-remove-btn-wrapped"), onClick: () => removeGroup(gIndex) }))] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-4", generateColClass(form.col || "12")), children: [group.map((gIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative pr-8", wrap && "p-4 rounded border", className), children: [label && (0, jsx_runtime_1.jsxs)("p", { className: "input-label", children: [label, " ", gIndex + 1] }), tip && (0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip"), children: tip }), (label || tip) && (0, jsx_runtime_1.jsx)("div", { className: "mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full grid grid-cols-12 gap-4", children: innerForms.map((inner, i) => renderInput(inner, i, `${mapName}[${gIndex}]`)) }), (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/times", paint: "danger", variant: "outline", size: "xs", className: (0, _utils_1.cn)("absolute top-10 right-2 translate-x-[50%] -translate-y-[50%]", wrap && "translate-x-0 -translate-y-0 top-1 right-1"), onClick: () => removeGroup(gIndex) })] }, gIndex))), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { icon: "solid/plus", label: `Tambah ${label || mapName}`, variant: "outline", size: "sm", onClick: addGroup }) })] }, key));
         }
         if (inputType === "custom") {
             const customRender = form.construction;
             return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: customRender?.({ formControl, values, setValues, errors, setErrors, setRegister, prefixName: prefix }) }, key));
         }
-        const Component = inputMap[inputType] || Input_component_1.InputComponent;
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name), disabled: ws?.disabled, readOnly: ws?.readonly }) }, key));
+        const Component = inputMap[inputType] || __1.InputComponent;
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)(form.className, generateColClass(form.col || "12")), children: (0, jsx_runtime_1.jsx)(Component, { ...form.construction, ...formControl(name) }) }, key));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("form-supervision-title", (0, _utils_1.pcn)(className, "title")), children: title }), (0, jsx_runtime_1.jsxs)("form", { className: (0, _utils_1.cn)("form-supervision-base", (0, _utils_1.pcn)(className, "base")), onSubmit: submit, children: [fresh && fields.map((f, i) => renderInput(f, i)), (0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) || ((0, jsx_runtime_1.jsx)("div", { className: "form-supervision-footer", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { type: "submit", label: "Simpan", icon: free_solid_svg_icons_1.faSave, loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) })) })] }), (0, jsx_runtime_1.jsx)(ModalConfirm_component_1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), icon: free_solid_svg_icons_1.faQuestionCircle, title: "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" }, children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-confirm-text", children: "Yakin semua data sudah benar?" }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: modal == "failed", onClose: () => setModal(false), title: "Gagal", className: "form-supervision-toast-error header::text-danger", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data gagal disimpan, cek data dan koneksi internet lalu coba kembali!" }) }), (0, jsx_runtime_1.jsx)(Toast_component_1.ToastComponent, { show: modal == "success", onClose: () => setModal(false), title: "Berhasil", className: "form-supervision-toast-success header::text-success", children: (0, jsx_runtime_1.jsx)("p", { className: "form-supervision-toast-text", children: "Data berhasil disimpan!" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && (0, jsx_runtime_1.jsx)("h4", { className: (0, _utils_1.cn)("text-lg font-semibold mb-4", (0, _utils_1.pcn)(className, "title")), children: title }), modal == "success" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "text-primary text-2xl" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-primary text-lg font-semibold mt-4", children: successMessage || "Berhasil disimpan!" })] })) : ((0, jsx_runtime_1.jsx)("form", { id: id, className: (0, _utils_1.cn)("flex flex-col h-full pb-8"), onSubmit: submit, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("grid grid-cols-12 gap-4 flex-1 content-start", (0, _utils_1.pcn)(className, "base")), children: [fresh && fields.map((f, i) => renderInput(f, i)), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "hidden md:block col-span-12", children: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { type: "submit", label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", loading: loading, className: (0, _utils_1.pcn)(className, "submit") }) }) })), !footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "md:hidden col-span-12 mt-4", children: (0, jsx_runtime_1.jsx)(__1.ButtonComponent, { label: l.base?.save ? l.base.save() : "Save", icon: "solid/save", type: "submit", loading: loading, block: true, className: (0, _utils_1.pcn)(className, "submit") }) })), footerControl && ((0, jsx_runtime_1.jsx)("div", { className: "col-span-12", children: footerControl?.({ loading }) })), modal == "failed" && ((0, jsx_runtime_1.jsxs)("div", { className: "col-span-12 mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/exclamation-triangle", className: "text-danger text-lg" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-danger text-sm font-semibold", children: "Terjadi Masalah, Coba ulangi lagi!" })] }))] }) })), (0, jsx_runtime_1.jsx)(__1.ModalConfirmComponent, { show: confirm.show, onClose: () => confirm.onClose(), title: l.base?.confirmTitle ? l.base.confirmTitle() : "Yakin", submitControl: { onSubmit: () => confirm?.onConfirm(), paint: "primary" } })] }));
 }

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

@@ -1,11 +1,6 @@
 import { ReactNode } from "react";
-import { conversion, FetchControlType, ShortcutHandler, UseResourceProps } from "@utils";
-import { FloatingPageProps } from "../modal/FloatingPage.component";
-import { ButtonProps } from "../button/Button.component";
-import { TableProps } from "../table/Table.component";
-import { FormType } from "./FormSupervision.component";
-import { ModalConfirmProps } from "../modal/ModalConfirm.component";
-import { ControlBarOptionType } from "../table/ControlBar.component";
+import { conversion, ShortcutHandler, UseResourceProps } from "@utils";
+import { FloatingPageProps, FormType, ButtonProps, ModalConfirmProps, TableProps, ControlBarOptionType, SwipeActionType, BottomSheetProps } from "../";
 export interface TableSupervisionColumnProps {
     selector: string;
     label?: string;
@@ -24,8 +19,6 @@ export interface TableSupervisionColumnProps {
     accessCode?: string;
     item?: (data: any) => string | ReactNode;
     tip?: string | ((data: any) => string);
-    exportable?: boolean | "default" | "optional" | "hidden";
-    importable?: boolean;
 }
 export interface TableSupervisionFormProps {
     fields: string[] | (FormType & {
@@ -33,22 +26,14 @@ export interface TableSupervisionFormProps {
     })[];
     defaultValue?: (item: Record<string, any> | null) => Promise<Record<string, any>> | Record<string, any>;
     payload?: (values: any) => Promise<Record<string, any>> | object;
-    modalControl?: Omit<FloatingPageProps, "show" | "onClose" | "children">;
+    modalControl?: Omit<FloatingPageProps, "show" | "onClose" | "children"> | Omit<BottomSheetProps, "show" | "onClose" | "children">;
     contentType?: "application/json" | "multipart/form-data";
 }
 export type TableSupervisionDetailProps = boolean | (string | {
     label: string;
     item: string | ((data: Record<string, any>) => ReactNode);
     conversion?: keyof typeof conversion;
-} | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => void) | {
-    modal?: Omit<FloatingPageProps, "show" | "onClose" | "children">;
-    content?: boolean | (string | {
-        label: string;
-        item: string | ((data: Record<string, any>) => ReactNode);
-        conversion?: keyof typeof conversion;
-    } | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => ReactNode);
-    action?: (data: Record<string, any>) => void;
-};
+} | ((data: Record<string, any>) => ReactNode))[] | ((data: Record<string, any>) => ReactNode);
 export type TableSupervisionProps = {
     fetchControl: UseResourceProps;
     title?: string;
@@ -57,27 +42,33 @@ export type TableSupervisionProps = {
     urlParam?: boolean | {
         compressed?: boolean;
     };
+    onRowClick?: (data: Record<string, any>) => void;
     columnControl?: string[] | TableSupervisionColumnProps[];
     formControl?: TableSupervisionFormProps;
     detailControl?: TableSupervisionDetailProps;
     actionControl?: boolean | ('EDIT' | 'DELETE' | {
         label: string;
-        modal?: Omit<ModalConfirmProps, "show" | "onClose">;
+        modal?: ModalConfirmProps;
         button?: ButtonProps;
         shortcut?: {
             key: string;
             description: string;
         };
-    } | ((row: Record<string, any>, setModal: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, setShortcut?: (key: string, handler: ShortcutHandler, description?: string) => void) => ReactNode))[];
+    } | ((row: object, setModal?: (type: "EDIT" | "DELETE") => void, setDataSelected?: () => void, setShortcut?: (key: string, handler: ShortcutHandler, description?: string) => void, size?: string) => ReactNode))[];
     block?: boolean;
     noIndex?: boolean;
     actionBulkingControl?: TableProps["actionBulking"];
     controlBar?: (ControlBarOptionType | "CREATE" | "IMPORT" | "EXPORT" | "PRINT")[];
     responsiveControl?: {
-        mobile?: TableProps["responsiveControl"] extends {
-            mobile?: infer M;
-        } ? M | boolean : boolean;
+        mobile?: boolean | {
+            item?: (item: Record<string, any>, key: number) => ReactNode;
+            leftActionControl?: Omit<SwipeActionType, "onAction"> & {
+                onAction?: (item: Record<string, any>, key?: number) => void;
+            };
+            rightActionControl?: Omit<SwipeActionType, "onAction"> & {
+                onAction?: (item: Record<string, any>, key?: number) => void;
+            };
+        };
     };
-    importControl?: FetchControlType;
 };
-export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }: TableSupervisionProps): import("@types/react").JSX.Element;
+export declare function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, onRowClick, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, }: TableSupervisionProps): import("@types/react").JSX.Element;