@blocklet/ui-react 2.9.90 → 2.10.0

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

@@ -1,135 +1,107 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
-var _OpenInNew = _interopRequireDefault(require("@mui/icons-material/OpenInNew"));
-var _spaceConnected = _interopRequireDefault(require("./icons/space-connected.svg?react"));
-var _previewNft = _interopRequireDefault(require("./preview-nft"));
-var _useMobile = _interopRequireDefault(require("../../../hooks/use-mobile"));
-var _spaces = require("../../../libs/spaces");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, IconButton, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import CheckIcon from "@mui/icons-material/Check";
+import styled from "@emotion/styled";
+import DidAddress from "@arcblock/ux/lib/DID";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import SpacesConnectedSvg from "./icons/space-connected.svg?react";
+import PreviewSpaceNft from "./preview-nft.js";
+import useMobile from "../../../hooks/use-mobile.js";
+import { getSpaceHomeUrl, getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
 function SpaceItem({
   spaceGateway,
   connected,
   onDisconnect,
   ...rest
 }) {
-  const isMobile = (0, _useMobile.default)({});
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(BoxContainer, {
-    style: {
-      position: "relative"
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        backgroundColor: connected ? "#F0FDFF" : "inherit",
-        "&:hover": {
-          backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
-        },
-        borderRadius: "8px"
+  const isMobile = useMobile({});
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(
+    BoxContainer,
+    {
+      style: {
+        position: "relative"
       },
-      display: "flex",
-      padding: "12px 20px",
-      ...rest,
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        display: "flex",
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_previewNft.default, {
-          alt: spaceGateway.did,
-          src: (0, _spaces.getSpaceNftDisplayUrlFromEndpoint)(spaceGateway.endpoint)
-        })
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        className: "spaces-info",
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "column",
-        sx: {
-          marginLeft: "20px",
-          padding: "0px 0px"
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          className: "spaces-info",
-          display: "flex",
-          maxWidth: "360px",
-          alignItems: "center",
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            color: connected ? "primary" : "inherit",
-            fontWeight: "bold",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
             sx: {
-              display: "-webkit-box",
-              wordBreak: "break-word",
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden"
+              backgroundColor: connected ? "#F0FDFF" : "inherit",
+              "&:hover": {
+                backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
+              },
+              borderRadius: "8px"
             },
-            children: spaceGateway.name
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
-            label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_spaceConnected.default, {
-                style: {
-                  marginRight: "4px"
+            display: "flex",
+            padding: "12px 20px",
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(PreviewSpaceNft, { alt: spaceGateway.did, src: getSpaceNftDisplayUrlFromEndpoint(spaceGateway.endpoint) }) }),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  className: "spaces-info",
+                  display: "flex",
+                  flexGrow: 1,
+                  flexDirection: "column",
+                  sx: { marginLeft: "20px", padding: "0px 0px" },
+                  children: [
+                    /* @__PURE__ */ jsxs(Box, { className: "spaces-info", display: "flex", maxWidth: "360px", alignItems: "center", children: [
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          color: connected ? "primary" : "inherit",
+                          fontWeight: "bold",
+                          sx: {
+                            display: "-webkit-box",
+                            wordBreak: "break-word",
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: "vertical",
+                            overflow: "hidden"
+                          },
+                          children: spaceGateway.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Chip,
+                        {
+                          label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(SpacesConnectedSvg, { style: { marginRight: "4px" } }),
+                            t("storage.spaces.connected.tag")
+                          ] }),
+                          variant: "outlined",
+                          size: "small",
+                          style: { marginLeft: isMobile ? void 0 : "20px", fontWeight: "bold" }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(Box, { display: "flex", color: "#9397A1", marginTop: "8px", children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          fontSize: "14px"
+                        },
+                        color: "#9397A1",
+                        children: spaceGateway.did && /* @__PURE__ */ jsx(DidAddress, { copyable: false, size: 14, compact: true, responsive: false, did: spaceGateway.did })
+                      }
+                    ) })
+                  ]
                 }
-              }), t("storage.spaces.connected.tag")]
-            }),
-            variant: "outlined",
-            size: "small",
-            style: {
-              marginLeft: isMobile ? void 0 : "20px",
-              fontWeight: "bold"
-            }
-          })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          display: "flex",
-          color: "#9397A1",
-          marginTop: "8px",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              display: "inline-flex",
-              alignItems: "center",
-              fontSize: "14px"
-            },
-            color: "#9397A1",
-            children: spaceGateway.did && /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
-              copyable: false,
-              size: 14,
-              compact: true,
-              responsive: false,
-              did: spaceGateway.did
-            })
-          })
-        })]
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          display: "flex",
-          alignItems: "center",
-          width: "100%",
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-            size: "small",
-            onClick: () => window.open((0, _spaces.getSpaceHomeUrl)(spaceGateway.endpoint)),
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_OpenInNew.default, {})
-          })
-        })
-      })]
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      className: "selected-container selected",
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Check.default, {
-        className: "selected-icon"
-      })
-    })]
-  });
+              ),
+              /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", width: "100%", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => window.open(getSpaceHomeUrl(spaceGateway.endpoint)), children: /* @__PURE__ */ jsx(OpenInNewIcon, {}) }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { className: "selected-container selected", children: /* @__PURE__ */ jsx(CheckIcon, { className: "selected-icon" }) })
+      ]
+    }
+  );
 }
-const BoxContainer = (0, _styled.default)(_material.Box)`
+const BoxContainer = styled(Box)`
   .selected-container {
     position: absolute;
     right: 0px;
@@ -183,4 +155,4 @@ const BoxContainer = (0, _styled.default)(_material.Box)`
     }
   }
 `;
-module.exports = SpaceItem;
+export default SpaceItem;

package/lib/UserCenter/components/storage/preview-nft.js

@@ -1,88 +1,80 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _reactPlaceholder = _interopRequireDefault(require("react-placeholder"));
-var _material = require("@mui/material");
-var _CloseOutlined = _interopRequireDefault(require("@mui/icons-material/CloseOutlined"));
-var _emptySpacesNft = _interopRequireDefault(require("./icons/empty-spaces-nft.svg?react"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function PreviewSpaceNft({
-  src,
-  alt
-}) {
-  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = (0, _react.useState)(false);
-  const [open, setOpen] = (0, _react.useState)(false);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import ReactPlaceholder from "react-placeholder";
+import { Dialog, DialogContent, IconButton } from "@mui/material";
+import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
+import EmptySpacesNFT from "./icons/empty-spaces-nft.svg?react";
+function PreviewSpaceNft({ src, alt }) {
+  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
+  const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactPlaceholder.default, {
-      ready: showEmptySpaceNFT,
-      customPlaceholder:
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      /* @__PURE__ */
-      (0, _jsxRuntime.jsx)("img", {
-        style: {
-          cursor: "pointer"
-        },
-        alt,
-        src,
-        width: "58px",
-        height: "58px",
-        onError: () => setShowEmptySpaceNFT(true),
-        onClick: handleOpen
-      }),
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_emptySpacesNft.default, {
-        style: {
-          cursor: "pointer",
-          width: "58px",
-          height: "58px"
-        },
-        onClick: handleOpen
-      })
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Dialog, {
-      open,
-      onClose: handleClose,
-      "aria-labelledby": "preview-space-nft-display",
-      "aria-describedby": "preview space nft display",
-      fullWidth: true,
-      maxWidth: "md",
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogContent, {
-        style: {
-          padding: "8px 8px",
-          backgroundColor: "rgba(0,0,0,0.8)"
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-          color: "inherit",
-          onClick: handleClose,
-          "aria-label": "close",
-          style: {
-            position: "absolute",
-            top: 8,
-            right: 8,
-            color: "white"
-          },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_CloseOutlined.default, {})
-        }), showEmptySpaceNFT ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_emptySpacesNft.default, {
-          style: {
-            width: "100%",
-            height: "75vh"
-          }
-        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
-          src,
-          alt: "",
-          style: {
-            width: "100%",
-            height: "75vh",
-            objectFit: "contain"
-          }
-        })]
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ReactPlaceholder,
+      {
+        ready: showEmptySpaceNFT,
+        customPlaceholder: (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              style: { cursor: "pointer" },
+              alt,
+              src,
+              width: "58px",
+              height: "58px",
+              onError: () => setShowEmptySpaceNFT(true),
+              onClick: handleOpen
+            }
+          )
+        ),
+        children: /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { cursor: "pointer", width: "58px", height: "58px" }, onClick: handleOpen })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onClose: handleClose,
+        "aria-labelledby": "preview-space-nft-display",
+        "aria-describedby": "preview space nft display",
+        fullWidth: true,
+        maxWidth: "md",
+        children: /* @__PURE__ */ jsxs(DialogContent, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              color: "inherit",
+              onClick: handleClose,
+              "aria-label": "close",
+              style: { position: "absolute", top: 8, right: 8, color: "white" },
+              children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
+            }
+          ),
+          showEmptySpaceNFT ? /* @__PURE__ */ jsx(
+            EmptySpacesNFT,
+            {
+              style: {
+                width: "100%",
+                height: "75vh"
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: "",
+              style: {
+                width: "100%",
+                height: "75vh",
+                objectFit: "contain"
+              }
+            }
+          )
+        ] })
+      }
+    )
+  ] });
 }
