@blocklet/ui-react 2.10.64 → 2.10.66

package/lib/UserCenter/components/storage/connected.js

@@ -4,25 +4,27 @@ import { Box, Typography } from "@mui/material";
 import { SpaceCard, SessionConnectTo } from "@blocklet/did-space-react";
 import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
 import Action from "./action.js";
+import useMobile from "../../../hooks/use-mobile.js";
 function Connected({ spaceGateway }) {
   const { t } = useLocaleContext();
   const { updateSpaceGateway, session } = useConfigUserSpaceContext();
+  const isMobile = useMobile();
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: "12px", children: [
       /* @__PURE__ */ jsx(Typography, { fontSize: "16px", fontWeight: "bold", children: t("storage.spaces.connected.title") }),
-      /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway })
+      !isMobile && /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway })
     ] }),
     /* @__PURE__ */ jsx(Box, { children: spaceGateway && /* @__PURE__ */ jsx(
       SpaceCard,
       {
-        sx: { marginTop: "12px", "&.selected": { borderColor: "primary.main" } },
         endpoint: spaceGateway.endpoint,
         deps: [spaceGateway],
         selected: true,
         action: (props) => /* @__PURE__ */ jsx(Action, { session, ...props })
       },
       spaceGateway.endpoint
-    ) })
+    ) }),
+    isMobile && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: 2 }, children: /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway }) })
   ] });
 }
 export default Connected;

package/lib/hooks/use-mobile.d.ts

@@ -1,4 +1,4 @@
 import { Breakpoint } from '@mui/material';
-export default function useMobile({ key }: {
+export default function useMobile({ key }?: {
     key?: number | Breakpoint;
 }): boolean;

package/lib/hooks/use-mobile.js

@@ -1,5 +1,5 @@
 import { useTheme, useMediaQuery } from "@mui/material";
-export default function useMobile({ key = "sm" }) {
+export default function useMobile({ key = "sm" } = {}) {
   const theme = useTheme();
   return useMediaQuery(theme.breakpoints.down(key));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.64",
+  "version": "2.10.66",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.64",
-    "@arcblock/react-hooks": "^2.10.64",
+    "@arcblock/bridge": "^2.10.66",
+    "@arcblock/react-hooks": "^2.10.66",
     "@blocklet/did-space-react": "^0.5.65",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -80,5 +80,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b5362da4f7e1caa78ed39a37f3844e193d9d289f"
+  "gitHead": "39618b5825c36e842a8c50af5967a95c19481341"
 }

package/src/UserCenter/components/storage/connected.tsx

@@ -3,10 +3,12 @@ import { Box, Typography } from '@mui/material';
 import { SpaceCard, SessionConnectTo } from '@blocklet/did-space-react';
 import { SpaceGateway, useConfigUserSpaceContext } from '../../../contexts/config-user-space';
 import Action from './action';
+import useMobile from '../../../hooks/use-mobile';
 
 function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined }) {
   const { t } = useLocaleContext();
   const { updateSpaceGateway, session } = useConfigUserSpaceContext();
+  const isMobile = useMobile();
 
   return (
     <Box display="flex" flexDirection="column">
@@ -14,12 +16,11 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
         <Typography fontSize="16px" fontWeight="bold">
           {t('storage.spaces.connected.title')}
         </Typography>
-        <SessionConnectTo session={session} onConnected={updateSpaceGateway} />
+        {!isMobile && <SessionConnectTo session={session} onConnected={updateSpaceGateway} />}
       </Box>
       <Box>
         {spaceGateway && (
           <SpaceCard
-            sx={{ marginTop: '12px', '&.selected': { borderColor: 'primary.main' } }}
             key={spaceGateway.endpoint}
             endpoint={spaceGateway.endpoint}
             deps={[spaceGateway]}
@@ -29,6 +30,11 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
           />
         )}
       </Box>
+      {isMobile && (
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}>
+          <SessionConnectTo session={session} onConnected={updateSpaceGateway} />
+        </Box>
+      )}
     </Box>
   );
 }

package/src/hooks/use-mobile.tsx

@@ -1,6 +1,6 @@
 import { Breakpoint, useTheme, useMediaQuery } from '@mui/material';
 
-export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint }) {
+export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint } = {}) {
   const theme = useTheme();
   return useMediaQuery(theme.breakpoints.down(key));
 }