@xanui/ui 1.1.36 → 1.1.38
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/Accordion/index.js +19 -21
- package/Accordion/index.js.map +1 -1
- package/Alert/index.js +33 -35
- package/Alert/index.js.map +1 -1
- package/Autocomplete/index.js +23 -25
- package/Autocomplete/index.js.map +1 -1
- package/Avatar/index.js +15 -17
- package/Avatar/index.js.map +1 -1
- package/Badge/index.js +12 -14
- package/Badge/index.js.map +1 -1
- package/Box/index.js +7 -9
- package/Box/index.js.map +1 -1
- package/Button/index.js +17 -19
- package/Button/index.js.map +1 -1
- package/ButtonGroup/index.js +12 -14
- package/ButtonGroup/index.js.map +1 -1
- package/Calendar/index.js +39 -41
- package/Calendar/index.js.map +1 -1
- package/CalendarInput/index.js +19 -21
- package/CalendarInput/index.js.map +1 -1
- package/Checkbox/index.js +14 -16
- package/Checkbox/index.js.map +1 -1
- package/Chip/index.js +12 -14
- package/Chip/index.js.map +1 -1
- package/CircleProgress/index.js +13 -15
- package/CircleProgress/index.js.map +1 -1
- package/ClickOutside/index.js +9 -11
- package/ClickOutside/index.js.map +1 -1
- package/Collaps/index.js +9 -11
- package/Collaps/index.js.map +1 -1
- package/Container/index.js +9 -11
- package/Container/index.js.map +1 -1
- package/DataFilter/index.js +30 -41
- package/DataFilter/index.js.map +1 -1
- package/DataFilter/options/DateFilter.js +16 -18
- package/DataFilter/options/DateFilter.js.map +1 -1
- package/DataFilter/options/DateRangeFilter.js +12 -14
- package/DataFilter/options/DateRangeFilter.js.map +1 -1
- package/DataFilter/options/MultiSelectFilter.js +20 -22
- package/DataFilter/options/MultiSelectFilter.js.map +1 -1
- package/DataFilter/options/NumberFilter.js +11 -13
- package/DataFilter/options/NumberFilter.js.map +1 -1
- package/DataFilter/options/NumberRangeFilter.js +12 -14
- package/DataFilter/options/NumberRangeFilter.js.map +1 -1
- package/DataFilter/options/SelectFilter.js +18 -20
- package/DataFilter/options/SelectFilter.js.map +1 -1
- package/DataFilter/options/TextFilter.js +11 -13
- package/DataFilter/options/TextFilter.js.map +1 -1
- package/Datatable/FilterBox.js +21 -23
- package/Datatable/FilterBox.js.map +1 -1
- package/Datatable/Row.js +19 -21
- package/Datatable/Row.js.map +1 -1
- package/Datatable/SelectedBox.js +10 -12
- package/Datatable/SelectedBox.js.map +1 -1
- package/Datatable/Table.js +8 -10
- package/Datatable/Table.js.map +1 -1
- package/Datatable/TableHead.js +18 -20
- package/Datatable/TableHead.js.map +1 -1
- package/Datatable/index.js +21 -23
- package/Datatable/index.js.map +1 -1
- package/Divider/index.js +8 -10
- package/Divider/index.js.map +1 -1
- package/Drawer/index.js +12 -14
- package/Drawer/index.js.map +1 -1
- package/Form/index.js +8 -10
- package/Form/index.js.map +1 -1
- package/GridContainer/index.js +7 -9
- package/GridContainer/index.js.map +1 -1
- package/GridItem/index.js +7 -9
- package/GridItem/index.js.map +1 -1
- package/IconButton/index.js +12 -14
- package/IconButton/index.js.map +1 -1
- package/Image/index.js +9 -11
- package/Image/index.js.map +1 -1
- package/Input/index.js +18 -20
- package/Input/index.js.map +1 -1
- package/InputNumber/index.js +6 -8
- package/InputNumber/index.js.map +1 -1
- package/Label/index.js +7 -9
- package/Label/index.js.map +1 -1
- package/Layer/index.js +19 -21
- package/Layer/index.js.map +1 -1
- package/LineProgress/index.js +11 -13
- package/LineProgress/index.js.map +1 -1
- package/List/ListContext.js +2 -5
- package/List/ListContext.js.map +1 -1
- package/List/index.js +12 -14
- package/List/index.js.map +1 -1
- package/ListItem/index.js +12 -14
- package/ListItem/index.js.map +1 -1
- package/LoadingBox/index.js +11 -13
- package/LoadingBox/index.js.map +1 -1
- package/Menu/index.js +18 -20
- package/Menu/index.js.map +1 -1
- package/Modal/index.js +15 -17
- package/Modal/index.js.map +1 -1
- package/NoSSR/index.js +4 -6
- package/NoSSR/index.js.map +1 -1
- package/Option/index.js +7 -9
- package/Option/index.js.map +1 -1
- package/Paper/index.js +8 -10
- package/Paper/index.js.map +1 -1
- package/Portal/index.js +9 -11
- package/Portal/index.js.map +1 -1
- package/Radio/index.js +9 -11
- package/Radio/index.js.map +1 -1
- package/Scrollbar/index.js +10 -12
- package/Scrollbar/index.js.map +1 -1
- package/Select/index.js +22 -24
- package/Select/index.js.map +1 -1
- package/Skeleton/index.js +7 -9
- package/Skeleton/index.js.map +1 -1
- package/Stack/index.js +7 -9
- package/Stack/index.js.map +1 -1
- package/Switch/index.js +12 -14
- package/Switch/index.js.map +1 -1
- package/Tab/index.js +9 -11
- package/Tab/index.js.map +1 -1
- package/Table/index.js +13 -15
- package/Table/index.js.map +1 -1
- package/TableBody/index.js +7 -9
- package/TableBody/index.js.map +1 -1
- package/TableCell/index.js +7 -9
- package/TableCell/index.js.map +1 -1
- package/TableFooter/index.js +7 -9
- package/TableFooter/index.js.map +1 -1
- package/TableHead/index.js +7 -9
- package/TableHead/index.js.map +1 -1
- package/TablePagination/index.js +21 -23
- package/TablePagination/index.js.map +1 -1
- package/TableRow/index.js +7 -9
- package/TableRow/index.js.map +1 -1
- package/Tabs/index.js +19 -21
- package/Tabs/index.js.map +1 -1
- package/Text/index.js +8 -10
- package/Text/index.js.map +1 -1
- package/Toast/index.js +18 -20
- package/Toast/index.js.map +1 -1
- package/Tooltip/index.js +11 -13
- package/Tooltip/index.js.map +1 -1
- package/ViewBox/index.js +11 -13
- package/ViewBox/index.js.map +1 -1
- package/index.js +64 -133
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/useAlert/index.js +12 -14
- package/useAlert/index.js.map +1 -1
- package/useBlurCss/index.js +5 -7
- package/useBlurCss/index.js.map +1 -1
- package/useCorner/index.js +1 -3
- package/useCorner/index.js.map +1 -1
- package/useLayer/index.js +7 -9
- package/useLayer/index.js.map +1 -1
- package/useModal/index.js +8 -10
- package/useModal/index.js.map +1 -1
package/index.js
CHANGED
|
@@ -1,134 +1,65 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
var DateFilter = require('./DataFilter/options/DateFilter.js');
|
|
66
|
-
var DateRangeFilter = require('./DataFilter/options/DateRangeFilter.js');
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
exports.Accordion = index;
|
|
71
|
-
exports.Autocomplete = index$1;
|
|
72
|
-
exports.Alert = index$2;
|
|
73
|
-
exports.Avatar = index$3;
|
|
74
|
-
exports.Badge = index$4;
|
|
75
|
-
exports.Box = index$5;
|
|
76
|
-
exports.Button = index$6;
|
|
77
|
-
exports.ButtonGroup = index$7;
|
|
78
|
-
exports.Calendar = index$8;
|
|
79
|
-
exports.CalendarInput = index$9;
|
|
80
|
-
exports.Checkbox = index$a;
|
|
81
|
-
exports.Chip = index$b;
|
|
82
|
-
exports.CircleProgress = index$c;
|
|
83
|
-
exports.ClickOutside = index$d;
|
|
84
|
-
exports.Collaps = index$e;
|
|
85
|
-
exports.Container = index$f;
|
|
86
|
-
exports.Datatable = index$g;
|
|
87
|
-
exports.DataFilter = index$h.default;
|
|
88
|
-
exports.Divider = index$i;
|
|
89
|
-
exports.Drawer = index$j;
|
|
90
|
-
exports.Form = index$k;
|
|
91
|
-
exports.GridContainer = index$l;
|
|
92
|
-
exports.GridItem = index$m;
|
|
93
|
-
exports.IconButton = index$n;
|
|
94
|
-
exports.Image = index$o;
|
|
95
|
-
exports.Input = index$p;
|
|
96
|
-
exports.Label = index$q;
|
|
97
|
-
exports.Layer = index$r;
|
|
98
|
-
exports.LineProgress = index$s;
|
|
99
|
-
exports.List = index$t;
|
|
100
|
-
exports.ListItem = index$u;
|
|
101
|
-
exports.LoadingBox = index$v;
|
|
102
|
-
exports.Menu = index$w;
|
|
103
|
-
exports.Modal = index$x;
|
|
104
|
-
exports.NoSSR = index$y;
|
|
105
|
-
exports.Option = index$z;
|
|
106
|
-
exports.Paper = index$A;
|
|
107
|
-
exports.Portal = index$B;
|
|
108
|
-
exports.Radio = index$C;
|
|
109
|
-
exports.Scrollbar = index$D;
|
|
110
|
-
exports.Select = index$E;
|
|
111
|
-
exports.Stack = index$F;
|
|
112
|
-
exports.Switch = index$G;
|
|
113
|
-
exports.Tab = index$H;
|
|
114
|
-
exports.Table = index$I;
|
|
115
|
-
exports.TableBody = index$J;
|
|
116
|
-
exports.TableCell = index$K;
|
|
117
|
-
exports.TableFooter = index$L;
|
|
118
|
-
exports.TableHead = index$M;
|
|
119
|
-
exports.TablePagination = index$N;
|
|
120
|
-
exports.TableRow = index$O;
|
|
121
|
-
exports.Tabs = index$P;
|
|
122
|
-
exports.Text = index$Q;
|
|
123
|
-
exports.Toast = index$R;
|
|
124
|
-
exports.Tooltip = index$S;
|
|
125
|
-
exports.useCorner = index$T;
|
|
126
|
-
exports.ViewBox = index$U;
|
|
127
|
-
exports.SelectFilter = SelectFilter;
|
|
128
|
-
exports.MultiSelectFilter = MultiSelectFilter;
|
|
129
|
-
exports.NumberFilter = NumberFilter;
|
|
130
|
-
exports.TextFilter = TextFilter;
|
|
131
|
-
exports.NumberRangeFilter = NumberRangeFilter;
|
|
132
|
-
exports.DateFilter = DateFilter;
|
|
133
|
-
exports.DateRangeFilter = DateRangeFilter;
|
|
1
|
+
export { default as Accordion } from './Accordion/index.js';
|
|
2
|
+
export { default as Autocomplete } from './Autocomplete/index.js';
|
|
3
|
+
export { default as Alert } from './Alert/index.js';
|
|
4
|
+
export { default as Avatar } from './Avatar/index.js';
|
|
5
|
+
export { default as Badge } from './Badge/index.js';
|
|
6
|
+
export { default as Box } from './Box/index.js';
|
|
7
|
+
export { default as Button } from './Button/index.js';
|
|
8
|
+
export { default as ButtonGroup } from './ButtonGroup/index.js';
|
|
9
|
+
export { default as Calendar } from './Calendar/index.js';
|
|
10
|
+
export { default as CalendarInput } from './CalendarInput/index.js';
|
|
11
|
+
export { default as Checkbox } from './Checkbox/index.js';
|
|
12
|
+
export { default as Chip } from './Chip/index.js';
|
|
13
|
+
export { default as CircleProgress } from './CircleProgress/index.js';
|
|
14
|
+
export { default as ClickOutside } from './ClickOutside/index.js';
|
|
15
|
+
export { default as Collaps } from './Collaps/index.js';
|
|
16
|
+
export { default as Container } from './Container/index.js';
|
|
17
|
+
export { default as Datatable } from './Datatable/index.js';
|
|
18
|
+
export { default as DataFilter } from './DataFilter/index.js';
|
|
19
|
+
export { default as Divider } from './Divider/index.js';
|
|
20
|
+
export { default as Drawer } from './Drawer/index.js';
|
|
21
|
+
export { default as Form } from './Form/index.js';
|
|
22
|
+
export { default as GridContainer } from './GridContainer/index.js';
|
|
23
|
+
export { default as GridItem } from './GridItem/index.js';
|
|
24
|
+
export { default as IconButton } from './IconButton/index.js';
|
|
25
|
+
export { default as Image } from './Image/index.js';
|
|
26
|
+
export { default as Input } from './Input/index.js';
|
|
27
|
+
export { default as Label } from './Label/index.js';
|
|
28
|
+
export { default as Layer } from './Layer/index.js';
|
|
29
|
+
export { default as LineProgress } from './LineProgress/index.js';
|
|
30
|
+
export { default as List } from './List/index.js';
|
|
31
|
+
export { default as ListItem } from './ListItem/index.js';
|
|
32
|
+
export { default as LoadingBox } from './LoadingBox/index.js';
|
|
33
|
+
export { default as Menu } from './Menu/index.js';
|
|
34
|
+
export { default as Modal } from './Modal/index.js';
|
|
35
|
+
export { default as NoSSR } from './NoSSR/index.js';
|
|
36
|
+
export { default as Option } from './Option/index.js';
|
|
37
|
+
export { default as Paper } from './Paper/index.js';
|
|
38
|
+
export { default as Portal } from './Portal/index.js';
|
|
39
|
+
export { default as Radio } from './Radio/index.js';
|
|
40
|
+
export { default as Scrollbar } from './Scrollbar/index.js';
|
|
41
|
+
export { default as Select } from './Select/index.js';
|
|
42
|
+
export { default as Stack } from './Stack/index.js';
|
|
43
|
+
export { default as Switch } from './Switch/index.js';
|
|
44
|
+
export { default as Tab } from './Tab/index.js';
|
|
45
|
+
export { default as Table } from './Table/index.js';
|
|
46
|
+
export { default as TableBody } from './TableBody/index.js';
|
|
47
|
+
export { default as TableCell } from './TableCell/index.js';
|
|
48
|
+
export { default as TableFooter } from './TableFooter/index.js';
|
|
49
|
+
export { default as TableHead } from './TableHead/index.js';
|
|
50
|
+
export { default as TablePagination } from './TablePagination/index.js';
|
|
51
|
+
export { default as TableRow } from './TableRow/index.js';
|
|
52
|
+
export { default as Tabs } from './Tabs/index.js';
|
|
53
|
+
export { default as Text } from './Text/index.js';
|
|
54
|
+
export { default as Toast } from './Toast/index.js';
|
|
55
|
+
export { default as Tooltip } from './Tooltip/index.js';
|
|
56
|
+
export { default as useCorner } from './useCorner/index.js';
|
|
57
|
+
export { default as ViewBox } from './ViewBox/index.js';
|
|
58
|
+
export { default as SelectFilter } from './DataFilter/options/SelectFilter.js';
|
|
59
|
+
export { default as MultiSelectFilter } from './DataFilter/options/MultiSelectFilter.js';
|
|
60
|
+
export { default as NumberFilter } from './DataFilter/options/NumberFilter.js';
|
|
61
|
+
export { default as TextFilter } from './DataFilter/options/TextFilter.js';
|
|
62
|
+
export { default as NumberRangeFilter } from './DataFilter/options/NumberRangeFilter.js';
|
|
63
|
+
export { default as DateFilter } from './DataFilter/options/DateFilter.js';
|
|
64
|
+
export { default as DateRangeFilter } from './DataFilter/options/DateRangeFilter.js';
|
|
134
65
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xanui/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.38",
|
|
4
4
|
"description": "",
|
|
5
5
|
"private": false,
|
|
6
6
|
"dependencies": {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"exports": {
|
|
15
15
|
"./*": {
|
|
16
|
-
"import": "./*/index.
|
|
16
|
+
"import": "./*/index.js",
|
|
17
17
|
"require": "./*/index.js",
|
|
18
18
|
"types": "./*/index.d.ts"
|
|
19
19
|
}
|
package/useAlert/index.js
CHANGED
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var index$1 = require('../Alert/index.js');
|
|
10
|
-
var React = require('react');
|
|
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';
|
|
11
9
|
|
|
12
10
|
const useAlert = (props) => {
|
|
13
11
|
const [loading, setLoading] = React.useState(false);
|
|
14
|
-
let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest =
|
|
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"]);
|
|
15
13
|
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
16
14
|
hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
|
|
17
15
|
size !== null && size !== void 0 ? size : (size = "small");
|
|
@@ -60,7 +58,7 @@ const useAlert = (props) => {
|
|
|
60
58
|
closecolor = 'default';
|
|
61
59
|
}
|
|
62
60
|
}
|
|
63
|
-
const modal =
|
|
61
|
+
const modal = useModal(jsxs(Alert, Object.assign({ direction: direction, sx: {
|
|
64
62
|
px: 2,
|
|
65
63
|
py: 1,
|
|
66
64
|
pt: direction === 'row' ? 1 : 2
|
|
@@ -69,12 +67,12 @@ const useAlert = (props) => {
|
|
|
69
67
|
close: () => modal.close(),
|
|
70
68
|
loading: (is) => setLoading(is),
|
|
71
69
|
isLoading: () => loading
|
|
72
|
-
}) : content,
|
|
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 () => {
|
|
73
71
|
setLoading(true);
|
|
74
72
|
onCancel && await onCancel();
|
|
75
73
|
setLoading(false);
|
|
76
74
|
modal.close();
|
|
77
|
-
}, children: cancelButtonText || "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 () => {
|
|
78
76
|
setLoading(true);
|
|
79
77
|
onConfirm && await onConfirm();
|
|
80
78
|
setLoading(false);
|
|
@@ -90,5 +88,5 @@ const useAlert = (props) => {
|
|
|
90
88
|
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
91
89
|
};
|
|
92
90
|
|
|
93
|
-
|
|
91
|
+
export { useAlert as default };
|
|
94
92
|
//# sourceMappingURL=index.js.map
|
package/useAlert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n open: () => void;\r\n close: () => void;\r\n loading: (is: boolean) => void;\r\n isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n content: string | UseAlertContent,\r\n size?: \"small\" | \"medium\" | \"large\" | number;\r\n closeButton?: boolean;\r\n clickOutsideToClose?: boolean;\r\n okButtonText?: string;\r\n cancelButtonText?: string;\r\n hideOkButton?: boolean;\r\n hideCancelButton?: boolean;\r\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n variant?: \"text\" | \"fill\"\r\n onConfirm?: () => Promise<void> | void;\r\n onCancel?: () => Promise<void> | void;\r\n transition?: UseTransitionVariantTypes;\r\n blurMode?: UseModalProps['blurMode'];\r\n slotProps?: {\r\n modal?: UseModalProps;\r\n okButton?: Omit<ButtonProps, \"children\">;\r\n closeButton?: Omit<ButtonProps, \"children\">;\r\n }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n const [loading, setLoading] = React.useState(false)\r\n let {\r\n content,\r\n size,\r\n color,\r\n direction,\r\n variant,\r\n closeButton,\r\n clickOutsideToClose,\r\n okButtonText,\r\n cancelButtonText,\r\n hideOkButton,\r\n hideCancelButton,\r\n buttonPlacement,\r\n onConfirm,\r\n onCancel,\r\n transition,\r\n blurMode,\r\n slotProps,\r\n ...rest\r\n } = props\r\n\r\n hideOkButton ??= false\r\n hideCancelButton ??= false\r\n\r\n size ??= \"small\"\r\n color ??= 'default'\r\n variant ??= \"text\"\r\n direction ??= \"column\"\r\n buttonPlacement ??= \"end\"\r\n let sx: any = {};\r\n\r\n switch (buttonPlacement) {\r\n case \"start\":\r\n sx.justifyContent = 'flex-start'\r\n break;\r\n case \"end\":\r\n sx.justifyContent = 'flex-end'\r\n break;\r\n case \"between\":\r\n sx.justifyContent = 'space-between'\r\n break;\r\n case \"full\":\r\n sx = {\r\n \"& button\": {\r\n flex: 1\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let sizes: any = {\r\n small: 320,\r\n medium: 400,\r\n large: 600\r\n }\r\n\r\n let okcolor = color\r\n let closecolor = color\r\n if (color === 'default') {\r\n okcolor = 'brand'\r\n closecolor = 'default'\r\n variant = 'text'\r\n } else {\r\n if (variant === 'fill') {\r\n okcolor = 'default'\r\n closecolor = 'default'\r\n } else {\r\n okcolor = color\r\n closecolor = 'default'\r\n }\r\n }\r\n\r\n const modal = useModal(<Alert\r\n direction={direction}\r\n sx={{\r\n px: 2,\r\n py: 1,\r\n pt: direction === 'row' ? 1 : 2\r\n }}\r\n color={color}\r\n variant={variant}\r\n onClose={closeButton ? close : undefined}\r\n {...rest}\r\n >\r\n {typeof content === \"function\" ? content({\r\n open: () => modal.open(),\r\n close: () => modal.close(),\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }) : content}\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n gap: 1,\r\n pt: 4,\r\n flexDirection: \"row\",\r\n ...sx,\r\n }}\r\n >\r\n {!hideCancelButton && <Button\r\n disabled={loading}\r\n color={closecolor}\r\n variant=\"fill\"\r\n {...slotProps?.closeButton}\r\n onClick={async () => {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{cancelButtonText || \"Close\"}</Button>}\r\n <Button\r\n loading={loading}\r\n color={okcolor}\r\n variant=\"fill\"\r\n {...slotProps?.okButton}\r\n\r\n onClick={async () => {\r\n setLoading(true)\r\n onConfirm && await onConfirm()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{okButtonText || \"OK\"}</Button>\r\n </Tag>\r\n </Alert>, {\r\n ...slotProps?.modal,\r\n size: sizes[size] || size,\r\n blur: 40,\r\n blurMode: blurMode || \"transparent\",\r\n transition: transition || \"zoom\",\r\n onClickOutside: async () => {\r\n if (clickOutsideToClose && !loading) {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n ...modal,\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }\r\n}\r\n\r\nexport default useAlert"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n open: () => void;\r\n close: () => void;\r\n loading: (is: boolean) => void;\r\n isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n content: string | UseAlertContent,\r\n size?: \"small\" | \"medium\" | \"large\" | number;\r\n closeButton?: boolean;\r\n clickOutsideToClose?: boolean;\r\n okButtonText?: string;\r\n cancelButtonText?: string;\r\n hideOkButton?: boolean;\r\n hideCancelButton?: boolean;\r\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n variant?: \"text\" | \"fill\"\r\n onConfirm?: () => Promise<void> | void;\r\n onCancel?: () => Promise<void> | void;\r\n transition?: UseTransitionVariantTypes;\r\n blurMode?: UseModalProps['blurMode'];\r\n slotProps?: {\r\n modal?: UseModalProps;\r\n okButton?: Omit<ButtonProps, \"children\">;\r\n closeButton?: Omit<ButtonProps, \"children\">;\r\n }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n const [loading, setLoading] = React.useState(false)\r\n let {\r\n content,\r\n size,\r\n color,\r\n direction,\r\n variant,\r\n closeButton,\r\n clickOutsideToClose,\r\n okButtonText,\r\n cancelButtonText,\r\n hideOkButton,\r\n hideCancelButton,\r\n buttonPlacement,\r\n onConfirm,\r\n onCancel,\r\n transition,\r\n blurMode,\r\n slotProps,\r\n ...rest\r\n } = props\r\n\r\n hideOkButton ??= false\r\n hideCancelButton ??= false\r\n\r\n size ??= \"small\"\r\n color ??= 'default'\r\n variant ??= \"text\"\r\n direction ??= \"column\"\r\n buttonPlacement ??= \"end\"\r\n let sx: any = {};\r\n\r\n switch (buttonPlacement) {\r\n case \"start\":\r\n sx.justifyContent = 'flex-start'\r\n break;\r\n case \"end\":\r\n sx.justifyContent = 'flex-end'\r\n break;\r\n case \"between\":\r\n sx.justifyContent = 'space-between'\r\n break;\r\n case \"full\":\r\n sx = {\r\n \"& button\": {\r\n flex: 1\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let sizes: any = {\r\n small: 320,\r\n medium: 400,\r\n large: 600\r\n }\r\n\r\n let okcolor = color\r\n let closecolor = color\r\n if (color === 'default') {\r\n okcolor = 'brand'\r\n closecolor = 'default'\r\n variant = 'text'\r\n } else {\r\n if (variant === 'fill') {\r\n okcolor = 'default'\r\n closecolor = 'default'\r\n } else {\r\n okcolor = color\r\n closecolor = 'default'\r\n }\r\n }\r\n\r\n const modal = useModal(<Alert\r\n direction={direction}\r\n sx={{\r\n px: 2,\r\n py: 1,\r\n pt: direction === 'row' ? 1 : 2\r\n }}\r\n color={color}\r\n variant={variant}\r\n onClose={closeButton ? close : undefined}\r\n {...rest}\r\n >\r\n {typeof content === \"function\" ? content({\r\n open: () => modal.open(),\r\n close: () => modal.close(),\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }) : content}\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n gap: 1,\r\n pt: 4,\r\n flexDirection: \"row\",\r\n ...sx,\r\n }}\r\n >\r\n {!hideCancelButton && <Button\r\n disabled={loading}\r\n color={closecolor}\r\n variant=\"fill\"\r\n {...slotProps?.closeButton}\r\n onClick={async () => {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{cancelButtonText || \"Close\"}</Button>}\r\n <Button\r\n loading={loading}\r\n color={okcolor}\r\n variant=\"fill\"\r\n {...slotProps?.okButton}\r\n\r\n onClick={async () => {\r\n setLoading(true)\r\n onConfirm && await onConfirm()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{okButtonText || \"OK\"}</Button>\r\n </Tag>\r\n </Alert>, {\r\n ...slotProps?.modal,\r\n size: sizes[size] || size,\r\n blur: 40,\r\n blurMode: blurMode || \"transparent\",\r\n transition: transition || \"zoom\",\r\n onClickOutside: async () => {\r\n if (clickOutsideToClose && !loading) {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n ...modal,\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }\r\n}\r\n\r\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/useBlurCss/index.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var core = require('@xanui/core');
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { alpha } from '@xanui/core';
|
|
5
3
|
|
|
6
4
|
let _d;
|
|
7
5
|
const useBlurCss = (blur, mode) => {
|
|
8
|
-
return
|
|
9
|
-
let transparent = { bgcolor:
|
|
6
|
+
return useMemo(() => {
|
|
7
|
+
let transparent = { bgcolor: alpha("#000000", blur / 100) };
|
|
10
8
|
if (typeof window === 'undefined' || mode === 'transparent') {
|
|
11
9
|
return transparent;
|
|
12
10
|
}
|
|
@@ -15,5 +13,5 @@ const useBlurCss = (blur, mode) => {
|
|
|
15
13
|
}, [blur]);
|
|
16
14
|
};
|
|
17
15
|
|
|
18
|
-
|
|
16
|
+
export { useBlurCss as default };
|
|
19
17
|
//# sourceMappingURL=index.js.map
|
package/useBlurCss/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n return useMemo(() => {\r\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n if (typeof window === 'undefined' || mode === 'transparent') {\r\n return transparent\r\n }\r\n const d = _d || (_d = window.document.createElement(\"div\").style)\r\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n return useMemo(() => {\r\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n if (typeof window === 'undefined' || mode === 'transparent') {\r\n return transparent\r\n }\r\n const d = _d || (_d = window.document.createElement(\"div\").style)\r\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA,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;;;;"}
|
package/useCorner/index.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
1
|
const useCorner = (type) => {
|
|
4
2
|
switch (type) {
|
|
5
3
|
case 'square':
|
|
@@ -18,5 +16,5 @@ const useCorner = (type) => {
|
|
|
18
16
|
return {};
|
|
19
17
|
};
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
export { useCorner as default };
|
|
22
20
|
//# sourceMappingURL=index.js.map
|
package/useCorner/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n switch (type) {\r\n case 'square':\r\n return {\r\n radius: 0\r\n }\r\n case 'rounded':\r\n return {\r\n radius: 1\r\n }\r\n case 'circle':\r\n return {\r\n radius: 100\r\n }\r\n }\r\n return {}\r\n}\r\n\r\nexport default useCorner"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n switch (type) {\r\n case 'square':\r\n return {\r\n radius: 0\r\n }\r\n case 'rounded':\r\n return {\r\n radius: 1\r\n }\r\n case 'circle':\r\n return {\r\n radius: 100\r\n }\r\n }\r\n return {}\r\n}\r\n\r\nexport default useCorner"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}
|
package/useLayer/index.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var index = require('../Layer/index.js');
|
|
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';
|
|
8
6
|
|
|
9
7
|
const useLayer = (children, props) => {
|
|
10
8
|
var _a;
|
|
11
|
-
const [open, setOpen] =
|
|
9
|
+
const [open, setOpen] = useState(false);
|
|
12
10
|
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
13
|
-
const portal =
|
|
11
|
+
const portal = usePortal(jsx(Layer, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
14
12
|
portal.unmount();
|
|
15
13
|
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
16
14
|
props.onClosed();
|
|
@@ -34,5 +32,5 @@ const useLayer = (children, props) => {
|
|
|
34
32
|
};
|
|
35
33
|
};
|
|
36
34
|
|
|
37
|
-
|
|
35
|
+
export { useLayer as default };
|
|
38
36
|
//# sourceMappingURL=index.js.map
|
package/useLayer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n slotProps?: LayerProps[\"slotProps\"] & {\r\n portal?: UsePortalOptions\r\n }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n const [open, setOpen] = useState(false)\r\n const portalProps = props?.slotProps?.portal || {}\r\n const portal = usePortal(<Layer\r\n blur={20}\r\n {...props}\r\n open={open}\r\n onClosed={() => {\r\n portal.unmount()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }}\r\n onClickOutside={() => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n setOpen(false)\r\n }\r\n }}\r\n >\r\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n </Layer>, portalProps)\r\n\r\n return {\r\n open: () => {\r\n portal.mount()\r\n setOpen(true)\r\n },\r\n close: () => {\r\n setOpen(false)\r\n },\r\n }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n slotProps?: LayerProps[\"slotProps\"] & {\r\n portal?: UsePortalOptions\r\n }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n const [open, setOpen] = useState(false)\r\n const portalProps = props?.slotProps?.portal || {}\r\n const portal = usePortal(<Layer\r\n blur={20}\r\n {...props}\r\n open={open}\r\n onClosed={() => {\r\n portal.unmount()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }}\r\n onClickOutside={() => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n setOpen(false)\r\n }\r\n }}\r\n >\r\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n </Layer>, portalProps)\r\n\r\n return {\r\n open: () => {\r\n portal.mount()\r\n setOpen(true)\r\n },\r\n close: () => {\r\n setOpen(false)\r\n },\r\n }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
|
package/useModal/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var index = require('../useLayer/index.js');
|
|
7
|
-
var core = require('@xanui/core');
|
|
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';
|
|
8
6
|
|
|
9
7
|
const useModal = (children, props) => {
|
|
10
8
|
var _a, _b;
|
|
@@ -16,12 +14,12 @@ const useModal = (children, props) => {
|
|
|
16
14
|
xl: 1300,
|
|
17
15
|
full: "100%"
|
|
18
16
|
};
|
|
19
|
-
let _c = props || {}, { size, slotProps } = _c, useLayerProps =
|
|
17
|
+
let _c = props || {}, { size, slotProps } = _c, useLayerProps = __rest(_c, ["size", "slotProps"]);
|
|
20
18
|
size = size !== null && size !== void 0 ? size : "xs";
|
|
21
19
|
slotProps = slotProps || {};
|
|
22
20
|
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
23
|
-
const layer =
|
|
24
|
-
return (
|
|
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 })));
|
|
25
23
|
}, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
|
|
26
24
|
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
27
25
|
props.onClickOutside();
|
|
@@ -33,5 +31,5 @@ const useModal = (children, props) => {
|
|
|
33
31
|
return layer;
|
|
34
32
|
};
|
|
35
33
|
|
|
36
|
-
|
|
34
|
+
export { useModal as default };
|
|
37
35
|
//# sourceMappingURL=index.js.map
|
package/useModal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n slotProps?: {\r\n layer?: UseLayerProps['slotProps'];\r\n root?: Omit<TagProps<'div'>, \"children\">\r\n }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n let sizes: any = {\r\n xs: 420,\r\n sm: 760,\r\n md: 990,\r\n lg: 1120,\r\n xl: 1300,\r\n full: \"100%\"\r\n }\r\n let { size, slotProps, ...useLayerProps } = props || {}\r\n size = size ?? \"xs\"\r\n slotProps = slotProps || {} as any\r\n const root: any = slotProps?.root || {}\r\n\r\n const layer = useLayer(() => {\r\n return (\r\n <Tag\r\n {...root}\r\n sxr={{\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n radius: 2,\r\n bgcolor: \"background.primary\",\r\n shadow: 15,\r\n ...root?.sx\r\n }}\r\n baseClass='modal'\r\n >\r\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n </Tag>\r\n )\r\n }, {\r\n ...useLayerProps,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n layer.close()\r\n }\r\n },\r\n slotProps: {\r\n ...slotProps?.layer,\r\n clickOutside: {\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n ...slotProps?.layer?.clickOutside,\r\n },\r\n root: {\r\n display: \"flex\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n ...slotProps?.layer?.root,\r\n }\r\n }\r\n })\r\n\r\n return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n slotProps?: {\r\n layer?: UseLayerProps['slotProps'];\r\n root?: Omit<TagProps<'div'>, \"children\">\r\n }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n let sizes: any = {\r\n xs: 420,\r\n sm: 760,\r\n md: 990,\r\n lg: 1120,\r\n xl: 1300,\r\n full: \"100%\"\r\n }\r\n let { size, slotProps, ...useLayerProps } = props || {}\r\n size = size ?? \"xs\"\r\n slotProps = slotProps || {} as any\r\n const root: any = slotProps?.root || {}\r\n\r\n const layer = useLayer(() => {\r\n return (\r\n <Tag\r\n {...root}\r\n sxr={{\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n radius: 2,\r\n bgcolor: \"background.primary\",\r\n shadow: 15,\r\n ...root?.sx\r\n }}\r\n baseClass='modal'\r\n >\r\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n </Tag>\r\n )\r\n }, {\r\n ...useLayerProps,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n layer.close()\r\n }\r\n },\r\n slotProps: {\r\n ...slotProps?.layer,\r\n clickOutside: {\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n ...slotProps?.layer?.clickOutside,\r\n },\r\n root: {\r\n display: \"flex\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n ...slotProps?.layer?.root,\r\n }\r\n }\r\n })\r\n\r\n return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|