@blocklet/ui-react 2.12.49 → 2.12.51

package/lib/UserCenter/components/editable-field.d.ts

@@ -5,12 +5,13 @@ interface EditableFieldProps {
     onChange?: (value: string) => void;
     onValueValidate?: (value: string) => void;
     editable: boolean;
+    disabled?: boolean;
     component?: 'input' | 'textarea';
     placeholder?: string;
     rows?: number;
     maxLength?: number;
     icon?: React.ReactNode;
-    label?: string;
+    label?: string | React.ReactNode;
     children?: React.ReactNode;
     tooltip?: TooltipProps['title'];
     inline?: boolean;
@@ -46,5 +47,5 @@ export declare const inputFieldStyle: {
         borderColor: string;
     };
 };
-declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, renderValue, }: EditableFieldProps): JSX.Element | null;
+declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, renderValue, disabled, }: EditableFieldProps): JSX.Element | null;
 export default EditableField;

package/lib/UserCenter/components/editable-field.js

@@ -54,7 +54,8 @@ function EditableField({
   style = {},
   verified = false,
   canEdit = true,
-  renderValue
+  renderValue,
+  disabled = false
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -96,7 +97,8 @@ function EditableField({
           onChange: (e) => handleChange(e.target.value),
           sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {}),
           error: Boolean(errorMsg),
-          helperText: errorMsg
+          helperText: errorMsg,
+          disabled
         }
       );
     }
