@xanui/ui 1.1.63 → 1.1.65
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.cjs +86 -23
- package/Alert/index.cjs.map +1 -1
- package/Alert/index.d.ts +27 -6
- package/Alert/index.js +87 -24
- package/Alert/index.js.map +1 -1
- package/DataFilter/options/NumberFilter.cjs.map +1 -1
- package/DataFilter/options/NumberFilter.js.map +1 -1
- package/InputNumber/index.cjs +25 -21
- package/InputNumber/index.cjs.map +1 -1
- package/InputNumber/index.d.ts +1 -1
- package/InputNumber/index.js +26 -22
- package/InputNumber/index.js.map +1 -1
- package/Layer/index.cjs +7 -6
- package/Layer/index.cjs.map +1 -1
- package/Layer/index.d.ts +7 -3
- package/Layer/index.js +7 -6
- package/Layer/index.js.map +1 -1
- package/Modal/index.cjs +26 -31
- package/Modal/index.cjs.map +1 -1
- package/Modal/index.d.ts +10 -6
- package/Modal/index.js +27 -32
- package/Modal/index.js.map +1 -1
- package/package.json +2 -2
- package/useAlert/index.cjs +0 -94
- package/useAlert/index.cjs.map +0 -1
- package/useAlert/index.d.ts +0 -36
- package/useAlert/index.js +0 -92
- package/useAlert/index.js.map +0 -1
- package/useLayer/index.cjs +0 -38
- package/useLayer/index.cjs.map +0 -1
- package/useLayer/index.d.ts +0 -10
- package/useLayer/index.js +0 -36
- package/useLayer/index.js.map +0 -1
- package/useModal/index.cjs +0 -37
- package/useModal/index.cjs.map +0 -1
- package/useModal/index.d.ts +0 -12
- package/useModal/index.js +0 -35
- package/useModal/index.js.map +0 -1
package/useAlert/index.js
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { Tag } from '@xanui/core';
|
|
5
|
-
import Button from '../Button/index.js';
|
|
6
|
-
import useModal from '../useModal/index.js';
|
|
7
|
-
import Alert from '../Alert/index.js';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
|
|
10
|
-
const useAlert = (props) => {
|
|
11
|
-
const [loading, setLoading] = React.useState(false);
|
|
12
|
-
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"]);
|
|
13
|
-
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
14
|
-
hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
|
|
15
|
-
size !== null && size !== void 0 ? size : (size = "small");
|
|
16
|
-
color !== null && color !== void 0 ? color : (color = 'default');
|
|
17
|
-
variant !== null && variant !== void 0 ? variant : (variant = "text");
|
|
18
|
-
direction !== null && direction !== void 0 ? direction : (direction = "column");
|
|
19
|
-
buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
|
|
20
|
-
let sx = {};
|
|
21
|
-
switch (buttonPlacement) {
|
|
22
|
-
case "start":
|
|
23
|
-
sx.justifyContent = 'flex-start';
|
|
24
|
-
break;
|
|
25
|
-
case "end":
|
|
26
|
-
sx.justifyContent = 'flex-end';
|
|
27
|
-
break;
|
|
28
|
-
case "between":
|
|
29
|
-
sx.justifyContent = 'space-between';
|
|
30
|
-
break;
|
|
31
|
-
case "full":
|
|
32
|
-
sx = {
|
|
33
|
-
"& button": {
|
|
34
|
-
flex: 1
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
break;
|
|
38
|
-
}
|
|
39
|
-
let sizes = {
|
|
40
|
-
small: 320,
|
|
41
|
-
medium: 400,
|
|
42
|
-
large: 600
|
|
43
|
-
};
|
|
44
|
-
let okcolor = color;
|
|
45
|
-
let closecolor = color;
|
|
46
|
-
if (color === 'default') {
|
|
47
|
-
okcolor = 'brand';
|
|
48
|
-
closecolor = 'default';
|
|
49
|
-
variant = 'text';
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
if (variant === 'fill') {
|
|
53
|
-
okcolor = 'default';
|
|
54
|
-
closecolor = 'default';
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
okcolor = color;
|
|
58
|
-
closecolor = 'default';
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
const modal = useModal(jsxs(Alert, Object.assign({ direction: direction, sx: {
|
|
62
|
-
px: 2,
|
|
63
|
-
py: 1,
|
|
64
|
-
pt: direction === 'row' ? 1 : 2
|
|
65
|
-
}, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [typeof content === "function" ? content({
|
|
66
|
-
open: () => modal.open(),
|
|
67
|
-
close: () => modal.close(),
|
|
68
|
-
loading: (is) => setLoading(is),
|
|
69
|
-
isLoading: () => loading
|
|
70
|
-
}) : 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 () => {
|
|
71
|
-
setLoading(true);
|
|
72
|
-
onCancel && await onCancel();
|
|
73
|
-
setLoading(false);
|
|
74
|
-
modal.close();
|
|
75
|
-
}, children: cancelButtonText || "Close" })), jsx(Button, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
|
|
76
|
-
setLoading(true);
|
|
77
|
-
onConfirm && await onConfirm();
|
|
78
|
-
setLoading(false);
|
|
79
|
-
modal.close();
|
|
80
|
-
}, 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 () => {
|
|
81
|
-
if (clickOutsideToClose && !loading) {
|
|
82
|
-
setLoading(true);
|
|
83
|
-
onCancel && await onCancel();
|
|
84
|
-
setLoading(false);
|
|
85
|
-
modal.close();
|
|
86
|
-
}
|
|
87
|
-
} }));
|
|
88
|
-
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
export { useAlert as default };
|
|
92
|
-
//# sourceMappingURL=index.js.map
|
package/useAlert/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, UseTransitionVariantTypes } 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?: UseTransitionVariantTypes;\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":[],"mappings":";;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}
|
package/useLayer/index.cjs
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var core = require('@xanui/core');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var index = require('../Layer/index.cjs');
|
|
8
|
-
|
|
9
|
-
const useLayer = (children, props) => {
|
|
10
|
-
var _a;
|
|
11
|
-
const [open, setOpen] = React.useState(false);
|
|
12
|
-
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
13
|
-
const portal = core.usePortal(jsxRuntime.jsx(index, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
14
|
-
portal.unmount();
|
|
15
|
-
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
16
|
-
props.onClosed();
|
|
17
|
-
}
|
|
18
|
-
}, onClickOutside: () => {
|
|
19
|
-
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
20
|
-
props.onClickOutside();
|
|
21
|
-
}
|
|
22
|
-
else {
|
|
23
|
-
setOpen(false);
|
|
24
|
-
}
|
|
25
|
-
}, children: typeof children === "function" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children })), portalProps);
|
|
26
|
-
return {
|
|
27
|
-
open: () => {
|
|
28
|
-
portal.mount();
|
|
29
|
-
setOpen(true);
|
|
30
|
-
},
|
|
31
|
-
close: () => {
|
|
32
|
-
setOpen(false);
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
module.exports = useLayer;
|
|
38
|
-
//# sourceMappingURL=index.cjs.map
|
package/useLayer/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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":[],"mappings":";;;;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
|
package/useLayer/index.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
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 };
|
package/useLayer/index.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { usePortal } from '@xanui/core';
|
|
4
|
-
import { useState } from 'react';
|
|
5
|
-
import Layer from '../Layer/index.js';
|
|
6
|
-
|
|
7
|
-
const useLayer = (children, props) => {
|
|
8
|
-
var _a;
|
|
9
|
-
const [open, setOpen] = useState(false);
|
|
10
|
-
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
11
|
-
const portal = usePortal(jsx(Layer, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
12
|
-
portal.unmount();
|
|
13
|
-
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
14
|
-
props.onClosed();
|
|
15
|
-
}
|
|
16
|
-
}, onClickOutside: () => {
|
|
17
|
-
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
18
|
-
props.onClickOutside();
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
setOpen(false);
|
|
22
|
-
}
|
|
23
|
-
}, children: typeof children === "function" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children })), portalProps);
|
|
24
|
-
return {
|
|
25
|
-
open: () => {
|
|
26
|
-
portal.mount();
|
|
27
|
-
setOpen(true);
|
|
28
|
-
},
|
|
29
|
-
close: () => {
|
|
30
|
-
setOpen(false);
|
|
31
|
-
},
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export { useLayer as default };
|
|
36
|
-
//# sourceMappingURL=index.js.map
|
package/useLayer/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
|
package/useModal/index.cjs
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var tslib = require('tslib');
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var index = require('../useLayer/index.cjs');
|
|
7
|
-
var core = require('@xanui/core');
|
|
8
|
-
|
|
9
|
-
const useModal = (children, props) => {
|
|
10
|
-
var _a, _b;
|
|
11
|
-
let sizes = {
|
|
12
|
-
xs: 420,
|
|
13
|
-
sm: 760,
|
|
14
|
-
md: 990,
|
|
15
|
-
lg: 1120,
|
|
16
|
-
xl: 1300,
|
|
17
|
-
full: "100%"
|
|
18
|
-
};
|
|
19
|
-
let _c = props || {}, { size, slotProps } = _c, useLayerProps = tslib.__rest(_c, ["size", "slotProps"]);
|
|
20
|
-
size = size !== null && size !== void 0 ? size : "xs";
|
|
21
|
-
slotProps = slotProps || {};
|
|
22
|
-
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
23
|
-
const layer = index(() => {
|
|
24
|
-
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 })));
|
|
25
|
-
}, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
|
|
26
|
-
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
27
|
-
props.onClickOutside();
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
layer.close();
|
|
31
|
-
}
|
|
32
|
-
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }) }));
|
|
33
|
-
return layer;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
module.exports = useModal;
|
|
37
|
-
//# sourceMappingURL=index.cjs.map
|
package/useModal/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | 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 full: \"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 clickOutside: {\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n ...slotProps?.layer?.clickOutside,\n },\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":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|
package/useModal/index.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
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" | "full" | number;
|
|
6
|
-
slotProps?: {
|
|
7
|
-
layer?: UseLayerProps['slotProps'];
|
|
8
|
-
root?: Omit<TagProps<'div'>, "children">;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export type { UseModalProps };
|
package/useModal/index.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import useLayer from '../useLayer/index.js';
|
|
5
|
-
import { Tag } from '@xanui/core';
|
|
6
|
-
|
|
7
|
-
const useModal = (children, props) => {
|
|
8
|
-
var _a, _b;
|
|
9
|
-
let sizes = {
|
|
10
|
-
xs: 420,
|
|
11
|
-
sm: 760,
|
|
12
|
-
md: 990,
|
|
13
|
-
lg: 1120,
|
|
14
|
-
xl: 1300,
|
|
15
|
-
full: "100%"
|
|
16
|
-
};
|
|
17
|
-
let _c = props || {}, { size, slotProps } = _c, useLayerProps = __rest(_c, ["size", "slotProps"]);
|
|
18
|
-
size = size !== null && size !== void 0 ? size : "xs";
|
|
19
|
-
slotProps = slotProps || {};
|
|
20
|
-
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
21
|
-
const layer = useLayer(() => {
|
|
22
|
-
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 })));
|
|
23
|
-
}, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
|
|
24
|
-
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
25
|
-
props.onClickOutside();
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
layer.close();
|
|
29
|
-
}
|
|
30
|
-
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }) }));
|
|
31
|
-
return layer;
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export { useModal as default };
|
|
35
|
-
//# sourceMappingURL=index.js.map
|
package/useModal/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | 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 full: \"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 clickOutside: {\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n ...slotProps?.layer?.clickOutside,\n },\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":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|