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

package/lib/ant-table.d.ts

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

package/lib/ant-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/lib/components/ErrorRender/index.js

@@ -21,9 +21,15 @@ const RenderError = (props)=>{
     useEffect(()=>{
         if (!resetErrorBoundary) return;
         const hot = getModuleHot();
-        if (hot) hot.addStatusHandler(createApplyHandle((success)=>{
-            if (success) resetErrorBoundary();
-        }));
+        if (hot) {
+            const handler = createApplyHandle((success)=>{
+                if (success) resetErrorBoundary();
+            });
+            hot.addStatusHandler(handler);
+            return ()=>{
+                hot.removeStatusHandler(handler);
+            };
+        }
     }, [
         resetErrorBoundary
     ]);

package/lib/logger/intercept-global-error.js

@@ -64,7 +64,7 @@ function processDevServerLog(log) {
 }
 function listenModuleHmr() {
     const hot = getModuleHot();
-    if (hot) hot.addStatusHandler(createApplyHandle((success)=>{
+    if (hot) hot.addStatusHandler(createApplyHandle((success, status)=>{
         if (success) submitPostMessage({
             type: 'DevServerMessage',
             data: {

package/lib/utils/module-hot.d.ts

@@ -13,6 +13,7 @@
 type ModuleHotType = 'idle' | 'check' | 'prepare' | 'ready' | 'dispose' | 'apply' | 'abort' | 'fail';
 interface ModuleHotInstance {
     addStatusHandler: (handler: (status: ModuleHotType) => void) => void;
+    removeStatusHandler: (handler: (status: ModuleHotType) => void) => void;
 }
 export declare function getModuleHot(): ModuleHotInstance | null;
 /**
@@ -20,5 +21,5 @@ export declare function getModuleHot(): ModuleHotInstance | null;
  * 监听模块热更状态，当状态为apply时，调用回调函数并传入true
  * @param callback 热更成功回调函数，参数为是否成功
  */
-export declare function createApplyHandle(callback: (success: boolean) => void): (status: ModuleHotType) => void;
+export declare function createApplyHandle(callback: (success: boolean, status: ModuleHotType) => void): (status: ModuleHotType) => void;
 export {};

package/lib/utils/module-hot.js

@@ -7,12 +7,12 @@ function createApplyHandle(callback) {
     return (status)=>{
         if ('fail' === status || 'abort' === status) {
             hasApply = false;
-            return callback(false);
+            return callback(false, status);
         }
         if (hasApply) {
             if ('idle' === status) {
                 hasApply = false;
-                callback(true);
+                callback(true, status);
             }
             return;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.19-alpha.error.1",
+  "version": "1.1.19-antd-test.0",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -15,6 +15,11 @@
       "require": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
+    "./ant-table": {
+      "import": "./lib/ant-table.js",
+      "require": "./lib/ant-table.js",
+      "types": "./lib/ant-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",