@lark-apaas/client-toolkit 1.1.19-alpha.error.2 → 1.1.19-antd-test.1

package/lib/antd-table.d.ts

@@ -0,0 +1,4 @@
+import { Table } from 'antd';
+import type { TableProps } from 'antd';
+export { Table };
+export type { TableProps };

package/lib/antd-table.js

@@ -0,0 +1,2 @@
+import { Table } from "antd";
+export { Table };

package/lib/components/AppContainer/index.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import react, { useEffect } from "react";
 import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
 import IframeBridge from "./IframeBridge.js";
 import { defaultUIConfig } from "../theme/ui-config.js";
@@ -14,6 +14,15 @@ import safety from "./safety.js";
 registerDayjsPlugins();
 initAxiosConfig();
 const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
+const readCssVarColor = (varName, fallback)=>{
+    try {
+        if ('undefined' == typeof document) return fallback;
+        const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+        return value || fallback;
+    } catch  {
+        return fallback;
+    }
+};
 const App = (props)=>{
     const { themeMeta = {} } = props;
     useAppInfo();
@@ -54,17 +63,109 @@ const App = (props)=>{
         ]
     });
 };
-const AppContainer = (props)=>{
+const AppContainer_AppContainer = (props)=>{
     const { children, ...rest } = props;
+    const cssColors = {
+        background: readCssVarColor('--background'),
+        destructive: readCssVarColor('--destructive'),
+        primary: readCssVarColor('--primary'),
+        foreground: readCssVarColor('--foreground'),
+        warning: readCssVarColor('--warning'),
+        success: readCssVarColor('--success'),
+        muted: readCssVarColor('--muted'),
+        mutedForeground: readCssVarColor('--muted-foreground'),
+        border: readCssVarColor('--border'),
+        popover: readCssVarColor('--popover'),
+        accent: readCssVarColor('--accent'),
+        radius: readCssVarColor('--radius')
+    };
+    const antdThemeToken = {
+        borderRadius: cssColors.radius,
+        colorBgBase: cssColors.background,
+        colorError: cssColors.destructive,
+        colorInfo: cssColors.primary,
+        colorLink: cssColors.primary,
+        colorPrimary: cssColors.primary,
+        colorSuccess: cssColors.primary,
+        colorTextBase: cssColors.foreground,
+        colorWarning: cssColors.destructive
+    };
+    const antdTableToken = {
+        bodySortBg: cssColors.muted,
+        borderColor: cssColors.border,
+        expandIconBg: cssColors.background,
+        filterDropdownBg: cssColors.popover,
+        filterDropdownMenuBg: cssColors.popover,
+        fixedHeaderSortActiveBg: cssColors.muted,
+        footerBg: cssColors.muted,
+        footerColor: cssColors.mutedForeground,
+        headerBg: cssColors.muted,
+        headerColor: cssColors.mutedForeground,
+        headerFilterHoverBg: cssColors.muted,
+        headerSortActiveBg: cssColors.muted,
+        headerSortHoverBg: cssColors.muted,
+        headerSplitColor: cssColors.border,
+        rowExpandedBg: cssColors.background,
+        rowHoverBg: cssColors.muted,
+        rowSelectedBg: cssColors.accent,
+        rowSelectedHoverBg: cssColors.accent,
+        stickyScrollBarBg: cssColors.muted,
+        headerBorderRadius: 'var(--radius)'
+    };
+    const antdPaginationToken = {
+        itemActiveBg: cssColors.background,
+        itemActiveBgDisabled: cssColors.muted,
+        itemActiveColor: cssColors.primary,
+        itemActiveColorDisabled: cssColors.muted,
+        itemActiveColorHover: cssColors.muted,
+        itemBg: cssColors.background,
+        itemInputBg: cssColors.background,
+        itemLinkBg: cssColors.background
+    };
+    const OptionalAntdProvider = ({ children })=>{
+        const [Provider, setProvider] = react.useState(null);
+        const [ready, setReady] = react.useState(false);
+        react.useEffect(()=>{
+            let mounted = true;
+            import("antd").then((mod)=>{
+                if (mounted && mod?.ConfigProvider) setProvider(()=>mod.ConfigProvider);
+                if (mounted) setReady(true);
+            }).catch(()=>{
+                if (mounted) {
+                    setProvider(null);
+                    setReady(true);
+                }
+            });
+            return ()=>{
+                mounted = false;
+            };
+        }, []);
+        if (!ready) return null;
+        if (!Provider) return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+        return /*#__PURE__*/ jsx(Provider, {
+            theme: {
+                token: antdThemeToken,
+                components: {
+                    Table: antdTableToken,
+                    Pagination: antdPaginationToken
+                }
+            },
+            children: children
+        });
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(safety, {}),
-            /*#__PURE__*/ jsx(App, {
-                themeMeta: props.themeMeta,
-                children: children
+            /*#__PURE__*/ jsx(OptionalAntdProvider, {
+                children: /*#__PURE__*/ jsx(App, {
+                    themeMeta: props.themeMeta,
+                    children: children
+                })
             })
         ]
     });
 };
-const components_AppContainer = AppContainer;
-export { components_AppContainer as default };
+const AppContainer = AppContainer_AppContainer;
+export { AppContainer as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.19-alpha.error.2",
+  "version": "1.1.19-antd-test.1",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -15,6 +15,11 @@
       "require": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
+    "./antd-table": {
+      "import": "./lib/antd-table.js",
+      "require": "./lib/antd-table.js",
+      "types": "./lib/antd-table.d.ts"
+    },
     "./lib/index.css": "./lib/index.css",
     "./dataloom": {
       "import": "./lib/apis/dataloom.js",
@@ -76,7 +81,7 @@
     "@ant-design/colors": "^7.2.1",
     "@ant-design/cssinjs": "^1.24.0",
     "@data-loom/js": "^0.4.0",
-    "@lark-apaas/miaoda-inspector": "^1.0.2",
+    "@lark-apaas/miaoda-inspector": "^1.0.4",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.3",