@blocklet/ui-react 2.9.20 → 2.9.22

package/es/ComponentInstaller/index.d.ts

@@ -1,5 +1,5 @@
 export default ComponentInstaller;
-declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstalled, onError, children, closeByOutSize, onClose, fallback, roles, }: {
+declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstalled, onError, children, closeByOutSize, onClose, fallback, disabled, roles, }: {
     warnIcon: any;
     did: any;
     noPermissionMute: any;
@@ -9,10 +9,12 @@ declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstall
     closeByOutSize: any;
     onClose: any;
     fallback: any;
+    disabled: any;
     roles?: string[] | undefined;
-}): import("react").JSX.Element;
+}): any;
 declare namespace ComponentInstaller {
     namespace propTypes {
+        let disabled: any;
         let warnIcon: any;
         let did: any;
         let noPermissionMute: any;
@@ -25,6 +27,8 @@ declare namespace ComponentInstaller {
         let roles: any;
     }
     namespace defaultProps {
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
         let warnIcon_1: null;
         export { warnIcon_1 as warnIcon };
         let noPermissionMute_1: boolean;

package/es/ComponentInstaller/index.js

@@ -21,6 +21,7 @@ function ComponentInstaller({
   closeByOutSize,
   onClose,
   fallback,
+  disabled,
   roles = ["owner", "admin"]
 }) {
   const { locale } = useLocaleContext();
@@ -46,6 +47,9 @@ function ComponentInstaller({
     window.location.reload();
   };
   const size = 60;
+  if (disabled) {
+    return children;
+  }
   return /* @__PURE__ */ jsx(SessionPermission, { session: sessionCtx?.session, roles, children: ({ hasPermission }) => {
     if (installed) {
       return children;
@@ -274,6 +278,7 @@ function ComponentInstaller({
   } });
 }
 ComponentInstaller.propTypes = {
+  disabled: PropTypes.bool,
   warnIcon: PropTypes.node,
   did: PropTypes.string.isRequired,
   noPermissionMute: PropTypes.bool,
@@ -286,6 +291,7 @@ ComponentInstaller.propTypes = {
   roles: PropTypes.array
 };
 ComponentInstaller.defaultProps = {
+  disabled: false,
   warnIcon: null,
   noPermissionMute: false,
   onInstalled: null,

package/es/ComponentInstaller/use-component-installed.d.ts

@@ -6,8 +6,8 @@ declare function useComponentInstalled({ did, onInstalled, onError }: {
 }): {
     optionalComponent: any;
     installed: any;
-    installUrl: string;
-    storeUrl: string;
+    installUrl: any;
+    storeUrl: any;
     installStatus: string;
     setInstallStatus: import("react").Dispatch<import("react").SetStateAction<string>>;
     installStatusDone: boolean;

package/es/ComponentInstaller/use-component-installed.js

@@ -1,11 +1,14 @@
 import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
 import { useMemo, useRef, useState, useEffect } from 'react';
+import urlJoin from 'url-join';
 
 function useComponentInstalled({ did, onInstalled, onError }) {
-  const { optionalComponents, componentMountPoints } = window.blocklet;
+  const [installStatus, setInstallStatus] = useState('');
   const onInstalledRef = useRef({ onInstalled, onError });
   onInstalledRef.current = { onInstalled, onError };
 
+  const { optionalComponents, componentMountPoints } = window.blocklet;
+
   const optionalComponent = useMemo(() => {
     if (!optionalComponents || !optionalComponents.length) {
       return null;
@@ -22,9 +25,8 @@ function useComponentInstalled({ did, onInstalled, onError }) {
     return (componentMountPoints || []).find((item) => item.did === did);
   }, [optionalComponent, componentMountPoints, did]);
 
-  const installUrl = `${window.blocklet.appUrl}/${AUTH_SERVICE_PREFIX}/admin/components?install-component=${did}`;
-  const storeUrl = optionalComponent ? `${optionalComponent.meta.homepage}/blocklets/${did}` : '';
-  const [installStatus, setInstallStatus] = useState('');
+  const installUrl = urlJoin(window.blocklet.appUrl, AUTH_SERVICE_PREFIX, `/admin/components?install-component=${did}`);
+  const storeUrl = optionalComponent ? urlJoin(optionalComponent.meta.homepage, 'blocklets', did) : '';
 
   useEffect(() => {
     const handle = (event) => {

package/es/UserCenter/components/passport.js

@@ -3,14 +3,19 @@ import { Stack } from "@mui/material";
 import Empty from "@arcblock/ux/lib/Empty";
 import { useTheme } from "@arcblock/ux/lib/Theme";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import PassportItem from "@arcblock/ux/lib/Passport";
 import { PASSPORT_STATUS } from "@abtnode/constant";
-import { useCreation } from "ahooks";
+import { useCreation, useMemoizedFn } from "ahooks";
 import uniqBy from "lodash/uniqBy";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { translations } from "../libs/locales.js";
 import { createPassportSvg } from "../libs/utils.js";
 export default function Passport({ user, ...rest }) {
-  const { t } = useLocaleContext();
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
   const theme = useTheme();
   const passports = useCreation(() => {
     const passportList = (user?.passports || []).map((x) => ({

package/es/UserCenter/components/user-info.js

@@ -6,11 +6,11 @@ import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline
 import ScheduleOutlineRoundedIcon from "@iconify-icons/material-symbols/schedule-outline-rounded";
 import MoreTimeRoundedIcon from "@iconify-icons/material-symbols/more-time-rounded";
 import CaptivePortalRoundedIcon from "@iconify-icons/material-symbols/captive-portal-rounded";
+import RelativeTime from "@arcblock/ux/lib/RelativeTime";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import RelativeTime from "@arcblock/ux/lib/RelativeTime";
-import UserInfoItem from "./user-info-item.js";
 import { translations } from "../libs/locales.js";
+import UserInfoItem from "./user-info-item.js";
 export default function UserInfo({
   user,
   ...rest

package/lib/ComponentInstaller/index.d.ts

@@ -1,5 +1,5 @@
 export default ComponentInstaller;
-declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstalled, onError, children, closeByOutSize, onClose, fallback, roles, }: {
+declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstalled, onError, children, closeByOutSize, onClose, fallback, disabled, roles, }: {
     warnIcon: any;
     did: any;
     noPermissionMute: any;
@@ -9,10 +9,12 @@ declare function ComponentInstaller({ warnIcon, did, noPermissionMute, onInstall
     closeByOutSize: any;
     onClose: any;
     fallback: any;
+    disabled: any;
     roles?: string[] | undefined;
-}): import("react").JSX.Element;
+}): any;
 declare namespace ComponentInstaller {
     namespace propTypes {
+        let disabled: any;
         let warnIcon: any;
         let did: any;
         let noPermissionMute: any;
@@ -25,6 +27,8 @@ declare namespace ComponentInstaller {
         let roles: any;
     }
     namespace defaultProps {
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
         let warnIcon_1: null;
         export { warnIcon_1 as warnIcon };
         let noPermissionMute_1: boolean;

package/lib/ComponentInstaller/index.js

@@ -28,6 +28,7 @@ function ComponentInstaller({
   closeByOutSize,
   onClose,
   fallback,
+  disabled,
   roles = ["owner", "admin"]
 }) {
   const {
@@ -63,6 +64,9 @@ function ComponentInstaller({
     window.location.reload();
   };
   const size = 60;
+  if (disabled) {
+    return children;
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionPermission.default, {
     session: sessionCtx?.session,
     roles,
@@ -357,6 +361,7 @@ function ComponentInstaller({
   });
 }
 ComponentInstaller.propTypes = {
+  disabled: _propTypes.default.bool,
   warnIcon: _propTypes.default.node,
   did: _propTypes.default.string.isRequired,
   noPermissionMute: _propTypes.default.bool,
@@ -369,6 +374,7 @@ ComponentInstaller.propTypes = {
   roles: _propTypes.default.array
 };
 ComponentInstaller.defaultProps = {
+  disabled: false,
   warnIcon: null,
   noPermissionMute: false,
   onInstalled: null,

package/lib/ComponentInstaller/use-component-installed.d.ts

@@ -6,8 +6,8 @@ declare function useComponentInstalled({ did, onInstalled, onError }: {
 }): {
     optionalComponent: any;
     installed: any;
-    installUrl: string;
-    storeUrl: string;
+    installUrl: any;
+    storeUrl: any;
     installStatus: string;
     setInstallStatus: import("react").Dispatch<import("react").SetStateAction<string>>;
     installStatusDone: boolean;

package/lib/ComponentInstaller/use-component-installed.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 
 var _constant = require("@arcblock/did-connect/lib/constant");
 var _react = require("react");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function useComponentInstalled({
   did,
   onInstalled,
   onError
 }) {
-  const {
-    optionalComponents,
-    componentMountPoints
-  } = window.blocklet;
+  const [installStatus, setInstallStatus] = (0, _react.useState)('');
   const onInstalledRef = (0, _react.useRef)({
     onInstalled,
     onError
@@ -23,6 +22,10 @@ function useComponentInstalled({
     onInstalled,
     onError
   };
+  const {
+    optionalComponents,
+    componentMountPoints
+  } = window.blocklet;
   const optionalComponent = (0, _react.useMemo)(() => {
     if (!optionalComponents || !optionalComponents.length) {
       return null;
@@ -37,9 +40,8 @@ function useComponentInstalled({
     }
     return (componentMountPoints || []).find(item => item.did === did);
   }, [optionalComponent, componentMountPoints, did]);
-  const installUrl = `${window.blocklet.appUrl}/${_constant.AUTH_SERVICE_PREFIX}/admin/components?install-component=${did}`;
-  const storeUrl = optionalComponent ? `${optionalComponent.meta.homepage}/blocklets/${did}` : '';
-  const [installStatus, setInstallStatus] = (0, _react.useState)('');
+  const installUrl = (0, _urlJoin.default)(window.blocklet.appUrl, _constant.AUTH_SERVICE_PREFIX, `/admin/components?install-component=${did}`);
+  const storeUrl = optionalComponent ? (0, _urlJoin.default)(optionalComponent.meta.homepage, 'blocklets', did) : '';
   (0, _react.useEffect)(() => {
     const handle = event => {
       if (event.origin !== window.blocklet.appUrl) {

package/lib/UserCenter/components/passport.js

@@ -9,11 +9,13 @@ var _material = require("@mui/material");
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 var _Theme = require("@arcblock/ux/lib/Theme");
 var _Colors = require("@arcblock/ux/lib/Colors");
-var _context = require("@arcblock/ux/lib/Locale/context");
 var _Passport = _interopRequireDefault(require("@arcblock/ux/lib/Passport"));
 var _constant = require("@abtnode/constant");
 var _ahooks = require("ahooks");
 var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
+var _util = require("@arcblock/ux/lib/Locale/util");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _locales = require("../libs/locales");
 var _utils = require("../libs/utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Passport({
@@ -21,8 +23,11 @@ function Passport({
   ...rest
 }) {
   const {
-    t
+    locale
   } = (0, _context.useLocaleContext)();
+  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
+    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  });
   const theme = (0, _Theme.useTheme)();
   const passports = (0, _ahooks.useCreation)(() => {
     const passportList = (user?.passports || []).map(x => ({

package/lib/UserCenter/components/user-info.js

@@ -12,11 +12,11 @@ var _mailOutlineRounded = _interopRequireDefault(require("@iconify-icons/materia
 var _scheduleOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/schedule-outline-rounded"));
 var _moreTimeRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/more-time-rounded"));
 var _captivePortalRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/captive-portal-rounded"));
+var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
 var _util = require("@arcblock/ux/lib/Locale/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
-var _userInfoItem = _interopRequireDefault(require("./user-info-item"));
 var _locales = require("../libs/locales");
+var _userInfoItem = _interopRequireDefault(require("./user-info-item"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function UserInfo({
   user,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.20",
+  "version": "2.9.22",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -63,8 +63,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "1.16.23-beta-aeb9f5bd",
-    "@arcblock/did-connect": "^2.9.20",
-    "@arcblock/ux": "^2.9.20",
+    "@arcblock/did-connect": "^2.9.22",
+    "@arcblock/ux": "^2.9.22",
     "@blocklet/js-sdk": "1.16.23-beta-aeb9f5bd",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -80,7 +80,8 @@
     "lodash": "^4.17.21",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
-    "ufo": "^1.3.2"
+    "ufo": "^1.3.2",
+    "url-join": "^4.0.1"
   },
   "peerDependencies": {
     "react": ">=18.1.0"
@@ -98,5 +99,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "56354c3f25c0d62ae39d79f07c648a7c0d9e66f7"
+  "gitHead": "c0d8c18928702f304f394df6f14a103136cb6efa"
 }

package/src/ComponentInstaller/index.jsx

@@ -21,6 +21,7 @@ function ComponentInstaller({
   closeByOutSize,
   onClose,
   fallback,
+  disabled,
   roles = ['owner', 'admin'],
 }) {
   const { locale } = useLocaleContext();
@@ -53,6 +54,10 @@ function ComponentInstaller({
 
   const size = 60;
 
+  if (disabled) {
+    return children;
+  }
+
   return (
     <SessionPermission session={sessionCtx?.session} roles={roles}>
       {({ hasPermission }) => {
@@ -279,6 +284,7 @@ function ComponentInstaller({
 }
 
 ComponentInstaller.propTypes = {
+  disabled: PropTypes.bool,
   warnIcon: PropTypes.node,
   did: PropTypes.string.isRequired,
   noPermissionMute: PropTypes.bool,
@@ -292,6 +298,7 @@ ComponentInstaller.propTypes = {
 };
 
 ComponentInstaller.defaultProps = {
+  disabled: false,
   warnIcon: null,
   noPermissionMute: false,
   onInstalled: null,

package/src/ComponentInstaller/use-component-installed.js

@@ -1,11 +1,14 @@
 import { AUTH_SERVICE_PREFIX } from '@arcblock/did-connect/lib/constant';
 import { useMemo, useRef, useState, useEffect } from 'react';
+import urlJoin from 'url-join';
 
 function useComponentInstalled({ did, onInstalled, onError }) {
-  const { optionalComponents, componentMountPoints } = window.blocklet;
+  const [installStatus, setInstallStatus] = useState('');
   const onInstalledRef = useRef({ onInstalled, onError });
   onInstalledRef.current = { onInstalled, onError };
 
+  const { optionalComponents, componentMountPoints } = window.blocklet;
+
   const optionalComponent = useMemo(() => {
     if (!optionalComponents || !optionalComponents.length) {
       return null;
@@ -22,9 +25,8 @@ function useComponentInstalled({ did, onInstalled, onError }) {
     return (componentMountPoints || []).find((item) => item.did === did);
   }, [optionalComponent, componentMountPoints, did]);
 
-  const installUrl = `${window.blocklet.appUrl}/${AUTH_SERVICE_PREFIX}/admin/components?install-component=${did}`;
-  const storeUrl = optionalComponent ? `${optionalComponent.meta.homepage}/blocklets/${did}` : '';
-  const [installStatus, setInstallStatus] = useState('');
+  const installUrl = urlJoin(window.blocklet.appUrl, AUTH_SERVICE_PREFIX, `/admin/components?install-component=${did}`);
+  const storeUrl = optionalComponent ? urlJoin(optionalComponent.meta.homepage, 'blocklets', did) : '';
 
   useEffect(() => {
     const handle = (event) => {

package/src/UserCenter/components/passport.tsx

@@ -3,17 +3,22 @@ import type { StackProps } from '@mui/material';
 import Empty from '@arcblock/ux/lib/Empty';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import PassportItem from '@arcblock/ux/lib/Passport';
 import { PASSPORT_STATUS } from '@abtnode/constant';
-import { useCreation } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import uniqBy from 'lodash/uniqBy';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
+import { translations } from '../libs/locales';
 import { createPassportSvg } from '../libs/utils';
 import type { User } from '../../@types';
 
 export default function Passport({ user, ...rest }: { user: User } & StackProps) {
-  const { t } = useLocaleContext();
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const theme = useTheme();
   const passports = useCreation(() => {
     const passportList = (user?.passports || []).map((x) => ({

package/src/UserCenter/components/user-info.tsx

@@ -6,13 +6,13 @@ import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline
 import ScheduleOutlineRoundedIcon from '@iconify-icons/material-symbols/schedule-outline-rounded';
 import MoreTimeRoundedIcon from '@iconify-icons/material-symbols/more-time-rounded';
 import CaptivePortalRoundedIcon from '@iconify-icons/material-symbols/captive-portal-rounded';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 
+import { translations } from '../libs/locales';
 import UserInfoItem from './user-info-item';
 import type { User } from '../../@types';
-import { translations } from '../libs/locales';
 
 export default function UserInfo({
   user,