@@ -115,7 +117,8 @@ function EditableField({
           value,
           onChange: (e) => handleChange(e.target.value),
           error: Boolean(errorMsg),
-          helperText: errorMsg
+          helperText: errorMsg,
+          disabled
         }
       ),
       maxLength && maxLength > 0 ? /* @__PURE__ */ jsxs(

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

@@ -1,10 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import Box from "@mui/material/Box";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import SwipeableDrawer from "@mui/material/SwipeableDrawer";
-import Typography from "@mui/material/Typography";
-import Backdrop from "@mui/material/Backdrop";
+import { Icon } from "@iconify/react";
+import { Box, Backdrop, useMediaQuery, SwipeableDrawer, Typography, Tooltip } from "@mui/material";
 import styled from "@emotion/styled";
 import { joinURL } from "ufo";
 import Button from "@arcblock/ux/lib/Button";
@@ -17,6 +14,7 @@ import PhoneInput, {
 import cloneDeep from "lodash/cloneDeep";
 import omit from "lodash/omit";
 import { mergeSx } from "@arcblock/ux/lib/Util/style";
+import { LOGIN_PROVIDER } from "@arcblock/ux/lib/Util/constant";
 import { useCreation, useMemoizedFn, useReactive } from "ahooks";
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from "react";
 import { translate } from "@arcblock/ux/lib/Locale/util";
@@ -365,11 +363,25 @@ export default function UserMetadataComponent({
             {
               value: metadata.email ?? user?.email ?? "",
               editable: editing,
+              disabled: user?.sourceProvider === LOGIN_PROVIDER.EMAIL,
               canEdit: !emailVerified,
               verified: emailVerified,
               placeholder: "Email",
               icon: /* @__PURE__ */ jsx(EmailIcon, { ...iconSize }),
-              label: t("profile.email"),
+              label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                t("profile.email"),
+                user?.sourceProvider === LOGIN_PROVIDER.EMAIL ? /* @__PURE__ */ jsx(Tooltip, { title: t("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: Icon,
+                    icon: "mdi:info-outline",
+                    sx: {
+                      verticalAlign: "middle",
+                      ml: 0.25
+                    }
+                  }
+                ) }) : null
+              ] }),
               onChange: (value) => onChange(value, "email"),
               errorMsg: validateMsg.email,
               renderValue: (value) => /* @__PURE__ */ jsx(

package/lib/UserCenter/libs/locales.d.ts

@@ -123,6 +123,7 @@ export declare const translations: {
             localTime: string;
             email: string;
             emailInvalid: string;
+            emailSourceProviderNotAllowEdit: string;
             phone: string;
             phoneInvalid: string;
             editProfile: string;
@@ -276,6 +277,7 @@ export declare const translations: {
             localTime: string;
             email: string;
             emailInvalid: string;
+            emailSourceProviderNotAllowEdit: string;
             phone: string;
             phoneInvalid: string;
             editProfile: string;

package/lib/UserCenter/libs/locales.js

@@ -123,6 +123,7 @@ export const translations = {
       localTime: "\u5F53\u5730\u65F6\u95F4:",
       email: "\u90AE\u7BB1\u5730\u5740",
       emailInvalid: "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E",
+      emailSourceProviderNotAllowEdit: "\u4F7F\u7528\u90AE\u7BB1\u6CE8\u518C\u7684\u7528\u6237\u4E0D\u5141\u8BB8\u4FEE\u6539\u90AE\u7BB1",
       phone: "\u7535\u8BDD\u53F7\u7801",
       phoneInvalid: "\u7535\u8BDD\u53F7\u7801\u683C\u5F0F\u4E0D\u6B63\u786E",
       editProfile: "\u7F16\u8F91\u8D44\u6599",
@@ -276,6 +277,7 @@ export const translations = {
       localTime: "Local Time: ",
       email: "Email",
       emailInvalid: "Email is invalid",
+      emailSourceProviderNotAllowEdit: "Email registered users are not allowed to edit email",
       phone: "Phone",
       phoneInvalid: "Phone number is invalid",
       editProfile: "Edit Profile",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.49",
+  "version": "2.12.51",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.40",
-    "@arcblock/bridge": "^2.12.49",
-    "@arcblock/react-hooks": "^2.12.49",
+    "@arcblock/bridge": "^2.12.51",
+    "@arcblock/react-hooks": "^2.12.51",
     "@arcblock/ws": "^1.19.15",
     "@blocklet/did-space-react": "^1.0.37",
     "@iconify-icons/logos": "^1.2.36",
@@ -87,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "ffebc9c5df6d576f08c3538b4db75d7ec8cf00be"
+  "gitHead": "b122909f88066cb3d5b1cd96f6658d6870ed85e1"
 }

package/src/UserCenter/components/editable-field.tsx

@@ -13,12 +13,13 @@ interface EditableFieldProps {
   onChange?: (value: string) => void;
   onValueValidate?: (value: string) => void;
   editable: boolean;
+  disabled?: boolean;
   component?: 'input' | 'textarea';
   placeholder?: string;
   rows?: number;
   maxLength?: number; // 最大字符数
   icon?: React.ReactNode;
-  label?: string;
+  label?: string | React.ReactNode;
   children?: React.ReactNode;
   tooltip?: TooltipProps['title'];
   inline?: boolean;
@@ -76,6 +77,7 @@ function EditableField({
   verified = false,
   canEdit = true,
   renderValue,
+  disabled = false,
 }: EditableFieldProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -128,6 +130,7 @@ function EditableField({
           sx={mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})}
           error={Boolean(errorMsg)}
           helperText={errorMsg}
+          disabled={disabled}
         />
       );
     }
@@ -147,6 +150,7 @@ function EditableField({
           onChange={(e) => handleChange(e.target.value)}
           error={Boolean(errorMsg)}
           helperText={errorMsg}
+          disabled={disabled}
         />
         {maxLength && maxLength > 0 ? (
           <Typography

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

@@ -1,10 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable import/no-extraneous-dependencies */
-import Box from '@mui/material/Box';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import Typography from '@mui/material/Typography';
-import Backdrop, { BackdropProps } from '@mui/material/Backdrop';
+import { Icon } from '@iconify/react';
+import { Box, Backdrop, useMediaQuery, SwipeableDrawer, Typography, Tooltip } from '@mui/material';
+import type { BackdropProps } from '@mui/material';
 
 import styled from '@emotion/styled';
 import { joinURL } from 'ufo';
@@ -19,7 +17,7 @@ import PhoneInput, {
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
-
+import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
@@ -27,6 +25,7 @@ import isEmail from 'validator/lib/isEmail';
 import isPostalCode from 'validator/lib/isPostalCode';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useBrowser } from '@arcblock/react-hooks';
+
 import { translations } from '../../libs/locales';
 import type { User, UserAddress, UserMetadata, UserPhoneProps } from '../../../@types';
 import EditableField, { commonInputStyle, inputFieldStyle } from '../editable-field';
@@ -430,11 +429,28 @@ export default function UserMetadataComponent({
         <EditableField
           value={metadata.email ?? user?.email ?? ''}
           editable={editing}
+          disabled={user?.sourceProvider === LOGIN_PROVIDER.EMAIL}
           canEdit={!emailVerified}
           verified={emailVerified}
           placeholder="Email"
           icon={<EmailIcon {...iconSize} />}
-          label={t('profile.email')}
+          label={
+            <>
+              {t('profile.email')}
+              {user?.sourceProvider === LOGIN_PROVIDER.EMAIL ? (
+                <Tooltip title={t('profile.emailSourceProviderNotAllowEdit')}>
+                  <Box
+                    component={Icon}
+                    icon="mdi:info-outline"
+                    sx={{
+                      verticalAlign: 'middle',
+                      ml: 0.25,
+                    }}
+                  />
+                </Tooltip>
+              ) : null}
+            </>
+          }
           onChange={(value) => onChange(value, 'email')}
           errorMsg={validateMsg.email}
           renderValue={(value) => (

package/src/UserCenter/libs/locales.ts

@@ -125,6 +125,7 @@ export const translations = {
       localTime: '当地时间:',
       email: '邮箱地址',
       emailInvalid: '邮箱格式不正确',
+      emailSourceProviderNotAllowEdit: '使用邮箱注册的用户不允许修改邮箱',
       phone: '电话号码',
       phoneInvalid: '电话号码格式不正确',
       editProfile: '编辑资料',
@@ -280,6 +281,7 @@ export const translations = {
       localTime: 'Local Time: ',
       email: 'Email',
       emailInvalid: 'Email is invalid',
+      emailSourceProviderNotAllowEdit: 'Email registered users are not allowed to edit email',
       phone: 'Phone',
       phoneInvalid: 'Phone number is invalid',
       editProfile: 'Edit Profile',