@xanui/ui 1.1.1 → 1.1.4
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/Alert/index.d.ts +7 -25
- package/Alert/index.js +29 -63
- package/Alert/index.js.map +1 -1
- package/Alert/index.mjs +29 -63
- package/Alert/index.mjs.map +1 -1
- package/CalendarInput/index.d.ts +2 -1
- package/CalendarInput/index.js.map +1 -1
- package/CalendarInput/index.mjs.map +1 -1
- package/ClickOutside/index.d.ts +1 -1
- package/ClickOutside/index.js +20 -10
- package/ClickOutside/index.js.map +1 -1
- package/ClickOutside/index.mjs +20 -10
- package/ClickOutside/index.mjs.map +1 -1
- package/Drawer/index.d.ts +10 -10
- package/Drawer/index.js +48 -37
- package/Drawer/index.js.map +1 -1
- package/Drawer/index.mjs +48 -37
- package/Drawer/index.mjs.map +1 -1
- package/Layer/index.d.ts +7 -8
- package/Layer/index.js +24 -49
- package/Layer/index.js.map +1 -1
- package/Layer/index.mjs +23 -48
- package/Layer/index.mjs.map +1 -1
- package/Modal/index.d.ts +10 -10
- package/Modal/index.js +43 -34
- package/Modal/index.js.map +1 -1
- package/Modal/index.mjs +43 -34
- package/Modal/index.mjs.map +1 -1
- package/Scrollbar/index.d.ts +1 -1
- package/Scrollbar/index.js.map +1 -1
- package/Scrollbar/index.mjs.map +1 -1
- package/Toast/index.d.ts +3 -5
- package/Toast/index.js +61 -100
- package/Toast/index.js.map +1 -1
- package/Toast/index.mjs +61 -100
- package/Toast/index.mjs.map +1 -1
- package/index.d.ts +0 -1
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +4 -4
- package/useAlert/index.d.ts +36 -0
- package/useAlert/index.js +80 -0
- package/useAlert/index.js.map +1 -0
- package/useAlert/index.mjs +80 -0
- package/useAlert/index.mjs.map +1 -0
- package/useBlurCss/index.js +11 -0
- package/useBlurCss/index.js.map +1 -0
- package/useBlurCss/index.mjs +11 -0
- package/useBlurCss/index.mjs.map +1 -0
- package/useLayer/index.d.ts +10 -0
- package/useLayer/index.js +27 -0
- package/useLayer/index.js.map +1 -0
- package/useLayer/index.mjs +27 -0
- package/useLayer/index.mjs.map +1 -0
- package/useModal/index.d.ts +12 -0
- package/useModal/index.js +26 -0
- package/useModal/index.js.map +1 -0
- package/useModal/index.mjs +26 -0
- package/useModal/index.mjs.map +1 -0
- package/ThemeProvider/RenderRoot.js +0 -22
- package/ThemeProvider/RenderRoot.js.map +0 -1
- package/ThemeProvider/RenderRoot.mjs +0 -22
- package/ThemeProvider/RenderRoot.mjs.map +0 -1
- package/ThemeProvider/index.d.ts +0 -8
- package/ThemeProvider/index.js +0 -4
- package/ThemeProvider/index.js.map +0 -1
- package/ThemeProvider/index.mjs +0 -4
- package/ThemeProvider/index.mjs.map +0 -1
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { TransitionVariantTypes } from '@xanui/core';
|
|
2
|
+
import { ButtonProps } from '../Button/index.js';
|
|
3
|
+
import { UseModalProps } from '../useModal/index.js';
|
|
4
|
+
import { AlertProps } from '../Alert/index.js';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
type UseAlertContentProps = {
|
|
8
|
+
open: () => void;
|
|
9
|
+
close: () => void;
|
|
10
|
+
loading: (is: boolean) => void;
|
|
11
|
+
isLoading: () => boolean;
|
|
12
|
+
};
|
|
13
|
+
type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement);
|
|
14
|
+
type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "size"> & {
|
|
15
|
+
content: string | UseAlertContent;
|
|
16
|
+
size?: "small" | "medium" | "large" | number;
|
|
17
|
+
closeButton?: boolean;
|
|
18
|
+
clickOutsideToClose?: boolean;
|
|
19
|
+
okButtonText?: string;
|
|
20
|
+
cancelButtonText?: string;
|
|
21
|
+
hideOkButton?: boolean;
|
|
22
|
+
hideCancelButton?: boolean;
|
|
23
|
+
buttonPlacement?: "start" | "end" | "between" | "full";
|
|
24
|
+
variant?: "text" | "fill";
|
|
25
|
+
onConfirm?: () => Promise<void> | void;
|
|
26
|
+
onCancel?: () => Promise<void> | void;
|
|
27
|
+
transition?: TransitionVariantTypes;
|
|
28
|
+
blurMode?: UseModalProps['blurMode'];
|
|
29
|
+
slotProps?: {
|
|
30
|
+
modal?: UseModalProps;
|
|
31
|
+
okButton?: Omit<ButtonProps, "children">;
|
|
32
|
+
closeButton?: Omit<ButtonProps, "children">;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export type { UseAlerProps, UseAlertContent, UseAlertContentProps };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),index$2=require('../Button/index.js'),index=require('../useModal/index.js'),index$1=require('../Alert/index.js'),React=require('react');const useAlert = (props) => {
|
|
2
|
+
const [loading, setLoading] = React.useState(false);
|
|
3
|
+
let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
|
|
4
|
+
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
5
|
+
hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
|
|
6
|
+
size !== null && size !== void 0 ? size : (size = "small");
|
|
7
|
+
color !== null && color !== void 0 ? color : (color = 'default');
|
|
8
|
+
variant !== null && variant !== void 0 ? variant : (variant = "text");
|
|
9
|
+
direction !== null && direction !== void 0 ? direction : (direction = "column");
|
|
10
|
+
buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
|
|
11
|
+
let sx = {};
|
|
12
|
+
switch (buttonPlacement) {
|
|
13
|
+
case "start":
|
|
14
|
+
sx.justifyContent = 'flex-start';
|
|
15
|
+
break;
|
|
16
|
+
case "end":
|
|
17
|
+
sx.justifyContent = 'flex-end';
|
|
18
|
+
break;
|
|
19
|
+
case "between":
|
|
20
|
+
sx.justifyContent = 'space-between';
|
|
21
|
+
break;
|
|
22
|
+
case "full":
|
|
23
|
+
sx = {
|
|
24
|
+
"& button": {
|
|
25
|
+
flex: 1
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
break;
|
|
29
|
+
}
|
|
30
|
+
let sizes = {
|
|
31
|
+
small: 320,
|
|
32
|
+
medium: 400,
|
|
33
|
+
large: 600
|
|
34
|
+
};
|
|
35
|
+
let okcolor = color;
|
|
36
|
+
let closecolor = color;
|
|
37
|
+
if (color === 'default') {
|
|
38
|
+
okcolor = 'brand';
|
|
39
|
+
closecolor = 'default';
|
|
40
|
+
variant = 'text';
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
if (variant === 'fill') {
|
|
44
|
+
okcolor = 'default';
|
|
45
|
+
closecolor = 'default';
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
okcolor = color;
|
|
49
|
+
closecolor = 'default';
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
const modal = index.default(jsxRuntime.jsxs(index$1.default, Object.assign({ direction: direction, sx: {
|
|
53
|
+
px: 2,
|
|
54
|
+
py: 1,
|
|
55
|
+
pt: direction === 'row' ? 1 : 2
|
|
56
|
+
}, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [typeof content === "function" ? content({
|
|
57
|
+
open: () => modal.open(),
|
|
58
|
+
close: () => modal.close(),
|
|
59
|
+
loading: (is) => setLoading(is),
|
|
60
|
+
isLoading: () => loading
|
|
61
|
+
}) : content, jsxRuntime.jsxs(core.Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsxRuntime.jsx(index$2.default, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
|
|
62
|
+
setLoading(true);
|
|
63
|
+
onCancel && await onCancel();
|
|
64
|
+
setLoading(false);
|
|
65
|
+
modal.close();
|
|
66
|
+
}, children: cancelButtonText || "Close" })), jsxRuntime.jsx(index$2.default, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
|
|
67
|
+
setLoading(true);
|
|
68
|
+
onConfirm && await onConfirm();
|
|
69
|
+
setLoading(false);
|
|
70
|
+
modal.close();
|
|
71
|
+
}, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
|
|
72
|
+
if (clickOutsideToClose && !loading) {
|
|
73
|
+
setLoading(true);
|
|
74
|
+
onCancel && await onCancel();
|
|
75
|
+
setLoading(false);
|
|
76
|
+
modal.close();
|
|
77
|
+
}
|
|
78
|
+
} }));
|
|
79
|
+
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
80
|
+
};exports.default=useAlert;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\nimport { Tag, TransitionVariantTypes } from \"@xanui/core\"\nimport Button, { ButtonProps } from \"../Button\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport React from \"react\";\nexport type UseAlertContentProps = {\n open: () => void;\n close: () => void;\n loading: (is: boolean) => void;\n isLoading: () => boolean;\n}\n\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\n\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n content: string | UseAlertContent,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: TransitionVariantTypes;\n blurMode?: UseModalProps['blurMode'];\n slotProps?: {\n modal?: UseModalProps;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst useAlert = (props: UseAlerProps) => {\n const [loading, setLoading] = React.useState(false)\n let {\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n const modal = useModal(<Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {typeof content === \"function\" ? content({\n open: () => modal.open(),\n close: () => modal.close(),\n loading: (is: boolean) => setLoading(is),\n isLoading: () => loading\n }) : content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n setLoading(true)\n onCancel && await onCancel()\n setLoading(false)\n modal.close()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n setLoading(true)\n onConfirm && await onConfirm()\n setLoading(false)\n modal.close()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>, {\n ...slotProps?.modal,\n size: sizes[size] || size,\n blur: 40,\n blurMode: blurMode || \"transparent\",\n transition: transition || \"zoom\",\n onClickOutside: async () => {\n if (clickOutsideToClose && !loading) {\n setLoading(true)\n onCancel && await onCancel()\n setLoading(false)\n modal.close()\n }\n }\n })\n\n return {\n ...modal,\n loading: (is: boolean) => setLoading(is),\n isLoading: () => loading\n }\n}\n\nexport default useAlert"],"names":["__rest","useModal","_jsxs","Alert","Tag","_jsx","Button"],"mappings":"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"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import {Tag}from'@xanui/core';import Button from'../Button/index.mjs';import useModal from'../useModal/index.mjs';import Alert from'../Alert/index.mjs';import React from'react';const useAlert = (props) => {
|
|
2
|
+
const [loading, setLoading] = React.useState(false);
|
|
3
|
+
let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = __rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
|
|
4
|
+
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
5
|
+
hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
|
|
6
|
+
size !== null && size !== void 0 ? size : (size = "small");
|
|
7
|
+
color !== null && color !== void 0 ? color : (color = 'default');
|
|
8
|
+
variant !== null && variant !== void 0 ? variant : (variant = "text");
|
|
9
|
+
direction !== null && direction !== void 0 ? direction : (direction = "column");
|
|
10
|
+
buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
|
|
11
|
+
let sx = {};
|
|
12
|
+
switch (buttonPlacement) {
|
|
13
|
+
case "start":
|
|
14
|
+
sx.justifyContent = 'flex-start';
|
|
15
|
+
break;
|
|
16
|
+
case "end":
|
|
17
|
+
sx.justifyContent = 'flex-end';
|
|
18
|
+
break;
|
|
19
|
+
case "between":
|
|
20
|
+
sx.justifyContent = 'space-between';
|
|
21
|
+
break;
|
|
22
|
+
case "full":
|
|
23
|
+
sx = {
|
|
24
|
+
"& button": {
|
|
25
|
+
flex: 1
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
break;
|
|
29
|
+
}
|
|
30
|
+
let sizes = {
|
|
31
|
+
small: 320,
|
|
32
|
+
medium: 400,
|
|
33
|
+
large: 600
|
|
34
|
+
};
|
|
35
|
+
let okcolor = color;
|
|
36
|
+
let closecolor = color;
|
|
37
|
+
if (color === 'default') {
|
|
38
|
+
okcolor = 'brand';
|
|
39
|
+
closecolor = 'default';
|
|
40
|
+
variant = 'text';
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
if (variant === 'fill') {
|
|
44
|
+
okcolor = 'default';
|
|
45
|
+
closecolor = 'default';
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
okcolor = color;
|
|
49
|
+
closecolor = 'default';
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
const modal = useModal(jsxs(Alert, Object.assign({ direction: direction, sx: {
|
|
53
|
+
px: 2,
|
|
54
|
+
py: 1,
|
|
55
|
+
pt: direction === 'row' ? 1 : 2
|
|
56
|
+
}, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [typeof content === "function" ? content({
|
|
57
|
+
open: () => modal.open(),
|
|
58
|
+
close: () => modal.close(),
|
|
59
|
+
loading: (is) => setLoading(is),
|
|
60
|
+
isLoading: () => loading
|
|
61
|
+
}) : content, jsxs(Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsx(Button, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
|
|
62
|
+
setLoading(true);
|
|
63
|
+
onCancel && await onCancel();
|
|
64
|
+
setLoading(false);
|
|
65
|
+
modal.close();
|
|
66
|
+
}, children: cancelButtonText || "Close" })), jsx(Button, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
|
|
67
|
+
setLoading(true);
|
|
68
|
+
onConfirm && await onConfirm();
|
|
69
|
+
setLoading(false);
|
|
70
|
+
modal.close();
|
|
71
|
+
}, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
|
|
72
|
+
if (clickOutsideToClose && !loading) {
|
|
73
|
+
setLoading(true);
|
|
74
|
+
onCancel && await onCancel();
|
|
75
|
+
setLoading(false);
|
|
76
|
+
modal.close();
|
|
77
|
+
}
|
|
78
|
+
} }));
|
|
79
|
+
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
80
|
+
};export{useAlert as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\nimport { Tag, TransitionVariantTypes } from \"@xanui/core\"\nimport Button, { ButtonProps } from \"../Button\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport React from \"react\";\nexport type UseAlertContentProps = {\n open: () => void;\n close: () => void;\n loading: (is: boolean) => void;\n isLoading: () => boolean;\n}\n\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\n\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n content: string | UseAlertContent,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: TransitionVariantTypes;\n blurMode?: UseModalProps['blurMode'];\n slotProps?: {\n modal?: UseModalProps;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst useAlert = (props: UseAlerProps) => {\n const [loading, setLoading] = React.useState(false)\n let {\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n const modal = useModal(<Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {typeof content === \"function\" ? content({\n open: () => modal.open(),\n close: () => modal.close(),\n loading: (is: boolean) => setLoading(is),\n isLoading: () => loading\n }) : content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n setLoading(true)\n onCancel && await onCancel()\n setLoading(false)\n modal.close()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n setLoading(true)\n onConfirm && await onConfirm()\n setLoading(false)\n modal.close()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>, {\n ...slotProps?.modal,\n size: sizes[size] || size,\n blur: 40,\n blurMode: blurMode || \"transparent\",\n transition: transition || \"zoom\",\n onClickOutside: async () => {\n if (clickOutsideToClose && !loading) {\n setLoading(true)\n onCancel && await onCancel()\n setLoading(false)\n modal.close()\n }\n }\n })\n\n return {\n ...modal,\n loading: (is: boolean) => setLoading(is),\n isLoading: () => loading\n }\n}\n\nexport default useAlert"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),core=require('@xanui/core');let _d;
|
|
2
|
+
const useBlurCss = (blur, mode) => {
|
|
3
|
+
return React.useMemo(() => {
|
|
4
|
+
let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
|
|
5
|
+
if (typeof window === 'undefined' || mode === 'transparent') {
|
|
6
|
+
return transparent;
|
|
7
|
+
}
|
|
8
|
+
const d = _d || (_d = window.document.createElement("div").style);
|
|
9
|
+
return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
|
|
10
|
+
}, [blur]);
|
|
11
|
+
};exports.default=useBlurCss;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport default useBlurCss"],"names":["useMemo","alpha"],"mappings":"6HAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAOA,aAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import {useMemo}from'react';import {alpha}from'@xanui/core';let _d;
|
|
2
|
+
const useBlurCss = (blur, mode) => {
|
|
3
|
+
return useMemo(() => {
|
|
4
|
+
let transparent = { bgcolor: alpha("#000000", blur / 100) };
|
|
5
|
+
if (typeof window === 'undefined' || mode === 'transparent') {
|
|
6
|
+
return transparent;
|
|
7
|
+
}
|
|
8
|
+
const d = _d || (_d = window.document.createElement("div").style);
|
|
9
|
+
return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
|
|
10
|
+
}, [blur]);
|
|
11
|
+
};export{useBlurCss as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":"4DAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAO,OAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { LayerProps } from '../Layer/index.js';
|
|
2
|
+
import { UsePortalOptions } from '@xanui/core/hooks/usePortal';
|
|
3
|
+
|
|
4
|
+
type UseLayerProps = Omit<LayerProps, "open" | "children" | "slotProps"> & {
|
|
5
|
+
slotProps?: LayerProps["slotProps"] & {
|
|
6
|
+
portal?: UsePortalOptions;
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export type { UseLayerProps };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react'),index=require('../Layer/index.js');const useLayer = (children, props) => {
|
|
2
|
+
var _a;
|
|
3
|
+
const [open, setOpen] = React.useState(false);
|
|
4
|
+
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
5
|
+
const portal = core.usePortal(jsxRuntime.jsx(index.default, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
6
|
+
portal.unmount();
|
|
7
|
+
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
8
|
+
props.onClosed();
|
|
9
|
+
}
|
|
10
|
+
}, onClickOutside: () => {
|
|
11
|
+
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
12
|
+
props.onClickOutside();
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
setOpen(false);
|
|
16
|
+
}
|
|
17
|
+
}, children: typeof children === "function" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children })), portalProps);
|
|
18
|
+
return {
|
|
19
|
+
open: () => {
|
|
20
|
+
portal.mount();
|
|
21
|
+
setOpen(true);
|
|
22
|
+
},
|
|
23
|
+
close: () => {
|
|
24
|
+
setOpen(false);
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
};exports.default=useLayer;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { usePortal } from \"@xanui/core\"\nimport { useState } from \"react\"\nimport Layer, { LayerProps } from \"../Layer\"\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\n\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\n slotProps?: LayerProps[\"slotProps\"] & {\n portal?: UsePortalOptions\n }\n}\n\nexport type UseLayerReturn = {\n open: () => void;\n close: () => void;\n}\n\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\n\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\n const [open, setOpen] = useState(false)\n const portalProps = props?.slotProps?.portal || {}\n const portal = usePortal(<Layer\n blur={20}\n {...props}\n open={open}\n onClosed={() => {\n portal.unmount()\n if (props?.onClosed) {\n props.onClosed()\n }\n }}\n onClickOutside={() => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n setOpen(false)\n }\n }}\n >\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\n </Layer>, portalProps)\n\n return {\n open: () => {\n portal.mount()\n setOpen(true)\n },\n close: () => {\n setOpen(false)\n },\n }\n}\n\nexport default useLayer"],"names":["useState","usePortal","_jsx","Layer"],"mappings":"wMAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAoB;;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,EAAE;IAClD,MAAM,MAAM,GAAGC,cAAS,CAACC,eAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAC5B,IAAI,EAAE,EAAE,IACJ,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAK;YACZ,MAAM,CAAC,OAAO,EAAE;YAChB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,OAAO,CAAC,KAAK,CAAC;YACjB;AACH,QAAA,CAAC,YAEA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,QAAQ,IAC5G,EAAE,WAAW,CAAC;IAEtB,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,IAAI,CAAC;QAChB,CAAC;QACD,KAAK,EAAE,MAAK;YACT,OAAO,CAAC,KAAK,CAAC;QACjB,CAAC;KACH;AACJ"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import {usePortal}from'@xanui/core';import {useState}from'react';import Layer from'../Layer/index.mjs';const useLayer = (children, props) => {
|
|
2
|
+
var _a;
|
|
3
|
+
const [open, setOpen] = useState(false);
|
|
4
|
+
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
5
|
+
const portal = usePortal(jsx(Layer, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
6
|
+
portal.unmount();
|
|
7
|
+
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
8
|
+
props.onClosed();
|
|
9
|
+
}
|
|
10
|
+
}, onClickOutside: () => {
|
|
11
|
+
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
12
|
+
props.onClickOutside();
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
setOpen(false);
|
|
16
|
+
}
|
|
17
|
+
}, children: typeof children === "function" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children })), portalProps);
|
|
18
|
+
return {
|
|
19
|
+
open: () => {
|
|
20
|
+
portal.mount();
|
|
21
|
+
setOpen(true);
|
|
22
|
+
},
|
|
23
|
+
close: () => {
|
|
24
|
+
setOpen(false);
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
};export{useLayer as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { usePortal } from \"@xanui/core\"\nimport { useState } from \"react\"\nimport Layer, { LayerProps } from \"../Layer\"\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\n\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\n slotProps?: LayerProps[\"slotProps\"] & {\n portal?: UsePortalOptions\n }\n}\n\nexport type UseLayerReturn = {\n open: () => void;\n close: () => void;\n}\n\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\n\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\n const [open, setOpen] = useState(false)\n const portalProps = props?.slotProps?.portal || {}\n const portal = usePortal(<Layer\n blur={20}\n {...props}\n open={open}\n onClosed={() => {\n portal.unmount()\n if (props?.onClosed) {\n props.onClosed()\n }\n }}\n onClickOutside={() => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n setOpen(false)\n }\n }}\n >\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\n </Layer>, portalProps)\n\n return {\n open: () => {\n portal.mount()\n setOpen(true)\n },\n close: () => {\n setOpen(false)\n },\n }\n}\n\nexport default useLayer"],"names":["_jsx"],"mappings":"2IAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAoB;;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,EAAE;IAClD,MAAM,MAAM,GAAG,SAAS,CAACA,IAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAC5B,IAAI,EAAE,EAAE,IACJ,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAK;YACZ,MAAM,CAAC,OAAO,EAAE;YAChB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,OAAO,CAAC,KAAK,CAAC;YACjB;AACH,QAAA,CAAC,YAEA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,QAAQ,IAC5G,EAAE,WAAW,CAAC;IAEtB,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,IAAI,CAAC;QAChB,CAAC;QACD,KAAK,EAAE,MAAK;YACT,OAAO,CAAC,KAAK,CAAC;QACjB,CAAC;KACH;AACJ"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { UseLayerProps } from '../useLayer/index.js';
|
|
2
|
+
import { TagProps } from '@xanui/core';
|
|
3
|
+
|
|
4
|
+
type UseModalProps = Omit<UseLayerProps, "slotProps"> & {
|
|
5
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "fullWidth" | number;
|
|
6
|
+
slotProps?: {
|
|
7
|
+
layer?: UseLayerProps['slotProps'];
|
|
8
|
+
root?: Omit<TagProps<'div'>, "children">;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export type { UseModalProps };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../useLayer/index.js'),core=require('@xanui/core');const useModal = (children, props) => {
|
|
2
|
+
var _a;
|
|
3
|
+
let sizes = {
|
|
4
|
+
xs: 420,
|
|
5
|
+
sm: 760,
|
|
6
|
+
md: 990,
|
|
7
|
+
lg: 1120,
|
|
8
|
+
xl: 1300,
|
|
9
|
+
fullWidth: "100%"
|
|
10
|
+
};
|
|
11
|
+
let _b = props || {}, { size, slotProps } = _b, useLayerProps = tslib.__rest(_b, ["size", "slotProps"]);
|
|
12
|
+
size = size !== null && size !== void 0 ? size : "xs";
|
|
13
|
+
slotProps = slotProps || {};
|
|
14
|
+
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
15
|
+
const layer = index.default(() => {
|
|
16
|
+
return (jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
|
|
17
|
+
}, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
|
|
18
|
+
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
19
|
+
props.onClickOutside();
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
layer.close();
|
|
23
|
+
}
|
|
24
|
+
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.root) }) }));
|
|
25
|
+
return layer;
|
|
26
|
+
};exports.default=useModal;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["import useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number;\n slotProps?: {\n layer?: UseLayerProps['slotProps'];\n root?: Omit<TagProps<'div'>, \"children\">\n }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n open: () => void;\n close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n let sizes: any = {\n xs: 420,\n sm: 760,\n md: 990,\n lg: 1120,\n xl: 1300,\n fullWidth: \"100%\"\n }\n let { size, slotProps, ...useLayerProps } = props || {}\n size = size ?? \"xs\"\n slotProps = slotProps || {} as any\n const root: any = slotProps?.root || {}\n\n const layer = useLayer(() => {\n return (\n <Tag\n {...root}\n sxr={{\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n radius: 2,\n bgcolor: \"background.primary\",\n shadow: 15,\n ...root?.sx\n }}\n baseClass='modal'\n >\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n </Tag>\n )\n }, {\n ...useLayerProps,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n layer.close()\n }\n },\n slotProps: {\n ...slotProps?.layer,\n root: {\n display: \"flex\",\n alignItems: 'center',\n justifyContent: \"center\",\n ...slotProps?.layer?.root,\n }\n }\n })\n\n return layer\n}\n\nexport default useModal;"],"names":["__rest","useLayer","_jsx","Tag"],"mappings":"2MAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAI;;AAEpE,IAAA,IAAI,KAAK,GAAQ;AACd,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,SAAS,EAAE;KACb;AACD,IAAA,IAAI,EAAA,GAAwC,KAAK,IAAI,EAAE,EAAnD,EAAE,IAAI,EAAE,SAAS,OAAkC,EAA7B,aAAa,GAAAA,YAAA,CAAA,EAAA,EAAnC,CAAA,MAAA,EAAA,WAAA,CAAqC,CAAc;IACvD,IAAI,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI;AACnB,IAAA,SAAS,GAAG,SAAS,IAAI,EAAS;AAClC,IAAA,MAAM,IAAI,GAAQ,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,KAAI,EAAE;AAEvC,IAAA,MAAM,KAAK,GAAGC,aAAQ,CAAC,MAAK;AACzB,QAAA,QACGC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,QAAQ,EAAE,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI,EACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,EAAE,EAAA,EACP,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,EAAE,CAAA,EAEd,SAAS,EAAC,OAAO,EAAA,QAAA,EAEhB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,EAAA,CAAA,CAC5F;AAEZ,IAAA,CAAC,kCACK,aAAa,CAAA,EAAA,EAChB,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,KAAK,CAAC,KAAK,EAAE;YAChB;AACH,QAAA,CAAC,EACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,KACnB,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EAAA,EACrB,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,QAGhC;AAEF,IAAA,OAAO,KAAK;AACf"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import useLayer from'../useLayer/index.mjs';import {Tag}from'@xanui/core';const useModal = (children, props) => {
|
|
2
|
+
var _a;
|
|
3
|
+
let sizes = {
|
|
4
|
+
xs: 420,
|
|
5
|
+
sm: 760,
|
|
6
|
+
md: 990,
|
|
7
|
+
lg: 1120,
|
|
8
|
+
xl: 1300,
|
|
9
|
+
fullWidth: "100%"
|
|
10
|
+
};
|
|
11
|
+
let _b = props || {}, { size, slotProps } = _b, useLayerProps = __rest(_b, ["size", "slotProps"]);
|
|
12
|
+
size = size !== null && size !== void 0 ? size : "xs";
|
|
13
|
+
slotProps = slotProps || {};
|
|
14
|
+
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
15
|
+
const layer = useLayer(() => {
|
|
16
|
+
return (jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
|
|
17
|
+
}, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
|
|
18
|
+
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
19
|
+
props.onClickOutside();
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
layer.close();
|
|
23
|
+
}
|
|
24
|
+
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.root) }) }));
|
|
25
|
+
return layer;
|
|
26
|
+
};export{useModal as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["import useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullWidth\" | number;\n slotProps?: {\n layer?: UseLayerProps['slotProps'];\n root?: Omit<TagProps<'div'>, \"children\">\n }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n open: () => void;\n close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n let sizes: any = {\n xs: 420,\n sm: 760,\n md: 990,\n lg: 1120,\n xl: 1300,\n fullWidth: \"100%\"\n }\n let { size, slotProps, ...useLayerProps } = props || {}\n size = size ?? \"xs\"\n slotProps = slotProps || {} as any\n const root: any = slotProps?.root || {}\n\n const layer = useLayer(() => {\n return (\n <Tag\n {...root}\n sxr={{\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n radius: 2,\n bgcolor: \"background.primary\",\n shadow: 15,\n ...root?.sx\n }}\n baseClass='modal'\n >\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n </Tag>\n )\n }, {\n ...useLayerProps,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n layer.close()\n }\n },\n slotProps: {\n ...slotProps?.layer,\n root: {\n display: \"flex\",\n alignItems: 'center',\n justifyContent: \"center\",\n ...slotProps?.layer?.root,\n }\n }\n })\n\n return layer\n}\n\nexport default useModal;"],"names":["_jsx"],"mappings":"yIAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAI;;AAEpE,IAAA,IAAI,KAAK,GAAQ;AACd,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,GAAG;AACP,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,EAAE,EAAE,IAAI;AACR,QAAA,SAAS,EAAE;KACb;AACD,IAAA,IAAI,EAAA,GAAwC,KAAK,IAAI,EAAE,EAAnD,EAAE,IAAI,EAAE,SAAS,OAAkC,EAA7B,aAAa,GAAA,MAAA,CAAA,EAAA,EAAnC,CAAA,MAAA,EAAA,WAAA,CAAqC,CAAc;IACvD,IAAI,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI;AACnB,IAAA,SAAS,GAAG,SAAS,IAAI,EAAS;AAClC,IAAA,MAAM,IAAI,GAAQ,CAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,KAAI,EAAE;AAEvC,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAK;AACzB,QAAA,QACGA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,QAAQ,EAAE,KAAK,CAAC,IAAW,CAAC,IAAI,IAAI,EACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,EAAE,EAAA,EACP,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,EAAE,CAAA,EAEd,SAAS,EAAC,OAAO,EAAA,QAAA,EAEhB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,QAAQ,EAAA,CAAA,CAC5F;AAEZ,IAAA,CAAC,kCACK,aAAa,CAAA,EAAA,EAChB,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,KAAK,CAAC,KAAK,EAAE;YAChB;AACH,QAAA,CAAC,EACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,KACnB,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EAAA,EACrB,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,QAGhC;AAEF,IAAA,OAAO,KAAK;AACf"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react');const Renderar = {
|
|
2
|
-
components: {},
|
|
3
|
-
dispatch: () => { },
|
|
4
|
-
create: (id, component) => {
|
|
5
|
-
Renderar.components[id] = component;
|
|
6
|
-
},
|
|
7
|
-
delete: (id) => {
|
|
8
|
-
if (Renderar.components[id]) {
|
|
9
|
-
delete Renderar.components[id];
|
|
10
|
-
Renderar.dispatch();
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const RenderComponents = () => {
|
|
15
|
-
const [, dispatch] = React.useState(0);
|
|
16
|
-
React.useEffect(() => {
|
|
17
|
-
Renderar.dispatch = () => {
|
|
18
|
-
dispatch(Math.random());
|
|
19
|
-
};
|
|
20
|
-
}, []);
|
|
21
|
-
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.values(Renderar.components).map((Render, idx) => jsxRuntime.jsx(Render, {}, "renderar" + idx)) });
|
|
22
|
-
};exports.RenderComponents=RenderComponents;exports.default=Renderar;//# sourceMappingURL=RenderRoot.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RenderRoot.js","sources":["../../src/ThemeProvider/RenderRoot.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from \"react\";\n\n\ntype Callback = () => ReactNode\n\n\nconst Renderar = {\n components: {} as { [id: string]: Callback },\n dispatch: () => { },\n create: (id: string, component: Callback) => {\n Renderar.components[id] = component\n },\n delete: (id: string) => {\n if (Renderar.components[id]) {\n delete Renderar.components[id]\n Renderar.dispatch()\n }\n }\n}\n\nexport default Renderar\n\nexport const RenderComponents = () => {\n const [, dispatch] = useState(0)\n useEffect(() => {\n Renderar.dispatch = () => {\n dispatch(Math.random())\n }\n }, [])\n\n return <>{Object.values(Renderar.components).map((Render: any, idx) => <Render key={\"renderar\" + idx} />)}</>\n}"],"names":["useState","useEffect","_jsx","_Fragment"],"mappings":"yIAMA,MAAM,QAAQ,GAAG;AACd,IAAA,UAAU,EAAE,EAAgC;AAC5C,IAAA,QAAQ,EAAE,MAAK,EAAG,CAAC;AACnB,IAAA,MAAM,EAAE,CAAC,EAAU,EAAE,SAAmB,KAAI;AACzC,QAAA,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,SAAS;IACtC,CAAC;AACD,IAAA,MAAM,EAAE,CAAC,EAAU,KAAI;AACpB,QAAA,IAAI,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;AAC1B,YAAA,OAAO,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC9B,QAAQ,CAAC,QAAQ,EAAE;QACtB;IACH;;AAKI,MAAM,gBAAgB,GAAG,MAAK;IAClC,MAAM,GAAG,QAAQ,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC;IAChCC,eAAS,CAAC,MAAK;AACZ,QAAA,QAAQ,CAAC,QAAQ,GAAG,MAAK;AACtB,YAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AAC1B,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,GAAG,KAAKD,cAAA,CAAC,MAAM,EAAA,EAAA,EAAM,UAAU,GAAG,GAAG,CAAI,CAAC,EAAA,CAAI;AAChH"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import {jsx,Fragment}from'react/jsx-runtime';import {useState,useEffect}from'react';const Renderar = {
|
|
2
|
-
components: {},
|
|
3
|
-
dispatch: () => { },
|
|
4
|
-
create: (id, component) => {
|
|
5
|
-
Renderar.components[id] = component;
|
|
6
|
-
},
|
|
7
|
-
delete: (id) => {
|
|
8
|
-
if (Renderar.components[id]) {
|
|
9
|
-
delete Renderar.components[id];
|
|
10
|
-
Renderar.dispatch();
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const RenderComponents = () => {
|
|
15
|
-
const [, dispatch] = useState(0);
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
Renderar.dispatch = () => {
|
|
18
|
-
dispatch(Math.random());
|
|
19
|
-
};
|
|
20
|
-
}, []);
|
|
21
|
-
return jsx(Fragment, { children: Object.values(Renderar.components).map((Render, idx) => jsx(Render, {}, "renderar" + idx)) });
|
|
22
|
-
};export{RenderComponents,Renderar as default};//# sourceMappingURL=RenderRoot.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RenderRoot.mjs","sources":["../../src/ThemeProvider/RenderRoot.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from \"react\";\n\n\ntype Callback = () => ReactNode\n\n\nconst Renderar = {\n components: {} as { [id: string]: Callback },\n dispatch: () => { },\n create: (id: string, component: Callback) => {\n Renderar.components[id] = component\n },\n delete: (id: string) => {\n if (Renderar.components[id]) {\n delete Renderar.components[id]\n Renderar.dispatch()\n }\n }\n}\n\nexport default Renderar\n\nexport const RenderComponents = () => {\n const [, dispatch] = useState(0)\n useEffect(() => {\n Renderar.dispatch = () => {\n dispatch(Math.random())\n }\n }, [])\n\n return <>{Object.values(Renderar.components).map((Render: any, idx) => <Render key={\"renderar\" + idx} />)}</>\n}"],"names":["_jsx","_Fragment"],"mappings":"oFAMA,MAAM,QAAQ,GAAG;AACd,IAAA,UAAU,EAAE,EAAgC;AAC5C,IAAA,QAAQ,EAAE,MAAK,EAAG,CAAC;AACnB,IAAA,MAAM,EAAE,CAAC,EAAU,EAAE,SAAmB,KAAI;AACzC,QAAA,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,SAAS;IACtC,CAAC;AACD,IAAA,MAAM,EAAE,CAAC,EAAU,KAAI;AACpB,QAAA,IAAI,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,EAAE;AAC1B,YAAA,OAAO,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC9B,QAAQ,CAAC,QAAQ,EAAE;QACtB;IACH;;AAKI,MAAM,gBAAgB,GAAG,MAAK;IAClC,MAAM,GAAG,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,MAAK;AACZ,QAAA,QAAQ,CAAC,QAAQ,GAAG,MAAK;AACtB,YAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AAC1B,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,GAAG,KAAKD,GAAA,CAAC,MAAM,EAAA,EAAA,EAAM,UAAU,GAAG,GAAG,CAAI,CAAC,EAAA,CAAI;AAChH"}
|
package/ThemeProvider/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ThemeProviderProps as ThemeProviderProps$1 } from '@xanui/core';
|
|
3
|
-
|
|
4
|
-
type ThemeProviderProps = ThemeProviderProps$1 & {};
|
|
5
|
-
declare const ThemeProvider: ({ children, ...props }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
|
|
6
|
-
|
|
7
|
-
export { ThemeProvider as default };
|
|
8
|
-
export type { ThemeProviderProps };
|
package/ThemeProvider/index.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),RenderRoot=require('./RenderRoot.js');const ThemeProvider = (_a) => {
|
|
2
|
-
var { children } = _a, props = tslib.__rest(_a, ["children"]);
|
|
3
|
-
return (jsxRuntime.jsx(core.ThemeProvider, Object.assign({}, props, { renderIsRoot: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.renderIsRoot, jsxRuntime.jsx(RenderRoot.RenderComponents, {})] }), children: children })));
|
|
4
|
-
};exports.default=ThemeProvider;//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ThemeProvider/index.tsx"],"sourcesContent":["import { ThemeProvider as RootThemeProvider, ThemeProviderProps as RootThemeProviderProps } from '@xanui/core'\nimport { RenderComponents } from './RenderRoot'\n\nexport type ThemeProviderProps = RootThemeProviderProps & {\n\n}\n\nconst ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {\n return (\n <RootThemeProvider\n {...props}\n renderIsRoot={<>\n {props.renderIsRoot}\n <RenderComponents />\n </>}\n >\n {children}\n </RootThemeProvider>\n )\n}\n\nexport default ThemeProvider"],"names":["__rest","_jsx","RootThemeProvider","_jsxs","_Fragment","RenderComponents"],"mappings":"2MAOA,MAAM,aAAa,GAAG,CAAC,EAA0C,KAAI;AAA9C,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACvC,QACIC,eAACC,kBAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACV,KAAK,EAAA,EACT,YAAY,EAAEC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACT,KAAK,CAAC,YAAY,EACnBH,eAACI,2BAAgB,EAAA,EAAA,CAAG,IACrB,EAAA,QAAA,EAEF,QAAQ,EAAA,CAAA,CACO;AAE5B"}
|
package/ThemeProvider/index.mjs
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import {__rest}from'tslib';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {ThemeProvider as ThemeProvider$1}from'@xanui/core';import {RenderComponents}from'./RenderRoot.mjs';const ThemeProvider = (_a) => {
|
|
2
|
-
var { children } = _a, props = __rest(_a, ["children"]);
|
|
3
|
-
return (jsx(ThemeProvider$1, Object.assign({}, props, { renderIsRoot: jsxs(Fragment, { children: [props.renderIsRoot, jsx(RenderComponents, {})] }), children: children })));
|
|
4
|
-
};export{ThemeProvider as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/ThemeProvider/index.tsx"],"sourcesContent":["import { ThemeProvider as RootThemeProvider, ThemeProviderProps as RootThemeProviderProps } from '@xanui/core'\nimport { RenderComponents } from './RenderRoot'\n\nexport type ThemeProviderProps = RootThemeProviderProps & {\n\n}\n\nconst ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {\n return (\n <RootThemeProvider\n {...props}\n renderIsRoot={<>\n {props.renderIsRoot}\n <RenderComponents />\n </>}\n >\n {children}\n </RootThemeProvider>\n )\n}\n\nexport default ThemeProvider"],"names":["_jsx","RootThemeProvider","_jsxs","_Fragment"],"mappings":"wLAOA,MAAM,aAAa,GAAG,CAAC,EAA0C,KAAI;AAA9C,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACvC,QACIA,IAACC,eAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACV,KAAK,EAAA,EACT,YAAY,EAAEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACT,KAAK,CAAC,YAAY,EACnBH,IAAC,gBAAgB,EAAA,EAAA,CAAG,IACrB,EAAA,QAAA,EAEF,QAAQ,EAAA,CAAA,CACO;AAE5B"}
|