lkd-web-kit 0.9.2 → 0.10.0
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/dist/contexts/ModalManagerContext/index.cjs +73 -0
- package/dist/contexts/ModalManagerContext/index.d.ts +35 -0
- package/dist/contexts/ModalManagerContext/index.d.ts.map +1 -0
- package/dist/contexts/ModalManagerContext/index.js +71 -0
- package/dist/contexts/index.d.ts +1 -0
- package/dist/contexts/index.d.ts.map +1 -1
- package/dist/index.cjs +8 -5
- package/dist/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
+
//#region src/contexts/ModalManagerContext/index.tsx
|
|
6
|
+
var ModalManagerContext = (0, react.createContext)(void 0);
|
|
7
|
+
var ModalManagerProvider = ({ children, modals, loadModals = [] }) => {
|
|
8
|
+
const [statusModal, setStatusModal] = (0, react.useState)([]);
|
|
9
|
+
(0, react.useEffect)(() => {
|
|
10
|
+
loadModals.forEach((modalKey) => {
|
|
11
|
+
Object.keys(modals).filter((key) => key.startsWith(modalKey)).forEach((key) => {
|
|
12
|
+
const item = modals[key];
|
|
13
|
+
item.load?.().then((modal) => {
|
|
14
|
+
item.component = modal.default;
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
}, [loadModals, modals]);
|
|
19
|
+
const showModal = (key, props, options) => {
|
|
20
|
+
const { multiple, ...modalProps } = options ?? {};
|
|
21
|
+
const modalState = {
|
|
22
|
+
modalKey: key,
|
|
23
|
+
props,
|
|
24
|
+
modalProps,
|
|
25
|
+
opened: true
|
|
26
|
+
};
|
|
27
|
+
setStatusModal((prev) => multiple ? [...prev, modalState] : [modalState]);
|
|
28
|
+
};
|
|
29
|
+
const closeModal = (key) => {
|
|
30
|
+
if (key === void 0) {
|
|
31
|
+
setStatusModal((prev) => prev.map((modal) => ({
|
|
32
|
+
...modal,
|
|
33
|
+
opened: false
|
|
34
|
+
})));
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
setStatusModal((prev) => prev.map((modal) => modal.modalKey === key ? {
|
|
38
|
+
...modal,
|
|
39
|
+
opened: false
|
|
40
|
+
} : modal));
|
|
41
|
+
};
|
|
42
|
+
const renderModals = (0, react.useMemo)(() => statusModal.map(({ modalKey, props, opened, modalProps }, i) => {
|
|
43
|
+
const Component = modals[modalKey]?.component;
|
|
44
|
+
if (!Component) return null;
|
|
45
|
+
return /* @__PURE__ */ (0, react.createElement)(Component, {
|
|
46
|
+
...props,
|
|
47
|
+
key: `${modalKey}-${i}`,
|
|
48
|
+
modalProps: {
|
|
49
|
+
...modalProps,
|
|
50
|
+
opened,
|
|
51
|
+
zIndex: 200 + i
|
|
52
|
+
},
|
|
53
|
+
removeModal: () => {
|
|
54
|
+
setStatusModal((prev) => prev.filter((_, index) => index !== i));
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
}), [statusModal, modals]);
|
|
58
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalManagerContext.Provider, {
|
|
59
|
+
value: {
|
|
60
|
+
showModal,
|
|
61
|
+
closeModal
|
|
62
|
+
},
|
|
63
|
+
children: [renderModals, children]
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
var useModalManager = () => {
|
|
67
|
+
const context = (0, react.use)(ModalManagerContext);
|
|
68
|
+
if (context === void 0) throw Error("Out of context: useModalManager");
|
|
69
|
+
return context;
|
|
70
|
+
};
|
|
71
|
+
//#endregion
|
|
72
|
+
exports.ModalManagerProvider = ModalManagerProvider;
|
|
73
|
+
exports.useModalManager = useModalManager;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ModalProps } from '@mantine/core';
|
|
2
|
+
import { ComponentType, ReactNode } from 'react';
|
|
3
|
+
import { ModalManagerWrapperProps } from '../../hocs';
|
|
4
|
+
export interface ModalRegistryItem<Props extends object = object> {
|
|
5
|
+
component?: ComponentType<ModalManagerWrapperProps<object>>;
|
|
6
|
+
load?: () => Promise<{
|
|
7
|
+
default: ComponentType<ModalManagerWrapperProps<object>>;
|
|
8
|
+
}>;
|
|
9
|
+
path?: string;
|
|
10
|
+
readonly __props?: Props;
|
|
11
|
+
}
|
|
12
|
+
export type ModalRegistryRecord = Record<string, ModalRegistryItem>;
|
|
13
|
+
export interface ModalManagerRegistryOverride {
|
|
14
|
+
}
|
|
15
|
+
export type ModalRegistry = ModalManagerRegistryOverride extends {
|
|
16
|
+
modals: infer Registry extends ModalRegistryRecord;
|
|
17
|
+
} ? Registry : ModalRegistryRecord;
|
|
18
|
+
export type ModalKey = Extract<keyof ModalRegistry, string>;
|
|
19
|
+
export type ShowModalOptions = {
|
|
20
|
+
multiple?: boolean;
|
|
21
|
+
} & Partial<ModalProps>;
|
|
22
|
+
export interface ModalManagerProviderProps {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
modals: ModalRegistry;
|
|
25
|
+
loadModals?: (ModalKey | (string & {}))[];
|
|
26
|
+
}
|
|
27
|
+
type PublicModalProps<Key extends ModalKey> = ModalRegistry[Key] extends ModalRegistryItem<infer Props> ? Props : never;
|
|
28
|
+
type ModalManagerValues = {
|
|
29
|
+
showModal: <Key extends ModalKey>(key: Key, props?: PublicModalProps<Key>, options?: ShowModalOptions) => void;
|
|
30
|
+
closeModal: (key?: ModalKey) => void;
|
|
31
|
+
};
|
|
32
|
+
export declare const ModalManagerProvider: ({ children, modals, loadModals, }: ModalManagerProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare const useModalManager: () => ModalManagerValues;
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/ModalManagerContext/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAExD,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3D,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,CAAA;KAAE,CAAC,CAAA;IAClF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CACzB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;AAEnE,MAAM,WAAW,4BAA4B;CAAG;AAEhD,MAAM,MAAM,aAAa,GAAG,4BAA4B,SAAS;IAC/D,MAAM,EAAE,MAAM,QAAQ,SAAS,mBAAmB,CAAA;CACnD,GACG,QAAQ,GACR,mBAAmB,CAAA;AAEvB,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,aAAa,EAAE,MAAM,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAE3E,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,EAAE,aAAa,CAAA;IACrB,UAAU,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAA;CAC1C;AAED,KAAK,gBAAgB,CAAC,GAAG,SAAS,QAAQ,IACxC,aAAa,CAAC,GAAG,CAAC,SAAS,iBAAiB,CAAC,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAA;AAS3E,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,CAAC,GAAG,SAAS,QAAQ,EAC9B,GAAG,EAAE,GAAG,EACR,KAAK,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,EAC7B,OAAO,CAAC,EAAE,gBAAgB,KACvB,IAAI,CAAA;IACT,UAAU,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CAmE3B,CAAA;AAED,eAAO,MAAM,eAAe,0BAM3B,CAAA"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext, createElement, use, useEffect, useMemo, useState } from "react";
|
|
3
|
+
import { jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/contexts/ModalManagerContext/index.tsx
|
|
5
|
+
var ModalManagerContext = createContext(void 0);
|
|
6
|
+
var ModalManagerProvider = ({ children, modals, loadModals = [] }) => {
|
|
7
|
+
const [statusModal, setStatusModal] = useState([]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
loadModals.forEach((modalKey) => {
|
|
10
|
+
Object.keys(modals).filter((key) => key.startsWith(modalKey)).forEach((key) => {
|
|
11
|
+
const item = modals[key];
|
|
12
|
+
item.load?.().then((modal) => {
|
|
13
|
+
item.component = modal.default;
|
|
14
|
+
});
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
}, [loadModals, modals]);
|
|
18
|
+
const showModal = (key, props, options) => {
|
|
19
|
+
const { multiple, ...modalProps } = options ?? {};
|
|
20
|
+
const modalState = {
|
|
21
|
+
modalKey: key,
|
|
22
|
+
props,
|
|
23
|
+
modalProps,
|
|
24
|
+
opened: true
|
|
25
|
+
};
|
|
26
|
+
setStatusModal((prev) => multiple ? [...prev, modalState] : [modalState]);
|
|
27
|
+
};
|
|
28
|
+
const closeModal = (key) => {
|
|
29
|
+
if (key === void 0) {
|
|
30
|
+
setStatusModal((prev) => prev.map((modal) => ({
|
|
31
|
+
...modal,
|
|
32
|
+
opened: false
|
|
33
|
+
})));
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
setStatusModal((prev) => prev.map((modal) => modal.modalKey === key ? {
|
|
37
|
+
...modal,
|
|
38
|
+
opened: false
|
|
39
|
+
} : modal));
|
|
40
|
+
};
|
|
41
|
+
const renderModals = useMemo(() => statusModal.map(({ modalKey, props, opened, modalProps }, i) => {
|
|
42
|
+
const Component = modals[modalKey]?.component;
|
|
43
|
+
if (!Component) return null;
|
|
44
|
+
return /* @__PURE__ */ createElement(Component, {
|
|
45
|
+
...props,
|
|
46
|
+
key: `${modalKey}-${i}`,
|
|
47
|
+
modalProps: {
|
|
48
|
+
...modalProps,
|
|
49
|
+
opened,
|
|
50
|
+
zIndex: 200 + i
|
|
51
|
+
},
|
|
52
|
+
removeModal: () => {
|
|
53
|
+
setStatusModal((prev) => prev.filter((_, index) => index !== i));
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}), [statusModal, modals]);
|
|
57
|
+
return /* @__PURE__ */ jsxs(ModalManagerContext.Provider, {
|
|
58
|
+
value: {
|
|
59
|
+
showModal,
|
|
60
|
+
closeModal
|
|
61
|
+
},
|
|
62
|
+
children: [renderModals, children]
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
var useModalManager = () => {
|
|
66
|
+
const context = use(ModalManagerContext);
|
|
67
|
+
if (context === void 0) throw Error("Out of context: useModalManager");
|
|
68
|
+
return context;
|
|
69
|
+
};
|
|
70
|
+
//#endregion
|
|
71
|
+
export { ModalManagerProvider, useModalManager };
|
package/dist/contexts/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AACtE,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AACtE,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mBAAmB,CAAA"}
|
package/dist/index.cjs
CHANGED
|
@@ -20,9 +20,10 @@ const require_index$15 = require("./components/MyTimeInput/index.cjs");
|
|
|
20
20
|
const require_NavItems = require("./components/NavItems.cjs");
|
|
21
21
|
const require_http_status = require("./consts/http-status.cjs");
|
|
22
22
|
const require_revalidate = require("./consts/revalidate.cjs");
|
|
23
|
-
const require_index$16 = require("./contexts/
|
|
23
|
+
const require_index$16 = require("./contexts/ModalManagerContext/index.cjs");
|
|
24
|
+
const require_index$17 = require("./contexts/NavigationHistoryContext/index.cjs");
|
|
24
25
|
const require_hook = require("./contexts/NavigationHistoryContext/hook.cjs");
|
|
25
|
-
const require_index$
|
|
26
|
+
const require_index$18 = require("./contexts/PageDataContext/index.cjs");
|
|
26
27
|
const require_withController = require("./hocs/withController.cjs");
|
|
27
28
|
const require_withModalManager = require("./hocs/withModalManager.cjs");
|
|
28
29
|
const require_FormCheckbox = require("./form/base/FormCheckbox.cjs");
|
|
@@ -81,6 +82,7 @@ exports.HttpStatus = require_http_status.HttpStatus;
|
|
|
81
82
|
exports.Icon = require_Icon.Icon;
|
|
82
83
|
exports.InfinityLoadMoreButton = require_index$1.InfinityLoadMoreButton;
|
|
83
84
|
exports.InfinitySelect = require_index$2.InfinitySelect;
|
|
85
|
+
exports.ModalManagerProvider = require_index$16.ModalManagerProvider;
|
|
84
86
|
exports.MyCheckboxGroup = require_index$3.MyCheckboxGroup;
|
|
85
87
|
exports.MyDateInput = require_index$4.MyDateInput;
|
|
86
88
|
exports.MyDatePickerInput = require_index$5.MyDatePickerInput;
|
|
@@ -95,8 +97,8 @@ exports.MyTextInput = require_index$14.MyTextInput;
|
|
|
95
97
|
exports.MyTextarea = require_index$13.MyTextarea;
|
|
96
98
|
exports.MyTimeInput = require_index$15.MyTimeInput;
|
|
97
99
|
exports.NavItems = require_NavItems.NavItems;
|
|
98
|
-
exports.NavigationHistoryProvider = require_index$
|
|
99
|
-
exports.PageDataProvider = require_index$
|
|
100
|
+
exports.NavigationHistoryProvider = require_index$17.NavigationHistoryProvider;
|
|
101
|
+
exports.PageDataProvider = require_index$18.PageDataProvider;
|
|
100
102
|
exports.QP_BACK_URL_NAME = require_hook.QP_BACK_URL_NAME;
|
|
101
103
|
exports.Revalidate = require_revalidate.Revalidate;
|
|
102
104
|
exports.addBodyJsonHook = require_addBodyJsonHook.addBodyJsonHook;
|
|
@@ -120,9 +122,10 @@ exports.timeInputToNumber = require_FormTimeInput.timeInputToNumber;
|
|
|
120
122
|
exports.toTailwindColors = require_to_tailwind_colors.toTailwindColors;
|
|
121
123
|
exports.useBreakpoint = require_useBreakpoint.useBreakpoint;
|
|
122
124
|
exports.useFetchNextPageOnScroll = require_useFetchNextPageOnScroll.useFetchNextPageOnScroll;
|
|
125
|
+
exports.useModalManager = require_index$16.useModalManager;
|
|
123
126
|
exports.useNavigationHistory = require_hook.useNavigationHistory;
|
|
124
127
|
exports.useOnScrollProgress = require_useOnScrollProgress.useOnScrollProgress;
|
|
125
|
-
exports.usePageData = require_index$
|
|
128
|
+
exports.usePageData = require_index$18.usePageData;
|
|
126
129
|
exports.useUpdateSearchParams = require_useUpdateSearchParams.useUpdateSearchParams;
|
|
127
130
|
exports.useZodConfig = require_useZodConfig.useZodConfig;
|
|
128
131
|
exports.withController = require_withController.withController;
|
package/dist/index.js
CHANGED
|
@@ -19,6 +19,7 @@ import { MyTimeInput } from "./components/MyTimeInput/index.js";
|
|
|
19
19
|
import { NavItems } from "./components/NavItems.js";
|
|
20
20
|
import { HttpStatus } from "./consts/http-status.js";
|
|
21
21
|
import { Revalidate } from "./consts/revalidate.js";
|
|
22
|
+
import { ModalManagerProvider, useModalManager } from "./contexts/ModalManagerContext/index.js";
|
|
22
23
|
import { NavigationHistoryProvider } from "./contexts/NavigationHistoryContext/index.js";
|
|
23
24
|
import { QP_BACK_URL_NAME, useNavigationHistory } from "./contexts/NavigationHistoryContext/hook.js";
|
|
24
25
|
import { PageDataProvider, usePageData } from "./contexts/PageDataContext/index.js";
|
|
@@ -59,4 +60,4 @@ import { addBodyJsonHook } from "./utils/ky/addBodyJsonHook.js";
|
|
|
59
60
|
import { parseJSON } from "./utils/ky/parseJson.js";
|
|
60
61
|
import { queryStringify } from "./utils/query-stringify.js";
|
|
61
62
|
import { createNewRoute, newRoute } from "./utils/new-route.js";
|
|
62
|
-
export { EmptyState, Form, FormCheckbox, FormCheckboxGroup, FormDateInput, FormDatePickerInput, FormDateTimePicker, FormInfinitySelect, FormMonthPickerInput, FormMultiSelect, FormNumberInput, FormRadioGroup, FormSelect, FormSubmitButton, FormTextInput, FormTextarea, FormTimeInput, HttpStatus, Icon, InfinityLoadMoreButton, InfinitySelect, MyCheckboxGroup, MyDateInput, MyDatePickerInput, MyDateTimePicker, MyMonthPickerInput, MyMultiSelect, MyNotifications, MyNumberInput, MyRadioGroup, MySelect, MyTextInput, MyTextarea, MyTimeInput, NavItems, NavigationHistoryProvider, PageDataProvider, QP_BACK_URL_NAME, Revalidate, addBodyJsonHook, breakpointsWithPx, createNewRoute, formatBytes, getVirtualContainerProps, getVirtualItemProps, groupBy, indexBy, isInfinityEmpty, myDefaultTheme, newRoute, nullableButRequired, numberToTimeInput, optionalButRequired, parseJSON, queryStringify, shuffleArray, timeInputToNumber, toTailwindColors, useBreakpoint, useFetchNextPageOnScroll, useNavigationHistory, useOnScrollProgress, usePageData, useUpdateSearchParams, useZodConfig, withController, withModalManager, zodValidator };
|
|
63
|
+
export { EmptyState, Form, FormCheckbox, FormCheckboxGroup, FormDateInput, FormDatePickerInput, FormDateTimePicker, FormInfinitySelect, FormMonthPickerInput, FormMultiSelect, FormNumberInput, FormRadioGroup, FormSelect, FormSubmitButton, FormTextInput, FormTextarea, FormTimeInput, HttpStatus, Icon, InfinityLoadMoreButton, InfinitySelect, ModalManagerProvider, MyCheckboxGroup, MyDateInput, MyDatePickerInput, MyDateTimePicker, MyMonthPickerInput, MyMultiSelect, MyNotifications, MyNumberInput, MyRadioGroup, MySelect, MyTextInput, MyTextarea, MyTimeInput, NavItems, NavigationHistoryProvider, PageDataProvider, QP_BACK_URL_NAME, Revalidate, addBodyJsonHook, breakpointsWithPx, createNewRoute, formatBytes, getVirtualContainerProps, getVirtualItemProps, groupBy, indexBy, isInfinityEmpty, myDefaultTheme, newRoute, nullableButRequired, numberToTimeInput, optionalButRequired, parseJSON, queryStringify, shuffleArray, timeInputToNumber, toTailwindColors, useBreakpoint, useFetchNextPageOnScroll, useModalManager, useNavigationHistory, useOnScrollProgress, usePageData, useUpdateSearchParams, useZodConfig, withController, withModalManager, zodValidator };
|