-module.exports = PreviewSpaceNft;
+export default PreviewSpaceNft;

package/lib/UserCenter/components/third-party-login/index.js

@@ -1,83 +1,70 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = ThirdPartyLogin;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _utils = require("@arcblock/ux/lib/SessionUser/libs/utils");
-var _constant = require("@arcblock/ux/lib/Util/constant");
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _thirdPartyItem = _interopRequireDefault(require("./third-party-item"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ThirdPartyLogin({
-  user
-}) {
-  const {
-    session
-  } = (0, _react.useContext)(_Session.SessionContext);
-  const [oauthConfigs, setOauthConfigs] = (0, _react.useState)({});
-  const {
-    getOAuthConfigs
-  } = session.useOAuth();
-  (0, _ahooks.useAsyncEffect)(async () => {
+import { jsx } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import { Box } from "@mui/material";
+import { useAsyncEffect, useCreation } from "ahooks";
+import { getConnectedAccounts, getSourceProvider } from "@arcblock/ux/lib/SessionUser/libs/utils";
+import { LOGIN_PROVIDER } from "@arcblock/ux/lib/Util/constant";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import ThirdPartyItem from "./third-party-item.js";
+export default function ThirdPartyLogin({ user }) {
+  const { session } = useContext(SessionContext);
+  const [oauthConfigs, setOauthConfigs] = useState({});
+  const { getOAuthConfigs } = session.useOAuth();
+  useAsyncEffect(async () => {
     const data = await getOAuthConfigs({
       sourceAppPid: user?.sourceAppPid
     });
     setOauthConfigs(data);
   }, [user?.sourceAppPid]);
-  const availableProviders = (0, _ahooks.useCreation)(() => {
-    const oauthList = Object.keys(oauthConfigs).map(x => {
+  const availableProviders = useCreation(() => {
+    const oauthList = Object.keys(oauthConfigs).map((x) => {
       return {
         ...oauthConfigs[x],
         provider: x
       };
-    }).filter(x => x.enabled);
+    }).filter((x) => x.enabled);
     return oauthList;
   }, [oauthConfigs]);
-  const normalizedAccounts = (0, _ahooks.useCreation)(() => {
-    const connectedAccounts = (0, _utils.getConnectedAccounts)(user);
+  const normalizedAccounts = useCreation(() => {
+    const connectedAccounts = getConnectedAccounts(user);
     let removeAuth0 = false;
     let patchProvider = "";
-    let sourceProvider = (0, _utils.getSourceProvider)(user);
-    const auth0ConnectedAccount = connectedAccounts.find(x => x.provider === _constant.LOGIN_PROVIDER.AUTH0);
+    let sourceProvider = getSourceProvider(user);
+    const auth0ConnectedAccount = connectedAccounts.find((x) => x.provider === LOGIN_PROVIDER.AUTH0);
     if (auth0ConnectedAccount) {
       if (auth0ConnectedAccount.id.startsWith("google-oauth2|")) {
-        if (!connectedAccounts.some(x => x.provider === "google")) {
+        if (!connectedAccounts.some((x) => x.provider === "google")) {
           removeAuth0 = true;
-          patchProvider = _constant.LOGIN_PROVIDER.GOOGLE;
-          if (sourceProvider === _constant.LOGIN_PROVIDER.AUTH0) {
-            sourceProvider = _constant.LOGIN_PROVIDER.GOOGLE;
+          patchProvider = LOGIN_PROVIDER.GOOGLE;
+          if (sourceProvider === LOGIN_PROVIDER.AUTH0) {
+            sourceProvider = LOGIN_PROVIDER.GOOGLE;
           }
         }
       }
       if (auth0ConnectedAccount.id.startsWith("appleid|")) {
-        if (!connectedAccounts.some(x => x.provider === _constant.LOGIN_PROVIDER.APPLE)) {
+        if (!connectedAccounts.some((x) => x.provider === LOGIN_PROVIDER.APPLE)) {
           removeAuth0 = true;
-          patchProvider = _constant.LOGIN_PROVIDER.APPLE;
-          if (sourceProvider === _constant.LOGIN_PROVIDER.AUTH0) {
-            sourceProvider = _constant.LOGIN_PROVIDER.APPLE;
+          patchProvider = LOGIN_PROVIDER.APPLE;
+          if (sourceProvider === LOGIN_PROVIDER.AUTH0) {
+            sourceProvider = LOGIN_PROVIDER.APPLE;
           }
         }
       }
       if (auth0ConnectedAccount.id.startsWith("github|")) {
-        if (!connectedAccounts.some(x => x.provider === _constant.LOGIN_PROVIDER.GITHUB)) {
+        if (!connectedAccounts.some((x) => x.provider === LOGIN_PROVIDER.GITHUB)) {
           removeAuth0 = true;
-          patchProvider = _constant.LOGIN_PROVIDER.GITHUB;
-          if (sourceProvider === _constant.LOGIN_PROVIDER.AUTH0) {
-            sourceProvider = _constant.LOGIN_PROVIDER.GITHUB;
+          patchProvider = LOGIN_PROVIDER.GITHUB;
+          if (sourceProvider === LOGIN_PROVIDER.AUTH0) {
+            sourceProvider = LOGIN_PROVIDER.GITHUB;
           }
         }
       }
     }
-    const transformedProviders = availableProviders.map(x => {
-      if (x.provider === _constant.LOGIN_PROVIDER.AUTH0 && removeAuth0) {
+    const transformedProviders = availableProviders.map((x) => {
+      if (x.provider === LOGIN_PROVIDER.AUTH0 && removeAuth0) {
         return null;
       }
-      const findConnectedAccount = removeAuth0 && x.provider === patchProvider ? connectedAccounts.find(i => i.provider === _constant.LOGIN_PROVIDER.AUTH0) : connectedAccounts.find(i => i.provider === x.provider);
+      const findConnectedAccount = removeAuth0 && x.provider === patchProvider ? connectedAccounts.find((i) => i.provider === LOGIN_PROVIDER.AUTH0) : connectedAccounts.find((i) => i.provider === x.provider);
       if (findConnectedAccount) {
         return {
           ...x,
@@ -107,16 +94,17 @@ function ThirdPartyLogin({
     });
     return transformedProviders;
   }, [user?.connectedAccounts, availableProviders]);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-    sx: {
-      gap: 1,
-      display: "grid",
-      gridTemplateColumns: "1fr min-content"
-    },
-    children: normalizedAccounts.map(account => {
-      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_thirdPartyItem.default, {
-        item: account
-      }, account?.provider);
-    })
-  });
-}
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        gap: 1,
+        display: "grid",
+        gridTemplateColumns: "1fr min-content"
+      },
+      children: normalizedAccounts.map((account) => {
+        return /* @__PURE__ */ jsx(ThirdPartyItem, { item: account }, account?.provider);
+      })
+    }
+  );
+}