@arcblock/ux 2.10.38 → 2.10.40

package/lib/BlockletV2/blocklet.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface IBlockletStore extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'title' | 'className'> {
+import { CardProps } from '@mui/material';
+export interface IBlockletStore extends CardProps {
     did?: string;
     title: string;
     description?: string;

package/lib/BlockletV2/blocklet.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { isValidElement } from 'react';
 import Download from '@iconify-icons/tabler/cloud-download';
 import { Icon } from '@iconify/react';
-import { Card, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import { Card, CircularProgress, Stack, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
@@ -61,67 +61,65 @@ export default function BlockletStore(props) {
   };
   return /*#__PURE__*/_jsxs(Card, {
     variant: "outlined",
-    sx: {
-      borderRadius: 2
-    },
     onClick: handleMainClick,
     ...rest,
-    children: [/*#__PURE__*/_jsx(CardContent, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'space-between'
+    sx: {
+      p: {
+        xs: 2,
+        md: 3
       },
-      children: /*#__PURE__*/_jsxs(Stack, {
+      borderRadius: 2,
+      ...rest.sx
+    },
+    children: [/*#__PURE__*/_jsxs(Stack, {
+      flex: 1,
+      direction: "row",
+      gap: 2,
+      alignItems: "center",
+      overflow: "hidden",
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: cover,
+        did: did,
+        size: 48,
+        variant: "rounded"
+      }), /*#__PURE__*/_jsx(Typography, {
         flex: 1,
-        direction: "row",
-        gap: 2,
-        alignItems: "center",
-        overflow: "hidden",
-        children: [/*#__PURE__*/_jsx(Avatar, {
-          src: cover,
-          did: did,
-          size: 40,
-          variant: "rounded"
-        }), /*#__PURE__*/_jsx(Typography, {
-          flex: 1,
-          component: "h6",
-          variant: "h6",
-          sx: {
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden'
-          },
-          ...titleProps
-        }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
-          color: "reverse",
-          variant: "outlined",
-          size: "small",
-          disabled: buttonDisabled || buttonLoading,
+        fontWeight: "typography.fontWeightMedium",
+        sx: {
+          fontSize: 16,
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden'
+        },
+        ...titleProps
+      }), button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
+        color: "reverse",
+        variant: "outlined",
+        size: "small",
+        disabled: buttonDisabled || buttonLoading,
+        style: {
+          borderColor: theme.palette.grey[300],
+          borderRadius: 8,
+          fontSize: 13,
+          fontWeight: theme.typography.fontWeightMedium
+        },
+        onClick: handleButtonClick,
+        children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
+          size: 15,
           style: {
-            borderColor: theme.palette.grey[300],
-            borderRadius: 8
-          },
-          onClick: handleButtonClick,
-          children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
-            size: 15,
-            style: {
-              marginRight: 3,
-              color: 'inherit'
-            }
-          }), buttonText]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(CardContent, {
-      sx: {
-        py: 0
-      },
+            marginRight: 3,
+            color: 'inherit'
+          }
+        }), buttonText]
+      })]
+    }), /*#__PURE__*/_jsx(Stack, {
+      py: 2,
       children: /*#__PURE__*/_jsx(Typography, {
-        component: "div",
         variant: "body2",
         color: "text.secondary",
         sx: {
-          lineClamp: 2,
           display: '-webkit-box',
+          lineClamp: 2,
           WebkitLineClamp: 2,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
@@ -129,13 +127,11 @@ export default function BlockletStore(props) {
         },
         ...descriptionProps
       })
-    }), /*#__PURE__*/_jsxs(CardContent, {
-      sx: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 4,
-        color: 'grey.800'
-      },
+    }), /*#__PURE__*/_jsxs(Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: 2,
+      color: "text.secondary",
       children: [/*#__PURE__*/_jsx(IconText, {
         icon: /*#__PURE__*/_jsx(Avatar, {
           src: avatar,

package/lib/BlockletV2/components/icon-text.js

@@ -7,7 +7,7 @@ export default function IconText({
   maxWidth = 100,
   title
 }) {
-  return children && /*#__PURE__*/_jsxs(Stack, {
+  return (children === 0 || children) && /*#__PURE__*/_jsxs(Stack, {
     direction: "row",
     alignItems: "center",
     gap: 1,

package/lib/Locale/context.d.ts

@@ -1,39 +1,23 @@
-export function LocaleProvider({ children, locale, fallbackLocale, translations, onLoadingTranslation, languages, ...rest }: {
-    [x: string]: any;
-    children: any;
-    locale: any;
-    fallbackLocale: any;
-    translations: any;
-    onLoadingTranslation: any;
-    languages: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace LocaleProvider {
-    namespace propTypes {
-        let children: PropTypes.Validator<any>;
-        let translations: PropTypes.Validator<object>;
-        let onLoadingTranslation: PropTypes.Requireable<(...args: any[]) => any>;
-        let locale: PropTypes.Requireable<string>;
-        let fallbackLocale: PropTypes.Requireable<string>;
-        let languages: PropTypes.Requireable<(PropTypes.InferProps<{
-            code: PropTypes.Requireable<string>;
-            name: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-    }
-    namespace defaultProps {
-        let locale_1: string;
-        export { locale_1 as locale };
-        let fallbackLocale_1: string;
-        export { fallbackLocale_1 as fallbackLocale };
-        let languages_1: never[];
-        export { languages_1 as languages };
-        export function onLoadingTranslation_1(): void;
-        export { onLoadingTranslation_1 as onLoadingTranslation };
-    }
+import React, { ReactNode } from 'react';
+declare const getLocale: (languages?: {
+    code: string;
+}[]) => string;
+declare const setLocale: (locale: string) => void;
+interface LocaleProviderProps {
+    children: ReactNode;
+    locale?: string;
+    fallbackLocale?: string;
+    translations: Record<string, any>;
+    onLoadingTranslation?: (locale: string, languages: {
+        code: string;
+    }[]) => void;
+    languages?: {
+        code: string;
+        name: string;
+    }[];
 }
-declare const Consumer: import("react").Consumer<any>;
-export const LocaleContext: import("react").Context<any>;
-export function useLocaleContext(): any;
-export function setLocale(locale: any): void;
-export function getLocale(languages?: any[]): any;
-import PropTypes from 'prop-types';
-export { Consumer as LocaleConsumer };
+declare const LocaleContext: React.Context<any>;
+declare const Consumer: React.Consumer<any>;
+declare function LocaleProvider({ children, locale, fallbackLocale, translations, onLoadingTranslation, languages, ...rest }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useLocaleContext(): any;
+export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/lib/Locale/context.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-prototype-builtins */
-import { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
+import React, { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
 import get from 'lodash/get';
-import PropTypes from 'prop-types';
 import Cookie from 'js-cookie';
 import browserLang from './browser-lang';
 import { translate } from './util';
@@ -53,7 +52,7 @@ const getLanguages = arg => {
     name: '简体中文'
   }];
 };
-const LocaleContext = /*#__PURE__*/createContext();
+const LocaleContext = /*#__PURE__*/createContext(null);
 const {
   Provider,
   Consumer
@@ -64,13 +63,13 @@ function LocaleProvider({
   fallbackLocale,
   translations,
   onLoadingTranslation,
-  languages,
+  languages = [],
   ...rest
 }) {
   const langs = getLanguages(languages);
   // eslint-disable-next-line prefer-const
   let [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
-  const lastCurrentLocale = useRef(fallbackLocale);
+  const lastCurrentLocale = useRef(fallbackLocale || '');
   const [, setForceUpdate] = useState(0);
   const changeLocale = newLocale => {
     setCurrentLocale(newLocale);
@@ -97,7 +96,7 @@ function LocaleProvider({
     } catch (err) {
       console.error(err);
     }
-    onLoadingTranslation(tmpLocale, langs);
+    onLoadingTranslation?.(tmpLocale, langs);
     currentLocale = lastCurrentLocale.current;
   } else {
     lastCurrentLocale.current = currentLocale;
@@ -118,22 +117,4 @@ function useLocaleContext() {
   const context = useContext(LocaleContext);
   return context;
 }
-LocaleProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  translations: PropTypes.object.isRequired,
-  onLoadingTranslation: PropTypes.func,
-  locale: PropTypes.string,
-  // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
-  fallbackLocale: PropTypes.string,
-  languages: PropTypes.arrayOf(PropTypes.shape({
-    code: PropTypes.string,
-    name: PropTypes.string
-  }))
-};
-LocaleProvider.defaultProps = {
-  locale: '',
-  fallbackLocale: '',
-  languages: [],
-  onLoadingTranslation: () => {}
-};
 export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.38",
+  "version": "2.10.40",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,6 +53,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "moment-timezone": "^0.5.37",
+    "prettier": "^3.3.3",
     "typescript": "5.5.4"
   },
   "peerDependencies": {
@@ -63,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "ec30518daa2eb50dc076fe00e7dfde253ba8b7cb",
+  "gitHead": "cad80dfa31fd28039f02bc14379a19a254a36000",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.38",
-    "@arcblock/nft-display": "^2.10.38",
-    "@arcblock/react-hooks": "^2.10.38",
+    "@arcblock/icons": "^2.10.40",
+    "@arcblock/nft-display": "^2.10.40",
+    "@arcblock/react-hooks": "^2.10.40",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/BlockletV2/blocklet.tsx

@@ -2,15 +2,14 @@ import React, { isValidElement } from 'react';
 
 import Download from '@iconify-icons/tabler/cloud-download';
 import { Icon } from '@iconify/react';
-import { Card, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import { Card, CardProps, CircularProgress, Stack, Typography } from '@mui/material';
 import Avatar from '../Avatar';
 import Button from '../Button';
 import { useTheme } from '../Theme';
 import IconText from './components/icon-text';
 import { formatDownloadCount, strippedString } from './utils';
 
-export interface IBlockletStore
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'title' | 'className'> {
+export interface IBlockletStore extends CardProps {
   did?: string;
   title: string;
   description?: string;
@@ -77,40 +76,45 @@ export default function BlockletStore(props: IBlockletStore) {
     : { title: strippedString(description), dangerouslySetInnerHTML: { __html: description } };
 
   return (
-    <Card variant="outlined" sx={{ borderRadius: 2 }} onClick={handleMainClick} {...rest}>
-      <CardContent sx={{ display: 'flex', justifyContent: 'space-between' }}>
-        <Stack flex={1} direction="row" gap={2} alignItems="center" overflow="hidden">
-          <Avatar src={cover} did={did} size={40} variant="rounded" />
-          <Typography
-            flex={1}
-            component="h6"
-            variant="h6"
-            sx={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
-            {...titleProps}
-          />
-          {button ||
-            (onButtonClick && (
-              <Button
-                color="reverse"
-                variant="outlined"
-                size="small"
-                disabled={buttonDisabled || buttonLoading}
-                style={{ borderColor: theme.palette.grey[300], borderRadius: 8 }}
-                onClick={handleButtonClick}>
-                {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
-                {buttonText}
-              </Button>
-            ))}
-        </Stack>
-      </CardContent>
-      <CardContent sx={{ py: 0 }}>
+    <Card
+      variant="outlined"
+      onClick={handleMainClick}
+      {...rest}
+      sx={{ p: { xs: 2, md: 3 }, borderRadius: 2, ...rest.sx }}>
+      <Stack flex={1} direction="row" gap={2} alignItems="center" overflow="hidden">
+        <Avatar src={cover} did={did} size={48} variant="rounded" />
+        <Typography
+          flex={1}
+          fontWeight="typography.fontWeightMedium"
+          sx={{ fontSize: 16, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
+          {...titleProps}
+        />
+        {button ||
+          (onButtonClick && (
+            <Button
+              color="reverse"
+              variant="outlined"
+              size="small"
+              disabled={buttonDisabled || buttonLoading}
+              style={{
+                borderColor: theme.palette.grey[300],
+                borderRadius: 8,
+                fontSize: 13,
+                fontWeight: theme.typography.fontWeightMedium,
+              }}
+              onClick={handleButtonClick}>
+              {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}
+              {buttonText}
+            </Button>
+          ))}
+      </Stack>
+      <Stack py={2}>
         <Typography
-          component="div"
           variant="body2"
           color="text.secondary"
           sx={{
-            lineClamp: 2,
             display: '-webkit-box',
+            lineClamp: 2,
             WebkitLineClamp: 2,
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
@@ -118,13 +122,13 @@ export default function BlockletStore(props: IBlockletStore) {
           }}
           {...descriptionProps}
         />
-      </CardContent>
-      <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 4, color: 'grey.800' }}>
+      </Stack>
+      <Stack direction="row" alignItems="center" gap={2} color="text.secondary">
         <IconText icon={<Avatar src={avatar} did={did} size={20} variant="circle" />}>{author}</IconText>
         <IconText icon={<Icon icon={Download} />} title={download}>
           {formatDownloadCount(download)}
         </IconText>
-      </CardContent>
+      </Stack>
     </Card>
   );
 }

package/src/BlockletV2/components/icon-text.tsx

@@ -13,7 +13,7 @@ export default function IconText({
   title?: string;
 }) {
   return (
-    children && (
+    (children === 0 || children) && (
       <Stack direction="row" alignItems="center" gap={1} sx={{ maxWidth, overflow: 'hidden' }}>
         {icon}
         <Typography

package/src/Locale/{context.jsx → context.tsx}

@@ -1,7 +1,6 @@
 /* eslint-disable no-prototype-builtins */
-import { createContext, useState, useEffect, useContext, useRef, useCallback } from 'react';
+import React, { createContext, useState, useEffect, useContext, useRef, useCallback, ReactNode } from 'react';
 import get from 'lodash/get';
-import PropTypes from 'prop-types';
 import Cookie from 'js-cookie';
 
 import browserLang from './browser-lang';
@@ -12,7 +11,10 @@ import { getCookieOptions } from '../Util';
 const cookieName = 'nf_lang';
 
 // 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
-const getLocaleFromSearchParams = (languages, url = window.location.href) => {
+const getLocaleFromSearchParams = (
+  languages: { code: string }[],
+  url: string = window.location.href
+): string | null => {
   const locale = new URL(url).searchParams.get('locale');
   if (languages.find((x) => x.code === locale)) {
     return locale;
@@ -20,7 +22,7 @@ const getLocaleFromSearchParams = (languages, url = window.location.href) => {
   return null;
 };
 
-const setLocaleParam = (locale, url = window.location.href) => {
+const setLocaleParam = (locale: string, url: string = window.location.href) => {
   const urlObj = new URL(url);
   const hasLocaleParam = urlObj.searchParams.has('locale');
   if (hasLocaleParam) {
@@ -29,7 +31,7 @@ const setLocaleParam = (locale, url = window.location.href) => {
   }
 };
 
-const getLocale = (languages = []) => {
+const getLocale = (languages: { code: string }[] = []): string => {
   const langParams = {
     languages: languages.map((item) => item.code),
     // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
@@ -38,12 +40,12 @@ const getLocale = (languages = []) => {
   return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
 };
 
-const setLocale = (locale) => {
+const setLocale = (locale: string) => {
   Cookie.set(cookieName, locale, getCookieOptions());
   setLocaleParam(locale);
 };
 
-const getLanguages = (arg) => {
+const getLanguages = (arg?: { code: string; name: string }[]): { code: string; name: string }[] => {
   const env = get(window, 'blocklet.languages');
   if (Array.isArray(env) && env.length) {
     return env;
@@ -59,16 +61,35 @@ const getLanguages = (arg) => {
   ];
 };
 
-const LocaleContext = createContext();
+interface LocaleProviderProps {
+  children: ReactNode;
+  locale?: string;
+  fallbackLocale?: string;
+  translations: Record<string, any>;
+  // eslint-disable-next-line no-unused-vars
+  onLoadingTranslation?: (locale: string, languages: { code: string }[]) => void;
+  languages?: { code: string; name: string }[];
+}
+
+const LocaleContext = createContext<any>(null);
 const { Provider, Consumer } = LocaleContext;
-function LocaleProvider({ children, locale, fallbackLocale, translations, onLoadingTranslation, languages, ...rest }) {
+
+function LocaleProvider({
+  children,
+  locale,
+  fallbackLocale,
+  translations,
+  onLoadingTranslation,
+  languages = [],
+  ...rest
+}: LocaleProviderProps) {
   const langs = getLanguages(languages);
   // eslint-disable-next-line prefer-const
-  let [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
-  const lastCurrentLocale = useRef(fallbackLocale);
+  let [currentLocale, setCurrentLocale] = useState<string>(locale || getLocale(langs));
+  const lastCurrentLocale = useRef<string>(fallbackLocale || '');
   const [, setForceUpdate] = useState(0);
 
-  const changeLocale = (newLocale) => {
+  const changeLocale = (newLocale: string) => {
     setCurrentLocale(newLocale);
     setLocale(newLocale);
   };
@@ -95,14 +116,14 @@ function LocaleProvider({ children, locale, fallbackLocale, translations, onLoad
       console.error(err);
     }
 
-    onLoadingTranslation(tmpLocale, langs);
+    onLoadingTranslation?.(tmpLocale, langs);
     currentLocale = lastCurrentLocale.current;
   } else {
     lastCurrentLocale.current = currentLocale;
   }
 
   const t = useCallback(
-    (key, data) => translate(translations, key, currentLocale, fallbackLocale, data),
+    (key: string, data?: any) => translate(translations, key, currentLocale, fallbackLocale, data),
     [translations, currentLocale, fallbackLocale]
   );
 
@@ -114,21 +135,4 @@ function useLocaleContext() {
   return context;
 }
 
-LocaleProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  translations: PropTypes.object.isRequired,
-  onLoadingTranslation: PropTypes.func,
-  locale: PropTypes.string,
-  // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
-  fallbackLocale: PropTypes.string,
-  languages: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string, name: PropTypes.string })),
-};
-
-LocaleProvider.defaultProps = {
-  locale: '',
-  fallbackLocale: '',
-  languages: [],
-  onLoadingTranslation: () => {},
-};
-
 export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };