@xanui/ui 1.1.19 → 1.1.20
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/Layer/index.d.ts +1 -1
- package/Layer/index.js.map +1 -1
- package/Layer/index.mjs.map +1 -1
- package/package.json +1 -1
- package/useModal/index.d.ts +1 -1
- package/useModal/index.js +4 -4
- package/useModal/index.js.map +1 -1
- package/useModal/index.mjs +4 -4
- package/useModal/index.mjs.map +1 -1
package/Layer/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ type LayerProps = {
|
|
|
19
19
|
root?: Omit<TagProps<"div">, "children">;
|
|
20
20
|
transition?: Omit<TransitionProps, "children" | "open" | "variant" | "onClose" | "onClosed" | "onOpen" | "onOpened">;
|
|
21
21
|
content?: Omit<TagProps<"div">, "children">;
|
|
22
|
-
clickOutside?: Omit<ClickOutsideProps, "children">;
|
|
22
|
+
clickOutside?: Omit<ClickOutsideProps, "children" | "onClickOutside">;
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
25
|
declare const Layer: {
|
package/Layer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
package/Layer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
package/package.json
CHANGED
package/useModal/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { UseLayerProps } from '../useLayer/index.js';
|
|
|
2
2
|
import { TagProps } from '@xanui/core';
|
|
3
3
|
|
|
4
4
|
type UseModalProps = Omit<UseLayerProps, "slotProps"> & {
|
|
5
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" | "
|
|
5
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | number;
|
|
6
6
|
slotProps?: {
|
|
7
7
|
layer?: UseLayerProps['slotProps'];
|
|
8
8
|
root?: Omit<TagProps<'div'>, "children">;
|
package/useModal/index.js
CHANGED
|
@@ -7,16 +7,16 @@ var index = require('../useLayer/index.js');
|
|
|
7
7
|
var core = require('@xanui/core');
|
|
8
8
|
|
|
9
9
|
const useModal = (children, props) => {
|
|
10
|
-
var _a;
|
|
10
|
+
var _a, _b;
|
|
11
11
|
let sizes = {
|
|
12
12
|
xs: 420,
|
|
13
13
|
sm: 760,
|
|
14
14
|
md: 990,
|
|
15
15
|
lg: 1120,
|
|
16
16
|
xl: 1300,
|
|
17
|
-
|
|
17
|
+
full: "100%"
|
|
18
18
|
};
|
|
19
|
-
let
|
|
19
|
+
let _c = props || {}, { size, slotProps } = _c, useLayerProps = tslib.__rest(_c, ["size", "slotProps"]);
|
|
20
20
|
size = size !== null && size !== void 0 ? size : "xs";
|
|
21
21
|
slotProps = slotProps || {};
|
|
22
22
|
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
@@ -29,7 +29,7 @@ const useModal = (children, props) => {
|
|
|
29
29
|
else {
|
|
30
30
|
layer.close();
|
|
31
31
|
}
|
|
32
|
-
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (
|
|
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
33
|
return layer;
|
|
34
34
|
};
|
|
35
35
|
|
package/useModal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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\" | \"
|
|
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;;"}
|
package/useModal/index.mjs
CHANGED
|
@@ -5,16 +5,16 @@ import useLayer from '../useLayer/index.mjs';
|
|
|
5
5
|
import { Tag } from '@xanui/core';
|
|
6
6
|
|
|
7
7
|
const useModal = (children, props) => {
|
|
8
|
-
var _a;
|
|
8
|
+
var _a, _b;
|
|
9
9
|
let sizes = {
|
|
10
10
|
xs: 420,
|
|
11
11
|
sm: 760,
|
|
12
12
|
md: 990,
|
|
13
13
|
lg: 1120,
|
|
14
14
|
xl: 1300,
|
|
15
|
-
|
|
15
|
+
full: "100%"
|
|
16
16
|
};
|
|
17
|
-
let
|
|
17
|
+
let _c = props || {}, { size, slotProps } = _c, useLayerProps = __rest(_c, ["size", "slotProps"]);
|
|
18
18
|
size = size !== null && size !== void 0 ? size : "xs";
|
|
19
19
|
slotProps = slotProps || {};
|
|
20
20
|
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
@@ -27,7 +27,7 @@ const useModal = (children, props) => {
|
|
|
27
27
|
else {
|
|
28
28
|
layer.close();
|
|
29
29
|
}
|
|
30
|
-
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (
|
|
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
31
|
return layer;
|
|
32
32
|
};
|
|
33
33
|
|
package/useModal/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","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\" | \"
|
|
1
|
+
{"version":3,"file":"index.mjs","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;;"}
|