@xanui/core 1.1.20 → 1.1.21
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/AppRoot/index.js +4 -0
- package/AppRoot/index.js.map +1 -1
- package/AppRoot/index.mjs +4 -0
- package/AppRoot/index.mjs.map +1 -1
- package/hooks/usePortal.js +19 -23
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs +20 -24
- package/hooks/usePortal.mjs.map +1 -1
- package/package.json +1 -1
package/AppRoot/index.js
CHANGED
|
@@ -49,6 +49,10 @@ const AppRoot = React.forwardRef((_a, ref) => {
|
|
|
49
49
|
});
|
|
50
50
|
}, []);
|
|
51
51
|
React.useEffect(() => {
|
|
52
|
+
const root = document.querySelectorAll(`.xui-app-root`);
|
|
53
|
+
if (!root || root.length > 1) {
|
|
54
|
+
throw new Error("Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.");
|
|
55
|
+
}
|
|
52
56
|
// move oncss style tags to head
|
|
53
57
|
if (typeof window === 'undefined')
|
|
54
58
|
return;
|
package/AppRoot/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[`xui-app-root`]}\n >\n <BreakpointProvider>\n {children}\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","BreakpointProvider"],"mappings":"0fASAA,uBAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAEC,qCAAiB,EAAE,CAAC;AACnDD,uBAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAEE,oCAAgB,EAAE,CAAC;AAMjD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;QAAvF,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,OAA6B,EAAxB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,CAA6C,CAAF;IAC9G,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAd,cAAc,IAAd,cAAc,GAAK,KAAK,CAAA;IAExBC,aAAO,CAAC,MAAK;AACV,QAAA,IAAI,cAAc;YAAE;AACpB,QAAAC,oBAAY,CAAC;AACV,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAEC,sBAAc,CAAC,KAAK;AAChC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAE3BF,aAAO,CAAC,MAAK;AACV,QAAAG,SAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAENC,eAAS,CAAC,MAAK
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n\n const root = document.querySelectorAll(`.xui-app-root`)\n if (!root || root.length > 1) {\n throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n }\n\n\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[`xui-app-root`]}\n >\n <BreakpointProvider>\n {children}\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","BreakpointProvider"],"mappings":"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"}
|
package/AppRoot/index.mjs
CHANGED
|
@@ -49,6 +49,10 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
|
49
49
|
});
|
|
50
50
|
}, []);
|
|
51
51
|
useEffect(() => {
|
|
52
|
+
const root = document.querySelectorAll(`.xui-app-root`);
|
|
53
|
+
if (!root || root.length > 1) {
|
|
54
|
+
throw new Error("Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.");
|
|
55
|
+
}
|
|
52
56
|
// move oncss style tags to head
|
|
53
57
|
if (typeof window === 'undefined')
|
|
54
58
|
return;
|
package/AppRoot/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[`xui-app-root`]}\n >\n <BreakpointProvider>\n {children}\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx"],"mappings":"4fASA,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;AACnD,WAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC;AAMjD,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;QAAvF,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,OAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,gBAAA,EAAA,OAAA,CAA6C,CAAF;IAC9G,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAd,cAAc,IAAd,cAAc,GAAK,KAAK,CAAA;IAExB,OAAO,CAAC,MAAK;AACV,QAAA,IAAI,cAAc;YAAE;AACpB,QAAA,YAAY,CAAC;AACV,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,QAAQ,EAAE,cAAc,CAAC,KAAK;AAChC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAE3B,OAAO,CAAC,MAAK;AACV,QAAA,GAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n\n const root = document.querySelectorAll(`.xui-app-root`)\n if (!root || root.length > 1) {\n throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n }\n\n\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[`xui-app-root`]}\n >\n <BreakpointProvider>\n {children}\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx"],"mappings":"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"}
|
package/hooks/usePortal.js
CHANGED
|
@@ -3,54 +3,50 @@
|
|
|
3
3
|
const theme = core.useTheme();
|
|
4
4
|
const { el, root } = React.useMemo(() => {
|
|
5
5
|
const el = document.createElement("div");
|
|
6
|
-
const root = client.createRoot(el);
|
|
6
|
+
const root = client.createRoot(el);
|
|
7
7
|
return { el, root };
|
|
8
8
|
}, []);
|
|
9
|
-
const render = () => {
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
React.useEffect(() => {
|
|
9
|
+
const render = () => root.render(jsxRuntime.jsx(ThemeProvider.default, { theme: theme.name, children: children }));
|
|
10
|
+
const container = () => {
|
|
13
11
|
const container = document.querySelector(`.xui-app-root`);
|
|
14
12
|
if (!container) {
|
|
15
13
|
throw new Error("No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.");
|
|
16
14
|
}
|
|
17
|
-
|
|
15
|
+
return container;
|
|
16
|
+
};
|
|
17
|
+
const isContained = () => container().contains(el);
|
|
18
|
+
const append = () => {
|
|
19
|
+
if (!isContained()) {
|
|
20
|
+
container().appendChild(el);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
React.useEffect(() => {
|
|
18
24
|
if (initialized) {
|
|
19
|
-
if (isContained) {
|
|
25
|
+
if (isContained()) {
|
|
20
26
|
render();
|
|
21
27
|
}
|
|
22
28
|
}
|
|
23
29
|
else {
|
|
24
|
-
|
|
25
|
-
container.appendChild(el);
|
|
26
|
-
}
|
|
30
|
+
append();
|
|
27
31
|
render();
|
|
28
32
|
setInitialized(true);
|
|
29
33
|
}
|
|
30
34
|
}, [children]);
|
|
31
35
|
React.useEffect(() => {
|
|
32
36
|
return () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
root.unmount();
|
|
36
|
-
el === null || el === void 0 ? void 0 : el.remove();
|
|
37
|
-
}
|
|
37
|
+
root.render(null);
|
|
38
|
+
el.remove();
|
|
38
39
|
};
|
|
39
40
|
}, []);
|
|
40
41
|
return {
|
|
41
42
|
isMount: () => document.body.contains(el),
|
|
42
43
|
mount: () => {
|
|
43
|
-
|
|
44
|
-
if (!isContained) {
|
|
45
|
-
document.body.appendChild(el);
|
|
46
|
-
}
|
|
44
|
+
append();
|
|
47
45
|
render();
|
|
48
46
|
},
|
|
49
47
|
unmount: () => {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
root.render(jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
48
|
+
root.render(null);
|
|
49
|
+
el.remove();
|
|
54
50
|
}
|
|
55
51
|
};
|
|
56
52
|
}exports.default=usePortal;exports.usePortal=usePortal;//# sourceMappingURL=usePortal.js.map
|
package/hooks/usePortal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el)
|
|
1
|
+
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, []);\n\n const render = () => root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n const container = () => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n return container;\n }\n const isContained = () => container().contains(el);\n const append = () => {\n if (!isContained()) {\n container().appendChild(el);\n }\n }\n\n useEffect(() => {\n if (initialized) {\n if (isContained()) {\n render()\n }\n } else {\n append()\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n root.render(null)\n el.remove();\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n append()\n render()\n },\n unmount: () => {\n root.render(null);\n el.remove();\n }\n }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","_jsx","ThemeProvider","useEffect"],"mappings":"gYAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;IAC9F,MAAM,SAAS,GAAG,MAAK;QACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;AACA,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;AACD,IAAA,MAAM,WAAW,GAAG,MAAM,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;IAClD,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,WAAW,EAAE,EAAE;AACjB,YAAA,SAAS,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;QAC9B;AACH,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACZ,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE,EAAE;AAChB,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;AACJ,YAAA,MAAM,EAAE;AACR,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACjB,EAAE,CAAC,MAAM,EAAE;AACd,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;AACT,YAAA,MAAM,EAAE;AACR,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;AACX,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACjB,EAAE,CAAC,MAAM,EAAE;QACd;KACF;AACJ"}
|
package/hooks/usePortal.mjs
CHANGED
|
@@ -1,56 +1,52 @@
|
|
|
1
|
-
import {jsx
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {createRoot}from'react-dom/client';import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import ThemeProvider from'../theme/ThemeProvider.mjs';import'react-state-bucket';function usePortal(children) {
|
|
2
2
|
const [initialized, setInitialized] = React__default.useState(false);
|
|
3
3
|
const theme = useTheme();
|
|
4
4
|
const { el, root } = useMemo(() => {
|
|
5
5
|
const el = document.createElement("div");
|
|
6
|
-
const root = createRoot(el);
|
|
6
|
+
const root = createRoot(el);
|
|
7
7
|
return { el, root };
|
|
8
8
|
}, []);
|
|
9
|
-
const render = () => {
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
useEffect(() => {
|
|
9
|
+
const render = () => root.render(jsx(ThemeProvider, { theme: theme.name, children: children }));
|
|
10
|
+
const container = () => {
|
|
13
11
|
const container = document.querySelector(`.xui-app-root`);
|
|
14
12
|
if (!container) {
|
|
15
13
|
throw new Error("No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.");
|
|
16
14
|
}
|
|
17
|
-
|
|
15
|
+
return container;
|
|
16
|
+
};
|
|
17
|
+
const isContained = () => container().contains(el);
|
|
18
|
+
const append = () => {
|
|
19
|
+
if (!isContained()) {
|
|
20
|
+
container().appendChild(el);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
useEffect(() => {
|
|
18
24
|
if (initialized) {
|
|
19
|
-
if (isContained) {
|
|
25
|
+
if (isContained()) {
|
|
20
26
|
render();
|
|
21
27
|
}
|
|
22
28
|
}
|
|
23
29
|
else {
|
|
24
|
-
|
|
25
|
-
container.appendChild(el);
|
|
26
|
-
}
|
|
30
|
+
append();
|
|
27
31
|
render();
|
|
28
32
|
setInitialized(true);
|
|
29
33
|
}
|
|
30
34
|
}, [children]);
|
|
31
35
|
useEffect(() => {
|
|
32
36
|
return () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
root.unmount();
|
|
36
|
-
el === null || el === void 0 ? void 0 : el.remove();
|
|
37
|
-
}
|
|
37
|
+
root.render(null);
|
|
38
|
+
el.remove();
|
|
38
39
|
};
|
|
39
40
|
}, []);
|
|
40
41
|
return {
|
|
41
42
|
isMount: () => document.body.contains(el),
|
|
42
43
|
mount: () => {
|
|
43
|
-
|
|
44
|
-
if (!isContained) {
|
|
45
|
-
document.body.appendChild(el);
|
|
46
|
-
}
|
|
44
|
+
append();
|
|
47
45
|
render();
|
|
48
46
|
},
|
|
49
47
|
unmount: () => {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
root.render(jsx(Fragment, {}));
|
|
48
|
+
root.render(null);
|
|
49
|
+
el.remove();
|
|
54
50
|
}
|
|
55
51
|
};
|
|
56
52
|
}export{usePortal as default,usePortal};//# sourceMappingURL=usePortal.mjs.map
|
package/hooks/usePortal.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el)
|
|
1
|
+
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\n\nexport function usePortal(children: React.ReactNode) {\n const [initialized, setInitialized] = React.useState(false);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, []);\n\n const render = () => root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n const container = () => {\n const container = document.querySelector(`.xui-app-root`) as HTMLDivElement;\n if (!container) {\n throw new Error(\"No ThemeProvider found in the application tree. Please wrap your application with ThemeProvider to use usePortal hook.\");\n }\n return container;\n }\n const isContained = () => container().contains(el);\n const append = () => {\n if (!isContained()) {\n container().appendChild(el);\n }\n }\n\n useEffect(() => {\n if (initialized) {\n if (isContained()) {\n render()\n }\n } else {\n append()\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n root.render(null)\n el.remove();\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n append()\n render()\n },\n unmount: () => {\n root.render(null);\n el.remove();\n }\n }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx"],"mappings":"gVAIM,SAAU,SAAS,CAAC,QAAyB,EAAA;AAChD,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC3D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;IAC9F,MAAM,SAAS,GAAG,MAAK;QACpB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,aAAA,CAAe,CAAmB;QAC3E,IAAI,CAAC,SAAS,EAAE;AACb,YAAA,MAAM,IAAI,KAAK,CAAC,wHAAwH,CAAC;QAC5I;AACA,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;AACD,IAAA,MAAM,WAAW,GAAG,MAAM,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC;IAClD,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,WAAW,EAAE,EAAE;AACjB,YAAA,SAAS,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;QAC9B;AACH,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACZ,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE,EAAE;AAChB,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;AACJ,YAAA,MAAM,EAAE;AACR,YAAA,MAAM,EAAE;YACR,cAAc,CAAC,IAAI,CAAC;QACvB;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACjB,EAAE,CAAC,MAAM,EAAE;AACd,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACJ,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzC,KAAK,EAAE,MAAK;AACT,YAAA,MAAM,EAAE;AACR,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;AACX,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACjB,EAAE,CAAC,MAAM,EAAE;QACd;KACF;AACJ"}
|