@xanui/core 1.1.18 → 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/hooks/usePortal.js +2 -2
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs +2 -2
- package/hooks/usePortal.mjs.map +1 -1
- package/package.json +1 -1
- package/theme/ThemeProvider.js +1 -1
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +1 -1
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/core.js +8 -1
- package/theme/core.js.map +1 -1
- package/theme/core.mjs +8 -1
- package/theme/core.mjs.map +1 -1
package/hooks/usePortal.js
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
const isContained = document.body.contains(el);
|
|
34
34
|
if (isContained) {
|
|
35
35
|
root.unmount();
|
|
36
|
-
|
|
36
|
+
el === null || el === void 0 ? void 0 : el.remove();
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
}, []);
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
unmount: () => {
|
|
50
50
|
if (document.body.contains(el)) {
|
|
51
|
-
|
|
51
|
+
el === null || el === void 0 ? void 0 : el.remove();
|
|
52
52
|
}
|
|
53
53
|
root.render(jsxRuntime.jsx(jsxRuntime.Fragment, {}));
|
|
54
54
|
}
|
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); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\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 const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n
|
|
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); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\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 const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n el?.remove();\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n el?.remove();\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","_jsx","ThemeProvider","useEffect","_Fragment"],"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;QACxC,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACZ,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;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,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;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;AACH,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;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;AACA,YAAA,IAAI,CAAC,MAAM,CAACF,cAAA,CAAAG,mBAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
package/hooks/usePortal.mjs
CHANGED
|
@@ -33,7 +33,7 @@ import {jsx,Fragment}from'react/jsx-runtime';import React__default,{useMemo,useE
|
|
|
33
33
|
const isContained = document.body.contains(el);
|
|
34
34
|
if (isContained) {
|
|
35
35
|
root.unmount();
|
|
36
|
-
|
|
36
|
+
el === null || el === void 0 ? void 0 : el.remove();
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
}, []);
|
|
@@ -48,7 +48,7 @@ import {jsx,Fragment}from'react/jsx-runtime';import React__default,{useMemo,useE
|
|
|
48
48
|
},
|
|
49
49
|
unmount: () => {
|
|
50
50
|
if (document.body.contains(el)) {
|
|
51
|
-
|
|
51
|
+
el === null || el === void 0 ? void 0 : el.remove();
|
|
52
52
|
}
|
|
53
53
|
root.render(jsx(Fragment, {}));
|
|
54
54
|
}
|
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); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\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 const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n
|
|
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); // React 18 root\n return { el, root };\n }, []);\n\n const render = () => {\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>);\n }\n\n useEffect(() => {\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 const isContained = document.body.contains(el);\n\n if (initialized) {\n if (isContained) {\n render()\n }\n } else {\n if (!isContained) {\n container.appendChild(el);\n }\n render()\n setInitialized(true);\n }\n\n }, [children]);\n\n useEffect(() => {\n return () => {\n const isContained = document.body.contains(el);\n if (isContained) {\n root.unmount();\n el?.remove();\n }\n };\n }, []);\n\n return {\n isMount: () => document.body.contains(el),\n mount: () => {\n const isContained = document.body.contains(el);\n if (!isContained) {\n document.body.appendChild(el);\n }\n render()\n },\n unmount: () => {\n if (document.body.contains(el)) {\n el?.remove();\n }\n root.render(<></>);\n }\n }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx","_Fragment"],"mappings":"yVAIM,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;QACxC,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC;AAC5B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;IACtB,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,MAAM,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,SAAS,CAAC,MAAK;QACZ,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;QACA,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAE9C,IAAI,WAAW,EAAE;YACd,IAAI,WAAW,EAAE;AACd,gBAAA,MAAM,EAAE;YACX;QACH;aAAO;YACJ,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5B;AACA,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;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,WAAW,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;AACH,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;YACT,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,WAAW,EAAE;AACf,gBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;YAChC;AACA,YAAA,MAAM,EAAE;QACX,CAAC;QACD,OAAO,EAAE,MAAK;YACX,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AAC7B,gBAAA,EAAE,aAAF,EAAE,KAAA,MAAA,GAAA,MAAA,GAAF,EAAE,CAAE,MAAM,EAAE;YACf;AACA,YAAA,IAAI,CAAC,MAAM,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,CAAK,CAAC;QACrB;KACF;AACJ"}
|
package/package.json
CHANGED
package/theme/ThemeProvider.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
let THEME = core.ThemeFactory.get(theme);
|
|
4
4
|
if (!THEME) {
|
|
5
5
|
console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
|
|
6
|
-
THEME = core.ThemeFactory.get("
|
|
6
|
+
THEME = core.ThemeFactory.get("light");
|
|
7
7
|
}
|
|
8
8
|
React__namespace.useMemo(() => {
|
|
9
9
|
const root_cls = `.xui-${theme}-theme-root`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n let THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) {\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n THEME = ThemeFactory.get(\"
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n let THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) {\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\n }\n\n React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["__rest","ThemeFactory","React","css","ThemeCssVars","_jsx","ThemeContex","Tag"],"mappings":"woBAaA,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAGC,iBAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAGA,iBAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAAC,gBAAK,CAAC,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAAC,SAAG,CAAC;YACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAGC,oBAAY,CAAC,KAAK,CAAC,EAAA;AAEpC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGC,cAAA,CAACC,gBAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,YAC/BD,cAAA,CAACE,eAAG,kBACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,IACT,SAAS,EAAE,GAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,EAAA,CACc;AAE7B"}
|
package/theme/ThemeProvider.mjs
CHANGED
|
@@ -3,7 +3,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import*as React f
|
|
|
3
3
|
let THEME = ThemeFactory.get(theme);
|
|
4
4
|
if (!THEME) {
|
|
5
5
|
console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
|
|
6
|
-
THEME = ThemeFactory.get("
|
|
6
|
+
THEME = ThemeFactory.get("light");
|
|
7
7
|
}
|
|
8
8
|
React.useMemo(() => {
|
|
9
9
|
const root_cls = `.xui-${theme}-theme-root`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n let THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) {\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n THEME = ThemeFactory.get(\"
|
|
1
|
+
{"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n let THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) {\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\n }\n\n React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["_jsx"],"mappings":"+PAaA,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,KAAK,CAAC,OAAO,CAAC,MAAK;AAChB,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,GAAG,CAAC;YACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,EAAA;AAEpC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGA,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,YAC/BA,GAAA,CAAC,GAAG,kBACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,IACT,SAAS,EAAE,GAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,EAAA,CACc;AAE7B"}
|
package/theme/core.js
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react');const ThemeFactory = new Map();
|
|
2
2
|
const ThemeContex = React.createContext("light");
|
|
3
3
|
const getTheme = (theme) => ThemeFactory.get(theme);
|
|
4
|
-
const useTheme = () =>
|
|
4
|
+
const useTheme = () => {
|
|
5
|
+
const theme = ThemeFactory.get(React.useContext(ThemeContex));
|
|
6
|
+
if (!theme) {
|
|
7
|
+
console.error("Theme not found, returning light theme as fallback");
|
|
8
|
+
return ThemeFactory.get("light");
|
|
9
|
+
}
|
|
10
|
+
return theme;
|
|
11
|
+
};
|
|
5
12
|
const mergeObject = (a, b) => {
|
|
6
13
|
a = Object.assign({}, a);
|
|
7
14
|
b = Object.assign({}, b);
|
package/theme/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => ThemeFactory.get(React.useContext(ThemeContex)) as any\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n a = { ...a }\n b = { ...b }\n for (const key in b) {\n const v = (b as any)[key]\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n a[key] = mergeObject(a[key], b[key])\n } else {\n a[key] = v\n }\n }\n return a\n}\n"],"names":[],"mappings":"iGAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => {\n const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\n if (!theme) {\n console.error(\"Theme not found, returning light theme as fallback\")\n return ThemeFactory.get(\"light\") as any\n }\n return theme\n}\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n a = { ...a }\n b = { ...b }\n for (const key in b) {\n const v = (b as any)[key]\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n a[key] = mergeObject(a[key], b[key])\n } else {\n a[key] = v\n }\n }\n return a\n}\n"],"names":[],"mappings":"iGAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX"}
|
package/theme/core.mjs
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import React__default from'react';const ThemeFactory = new Map();
|
|
2
2
|
const ThemeContex = React__default.createContext("light");
|
|
3
3
|
const getTheme = (theme) => ThemeFactory.get(theme);
|
|
4
|
-
const useTheme = () =>
|
|
4
|
+
const useTheme = () => {
|
|
5
|
+
const theme = ThemeFactory.get(React__default.useContext(ThemeContex));
|
|
6
|
+
if (!theme) {
|
|
7
|
+
console.error("Theme not found, returning light theme as fallback");
|
|
8
|
+
return ThemeFactory.get("light");
|
|
9
|
+
}
|
|
10
|
+
return theme;
|
|
11
|
+
};
|
|
5
12
|
const mergeObject = (a, b) => {
|
|
6
13
|
a = Object.assign({}, a);
|
|
7
14
|
b = Object.assign({}, b);
|
package/theme/core.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.mjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => ThemeFactory.get(React.useContext(ThemeContex)) as any\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n a = { ...a }\n b = { ...b }\n for (const key in b) {\n const v = (b as any)[key]\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n a[key] = mergeObject(a[key], b[key])\n } else {\n a[key] = v\n }\n }\n return a\n}\n"],"names":["React"],"mappings":"kCAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"core.mjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => {\n const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\n if (!theme) {\n console.error(\"Theme not found, returning light theme as fallback\")\n return ThemeFactory.get(\"light\") as any\n }\n return theme\n}\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n a = { ...a }\n b = { ...b }\n for (const key in b) {\n const v = (b as any)[key]\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n a[key] = mergeObject(a[key], b[key])\n } else {\n a[key] = v\n }\n }\n return a\n}\n"],"names":["React"],"mappings":"kCAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAACA,cAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAACA,cAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX"}
|