@blocklet/ui-react 3.1.6 → 3.1.7

package/lib/common/wizard-modal.d.ts

@@ -1,16 +1,12 @@
-import { default as PropTypes } from 'prop-types';
-declare function WizardModal({ onFinished, show, onChangeVisible, loadingText, }: {
+declare function WizardModal({ onFinished, show, onChangeVisible, loadingText, defaultPath, ...props }: {
+    [x: string]: any;
     onFinished?: (() => void) | undefined;
     show?: boolean | undefined;
     onChangeVisible?: (() => void) | undefined;
     loadingText?: string | undefined;
+    defaultPath?: string | undefined;
 }): import("react/jsx-runtime").JSX.Element | null;
 declare namespace WizardModal {
-    namespace propTypes {
-        let onFinished: PropTypes.Requireable<(...args: any[]) => any>;
-        let show: PropTypes.Requireable<boolean>;
-        let onChangeVisible: PropTypes.Requireable<(...args: any[]) => any>;
-        let loadingText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
+    let propTypes: any;
 }
 export default WizardModal;

package/lib/common/wizard-modal.js

@@ -1,51 +1,57 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { useLocaleContext as P } from "@arcblock/ux/lib/Locale/context";
-import { useTheme as T, useMediaQuery as j, Dialog as D, Box as R, CircularProgress as E, Typography as M } from "@mui/material";
-import a from "prop-types";
-import { useState as g, useRef as h, useEffect as s } from "react";
-import { withQuery as A, joinURL as F } from "ufo";
-const b = "/.well-known/service/wizard/bind-account";
-function B({
-  onFinished: y = () => {
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
+import { Dialog as C, useTheme as D, useMediaQuery as E, Box as R, CircularProgress as M, Typography as A } from "@mui/material";
+import F from "lodash/merge";
+import t from "prop-types";
+import { useState as b, useRef as y, useEffect as s } from "react";
+import { withQuery as B, joinURL as Q } from "ufo";
+const _ = "/.well-known/service/onboard/bind-account";
+function H({
+  onFinished: z = () => {
   },
-  show: o = !1,
-  onChangeVisible: v = () => {
+  show: n = !1,
+  onChangeVisible: k = () => {
   },
-  loadingText: l = ""
+  loadingText: l = "",
+  defaultPath: c = _,
+  ...d
 }) {
-  const [r, n] = g(o), [c, d] = g(!1), [C, u] = g(() => localStorage.getItem("wizard-current-url") || b), z = h(y), f = h(), m = h(null), { locale: I } = P(), L = T(), p = j(L.breakpoints.down("sm"));
-  if (z.current = y, f.current = () => {
-    if (m.current?.contentWindow)
+  const [r, i] = b(n), [u, f] = b(!1), [I, m] = b(() => {
+    const e = localStorage.getItem("wizard-current-url");
+    return e?.includes("/.well-known/service/onboard") ? e : c;
+  }), x = y(z), p = y(), w = y(null), { locale: L } = j(), S = D(), g = E(S.breakpoints.down("sm"));
+  if (x.current = z, p.current = () => {
+    if (w.current?.contentWindow)
       try {
-        const t = new URL(m.current.contentWindow.location.href).pathname;
-        localStorage.setItem("wizard-current-url", t), u(t);
+        const o = new URL(w.current.contentWindow.location.href).pathname;
+        localStorage.setItem("wizard-current-url", o), m(o);
       } catch (e) {
-        u(b), console.warn("Failed to save wizard URL:", e);
+        m(c), console.warn("Failed to save wizard URL:", e);
       }
-    localStorage.setItem("wizard-completed", "true"), n(!1), v(!1);
+    localStorage.setItem("wizard-completed", "true"), i(!1), k(!1);
   }, s(() => {
-    o !== r && n(o);
-  }, [o]), s(() => {
-    !r && c && d(!1);
+    n !== r && i(n);
+  }, [n]), s(() => {
+    !r && u && f(!1);
   }, [r]), s(() => {
-    const e = (t) => {
-      if (t.origin !== window.location.origin)
+    const e = (o) => {
+      if (o.origin !== window.location.origin)
         return;
-      const { type: k, data: U } = t.data || {};
-      switch (k) {
+      const { type: W, data: T } = o.data || {};
+      switch (W) {
         case "wizard.loaded":
-          d(!0);
+          f(!0);
           break;
         case "wizard.finished": {
-          n(!1), u(b), localStorage.removeItem("wizard-current-url"), localStorage.setItem("wizard-completed", "true");
-          const w = z.current?.(U);
-          w instanceof Promise ? w.then((W) => {
-            W !== !1 && window.location.reload();
-          }) : w !== !1 && window.location.reload();
+          i(!1), m(c), localStorage.removeItem("wizard-current-url"), localStorage.setItem("wizard-completed", "true");
+          const h = x.current?.(T);
+          h instanceof Promise ? h.then((P) => {
+            P !== !1 && window.location.reload();
+          }) : h !== !1 && window.location.reload();
           break;
         }
         case "wizard.close": {
-          f.current();
+          p.current();
           break;
         }
       }
@@ -54,45 +60,53 @@ function B({
       window.removeEventListener("message", e);
     };
   }, []), s(() => {
-    localStorage.getItem("wizard-completed") || n(!0);
+    localStorage.getItem("wizard-completed") || i(!0);
   }, []), !r)
     return null;
-  const S = A(F(window.location.origin, C), {
-    locale: I
+  const U = B(Q(window.location.origin, I), {
+    locale: L
   });
-  return /* @__PURE__ */ x(
-    D,
+  return /* @__PURE__ */ v(
+    C,
     {
+      id: "wizard-dialog",
       open: r,
-      onClose: () => f.current(),
+      onClose: () => p.current(),
       fullWidth: !0,
-      maxWidth: p ? !1 : "md",
-      fullScreen: p,
-      slotProps: {
-        paper: {
-          sx: {
-            margin: 0,
-            borderRadius: 0,
-            position: "relative",
-            overflow: "hidden",
-            ...p ? { borderRadius: 0 } : {
-              borderRadius: 1,
-              height: "max(800px, 80vh)"
+      maxWidth: g ? !1 : "md",
+      fullScreen: g,
+      ...d,
+      slotProps: F(
+        {},
+        {
+          paper: {
+            sx: {
+              margin: 0,
+              borderRadius: 0,
+              position: "relative",
+              overflow: "hidden",
+              ...g ? { borderRadius: 0 } : {
+                borderRadius: 1,
+                height: "720px"
+              }
             }
           }
-        }
-      },
+        },
+        d.slotProps
+      ),
       sx: {
         "& .MuiBackdrop-root": {
           backgroundColor: "rgba(0, 0, 0, 0.5)"
-        }
+        },
+        ...d.sx
       },
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ a(
           "iframe",
           {
-            ref: m,
-            src: S,
+            ref: w,
+            id: "wizard-iframe",
+            src: U,
             title: "Setup Wizard",
             style: {
               width: "100%",
@@ -100,13 +114,13 @@ function B({
               border: 0,
               padding: 0,
               margin: 0,
-              opacity: c ? 1 : 0,
+              opacity: u ? 1 : 0,
               transition: "opacity 0.3s ease-in-out"
             },
-            onLoad: () => d(!0)
+            onLoad: () => f(!0)
           }
         ),
-        c ? null : /* @__PURE__ */ i(
+        u ? null : /* @__PURE__ */ a(
           R,
           {
             sx: {
@@ -120,9 +134,9 @@ function B({
               alignItems: "center",
               bgcolor: "background.paper"
             },
-            children: /* @__PURE__ */ x(R, { sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 }, children: [
-              /* @__PURE__ */ i(E, {}),
-              typeof l == "string" ? /* @__PURE__ */ i(M, { variant: "body1", children: l }) : l
+            children: /* @__PURE__ */ v(R, { sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 }, children: [
+              /* @__PURE__ */ a(M, {}),
+              typeof l == "string" ? /* @__PURE__ */ a(A, { variant: "body1", children: l }) : l
             ] })
           }
         )
@@ -130,12 +144,14 @@ function B({
     }
   );
 }
-B.propTypes = {
-  onFinished: a.func,
-  show: a.bool,
-  onChangeVisible: a.func,
-  loadingText: a.node
+H.propTypes = {
+  onFinished: t.func,
+  show: t.bool,
+  onChangeVisible: t.func,
+  loadingText: t.node,
+  defaultPath: t.string,
+  ...C.propTypes
 };
 export {
-  B as default
+  H as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.47",
     "@abtnode/util": "^1.16.47",
-    "@arcblock/bridge": "3.1.6",
-    "@arcblock/icons": "3.1.6",
-    "@arcblock/react-hooks": "3.1.6",
+    "@arcblock/bridge": "3.1.7",
+    "@arcblock/icons": "3.1.7",
+    "@arcblock/react-hooks": "3.1.7",
     "@arcblock/ws": "^1.21.2",
     "@blocklet/constant": "^1.16.47",
     "@blocklet/did-space-react": "^1.1.14",
@@ -84,7 +84,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.1.6",
+    "@arcblock/did-connect-react": "3.1.7",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -92,5 +92,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "d3267421c4d35038b226d34edc0e7bc943c5c926"
+  "gitHead": "8f0b8300d7c73a1d82f7b76d3e7c293f921b260c"
 }

package/src/common/wizard-modal.jsx

@@ -1,22 +1,29 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, CircularProgress, Dialog, Typography, useMediaQuery, useTheme } from '@mui/material';
+import merge from 'lodash/merge';
 import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { joinURL, withQuery } from 'ufo';
 
-const DEFAULT_WIZARD_PATH = '/.well-known/service/wizard/bind-account';
+const DEFAULT_WIZARD_PATH = '/.well-known/service/onboard/bind-account';
 
 export default function WizardModal({
   onFinished = () => {},
   show = false,
   onChangeVisible = () => {},
   loadingText = '',
+  defaultPath = DEFAULT_WIZARD_PATH,
+  ...props
 }) {
   const [open, setOpen] = useState(show);
   const [loaded, setLoaded] = useState(false);
   const [currentUrl, setCurrentUrl] = useState(() => {
     // 从 localStorage 恢复上次的 URL
-    return localStorage.getItem('wizard-current-url') || DEFAULT_WIZARD_PATH;
+    const savedUrl = localStorage.getItem('wizard-current-url');
+    if (savedUrl?.includes('/.well-known/service/onboard')) {
+      return savedUrl;
+    }
+    return defaultPath;
   });
   const onFinishedRef = useRef(onFinished);
   const handleCloseRef = useRef();
@@ -34,7 +41,7 @@ export default function WizardModal({
         localStorage.setItem('wizard-current-url', savedUrl);
         setCurrentUrl(savedUrl);
       } catch (e) {
-        setCurrentUrl(DEFAULT_WIZARD_PATH);
+        setCurrentUrl(defaultPath);
         console.warn('Failed to save wizard URL:', e);
       }
     }
@@ -72,7 +79,7 @@ export default function WizardModal({
         case 'wizard.finished': {
           setOpen(false);
           // 完成后重置为默认 URL
-          setCurrentUrl(DEFAULT_WIZARD_PATH);
+          setCurrentUrl(defaultPath);
           localStorage.removeItem('wizard-current-url');
           localStorage.setItem('wizard-completed', 'true');
           const result = onFinishedRef.current?.(data);
@@ -100,7 +107,7 @@ export default function WizardModal({
     return () => {
       window.removeEventListener('message', listener);
     };
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 控制弹窗显示
   useEffect(() => {
@@ -120,34 +127,42 @@ export default function WizardModal({
 
   return (
     <Dialog
+      id="wizard-dialog"
       open={open}
       onClose={() => handleCloseRef.current()}
       fullWidth
       maxWidth={isMobile ? false : 'md'}
       fullScreen={isMobile}
-      slotProps={{
-        paper: {
-          sx: {
-            margin: 0,
-            borderRadius: 0,
-            position: 'relative',
-            overflow: 'hidden',
-            ...(isMobile
-              ? { borderRadius: 0 }
-              : {
-                  borderRadius: 1,
-                  height: 'max(800px, 80vh)',
-                }),
+      {...props}
+      slotProps={merge(
+        {},
+        {
+          paper: {
+            sx: {
+              margin: 0,
+              borderRadius: 0,
+              position: 'relative',
+              overflow: 'hidden',
+              ...(isMobile
+                ? { borderRadius: 0 }
+                : {
+                    borderRadius: 1,
+                    height: '720px',
+                  }),
+            },
           },
         },
-      }}
+        props.slotProps
+      )}
       sx={{
         '& .MuiBackdrop-root': {
           backgroundColor: 'rgba(0, 0, 0, 0.5)',
         },
+        ...props.sx,
       }}>
       <iframe
         ref={iframeRef}
+        id="wizard-iframe"
         src={src}
         title="Setup Wizard"
         style={{
@@ -189,4 +204,6 @@ WizardModal.propTypes = {
   show: PropTypes.bool,
   onChangeVisible: PropTypes.func,
   loadingText: PropTypes.node,
+  defaultPath: PropTypes.string,
+  ...Dialog.propTypes,
 };