@makroz/web 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +33 -0
- package/README.md +22 -0
- package/dist/auth/MkAuthContext.d.ts +43 -0
- package/dist/auth/MkAuthContext.d.ts.map +1 -0
- package/dist/auth/MkAuthContext.js +3 -0
- package/dist/auth/MkAuthContext.js.map +1 -0
- package/dist/auth/MkAuthForm.d.ts +42 -0
- package/dist/auth/MkAuthForm.d.ts.map +1 -0
- package/dist/auth/MkAuthForm.js +53 -0
- package/dist/auth/MkAuthForm.js.map +1 -0
- package/dist/auth/MkAuthProvider.d.ts +30 -0
- package/dist/auth/MkAuthProvider.d.ts.map +1 -0
- package/dist/auth/MkAuthProvider.js +319 -0
- package/dist/auth/MkAuthProvider.js.map +1 -0
- package/dist/auth/auth/MkAuthContext.d.ts +42 -0
- package/dist/auth/auth/MkAuthForm.d.ts +41 -0
- package/dist/auth/auth/MkAuthProvider.d.ts +29 -0
- package/dist/auth/auth/types.d.ts +62 -0
- package/dist/auth/auth/useMkAuth.d.ts +18 -0
- package/dist/auth/components/MkButton.d.ts +10 -0
- package/dist/auth/components/MkInput.d.ts +12 -0
- package/dist/auth/types.d.ts +63 -0
- package/dist/auth/types.d.ts.map +1 -0
- package/dist/auth/types.js +20 -0
- package/dist/auth/types.js.map +1 -0
- package/dist/auth/useMkAuth.d.ts +19 -0
- package/dist/auth/useMkAuth.d.ts.map +1 -0
- package/dist/auth/useMkAuth.js +26 -0
- package/dist/auth/useMkAuth.js.map +1 -0
- package/dist/components/MkAccordion.d.ts +36 -0
- package/dist/components/MkAccordion.d.ts.map +1 -0
- package/dist/components/MkAccordion.js +25 -0
- package/dist/components/MkAccordion.js.map +1 -0
- package/dist/components/MkAccordion.module.css +79 -0
- package/dist/components/MkAlert.d.ts +25 -0
- package/dist/components/MkAlert.d.ts.map +1 -0
- package/dist/components/MkAlert.js +23 -0
- package/dist/components/MkAlert.js.map +1 -0
- package/dist/components/MkAlert.module.css +103 -0
- package/dist/components/MkAvatar.d.ts +16 -0
- package/dist/components/MkAvatar.d.ts.map +1 -0
- package/dist/components/MkAvatar.js +25 -0
- package/dist/components/MkAvatar.js.map +1 -0
- package/dist/components/MkAvatar.module.css +62 -0
- package/dist/components/MkBadge.d.ts +15 -0
- package/dist/components/MkBadge.d.ts.map +1 -0
- package/dist/components/MkBadge.js +9 -0
- package/dist/components/MkBadge.js.map +1 -0
- package/dist/components/MkBadge.module.css +74 -0
- package/dist/components/MkButton.d.ts +11 -0
- package/dist/components/MkButton.d.ts.map +1 -0
- package/dist/components/MkButton.js +20 -0
- package/dist/components/MkButton.js.map +1 -0
- package/dist/components/MkButton.module.css +85 -0
- package/dist/components/MkButton.test.d.ts +2 -0
- package/dist/components/MkButton.test.d.ts.map +1 -0
- package/dist/components/MkButton.test.js +58 -0
- package/dist/components/MkButton.test.js.map +1 -0
- package/dist/components/MkCard.d.ts +18 -0
- package/dist/components/MkCard.d.ts.map +1 -0
- package/dist/components/MkCard.js +8 -0
- package/dist/components/MkCard.js.map +1 -0
- package/dist/components/MkCard.module.css +63 -0
- package/dist/components/MkCheck.d.ts +32 -0
- package/dist/components/MkCheck.d.ts.map +1 -0
- package/dist/components/MkCheck.js +14 -0
- package/dist/components/MkCheck.js.map +1 -0
- package/dist/components/MkCheck.module.css +87 -0
- package/dist/components/MkDatePicker.d.ts +29 -0
- package/dist/components/MkDatePicker.d.ts.map +1 -0
- package/dist/components/MkDatePicker.js +12 -0
- package/dist/components/MkDatePicker.js.map +1 -0
- package/dist/components/MkDatePicker.module.css +77 -0
- package/dist/components/MkDivider.d.ts +14 -0
- package/dist/components/MkDivider.d.ts.map +1 -0
- package/dist/components/MkDivider.js +14 -0
- package/dist/components/MkDivider.js.map +1 -0
- package/dist/components/MkDivider.module.css +39 -0
- package/dist/components/MkDropDown.d.ts +22 -0
- package/dist/components/MkDropDown.d.ts.map +1 -0
- package/dist/components/MkDropDown.js +26 -0
- package/dist/components/MkDropDown.js.map +1 -0
- package/dist/components/MkDropDown.module.css +108 -0
- package/dist/components/MkEmptyState.d.ts +14 -0
- package/dist/components/MkEmptyState.d.ts.map +1 -0
- package/dist/components/MkEmptyState.js +8 -0
- package/dist/components/MkEmptyState.js.map +1 -0
- package/dist/components/MkEmptyState.module.css +35 -0
- package/dist/components/MkFileUpload.d.ts +36 -0
- package/dist/components/MkFileUpload.d.ts.map +1 -0
- package/dist/components/MkFileUpload.js +52 -0
- package/dist/components/MkFileUpload.js.map +1 -0
- package/dist/components/MkFileUpload.module.css +74 -0
- package/dist/components/MkIcons.d.ts +14 -0
- package/dist/components/MkIcons.d.ts.map +1 -0
- package/dist/components/MkIcons.js +38 -0
- package/dist/components/MkIcons.js.map +1 -0
- package/dist/components/MkInfiniteList.d.ts +15 -0
- package/dist/components/MkInfiniteList.d.ts.map +1 -0
- package/dist/components/MkInfiniteList.js +31 -0
- package/dist/components/MkInfiniteList.js.map +1 -0
- package/dist/components/MkInfiniteList.module.css +69 -0
- package/dist/components/MkInput.d.ts +13 -0
- package/dist/components/MkInput.d.ts.map +1 -0
- package/dist/components/MkInput.js +23 -0
- package/dist/components/MkInput.js.map +1 -0
- package/dist/components/MkInput.module.css +94 -0
- package/dist/components/MkLoading.d.ts +20 -0
- package/dist/components/MkLoading.d.ts.map +1 -0
- package/dist/components/MkLoading.js +16 -0
- package/dist/components/MkLoading.js.map +1 -0
- package/dist/components/MkLoading.module.css +39 -0
- package/dist/components/MkModal.d.ts +20 -0
- package/dist/components/MkModal.d.ts.map +1 -0
- package/dist/components/MkModal.js +33 -0
- package/dist/components/MkModal.js.map +1 -0
- package/dist/components/MkModal.module.css +107 -0
- package/dist/components/MkProgressBar.d.ts +17 -0
- package/dist/components/MkProgressBar.d.ts.map +1 -0
- package/dist/components/MkProgressBar.js +9 -0
- package/dist/components/MkProgressBar.js.map +1 -0
- package/dist/components/MkProgressBar.module.css +48 -0
- package/dist/components/MkRadio.d.ts +34 -0
- package/dist/components/MkRadio.d.ts.map +1 -0
- package/dist/components/MkRadio.js +21 -0
- package/dist/components/MkRadio.js.map +1 -0
- package/dist/components/MkRadio.module.css +74 -0
- package/dist/components/MkSearchInput.d.ts +30 -0
- package/dist/components/MkSearchInput.d.ts.map +1 -0
- package/dist/components/MkSearchInput.js +29 -0
- package/dist/components/MkSearchInput.js.map +1 -0
- package/dist/components/MkSearchInput.module.css +80 -0
- package/dist/components/MkSelect.d.ts +23 -0
- package/dist/components/MkSelect.d.ts.map +1 -0
- package/dist/components/MkSelect.js +61 -0
- package/dist/components/MkSelect.js.map +1 -0
- package/dist/components/MkSelect.module.css +177 -0
- package/dist/components/MkSkeleton.d.ts +22 -0
- package/dist/components/MkSkeleton.d.ts.map +1 -0
- package/dist/components/MkSkeleton.js +23 -0
- package/dist/components/MkSkeleton.js.map +1 -0
- package/dist/components/MkSkeleton.module.css +28 -0
- package/dist/components/MkSwitch.d.ts +22 -0
- package/dist/components/MkSwitch.d.ts.map +1 -0
- package/dist/components/MkSwitch.js +16 -0
- package/dist/components/MkSwitch.js.map +1 -0
- package/dist/components/MkSwitch.module.css +108 -0
- package/dist/components/MkTable.d.ts +27 -0
- package/dist/components/MkTable.d.ts.map +1 -0
- package/dist/components/MkTable.js +13 -0
- package/dist/components/MkTable.js.map +1 -0
- package/dist/components/MkTable.module.css +163 -0
- package/dist/components/MkTabs.d.ts +22 -0
- package/dist/components/MkTabs.d.ts.map +1 -0
- package/dist/components/MkTabs.js +19 -0
- package/dist/components/MkTabs.js.map +1 -0
- package/dist/components/MkTabs.module.css +117 -0
- package/dist/components/MkTextArea.d.ts +21 -0
- package/dist/components/MkTextArea.d.ts.map +1 -0
- package/dist/components/MkTextArea.js +10 -0
- package/dist/components/MkTextArea.js.map +1 -0
- package/dist/components/MkThemeEditor.d.ts +8 -0
- package/dist/components/MkThemeEditor.d.ts.map +1 -0
- package/dist/components/MkThemeEditor.js +45 -0
- package/dist/components/MkThemeEditor.js.map +1 -0
- package/dist/components/MkThemeEditor.module.css +177 -0
- package/dist/components/MkToastContainer.d.ts +3 -0
- package/dist/components/MkToastContainer.d.ts.map +1 -0
- package/dist/components/MkToastContainer.js +81 -0
- package/dist/components/MkToastContainer.js.map +1 -0
- package/dist/components/MkToastContainer.module.css +95 -0
- package/dist/components/MkTooltip.d.ts +14 -0
- package/dist/components/MkTooltip.d.ts.map +1 -0
- package/dist/components/MkTooltip.js +19 -0
- package/dist/components/MkTooltip.js.map +1 -0
- package/dist/components/MkTooltip.module.css +43 -0
- package/dist/components/MkWindowList.d.ts +20 -0
- package/dist/components/MkWindowList.d.ts.map +1 -0
- package/dist/components/MkWindowList.js +61 -0
- package/dist/components/MkWindowList.js.map +1 -0
- package/dist/components/MkWindowList.module.css +59 -0
- package/dist/components/index.d.ts +31 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +34 -0
- package/dist/components/index.js.map +1 -0
- package/dist/context/MkApiContext.d.ts +15 -0
- package/dist/context/MkApiContext.d.ts.map +1 -0
- package/dist/context/MkApiContext.js +30 -0
- package/dist/context/MkApiContext.js.map +1 -0
- package/dist/context/MkAuthContext.d.ts +20 -0
- package/dist/context/MkAuthContext.d.ts.map +1 -0
- package/dist/context/MkAuthContext.js +90 -0
- package/dist/context/MkAuthContext.js.map +1 -0
- package/dist/context/MkConfirmContext.d.ts +8 -0
- package/dist/context/MkConfirmContext.d.ts.map +1 -0
- package/dist/context/MkConfirmContext.js +39 -0
- package/dist/context/MkConfirmContext.js.map +1 -0
- package/dist/context/MkToastContext.d.ts +8 -0
- package/dist/context/MkToastContext.d.ts.map +1 -0
- package/dist/context/MkToastContext.js +64 -0
- package/dist/context/MkToastContext.js.map +1 -0
- package/dist/hooks/useApi.d.ts +19 -0
- package/dist/hooks/useApi.d.ts.map +1 -0
- package/dist/hooks/useApi.js +82 -0
- package/dist/hooks/useApi.js.map +1 -0
- package/dist/hooks/useApi.test.d.ts +2 -0
- package/dist/hooks/useApi.test.d.ts.map +1 -0
- package/dist/hooks/useApi.test.js +186 -0
- package/dist/hooks/useApi.test.js.map +1 -0
- package/dist/hooks/useMkClickOutside.d.ts +8 -0
- package/dist/hooks/useMkClickOutside.d.ts.map +1 -0
- package/dist/hooks/useMkClickOutside.js +26 -0
- package/dist/hooks/useMkClickOutside.js.map +1 -0
- package/dist/hooks/useMkCrud.d.ts +39 -0
- package/dist/hooks/useMkCrud.d.ts.map +1 -0
- package/dist/hooks/useMkCrud.js +121 -0
- package/dist/hooks/useMkCrud.js.map +1 -0
- package/dist/hooks/useMkCrud.test.d.ts +2 -0
- package/dist/hooks/useMkCrud.test.d.ts.map +1 -0
- package/dist/hooks/useMkCrud.test.js +89 -0
- package/dist/hooks/useMkCrud.test.js.map +1 -0
- package/dist/hooks/useMkDebounce.d.ts +24 -0
- package/dist/hooks/useMkDebounce.d.ts.map +1 -0
- package/dist/hooks/useMkDebounce.js +38 -0
- package/dist/hooks/useMkDebounce.js.map +1 -0
- package/dist/hooks/useMkEffectDebug.d.ts +7 -0
- package/dist/hooks/useMkEffectDebug.d.ts.map +1 -0
- package/dist/hooks/useMkEffectDebug.js +26 -0
- package/dist/hooks/useMkEffectDebug.js.map +1 -0
- package/dist/hooks/useMkEvent.d.ts +31 -0
- package/dist/hooks/useMkEvent.d.ts.map +1 -0
- package/dist/hooks/useMkEvent.js +56 -0
- package/dist/hooks/useMkEvent.js.map +1 -0
- package/dist/hooks/useMkForm.d.ts +43 -0
- package/dist/hooks/useMkForm.d.ts.map +1 -0
- package/dist/hooks/useMkForm.js +115 -0
- package/dist/hooks/useMkForm.js.map +1 -0
- package/dist/hooks/useMkForm.test.d.ts +2 -0
- package/dist/hooks/useMkForm.test.d.ts.map +1 -0
- package/dist/hooks/useMkForm.test.js +81 -0
- package/dist/hooks/useMkForm.test.js.map +1 -0
- package/dist/hooks/useMkInViewPort.d.ts +14 -0
- package/dist/hooks/useMkInViewPort.d.ts.map +1 -0
- package/dist/hooks/useMkInViewPort.js +31 -0
- package/dist/hooks/useMkInViewPort.js.map +1 -0
- package/dist/hooks/useMkInfiniteList.d.ts +15 -0
- package/dist/hooks/useMkInfiniteList.d.ts.map +1 -0
- package/dist/hooks/useMkInfiniteList.js +47 -0
- package/dist/hooks/useMkInfiniteList.js.map +1 -0
- package/dist/hooks/useMkList.d.ts +61 -0
- package/dist/hooks/useMkList.d.ts.map +1 -0
- package/dist/hooks/useMkList.js +54 -0
- package/dist/hooks/useMkList.js.map +1 -0
- package/dist/hooks/useMkLocalStorage.d.ts +6 -0
- package/dist/hooks/useMkLocalStorage.d.ts.map +1 -0
- package/dist/hooks/useMkLocalStorage.js +33 -0
- package/dist/hooks/useMkLocalStorage.js.map +1 -0
- package/dist/hooks/useMkLongPress.d.ts +37 -0
- package/dist/hooks/useMkLongPress.d.ts.map +1 -0
- package/dist/hooks/useMkLongPress.js +59 -0
- package/dist/hooks/useMkLongPress.js.map +1 -0
- package/dist/hooks/useMkMediaQuery.d.ts +14 -0
- package/dist/hooks/useMkMediaQuery.d.ts.map +1 -0
- package/dist/hooks/useMkMediaQuery.js +31 -0
- package/dist/hooks/useMkMediaQuery.js.map +1 -0
- package/dist/hooks/useMkPrevious.d.ts +7 -0
- package/dist/hooks/useMkPrevious.d.ts.map +1 -0
- package/dist/hooks/useMkPrevious.js +14 -0
- package/dist/hooks/useMkPrevious.js.map +1 -0
- package/dist/hooks/useMkScreenSize.d.ts +25 -0
- package/dist/hooks/useMkScreenSize.d.ts.map +1 -0
- package/dist/hooks/useMkScreenSize.js +43 -0
- package/dist/hooks/useMkScreenSize.js.map +1 -0
- package/dist/hooks/useMkStore.d.ts +22 -0
- package/dist/hooks/useMkStore.d.ts.map +1 -0
- package/dist/hooks/useMkStore.js +58 -0
- package/dist/hooks/useMkStore.js.map +1 -0
- package/dist/hooks/useMkToggle.d.ts +6 -0
- package/dist/hooks/useMkToggle.d.ts.map +1 -0
- package/dist/hooks/useMkToggle.js +13 -0
- package/dist/hooks/useMkToggle.js.map +1 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +37 -0
- package/dist/index.js.map +1 -0
- package/dist/styles/index.css +124 -0
- package/dist/test-setup.d.ts +2 -0
- package/dist/test-setup.d.ts.map +1 -0
- package/dist/test-setup.js +2 -0
- package/dist/test-setup.js.map +1 -0
- package/dist/theme/MkThemeProvider.d.ts +20 -0
- package/dist/theme/MkThemeProvider.d.ts.map +1 -0
- package/dist/theme/MkThemeProvider.js +91 -0
- package/dist/theme/MkThemeProvider.js.map +1 -0
- package/dist/utils/images.d.ts +9 -0
- package/dist/utils/images.d.ts.map +1 -0
- package/dist/utils/images.js +50 -0
- package/dist/utils/images.js.map +1 -0
- package/eslint-plugin-mk/__tests__/no-cross-module-import.test.js +66 -0
- package/eslint-plugin-mk/index.js +29 -0
- package/eslint-plugin-mk/rules/no-cross-module-import.js +71 -0
- package/package.json +62 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module useMkEvent
|
|
3
|
+
* @description Lightweight event bus for cross-component communication.
|
|
4
|
+
* Uses DOM CustomEvent on the web. API matches mk-mobile's useMkEvent.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* // Component A — listen
|
|
9
|
+
* useMkEvent('cart:updated', (data) => {
|
|
10
|
+
* console.log('Cart updated:', data);
|
|
11
|
+
* });
|
|
12
|
+
*
|
|
13
|
+
* // Component B — emit
|
|
14
|
+
* const { emit } = useMkEvent('cart:updated');
|
|
15
|
+
* emit({ items: 5 });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function useMkEvent<T = any>(eventName: string, handler?: (data: T) => void): {
|
|
19
|
+
emit: (data?: T) => void;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Imperative event API — for use outside React components (services, callbacks).
|
|
23
|
+
* @example
|
|
24
|
+
* import { MkEventBus } from '@mk/web';
|
|
25
|
+
* MkEventBus.emit('notification:received', payload);
|
|
26
|
+
*/
|
|
27
|
+
export declare const MkEventBus: {
|
|
28
|
+
readonly emit: (event: string, data?: any) => void;
|
|
29
|
+
readonly on: (event: string, fn: (data?: any) => void) => () => void;
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=useMkEvent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkEvent.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkEvent.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAgB,UAAU,CAAC,CAAC,GAAG,GAAG,EAC9B,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI;kBAmBf,CAAC;EAQhB;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU;2BACL,MAAM,SAAS,GAAG;yBAGpB,MAAM,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI;CAKtC,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { useEffect, useCallback, useRef } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @module useMkEvent
|
|
4
|
+
* @description Lightweight event bus for cross-component communication.
|
|
5
|
+
* Uses DOM CustomEvent on the web. API matches mk-mobile's useMkEvent.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* // Component A — listen
|
|
10
|
+
* useMkEvent('cart:updated', (data) => {
|
|
11
|
+
* console.log('Cart updated:', data);
|
|
12
|
+
* });
|
|
13
|
+
*
|
|
14
|
+
* // Component B — emit
|
|
15
|
+
* const { emit } = useMkEvent('cart:updated');
|
|
16
|
+
* emit({ items: 5 });
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export function useMkEvent(eventName, handler) {
|
|
20
|
+
// Stable ref to avoid stale closures & unnecessary re-subscriptions
|
|
21
|
+
const handlerRef = useRef(handler);
|
|
22
|
+
handlerRef.current = handler;
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (!handlerRef.current)
|
|
25
|
+
return;
|
|
26
|
+
const listener = (event) => {
|
|
27
|
+
var _a;
|
|
28
|
+
const customEvent = event;
|
|
29
|
+
(_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef, customEvent.detail);
|
|
30
|
+
};
|
|
31
|
+
window.addEventListener(eventName, listener);
|
|
32
|
+
return () => window.removeEventListener(eventName, listener);
|
|
33
|
+
}, [eventName]);
|
|
34
|
+
const emit = useCallback((data) => {
|
|
35
|
+
const event = new CustomEvent(eventName, { detail: data });
|
|
36
|
+
window.dispatchEvent(event);
|
|
37
|
+
}, [eventName]);
|
|
38
|
+
return { emit };
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Imperative event API — for use outside React components (services, callbacks).
|
|
42
|
+
* @example
|
|
43
|
+
* import { MkEventBus } from '@mk/web';
|
|
44
|
+
* MkEventBus.emit('notification:received', payload);
|
|
45
|
+
*/
|
|
46
|
+
export const MkEventBus = {
|
|
47
|
+
emit: (event, data) => {
|
|
48
|
+
window.dispatchEvent(new CustomEvent(event, { detail: data }));
|
|
49
|
+
},
|
|
50
|
+
on: (event, fn) => {
|
|
51
|
+
const listener = (e) => fn(e.detail);
|
|
52
|
+
window.addEventListener(event, listener);
|
|
53
|
+
return () => window.removeEventListener(event, listener);
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=useMkEvent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkEvent.js","sourceRoot":"","sources":["../../src/hooks/useMkEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,UAAU,UAAU,CACtB,SAAiB,EACjB,OAA2B;IAE3B,oEAAoE;IACpE,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAEhC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;;YAC9B,MAAM,WAAW,GAAG,KAAuB,CAAC;YAC5C,MAAA,UAAU,CAAC,OAAO,2DAAG,WAAW,CAAC,MAAM,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAC7C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,IAAI,GAAG,WAAW,CACpB,CAAC,IAAQ,EAAE,EAAE;QACT,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3D,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EACD,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,OAAO,EAAE,IAAI,EAAE,CAAC;AACpB,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACtB,IAAI,EAAE,CAAC,KAAa,EAAE,IAAU,EAAE,EAAE;QAChC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACnE,CAAC;IACD,EAAE,EAAE,CAAC,KAAa,EAAE,EAAwB,EAAE,EAAE;QAC5C,MAAM,QAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,EAAE,CAAE,CAAiB,CAAC,MAAM,CAAC,CAAC;QAC7D,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC7D,CAAC;CACK,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { MkFormFields, MkFormReturn, MkCrudAction } from '@mk/core';
|
|
2
|
+
/**
|
|
3
|
+
* @module useMkForm
|
|
4
|
+
* @description Unified form state manager with built-in validation.
|
|
5
|
+
* Works on both Web and Mobile — zero platform dependencies.
|
|
6
|
+
*
|
|
7
|
+
* Uses mkValidation from mk-core for field-level and form-level validation,
|
|
8
|
+
* and mkValidation.getApiFields for extracting API-ready data.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const form = useMkForm({
|
|
13
|
+
* fields: {
|
|
14
|
+
* name: { rules: ['required', 'min:3'], api: 'ae' },
|
|
15
|
+
* email: { rules: ['required', 'email'], api: 'ae' },
|
|
16
|
+
* phone: { rules: ['phone'], api: 'ae*' },
|
|
17
|
+
* },
|
|
18
|
+
* initialData: { name: '', email: '', phone: '' },
|
|
19
|
+
* });
|
|
20
|
+
*
|
|
21
|
+
* // In handler
|
|
22
|
+
* <MkInput label="Nombre" value={form.formState.name} error={form.errors.name}
|
|
23
|
+
* onChange={v => form.setField('name', v)} />
|
|
24
|
+
*
|
|
25
|
+
* const handleSave = () => {
|
|
26
|
+
* if (!form.validate()) return;
|
|
27
|
+
* const data = form.getApiData();
|
|
28
|
+
* api.post('/users', data);
|
|
29
|
+
* };
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export interface UseMkFormOptions<T = Record<string, any>> {
|
|
33
|
+
/** Field definitions with rules and API flags. */
|
|
34
|
+
fields: MkFormFields;
|
|
35
|
+
/** Initial data for the form. */
|
|
36
|
+
initialData?: Partial<T>;
|
|
37
|
+
/** Current CRUD action (affects which rules apply). Default 'add'. */
|
|
38
|
+
action?: MkCrudAction;
|
|
39
|
+
/** Validate on every setField call. Default false. */
|
|
40
|
+
validateOnChange?: boolean;
|
|
41
|
+
}
|
|
42
|
+
export declare function useMkForm<T extends Record<string, any> = Record<string, any>>({ fields, initialData, action, validateOnChange, }: UseMkFormOptions<T>): MkFormReturn<T>;
|
|
43
|
+
//# sourceMappingURL=useMkForm.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkForm.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkForm.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAgB,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACrD,kDAAkD;IAClD,MAAM,EAAE,YAAY,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,sEAAsE;IACtE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAC3E,MAAM,EACN,WAA8B,EAC9B,MAAc,EACd,gBAAwB,GAC3B,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAmIvC"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { useState, useCallback, useRef, useMemo } from 'react';
|
|
2
|
+
import { mkValidation } from '@mk/core';
|
|
3
|
+
export function useMkForm({ fields, initialData = {}, action = 'add', validateOnChange = false, }) {
|
|
4
|
+
// Compute defaults from field definitions + initialData
|
|
5
|
+
const defaults = useMemo(() => {
|
|
6
|
+
var _a;
|
|
7
|
+
const d = {};
|
|
8
|
+
for (const key in fields) {
|
|
9
|
+
d[key] = (_a = fields[key].defaultValue) !== null && _a !== void 0 ? _a : '';
|
|
10
|
+
}
|
|
11
|
+
return Object.assign(Object.assign({}, d), initialData);
|
|
12
|
+
}, []); // Only compute once on mount
|
|
13
|
+
const [formState, setFormState] = useState(defaults);
|
|
14
|
+
const [errors, setErrorsState] = useState({});
|
|
15
|
+
const initialRef = useRef(defaults);
|
|
16
|
+
// ──── Field setters ────
|
|
17
|
+
const setField = useCallback((name, value) => {
|
|
18
|
+
setFormState(prev => (Object.assign(Object.assign({}, prev), { [name]: value })));
|
|
19
|
+
// Clear error for this field on change
|
|
20
|
+
setErrorsState(prev => {
|
|
21
|
+
if (!prev[name])
|
|
22
|
+
return prev;
|
|
23
|
+
const next = Object.assign({}, prev);
|
|
24
|
+
delete next[name];
|
|
25
|
+
return next;
|
|
26
|
+
});
|
|
27
|
+
// Optionally validate on each change
|
|
28
|
+
if (validateOnChange) {
|
|
29
|
+
const field = fields[name];
|
|
30
|
+
if (field === null || field === void 0 ? void 0 : field.rules) {
|
|
31
|
+
setFormState(current => {
|
|
32
|
+
const updated = Object.assign(Object.assign({}, current), { [name]: value });
|
|
33
|
+
const error = mkValidation.check(value, field.rules, updated);
|
|
34
|
+
if (error) {
|
|
35
|
+
setErrorsState(prev => (Object.assign(Object.assign({}, prev), { [name]: error })));
|
|
36
|
+
}
|
|
37
|
+
return updated;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, [fields, validateOnChange]);
|
|
42
|
+
const setFields = useCallback((partial) => {
|
|
43
|
+
setFormState(prev => (Object.assign(Object.assign({}, prev), partial)));
|
|
44
|
+
}, []);
|
|
45
|
+
// ──── Error management ────
|
|
46
|
+
const setError = useCallback((name, message) => {
|
|
47
|
+
setErrorsState(prev => (Object.assign(Object.assign({}, prev), { [name]: message })));
|
|
48
|
+
}, []);
|
|
49
|
+
const setErrors = useCallback((errs) => {
|
|
50
|
+
setErrorsState(errs);
|
|
51
|
+
}, []);
|
|
52
|
+
const clearErrors = useCallback(() => {
|
|
53
|
+
setErrorsState({});
|
|
54
|
+
}, []);
|
|
55
|
+
// ──── Validation ────
|
|
56
|
+
const validate = useCallback(() => {
|
|
57
|
+
const fieldRules = {};
|
|
58
|
+
for (const key in fields) {
|
|
59
|
+
if (fields[key].rules) {
|
|
60
|
+
fieldRules[key] = { rules: fields[key].rules };
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
const errs = mkValidation.checkFields(fieldRules, formState, action);
|
|
64
|
+
setErrorsState(errs);
|
|
65
|
+
return !mkValidation.hasErrors(errs);
|
|
66
|
+
}, [fields, formState, action]);
|
|
67
|
+
// ──── API data extraction ────
|
|
68
|
+
const getApiData = useCallback(() => {
|
|
69
|
+
const apiFields = {};
|
|
70
|
+
for (const key in fields) {
|
|
71
|
+
if (fields[key].api) {
|
|
72
|
+
apiFields[key] = { api: fields[key].api };
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
const extracted = mkValidation.getApiFields(formState, apiFields, action);
|
|
76
|
+
// Apply transforms
|
|
77
|
+
const result = {};
|
|
78
|
+
for (const key in extracted) {
|
|
79
|
+
const field = fields[key];
|
|
80
|
+
result[key] = (field === null || field === void 0 ? void 0 : field.transform)
|
|
81
|
+
? field.transform(extracted[key], formState)
|
|
82
|
+
: extracted[key];
|
|
83
|
+
}
|
|
84
|
+
return result;
|
|
85
|
+
}, [fields, formState, action]);
|
|
86
|
+
// ──── Reset ────
|
|
87
|
+
const reset = useCallback((data) => {
|
|
88
|
+
const newState = data ? Object.assign(Object.assign({}, defaults), data) : defaults;
|
|
89
|
+
setFormState(newState);
|
|
90
|
+
initialRef.current = newState;
|
|
91
|
+
setErrorsState({});
|
|
92
|
+
}, [defaults]);
|
|
93
|
+
// ──── Computed ────
|
|
94
|
+
const isDirty = useMemo(() => {
|
|
95
|
+
return JSON.stringify(formState) !== JSON.stringify(initialRef.current);
|
|
96
|
+
}, [formState]);
|
|
97
|
+
const isValid = useMemo(() => {
|
|
98
|
+
return Object.keys(errors).length === 0;
|
|
99
|
+
}, [errors]);
|
|
100
|
+
return {
|
|
101
|
+
formState,
|
|
102
|
+
errors,
|
|
103
|
+
setField,
|
|
104
|
+
setFields,
|
|
105
|
+
setError,
|
|
106
|
+
setErrors,
|
|
107
|
+
clearErrors,
|
|
108
|
+
reset,
|
|
109
|
+
validate,
|
|
110
|
+
getApiData,
|
|
111
|
+
isDirty,
|
|
112
|
+
isValid,
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
//# sourceMappingURL=useMkForm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkForm.js","sourceRoot":"","sources":["../../src/hooks/useMkForm.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkForm.test.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkForm.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { renderHook, act } from '@testing-library/react';
|
|
2
|
+
import { describe, it, expect } from 'vitest';
|
|
3
|
+
import { useMkForm } from './useMkForm';
|
|
4
|
+
describe('useMkForm', () => {
|
|
5
|
+
const fields = {
|
|
6
|
+
name: { rules: ['required', 'min:3'], api: 'ae' },
|
|
7
|
+
email: { rules: ['required', 'email'], api: 'a*' },
|
|
8
|
+
};
|
|
9
|
+
it('initializes with default values and clean state', () => {
|
|
10
|
+
const { result } = renderHook(() => useMkForm({ fields, action: 'add' }));
|
|
11
|
+
expect(result.current.formState).toEqual({ name: '', email: '' });
|
|
12
|
+
expect(result.current.errors).toEqual({});
|
|
13
|
+
expect(result.current.isDirty).toBe(false);
|
|
14
|
+
expect(result.current.isValid).toBe(true);
|
|
15
|
+
});
|
|
16
|
+
it('updates fields and marks form as dirty', () => {
|
|
17
|
+
const { result } = renderHook(() => useMkForm({ fields, action: 'add' }));
|
|
18
|
+
act(() => {
|
|
19
|
+
result.current.setField('name', 'Mario');
|
|
20
|
+
});
|
|
21
|
+
expect(result.current.formState.name).toBe('Mario');
|
|
22
|
+
expect(result.current.isDirty).toBe(true);
|
|
23
|
+
});
|
|
24
|
+
it('validates correctly and populates errors array', () => {
|
|
25
|
+
const { result } = renderHook(() => useMkForm({ fields, action: 'add' }));
|
|
26
|
+
act(() => {
|
|
27
|
+
result.current.setFields({ name: 'Ma', email: 'bad' });
|
|
28
|
+
});
|
|
29
|
+
let isValid = false;
|
|
30
|
+
act(() => {
|
|
31
|
+
isValid = result.current.validate();
|
|
32
|
+
});
|
|
33
|
+
expect(isValid).toBe(false);
|
|
34
|
+
// Expect exact error messages based on validation engine
|
|
35
|
+
expect(result.current.errors.name).toBe('Mínimo 3 caracteres');
|
|
36
|
+
expect(result.current.errors.email).toBe('No es un email válido');
|
|
37
|
+
expect(result.current.isValid).toBe(false);
|
|
38
|
+
});
|
|
39
|
+
it('clears individual errors on valid input change', () => {
|
|
40
|
+
const { result } = renderHook(() => useMkForm({ fields, action: 'add' }));
|
|
41
|
+
// Force error
|
|
42
|
+
act(() => {
|
|
43
|
+
result.current.setField('name', 'M');
|
|
44
|
+
});
|
|
45
|
+
act(() => {
|
|
46
|
+
result.current.validate();
|
|
47
|
+
});
|
|
48
|
+
expect(result.current.errors.name).toBeTruthy();
|
|
49
|
+
// Fix error - setField clears the individual error instantly
|
|
50
|
+
act(() => {
|
|
51
|
+
result.current.setField('name', 'Mario');
|
|
52
|
+
});
|
|
53
|
+
expect(result.current.errors.name).toBeUndefined();
|
|
54
|
+
});
|
|
55
|
+
it('extracts API data applying optional filters (*)', () => {
|
|
56
|
+
const { result } = renderHook(() => useMkForm({ fields, action: 'add' }));
|
|
57
|
+
act(() => {
|
|
58
|
+
result.current.setFields({ name: 'Mario', email: '' });
|
|
59
|
+
});
|
|
60
|
+
const apiData = result.current.getApiData();
|
|
61
|
+
expect(apiData.name).toBe('Mario');
|
|
62
|
+
// 'a*' means email is optional on add action; if it's empty, it should be omitted
|
|
63
|
+
expect(apiData.email).toBeUndefined();
|
|
64
|
+
});
|
|
65
|
+
it('resets the form correctly', () => {
|
|
66
|
+
const { result } = renderHook(() => useMkForm({ fields, action: 'add' }));
|
|
67
|
+
act(() => {
|
|
68
|
+
result.current.setField('name', 'Mario');
|
|
69
|
+
result.current.validate(); // force validation cache
|
|
70
|
+
});
|
|
71
|
+
expect(result.current.isDirty).toBe(true);
|
|
72
|
+
act(() => {
|
|
73
|
+
result.current.reset({ name: 'Luigi' }); // Reset with default values
|
|
74
|
+
});
|
|
75
|
+
expect(result.current.formState.name).toBe('Luigi');
|
|
76
|
+
expect(result.current.isDirty).toBe(false);
|
|
77
|
+
expect(result.current.errors).toEqual({});
|
|
78
|
+
expect(result.current.isValid).toBe(true);
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
//# sourceMappingURL=useMkForm.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkForm.test.js","sourceRoot":"","sources":["../../src/hooks/useMkForm.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACvB,MAAM,MAAM,GAAiB;QACzB,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE;QACjD,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE;KACrD,CAAC;IAEF,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACvD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1E,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC1C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAC9C,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1E,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACtD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1E,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QAEH,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,GAAG,CAAC,GAAG,EAAE;YACL,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,yDAAyD;QACzD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACtD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAE1E,cAAc;QACd,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;QACH,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QAC9B,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;QAEhD,6DAA6D;QAC7D,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACvD,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1E,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC5C,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,kFAAkF;QAClF,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACjC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QAE1E,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACzC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,yBAAyB;QACxD,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1C,GAAG,CAAC,GAAG,EAAE;YACL,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,4BAA4B;QACzE,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC1C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface UseMkInViewPortReturnType {
|
|
2
|
+
isInViewport: boolean;
|
|
3
|
+
ref: (node: HTMLElement | null) => void;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* useMkInViewPort
|
|
7
|
+
*
|
|
8
|
+
* Custom hook to determine if an element is currently within the viewport using IntersectionObserver.
|
|
9
|
+
* 📌 Useful for lazy loading, animations on scroll, or triggering behavior when elements appear on screen.
|
|
10
|
+
*
|
|
11
|
+
* @param {IntersectionObserverInit} [options] - Optional configuration for the IntersectionObserver.
|
|
12
|
+
*/
|
|
13
|
+
export declare function useMkInViewPort(options?: IntersectionObserverInit): UseMkInViewPortReturnType;
|
|
14
|
+
//# sourceMappingURL=useMkInViewPort.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkInViewPort.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkInViewPort.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,yBAAyB;IACtC,YAAY,EAAE,OAAO,CAAC;IACtB,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC3B,OAAO,CAAC,EAAE,wBAAwB,GACnC,yBAAyB,CAyB3B"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* useMkInViewPort
|
|
4
|
+
*
|
|
5
|
+
* Custom hook to determine if an element is currently within the viewport using IntersectionObserver.
|
|
6
|
+
* 📌 Useful for lazy loading, animations on scroll, or triggering behavior when elements appear on screen.
|
|
7
|
+
*
|
|
8
|
+
* @param {IntersectionObserverInit} [options] - Optional configuration for the IntersectionObserver.
|
|
9
|
+
*/
|
|
10
|
+
export function useMkInViewPort(options) {
|
|
11
|
+
const [isInViewport, setIsInViewport] = useState(false);
|
|
12
|
+
const [refElement, setRefElement] = useState(null);
|
|
13
|
+
const ref = useCallback((node) => {
|
|
14
|
+
if (node !== refElement) {
|
|
15
|
+
setRefElement(node);
|
|
16
|
+
}
|
|
17
|
+
}, [refElement]);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (!refElement || typeof window === 'undefined')
|
|
20
|
+
return;
|
|
21
|
+
const observer = new IntersectionObserver(([entry]) => {
|
|
22
|
+
setIsInViewport(entry.isIntersecting);
|
|
23
|
+
}, options);
|
|
24
|
+
observer.observe(refElement);
|
|
25
|
+
return () => {
|
|
26
|
+
observer.disconnect();
|
|
27
|
+
};
|
|
28
|
+
}, [refElement, options]);
|
|
29
|
+
return { isInViewport, ref };
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=useMkInViewPort.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkInViewPort.js","sourceRoot":"","sources":["../../src/hooks/useMkInViewPort.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOzD;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC3B,OAAkC;IAElC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACjE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEvE,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,IAAwB,EAAE,EAAE;QACjD,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACtB,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAEzD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YAClD,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC1C,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAE7B,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC1B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC;AACjC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface InfiniteListOptions {
|
|
2
|
+
per_page?: number;
|
|
3
|
+
q?: string;
|
|
4
|
+
filter?: Record<string, any>;
|
|
5
|
+
sort?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function useMkInfiniteList(endpoint: string, options?: InfiniteListOptions): {
|
|
8
|
+
items: any[];
|
|
9
|
+
loading: boolean;
|
|
10
|
+
error: any;
|
|
11
|
+
hasMore: boolean;
|
|
12
|
+
loadMore: () => Promise<void>;
|
|
13
|
+
reset: () => void;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=useMkInfiniteList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkInfiniteList.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkInfiniteList.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,mBAAwB;;;;;;;EAmDpF"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
2
|
+
import { useApi } from './useApi';
|
|
3
|
+
export function useMkInfiniteList(endpoint, options = {}) {
|
|
4
|
+
const api = useApi();
|
|
5
|
+
const [items, setItems] = useState([]);
|
|
6
|
+
const [hasMore, setHasMore] = useState(true);
|
|
7
|
+
const [page, setPage] = useState(1);
|
|
8
|
+
// Reset list when filters/search changes
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
setItems([]);
|
|
11
|
+
setPage(1);
|
|
12
|
+
setHasMore(true);
|
|
13
|
+
}, [options.q, JSON.stringify(options.filter), options.sort]);
|
|
14
|
+
const loadMore = useCallback(async () => {
|
|
15
|
+
if (!hasMore || api.loading)
|
|
16
|
+
return;
|
|
17
|
+
const response = await api.get(endpoint, Object.assign(Object.assign({}, options), { page, per_page: options.per_page || 15 }));
|
|
18
|
+
if (response.success) {
|
|
19
|
+
const newData = Array.isArray(response.data) ? response.data : [];
|
|
20
|
+
if (newData.length === 0) {
|
|
21
|
+
setHasMore(false);
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
setItems((prev) => [...prev, ...newData]);
|
|
25
|
+
setPage(prev => prev + 1);
|
|
26
|
+
// Check pagination from extraData
|
|
27
|
+
const extra = response.__extraData;
|
|
28
|
+
if (extra && typeof extra.last_page === 'number' && page >= extra.last_page) {
|
|
29
|
+
setHasMore(false);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}, [endpoint, page, hasMore, api.loading, options]);
|
|
34
|
+
return {
|
|
35
|
+
items,
|
|
36
|
+
loading: api.loading,
|
|
37
|
+
error: api.error,
|
|
38
|
+
hasMore,
|
|
39
|
+
loadMore,
|
|
40
|
+
reset: () => {
|
|
41
|
+
setItems([]);
|
|
42
|
+
setPage(1);
|
|
43
|
+
setHasMore(true);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=useMkInfiniteList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkInfiniteList.js","sourceRoot":"","sources":["../../src/hooks/useMkInfiniteList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,MAAM,UAAU,iBAAiB,CAAC,QAAgB,EAAE,UAA+B,EAAE;IACjF,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAQ,EAAE,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpC,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,OAAO,CAAC,CAAC,CAAC,CAAC;QACX,UAAU,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAE9D,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACpC,IAAI,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO;YAAE,OAAO;QAEpC,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,QAAQ,kCAChC,OAAO,KACV,IAAI,EACJ,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,EAAE,IAClC,CAAC;QAEH,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,OAAO,GAAc,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7E,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACvB,UAAU,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACJ,QAAQ,CAAC,CAAC,IAAW,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAI,OAAiB,CAAC,CAAC,CAAC;gBAC5D,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBAE1B,kCAAkC;gBAClC,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAiD,CAAC;gBACzE,IAAI,KAAK,IAAI,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;oBAC1E,UAAU,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpD,OAAO;QACH,KAAK;QACL,OAAO,EAAE,GAAG,CAAC,OAAO;QACpB,KAAK,EAAE,GAAG,CAAC,KAAK;QAChB,OAAO;QACP,QAAQ;QACR,KAAK,EAAE,GAAG,EAAE;YACR,QAAQ,CAAC,EAAE,CAAC,CAAC;YACb,OAAO,CAAC,CAAC,CAAC,CAAC;YACX,UAAU,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;KACJ,CAAC;AACN,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module useMkList
|
|
3
|
+
* @description Paginated list manager for React Web — mirrors mk-mobile's useMkList API.
|
|
4
|
+
* Manages page, search, sort, and filters with auto-refresh on param changes.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```tsx
|
|
8
|
+
* const { data, loading, params, setSearch, setPage, setSort, setFilter, refresh } = useMkList('/users');
|
|
9
|
+
*
|
|
10
|
+
* // Search
|
|
11
|
+
* setSearch('mario');
|
|
12
|
+
*
|
|
13
|
+
* // Change page
|
|
14
|
+
* setPage(2);
|
|
15
|
+
*
|
|
16
|
+
* // Sort
|
|
17
|
+
* setSort('-created_at');
|
|
18
|
+
*
|
|
19
|
+
* // Filter
|
|
20
|
+
* setFilter('status', 'active');
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export interface MkListParams {
|
|
24
|
+
page?: number;
|
|
25
|
+
per_page?: number;
|
|
26
|
+
q?: string;
|
|
27
|
+
sort?: string;
|
|
28
|
+
filter?: Record<string, any>;
|
|
29
|
+
}
|
|
30
|
+
export interface MkListOptions {
|
|
31
|
+
/** Initial params. */
|
|
32
|
+
initialParams?: MkListParams;
|
|
33
|
+
/** Whether to auto-fetch on mount and param changes. Default true. */
|
|
34
|
+
autoFetch?: boolean;
|
|
35
|
+
/** Debounce delay in ms for search updates. Default 0 (no debounce). */
|
|
36
|
+
debounceMs?: number;
|
|
37
|
+
}
|
|
38
|
+
export declare function useMkList(endpoint: string, options?: MkListOptions): {
|
|
39
|
+
params: MkListParams;
|
|
40
|
+
setParams: import("react").Dispatch<import("react").SetStateAction<MkListParams>>;
|
|
41
|
+
setFilter: (field: string, value: any) => void;
|
|
42
|
+
setPage: (page: number) => void;
|
|
43
|
+
setSearch: (q: string) => void;
|
|
44
|
+
setSort: (sort: string) => void;
|
|
45
|
+
setPerPage: (per_page: number) => void;
|
|
46
|
+
resetFilters: () => void;
|
|
47
|
+
refresh: (extraParams?: MkListParams) => Promise<import("@mk/core").MkResponse<unknown>>;
|
|
48
|
+
/** Pagination meta from __extraData */
|
|
49
|
+
pagination: any;
|
|
50
|
+
status: import("@mk/core").ApiStatus;
|
|
51
|
+
data: any;
|
|
52
|
+
error: any;
|
|
53
|
+
waiting: number;
|
|
54
|
+
loading: boolean;
|
|
55
|
+
get: (endpoint: string, params?: any) => Promise<import("@mk/core").MkResponse<unknown>>;
|
|
56
|
+
post: (endpoint: string, body: any) => Promise<import("@mk/core").MkResponse<unknown>>;
|
|
57
|
+
put: (endpoint: string, body: any) => Promise<import("@mk/core").MkResponse<unknown>>;
|
|
58
|
+
delete: (endpoint: string) => Promise<import("@mk/core").MkResponse<unknown>>;
|
|
59
|
+
remove: (endpoint: string) => Promise<import("@mk/core").MkResponse<unknown>>;
|
|
60
|
+
};
|
|
61
|
+
//# sourceMappingURL=useMkList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkList.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkList.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,WAAW,YAAY;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC1B,sBAAsB;IACtB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;;;uBAiB7B,MAAM,SAAS,GAAG;oBAQrB,MAAM;mBAIP,MAAM;oBAIL,MAAM;2BAIC,MAAM;;4BA1B9B,YAAY;IAyD1B,uCAAuC;;;;;;;;;;;;EAG9C"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useState, useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
import { useApi } from './useApi';
|
|
3
|
+
export function useMkList(endpoint, options = {}) {
|
|
4
|
+
var _a;
|
|
5
|
+
const { initialParams = {}, autoFetch = true } = options;
|
|
6
|
+
const api = useApi();
|
|
7
|
+
const [params, setParams] = useState(Object.assign({ page: 1, per_page: 15 }, initialParams));
|
|
8
|
+
const mountedRef = useRef(false);
|
|
9
|
+
const refresh = useCallback((extraParams = {}) => {
|
|
10
|
+
return api.get(endpoint, Object.assign(Object.assign({}, params), extraParams));
|
|
11
|
+
}, [endpoint, params]);
|
|
12
|
+
const setFilter = useCallback((field, value) => {
|
|
13
|
+
setParams(prev => (Object.assign(Object.assign({}, prev), { page: 1, filter: Object.assign(Object.assign({}, prev.filter), { [field]: value }) })));
|
|
14
|
+
}, []);
|
|
15
|
+
const setPage = useCallback((page) => {
|
|
16
|
+
setParams(prev => (Object.assign(Object.assign({}, prev), { page })));
|
|
17
|
+
}, []);
|
|
18
|
+
const setSearch = useCallback((q) => {
|
|
19
|
+
setParams(prev => (Object.assign(Object.assign({}, prev), { page: 1, q })));
|
|
20
|
+
}, []);
|
|
21
|
+
const setSort = useCallback((sort) => {
|
|
22
|
+
setParams(prev => (Object.assign(Object.assign({}, prev), { sort })));
|
|
23
|
+
}, []);
|
|
24
|
+
const setPerPage = useCallback((per_page) => {
|
|
25
|
+
setParams(prev => (Object.assign(Object.assign({}, prev), { page: 1, per_page })));
|
|
26
|
+
}, []);
|
|
27
|
+
const resetFilters = useCallback(() => {
|
|
28
|
+
setParams(prev => (Object.assign(Object.assign({}, prev), { page: 1, q: undefined, sort: undefined, filter: undefined })));
|
|
29
|
+
}, []);
|
|
30
|
+
// Auto-refresh
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (!autoFetch)
|
|
33
|
+
return;
|
|
34
|
+
if (!mountedRef.current) {
|
|
35
|
+
mountedRef.current = true;
|
|
36
|
+
refresh();
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
refresh();
|
|
40
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
41
|
+
}, [params]);
|
|
42
|
+
return Object.assign(Object.assign({}, api), { params,
|
|
43
|
+
setParams,
|
|
44
|
+
setFilter,
|
|
45
|
+
setPage,
|
|
46
|
+
setSearch,
|
|
47
|
+
setSort,
|
|
48
|
+
setPerPage,
|
|
49
|
+
resetFilters,
|
|
50
|
+
refresh,
|
|
51
|
+
/** Pagination meta from __extraData */
|
|
52
|
+
pagination: ((_a = api.data) === null || _a === void 0 ? void 0 : _a.__extraData) || {} });
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=useMkList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkList.js","sourceRoot":"","sources":["../../src/hooks/useMkList.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* useMkLocalStorage
|
|
3
|
+
* 🚀 Sincroniza el estado de React con el almacenamiento local.
|
|
4
|
+
*/
|
|
5
|
+
export declare function useMkLocalStorage<T>(key: string, initialValue: T): readonly [T, (value: T | ((val: T) => T)) => void];
|
|
6
|
+
//# sourceMappingURL=useMkLocalStorage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMkLocalStorage.d.ts","sourceRoot":"","sources":["../../src/hooks/useMkLocalStorage.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,wBAYtC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,WAa7C"}
|