@arcblock/ux 2.13.70 → 3.0.0

package/lib/DIDConnect/with-container.js

@@ -1,177 +1,124 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useRef, useState, createElement as _createElement } from 'react';
-import { Dialog, DialogContent, useMediaQuery, Box, Backdrop, SwipeableDrawer, Drawer } from '@mui/material';
-import { useDebounce, useMemoizedFn } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-import colorConvert from 'color-convert';
-import { useTheme } from '../Theme';
-import { mergeSx } from '../Util/style';
-import { hexToRgba } from '../Util';
-const BackdropWrap = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((backdropProps, ref) => {
-  return /*#__PURE__*/_createElement(Backdrop, {
-    open: true,
-    ref: ref,
+import { jsx as n, jsxs as E } from "react/jsx-runtime";
+import { memo as H, createElement as I, useState as K, useRef as Q } from "react";
+import { Backdrop as U, useMediaQuery as V, useTheme as q, Box as c, Drawer as J, SwipeableDrawer as X, Dialog as Y, DialogContent as Z } from "@mui/material";
+import { useDebounce as oo, useMemoizedFn as D } from "ahooks";
+import { useBrowser as eo } from "@arcblock/react-hooks";
+import no from "color-convert";
+import "../Theme/theme.js";
+import "../Theme/theme-provider.js";
+import { mergeSx as ro } from "../Util/style.js";
+import { hexToRgba as d } from "../Util/index.js";
+const L = H(({ ref: l, ...m }) => /* @__PURE__ */ I(
+  U,
+  {
+    open: !0,
+    ref: l,
     style: {
-      backgroundColor: 'rgba(0, 0, 0, 0.6)',
-      backdropFilter: 'blur(3px)',
-      touchAction: 'none'
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
+      backdropFilter: "blur(3px)",
+      touchAction: "none"
     },
-    ...backdropProps,
+    ...m,
     key: "background"
-  });
-}));
-export default function withContainer(Component) {
-  function WithContainerComponent({
-    popup = false,
-    open = false,
-    hideCloseButton = false,
-    ...rest
+  }
+));
+function fo(l) {
+  function m({
+    popup: B = !1,
+    open: _ = !1,
+    hideCloseButton: h = !1,
+    ...e
   }) {
-    const [color, setColor] = useState('#fff');
-    const drawerDragger = useRef(null);
-    const browser = useBrowser();
-    // 屏宽小于 sm 且在 mobile 设备中全屏显示 dialog (PC 端屏宽小于 sm 的情况正常弹窗, 不全屏显示)
-    const matchSm = useMediaQuery('(max-width:640px)');
-    let openVariant = 'page';
-    if (popup) {
-      openVariant = 'dialog';
-      if (matchSm && browser.mobile.any) {
-        openVariant = 'drawer';
-      }
-    }
-    const theme = useTheme();
-
-    // 兼容 did-react 版本中存在的 responsive prop, responsive=true 则让 dialog 始终保持 open 状态, 否则遵循外部传入的 open prop
-    const isOpen = open;
-    const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
-    const debouncedShow = useDebounce(isOpen, {
-      wait: leavingScreenDelay
-    });
-    const removeMagicToken = useMemoizedFn(() => {
-      const searchParams = new URLSearchParams(window.location.search);
-      if (searchParams.get('magicToken')) {
-        searchParams.delete('magicToken');
-      }
-      if (searchParams.toString()) {
-        window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
-      }
-    });
-
-    // eslint-disable-next-line no-unused-vars
-    const handleOnClose = (e, reason) => {
-      if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
-      removeMagicToken();
-      rest?.onClose();
-    };
-    const showModal = debouncedShow || isOpen;
-    const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
-    const hslColor = colorConvert.hex.hsl(color);
-    const [h, s, l] = hslColor;
-    const percentageList = [0, 30, 60, 30, 0, 30, 60, 30];
-    const maxPercentage = Math.max(...percentageList);
-    const minPercentage = Math.min(...percentageList);
-    let useAlpha = false;
-    if (l * (100 + maxPercentage) / 100 > 100 || l * (100 + minPercentage) / 100 < 0) {
-      // 超出范围，使用 alpha 通道变化
-      useAlpha = true;
-    }
-    const colorList = percentageList.map(percentageItem => {
-      let finalL = l * (100 + percentageItem) / 100;
-      let finalAlpha = 0.6;
-      if (useAlpha) {
-        finalAlpha = 0.5 * (100 + percentageItem) / 100;
-      } else {
-        finalL = l * (100 + percentageItem) / 100;
-      }
-      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
-    });
-    const background = `linear-gradient(45deg, ${colorList.join(', ')})`;
-    const colorListGlow = percentageList.map(percentageItem => {
-      let finalL = l * (100 + percentageItem) / 100;
-      let finalAlpha = 0.2;
-      if (useAlpha) {
-        finalAlpha = 0.3 * (100 + percentageItem) / 100;
-      } else {
-        finalL = l * (100 + percentageItem) / 100;
-      }
-      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
-    });
-    const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
-    const glowStyle = {
-      overflow: 'visible',
-      '&::before, &::after': {
+    var P, y;
+    const [a, x] = K("#fff"), w = Q(null), z = eo(), M = V("(max-width:640px)");
+    let r = "page";
+    B && (r = "dialog", M && z.mobile.any && (r = "drawer"));
+    const g = q(), p = _, T = ((y = (P = g == null ? void 0 : g.transitions) == null ? void 0 : P.duration) == null ? void 0 : y.leavingScreen) || 500, A = oo(p, {
+      wait: T
+    }), k = D(() => {
+      const o = new URLSearchParams(window.location.search);
+      o.get("magicToken") && o.delete("magicToken"), o.toString() && window.history.replaceState({}, "", `${window.location.pathname}?${o.toString()}`);
+    }), C = (o, t) => {
+      ["backdropClick", "escapeKeyDown"].includes(t) || (k(), e == null || e.onClose());
+    }, $ = A || p, j = h ? J : X, O = no.hex.hsl(a), [R, S, i] = O, u = [0, 30, 60, 30, 0, 30, 60, 30], W = Math.max(...u), G = Math.min(...u);
+    let f = !1;
+    (i * (100 + W) / 100 > 100 || i * (100 + G) / 100 < 0) && (f = !0);
+    const N = `linear-gradient(45deg, ${u.map((o) => {
+      let t = i * (100 + o) / 100, s = 0.6;
+      return f ? s = 0.5 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${R}, ${S}%, ${t}%, ${s})`;
+    }).join(", ")})`, F = `linear-gradient(45deg, ${u.map((o) => {
+      let t = i * (100 + o) / 100, s = 0.2;
+      return f ? s = 0.3 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${R}, ${S}%, ${t}%, ${s})`;
+    }).join(", ")})`, v = {
+      overflow: "visible",
+      "&::before, &::after": {
         content: '""',
-        position: 'absolute',
-        top: '-3px',
-        right: '-3px',
-        bottom: '-3px',
-        left: '-3px',
-        background,
-        backgroundSize: '300% 300%',
-        backgroundRepeat: 'no-repeat',
-        animation: 'glowRotate 10s linear infinite',
-        borderRadius: '14px !important',
+        position: "absolute",
+        top: "-3px",
+        right: "-3px",
+        bottom: "-3px",
+        left: "-3px",
+        background: N,
+        backgroundSize: "300% 300%",
+        backgroundRepeat: "no-repeat",
+        animation: "glowRotate 10s linear infinite",
+        borderRadius: "14px !important",
         zIndex: 0
       },
-      '&::after': {
-        background: backgroundGlow,
-        filter: 'blur(15px)'
+      "&::after": {
+        background: F,
+        filter: "blur(15px)"
       },
-      '@keyframes glowRotate': {
-        '0%': {
-          backgroundPosition: '0 0'
+      "@keyframes glowRotate": {
+        "0%": {
+          backgroundPosition: "0 0"
         },
-        '50%': {
-          backgroundPosition: '100% 0'
+        "50%": {
+          backgroundPosition: "100% 0"
         },
-        '100%': {
-          backgroundPosition: '0 0'
+        "100%": {
+          backgroundPosition: "0 0"
         }
       }
-    };
-    const wrapOnClose = useMemoizedFn(() => {
-      removeMagicToken();
-      rest?.onClose?.();
+    }, b = D(() => {
+      var o;
+      k(), (o = e == null ? void 0 : e.onClose) == null || o.call(e);
     });
-    if (openVariant === 'page') {
-      return /*#__PURE__*/_jsx(Box, {
+    return r === "page" ? /* @__PURE__ */ n(
+      c,
+      {
         className: "did-connect__container-page",
-        sx: mergeSx(glowStyle, {
+        sx: ro(v, {
           borderRadius: 1,
-          position: 'relative',
+          position: "relative",
           zIndex: 1
         }),
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            border: `1px solid ${hexToRgba(color, 0.1)}`,
-            m: '-1px',
-            position: 'relative',
-            borderRadius: '12px',
-            zIndex: 2,
-            overflow: 'hidden'
-          },
-          children: /*#__PURE__*/_jsx(Component, {
-            ...rest,
-            onClose: wrapOnClose,
-            setColor: setColor,
-            hideCloseButton: true,
-            mode: openVariant
-          })
-        })
-      });
-    }
-    if (openVariant === 'drawer') {
-      return /*#__PURE__*/_jsxs(DrawerComponent, {
+        children: /* @__PURE__ */ n(
+          c,
+          {
+            sx: {
+              border: `1px solid ${d(a, 0.1)}`,
+              m: "-1px",
+              position: "relative",
+              borderRadius: "12px",
+              zIndex: 2,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ n(l, { ...e, onClose: b, setColor: x, hideCloseButton: !0, mode: r })
+          }
+        )
+      }
+    ) : r === "drawer" ? /* @__PURE__ */ E(
+      j,
+      {
         className: "did-connect__container-drawer",
-        disableSwipeToOpen: true,
-        open: isOpen,
+        disableSwipeToOpen: !0,
+        open: p,
         anchor: "bottom",
-        drawerDragger: drawerDragger.current
-        // @ts-ignore
-        ,
-        onClose: handleOnClose,
+        drawerDragger: w.current,
+        onClose: C,
         slots: {
-          backdrop: BackdropWrap
+          backdrop: L
         },
         PaperProps: {
           sx: {
@@ -179,97 +126,114 @@ export default function withContainer(Component) {
             // 保持跟 DID Wallet 一致
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-            p: '2px',
-            animation: 'glowBreathe 7s linear infinite',
-            '.did-connect__root': {
-              backgroundColor: 'transparent'
+            p: "2px",
+            animation: "glowBreathe 7s linear infinite",
+            ".did-connect__root": {
+              backgroundColor: "transparent"
             },
-            overflow: 'hidden',
-            '@keyframes glowBreathe': {
-              '0%, 100%': {
+            overflow: "hidden",
+            "@keyframes glowBreathe": {
+              "0%, 100%": {
                 boxShadow: `
-                      inset 0 0 7px ${hexToRgba(color, 0.3)},
-                      inset 0 0 12px ${hexToRgba(color, 0.3)}`
+                      inset 0 0 7px ${d(a, 0.3)},
+                      inset 0 0 12px ${d(a, 0.3)}`
               },
-              '50%': {
+              "50%": {
                 boxShadow: `
-                      inset 0 0 18px ${hexToRgba(color, 0.7)},
-                      inset 0 0 24px ${hexToRgba(color, 0.5)}`
+                      inset 0 0 18px ${d(a, 0.7)},
+                      inset 0 0 24px ${d(a, 0.5)}`
               }
             }
           }
         },
-        children: [hideCloseButton ? null : /*#__PURE__*/_jsx(Box, {
-          ref: drawerDragger,
-          sx: {
-            px: 1,
-            pt: 2,
-            m: 'auto',
-            mt: -1,
-            mb: -2,
-            zIndex: 2
-          },
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              width: '48px',
-              height: '4px',
-              borderRadius: '100vw',
-              backgroundColor: 'rgba(0, 0, 0, 0.2)'
+        children: [
+          h ? null : /* @__PURE__ */ n(
+            c,
+            {
+              ref: w,
+              sx: {
+                px: 1,
+                pt: 2,
+                m: "auto",
+                mt: -1,
+                mb: -2,
+                zIndex: 2
+              },
+              children: /* @__PURE__ */ n(
+                c,
+                {
+                  sx: {
+                    width: "48px",
+                    height: "4px",
+                    borderRadius: "100vw",
+                    backgroundColor: "rgba(0, 0, 0, 0.2)"
+                  }
+                }
+              )
             }
-          })
-        }), /*#__PURE__*/_jsx(Box, {
+          ),
+          /* @__PURE__ */ n(
+            c,
+            {
+              sx: {
+                touchAction: "none",
+                maxWidth: "100%",
+                width: 500,
+                height: "auto"
+              },
+              children: $ ? /* @__PURE__ */ n(l, { ...e, onClose: b, setColor: x, hideCloseButton: !0, mode: r }) : null
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ n(
+      Y,
+      {
+        open: p,
+        slots: {
+          backdrop: L
+        },
+        className: "did-connect__container-dialog",
+        onClose: C,
+        PaperProps: {
           sx: {
-            touchAction: 'none',
-            maxWidth: '100%',
-            width: 500,
-            height: 'auto'
-          },
-          children: showModal ? /*#__PURE__*/_jsx(Component, {
-            ...rest,
-            onClose: wrapOnClose,
-            setColor: setColor,
-            hideCloseButton: true,
-            mode: openVariant
-          }) : null
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsx(Dialog, {
-      open: isOpen,
-      slots: {
-        backdrop: BackdropWrap
-      },
-      className: "did-connect__container-dialog",
-      onClose: handleOnClose,
-      PaperProps: {
-        sx: {
-          // 避免样式被 server 中的定义覆盖
-          '&.MuiPaper-rounded': {
-            borderRadius: '12px !important'
-          },
-          position: 'relative',
-          ...glowStyle
-        }
-      },
-      children: /*#__PURE__*/_jsx(DialogContent, {
-        sx: {
-          maxWidth: 'calc(100vw - 18px)',
-          maxHeight: 'calc(100vh - 18px)',
-          p: '0px !important',
-          height: 'auto',
-          backgroundColor: 'background.default',
-          borderRadius: '12px !important',
-          zIndex: 1
+            // 避免样式被 server 中的定义覆盖
+            "&.MuiPaper-rounded": {
+              borderRadius: "12px !important"
+            },
+            position: "relative",
+            ...v
+          }
         },
-        children: showModal ? /*#__PURE__*/_jsx(Component, {
-          ...rest,
-          onClose: wrapOnClose,
-          setColor: setColor,
-          hideCloseButton: hideCloseButton,
-          mode: openVariant
-        }) : null
-      })
-    });
+        children: /* @__PURE__ */ n(
+          Z,
+          {
+            sx: {
+              maxWidth: "calc(100vw - 18px)",
+              maxHeight: "calc(100vh - 18px)",
+              p: "0px !important",
+              height: "auto",
+              backgroundColor: "background.default",
+              borderRadius: "12px !important",
+              zIndex: 1
+            },
+            children: $ ? /* @__PURE__ */ n(
+              l,
+              {
+                ...e,
+                onClose: b,
+                setColor: x,
+                hideCloseButton: h,
+                mode: r
+              }
+            ) : null
+          }
+        )
+      }
+    );
   }
-  return WithContainerComponent;
-}
+  return m;
+}
+export {
+  fo as default
+};

package/lib/DIDConnect/with-ux-theme.js

@@ -1,23 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createTheme, useTheme } from '@mui/material';
-import { DID_CONNECT_THEME_LIGHT, DID_CONNECT_THEME_DARK } from '@blocklet/theme';
-import { ThemeProvider } from '../Theme';
-
-// DID Connect 使用自己的 Theme 配置，不受 Blocklet theme 影响
-const themeLight = createTheme(DID_CONNECT_THEME_LIGHT);
-const themeDark = createTheme(DID_CONNECT_THEME_DARK);
-export default function withUxTheme(Component) {
-  function WithUxThemeComponent(props) {
-    const {
-      palette
-    } = useTheme();
-    const theme = palette.mode === 'dark' ? themeDark : themeLight;
-    return /*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(Component, {
-        ...props
-      })
-    });
+import { jsx as e } from "react/jsx-runtime";
+import { createTheme as t, useTheme as i } from "@mui/material";
+import { DID_CONNECT_THEME_LIGHT as T, DID_CONNECT_THEME_DARK as c } from "@blocklet/theme";
+import "../Theme/theme.js";
+import p from "../Theme/theme-provider.js";
+const f = t(T), s = t(c);
+function d(o) {
+  function r(m) {
+    const { palette: n } = i(), h = n.mode === "dark" ? s : f;
+    return /* @__PURE__ */ e(p, { theme: h, children: /* @__PURE__ */ e(o, { ...m }) });
   }
-  return WithUxThemeComponent;
-}
+  return r;
+}
+export {
+  d as default
+};

package/lib/Datatable/CustomToolbar.d.ts

@@ -1,3 +1,4 @@
+import { default as PropTypes } from 'prop-types';
 declare function CustomToolbar(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace CustomToolbar {
     namespace propTypes {
@@ -18,20 +19,5 @@ declare namespace CustomToolbar {
         let searchClose: PropTypes.Validator<(...args: any[]) => any>;
         let tableRef: PropTypes.Validator<(...args: any[]) => any>;
     }
-    namespace defaultProps {
-        let data_1: never[];
-        export { data_1 as data };
-        let components_1: {};
-        export { components_1 as components };
-        let filterList_1: never[];
-        export { filterList_1 as filterList };
-        let filterData_1: never[];
-        export { filterData_1 as filterData };
-        let title_1: string;
-        export { title_1 as title };
-        let searchText_1: null;
-        export { searchText_1 as searchText };
-    }
 }
 export default CustomToolbar;
-import PropTypes from 'prop-types';