@arcblock/ux 2.13.70 → 3.0.0

package/lib/DIDConnect/did-connect-container.js

@@ -1,272 +1,256 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useRef, createElement as _createElement } from 'react';
-import { useBrowser } from '@arcblock/react-hooks';
-import { Backdrop, Box, Dialog, DialogContent, Drawer, SwipeableDrawer, useMediaQuery } from '@mui/material';
-import { useCreation, useDebounce } from 'ahooks';
-import colorConvert from 'color-convert';
-import { getDIDMotifInfo } from '@arcblock/did-motif';
-import noop from 'lodash/noop';
-import { useTheme } from '../Theme';
-import { mergeSx } from '../Util/style';
-import { getDIDColor, hexToRgba, isEthereumDid } from '../Util';
-import DIDConnectFooter from './did-connect-footer';
-const BackdropWrap = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((backdropProps, ref) => {
-  return /*#__PURE__*/_createElement(Backdrop, {
-    open: true,
-    ref: ref,
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { memo as J, createElement as U, useRef as X } from "react";
+import { useBrowser as Y } from "@arcblock/react-hooks";
+import { Backdrop as Z, useMediaQuery as P, useTheme as ee, Box as l, Drawer as oe, SwipeableDrawer as re, Dialog as ne, DialogContent as ae } from "@mui/material";
+import { useCreation as te, useDebounce as ie } from "ahooks";
+import de from "color-convert";
+import { getDIDMotifInfo as ce } from "@arcblock/did-motif";
+import le from "lodash/noop";
+import "../Theme/theme.js";
+import "../Theme/theme-provider.js";
+import { mergeSx as c } from "../Util/style.js";
+import { isEthereumDid as ue, getDIDColor as se, hexToRgba as u } from "../Util/index.js";
+import h from "./did-connect-footer.js";
+const j = J(({ ref: a, ...f }) => /* @__PURE__ */ U(
+  Z,
+  {
+    open: !0,
+    ref: a,
     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,
+    ...f,
     key: "background"
-  });
-}));
-export default function DIDConnectContainer({
-  open = false,
-  popup = false,
-  hideCloseButton = false,
-  children,
-  appPid,
-  slotProps,
-  onClose = noop,
-  keepMounted = false
-}) {
-  const color = useCreation(() => {
-    const did = appPid || window.blocklet.appPid;
-    const isEthDid = isEthereumDid(did);
-    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-    if (isEthDid) {
-      return getDIDColor(did);
-    }
-    return didMotifInfo.color;
-  }, []);
-  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();
-  const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
-  const debouncedOpen = useDebounce(open, {
-    wait: leavingScreenDelay
-  });
-
-  // eslint-disable-next-line no-unused-vars
-  const handleOnClose = (e, reason) => {
-    if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
-    onClose();
-  };
-  const showModal = debouncedOpen || open || keepMounted;
-  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 = open ? {
-    overflow: 'visible',
-    '&::before, &::after': {
+));
+function ye({
+  open: a = !1,
+  popup: f = !1,
+  hideCloseButton: w = !1,
+  children: g,
+  appPid: E,
+  slotProps: e,
+  onClose: G = le,
+  keepMounted: k = !1
+}) {
+  var y, A, L, _, B, I, z, M;
+  const n = te(() => {
+    const o = E || window.blocklet.appPid, r = ue(o), t = r ? void 0 : ce(o);
+    return r ? se(o) : t.color;
+  }, []), C = X(null), N = Y(), O = P("(max-width:640px)");
+  let s = "page";
+  f && (s = "dialog", O && N.mobile.any && (s = "drawer"));
+  const b = ee(), T = ((A = (y = b == null ? void 0 : b.transitions) == null ? void 0 : y.duration) == null ? void 0 : A.leavingScreen) || 500, W = ie(a, {
+    wait: T
+  }), D = (o, r) => {
+    ["backdropClick", "escapeKeyDown"].includes(r) || G();
+  }, R = W || a || k, F = w ? oe : re, H = de.hex.hsl(n), [$, v, d] = H, x = [0, 30, 60, 30, 0, 30, 60, 30], K = Math.max(...x), Q = Math.min(...x);
+  let p = !1;
+  (d * (100 + K) / 100 > 100 || d * (100 + Q) / 100 < 0) && (p = !0);
+  const V = `linear-gradient(45deg, ${x.map((o) => {
+    let r = d * (100 + o) / 100, t = 0.6;
+    return p ? t = 0.5 * (100 + o) / 100 : r = d * (100 + o) / 100, `hsla(${$}, ${v}%, ${r}%, ${t})`;
+  }).join(", ")})`, q = `linear-gradient(45deg, ${x.map((o) => {
+    let r = d * (100 + o) / 100, t = 0.2;
+    return p ? t = 0.3 * (100 + o) / 100 : r = d * (100 + o) / 100, `hsla(${$}, ${v}%, ${r}%, ${t})`;
+  }).join(", ")})`, S = a ? {
+    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: V,
+      backgroundSize: "300% 300%",
+      backgroundRepeat: "no-repeat",
+      animation: "glowRotate 10s linear infinite",
+      borderRadius: "14px !important",
       zIndex: 0
     },
-    '&::after': {
-      background: backgroundGlow,
-      filter: 'blur(15px)'
+    "&::after": {
+      background: q,
+      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"
       }
     }
   } : {};
-  if (openVariant === 'page') {
-    return /*#__PURE__*/_jsx(Box, {
+  return s === "page" ? /* @__PURE__ */ i(
+    l,
+    {
       className: "did-connect__container-page",
-      sx: mergeSx({
-        borderRadius: 1,
-        position: 'relative',
-        zIndex: 1,
-        backgroundColor: 'background.default'
-      }, glowStyle, slotProps?.containerPage?.sx),
-      children: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          border: `1px solid ${hexToRgba(color, 0.1)}`,
-          m: '-1px',
-          position: 'relative',
-          borderRadius: '12px',
-          zIndex: 2,
-          overflow: 'hidden',
-          backgroundColor: 'background.default'
+      sx: c(
+        {
+          borderRadius: 1,
+          position: "relative",
+          zIndex: 1,
+          backgroundColor: "background.default"
         },
-        children: [children, /*#__PURE__*/_jsx(DIDConnectFooter, {
-          currentAppColor: color,
-          sx: mergeSx({
-            mx: 0
-          }, slotProps?.footer?.sx)
-        })]
-      })
-    });
-  }
-  if (openVariant === 'drawer') {
-    return /*#__PURE__*/_jsxs(DrawerComponent, {
+        S,
+        (L = e == null ? void 0 : e.containerPage) == null ? void 0 : L.sx
+      ),
+      children: /* @__PURE__ */ m(
+        l,
+        {
+          sx: {
+            border: `1px solid ${u(n, 0.1)}`,
+            m: "-1px",
+            position: "relative",
+            borderRadius: "12px",
+            zIndex: 2,
+            overflow: "hidden",
+            backgroundColor: "background.default"
+          },
+          children: [
+            g,
+            /* @__PURE__ */ i(h, { currentAppColor: n, sx: c({ mx: 0 }, (_ = e == null ? void 0 : e.footer) == null ? void 0 : _.sx) })
+          ]
+        }
+      )
+    }
+  ) : s === "drawer" ? /* @__PURE__ */ m(
+    F,
+    {
       className: "did-connect__container-drawer",
-      disableSwipeToOpen: true,
-      open: open,
+      disableSwipeToOpen: !0,
+      open: a,
       anchor: "bottom",
-      drawerDragger: drawerDragger.current
-      // @ts-ignore
-      ,
-      onClose: handleOnClose,
+      drawerDragger: C.current,
+      onClose: D,
       slots: {
-        backdrop: BackdropWrap
+        backdrop: j
       },
       PaperProps: {
-        sx: mergeSx({
-          backgroundColor: 'background.default',
-          borderRadius: 3,
-          // 保持跟 DID Wallet 一致
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-          p: '2px',
-          '.did-connect__root': {
-            backgroundColor: 'transparent'
-          },
-          overflow: 'hidden',
-          animation: open ? 'glowBreathe 7s linear infinite' : 'none',
-          '@keyframes glowBreathe': {
-            '0%, 100%': {
-              boxShadow: `
-                    inset 0 0 7px ${hexToRgba(color, 0.3)},
-                    inset 0 0 12px ${hexToRgba(color, 0.3)}`
+        sx: c(
+          {
+            backgroundColor: "background.default",
+            borderRadius: 3,
+            // 保持跟 DID Wallet 一致
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            p: "2px",
+            ".did-connect__root": {
+              backgroundColor: "transparent"
             },
-            '50%': {
-              boxShadow: `
-                    inset 0 0 18px ${hexToRgba(color, 0.7)},
-                    inset 0 0 24px ${hexToRgba(color, 0.5)}`
+            overflow: "hidden",
+            animation: a ? "glowBreathe 7s linear infinite" : "none",
+            "@keyframes glowBreathe": {
+              "0%, 100%": {
+                boxShadow: `
+                    inset 0 0 7px ${u(n, 0.3)},
+                    inset 0 0 12px ${u(n, 0.3)}`
+              },
+              "50%": {
+                boxShadow: `
+                    inset 0 0 18px ${u(n, 0.7)},
+                    inset 0 0 24px ${u(n, 0.5)}`
+              }
             }
-          }
-        }, slotProps?.containerDrawer?.sx)
+          },
+          (B = e == null ? void 0 : e.containerDrawer) == null ? void 0 : B.sx
+        )
       },
-      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: [
+        w ? null : /* @__PURE__ */ i(
+          l,
+          {
+            ref: C,
+            sx: {
+              px: 1,
+              pt: 2,
+              m: "auto",
+              mt: -1,
+              mb: -2,
+              zIndex: 2
+            },
+            children: /* @__PURE__ */ i(
+              l,
+              {
+                sx: {
+                  width: "48px",
+                  height: "4px",
+                  borderRadius: "100vw",
+                  backgroundColor: "rgba(0, 0, 0, 0.2)"
+                }
+              }
+            )
           }
-        })
-      }), /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          touchAction: 'none',
-          maxWidth: '100%',
-          width: 500,
-          height: 'auto',
-          backgroundColor: 'background.default'
-        },
-        children: [showModal ? children : null, /*#__PURE__*/_jsx(DIDConnectFooter, {
-          currentAppColor: color,
-          sx: mergeSx({
-            mx: 0
-          }, slotProps?.footer?.sx)
-        })]
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(Dialog, {
-    open: open,
-    slots: {
-      backdrop: BackdropWrap
-    },
-    keepMounted: keepMounted,
-    className: "did-connect__container-dialog",
-    onClose: handleOnClose,
-    PaperProps: {
-      sx: mergeSx({
-        // 避免样式被 server 中的定义覆盖
-        '&.MuiPaper-rounded': {
-          borderRadius: '12px !important'
-        },
-        position: 'relative',
-        backgroundColor: 'background.default'
-      }, glowStyle, slotProps?.containerDialog?.sx)
-    },
-    children: /*#__PURE__*/_jsxs(DialogContent, {
-      sx: {
-        maxWidth: 'calc(100vw - 18px)',
-        maxHeight: 'calc(100vh - 18px)',
-        p: '0px !important',
-        height: 'auto',
-        borderRadius: '12px !important',
-        zIndex: 1,
-        backgroundColor: 'background.default'
+        ),
+        /* @__PURE__ */ m(
+          l,
+          {
+            sx: {
+              touchAction: "none",
+              maxWidth: "100%",
+              width: 500,
+              height: "auto",
+              backgroundColor: "background.default"
+            },
+            children: [
+              R ? g : null,
+              /* @__PURE__ */ i(h, { currentAppColor: n, sx: c({ mx: 0 }, (I = e == null ? void 0 : e.footer) == null ? void 0 : I.sx) })
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i(
+    ne,
+    {
+      open: a,
+      slots: {
+        backdrop: j
+      },
+      keepMounted: k,
+      className: "did-connect__container-dialog",
+      onClose: D,
+      PaperProps: {
+        sx: c(
+          {
+            // 避免样式被 server 中的定义覆盖
+            "&.MuiPaper-rounded": {
+              borderRadius: "12px !important"
+            },
+            position: "relative",
+            backgroundColor: "background.default"
+          },
+          S,
+          (z = e == null ? void 0 : e.containerDialog) == null ? void 0 : z.sx
+        )
       },
-      children: [showModal ? children : null, /*#__PURE__*/_jsx(DIDConnectFooter, {
-        currentAppColor: color,
-        sx: mergeSx({
-          mx: 0
-        }, slotProps?.footer?.sx)
-      })]
-    })
-  });
-}
+      children: /* @__PURE__ */ m(
+        ae,
+        {
+          sx: {
+            maxWidth: "calc(100vw - 18px)",
+            maxHeight: "calc(100vh - 18px)",
+            p: "0px !important",
+            height: "auto",
+            borderRadius: "12px !important",
+            zIndex: 1,
+            backgroundColor: "background.default"
+          },
+          children: [
+            R ? g : null,
+            /* @__PURE__ */ i(h, { currentAppColor: n, sx: c({ mx: 0 }, (M = e == null ? void 0 : e.footer) == null ? void 0 : M.sx) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ye as default
+};

package/lib/DIDConnect/did-connect-footer.js

@@ -1,70 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { useCreation, useSize } from 'ahooks';
-import { useRef } from 'react';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import PoweredBy from './powered-by';
-import AppInfoItem from './app-info-item';
-import AppIcon from './app-icon';
-import { getDIDColor, hexToRgba } from '../Util';
-import { mergeSx } from '../Util/style';
-import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
-export default function DIDConnectFooter({
-  currentAppInfo = globalThis.blocklet,
-  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
-  sx
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Box as a } from "@mui/material";
+import { useSize as c, useCreation as d } from "ahooks";
+import { useRef as x } from "react";
+import u from "@arcblock/react-hooks/lib/useBrowser";
+import b from "./powered-by.js";
+import h from "./app-info-item.js";
+import w from "./app-icon.js";
+import { hexToRgba as g, getDIDColor as I } from "../Util/index.js";
+import { mergeSx as C } from "../Util/style.js";
+import { DID_CONNECT_MEDIUM_WIDTH as D } from "../Util/constant.js";
+function z({
+  currentAppInfo: r = globalThis.blocklet,
+  currentAppColor: n = ((s) => (s = globalThis.blocklet) == null ? void 0 : s.appPid)() ? I(((f) => (f = globalThis.blocklet) == null ? void 0 : f.appPid)()) : "#fff",
+  sx: l
 }) {
-  const browser = useBrowser();
-  const rootRef = useRef(null);
-  const size = useSize(rootRef);
-  const isSmallView = useCreation(() => {
-    if (size) {
-      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
+  const p = u(), t = x(null), o = c(t), i = d(() => o ? o.width < D - 50 : !0, [o, o == null ? void 0 : o.width]);
+  return /* @__PURE__ */ m(
+    a,
+    {
+      ref: t,
+      sx: C(
+        {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: 1,
+          fontSize: 12,
+          backgroundColor: g(n, 0.08),
+          // 需要保持跟 .did-connect__root 的规则一样
+          mx: i ? -2 : -3,
+          // eslint-disable-next-line no-nested-ternary
+          px: i ? p.arcSphere ? 1 : 2 : 3,
+          py: 1.5,
+          // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
+          overflow: "auto",
+          "&::-webkit-scrollbar": {
+            display: "none"
+            // 隐藏滚动条 (Webkit 浏览器)
+          },
+          "-ms-overflow-style": "none",
+          // 隐藏滚动条 (IE 浏览器)
+          "scrollbar-width": "none"
+          // 隐藏滚动条 (Firefox)
+        },
+        l
+      ),
+      className: "did-connect__footer",
+      children: [
+        /* @__PURE__ */ e(
+          h,
+          {
+            appInfo: r,
+            appLogo: /* @__PURE__ */ e(w, { appInfo: r, size: 24, sx: { flexShrink: 0 } }),
+            sx: {
+              flex: 1,
+              overflow: "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ e(b, { sx: { maxWidth: "100%", justifyContent: "end" } })
+      ]
     }
-    return true;
-  }, [size, size?.width]);
-  return /*#__PURE__*/_jsxs(Box, {
-    ref: rootRef,
-    sx: mergeSx({
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      gap: 1,
-      fontSize: 12,
-      backgroundColor: hexToRgba(currentAppColor, 0.08),
-      // 需要保持跟 .did-connect__root 的规则一样
-      mx: isSmallView ? -2 : -3,
-      // eslint-disable-next-line no-nested-ternary
-      px: isSmallView ? browser.arcSphere ? 1 : 2 : 3,
-      py: 1.5,
-      // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
-      overflow: 'auto',
-      '&::-webkit-scrollbar': {
-        display: 'none' // 隐藏滚动条 (Webkit 浏览器)
-      },
-      '-ms-overflow-style': 'none',
-      // 隐藏滚动条 (IE 浏览器)
-      'scrollbar-width': 'none' // 隐藏滚动条 (Firefox)
-    }, sx),
-    className: "did-connect__footer",
-    children: [/*#__PURE__*/_jsx(AppInfoItem, {
-      appInfo: currentAppInfo,
-      appLogo: /*#__PURE__*/_jsx(AppIcon, {
-        appInfo: currentAppInfo,
-        size: 24,
-        sx: {
-          flexShrink: 0
-        }
-      }),
-      sx: {
-        flex: 1,
-        overflow: 'hidden'
-      }
-    }), /*#__PURE__*/_jsx(PoweredBy, {
-      sx: {
-        maxWidth: '100%',
-        justifyContent: 'end'
-      }
-    })]
-  });
-}
+  );
+}
+export {
+  z as default
+};