@blocklet/ui-react 3.1.6 → 3.1.8

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,53 @@
-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 { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { useLocaleContext as T } from "@arcblock/ux/lib/Locale/context";
+import { Dialog as R, useTheme as j, useMediaQuery as D, Box as v, CircularProgress as E, Typography as M } from "@mui/material";
+import P from "lodash/merge";
+import t from "prop-types";
+import { useState as h, useRef as b, useEffect as s } from "react";
 import { withQuery as A, joinURL as F } from "ufo";
-const b = "/.well-known/service/wizard/bind-account";
-function B({
+const B = "/.well-known/service/onboard/bind-account";
+function Q({
   onFinished: y = () => {
   },
-  show: o = !1,
-  onChangeVisible: v = () => {
+  show: n = !1,
+  onChangeVisible: C = () => {
   },
-  loadingText: l = ""
+  loadingText: l = "",
+  defaultPath: c = B,
+  ...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] = h(n), [u, f] = h(!1), [k, m] = h(() => {
+    const e = localStorage.getItem("wizard-current-url");
+    return e?.includes("/.well-known/service/onboard") ? e : c;
+  }), z = b(y), p = b(), g = b(null), { locale: I } = T(), L = j(), w = D(L.breakpoints.down("sm"));
+  if (z.current = y, p.current = () => {
+    if (g.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(g.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), C(!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: U, data: W } = o.data || {};
+      switch (U) {
         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"), z.current?.(W);
           break;
         }
         case "wizard.close": {
-          f.current();
+          p.current();
           break;
         }
       }
@@ -54,44 +56,52 @@ 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), {
+  const S = A(F(window.location.origin, k), {
     locale: I
   });
   return /* @__PURE__ */ x(
-    D,
+    R,
     {
+      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: w ? !1 : "md",
+      fullScreen: w,
+      ...d,
+      slotProps: P(
+        {},
+        {
+          paper: {
+            sx: {
+              margin: 0,
+              borderRadius: 0,
+              position: "relative",
+              overflow: "hidden",
+              ...w ? { 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,
+            ref: g,
+            id: "wizard-iframe",
             src: S,
             title: "Setup Wizard",
             style: {
@@ -100,14 +110,14 @@ 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(
-          R,
+        u ? null : /* @__PURE__ */ a(
+          v,
           {
             sx: {
               position: "absolute",
@@ -120,9 +130,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__ */ x(v, { sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 1 }, children: [
+              /* @__PURE__ */ a(E, {}),
+              typeof l == "string" ? /* @__PURE__ */ a(M, { variant: "body1", children: l }) : l
             ] })
           }
         )
@@ -130,12 +140,14 @@ function B({
     }
   );
 }
-B.propTypes = {
-  onFinished: a.func,
-  show: a.bool,
-  onChangeVisible: a.func,
-  loadingText: a.node
+Q.propTypes = {
+  onFinished: t.func,
+  show: t.bool,
+  onChangeVisible: t.func,
+  loadingText: t.node,
+  defaultPath: t.string,
+  ...R.propTypes
 };
 export {
-  B as default
+  Q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.1.6",
+  "version": "3.1.8",
   "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.8",
+    "@arcblock/icons": "3.1.8",
+    "@arcblock/react-hooks": "3.1.8",
     "@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.8",
     "@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": "bb291c7f0f1afa39ca3dc07471c63b118a377cbe"
 }

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,19 +79,10 @@ 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);
-          if (result instanceof Promise) {
-            result.then((reload) => {
-              if (reload !== false) {
-                window.location.reload();
-              }
-            });
-          } else if (result !== false) {
-            window.location.reload();
-          }
+          onFinishedRef.current?.(data);
           break;
         }
         case 'wizard.close': {
@@ -100,7 +98,7 @@ export default function WizardModal({
     return () => {
       window.removeEventListener('message', listener);
     };
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // 控制弹窗显示
   useEffect(() => {
@@ -120,34 +118,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 +195,6 @@ WizardModal.propTypes = {
   show: PropTypes.bool,
   onChangeVisible: PropTypes.func,
   loadingText: PropTypes.node,
+  defaultPath: PropTypes.string,
+  ...Dialog.propTypes,
 };