@arcblock/ux 2.10.39 → 2.10.41

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

@@ -61,15 +61,16 @@ export default function BlockletStore(props) {
   };
   return /*#__PURE__*/_jsxs(Card, {
     variant: "outlined",
+    onClick: handleMainClick,
+    ...rest,
     sx: {
       p: {
         xs: 2,
         md: 3
       },
-      borderRadius: 2
+      borderRadius: 2,
+      ...rest.sx
     },
-    onClick: handleMainClick,
-    ...rest,
     children: [/*#__PURE__*/_jsxs(Stack, {
       flex: 1,
       direction: "row",
@@ -79,13 +80,13 @@ export default function BlockletStore(props) {
       children: [/*#__PURE__*/_jsx(Avatar, {
         src: cover,
         did: did,
-        size: 40,
+        size: 48,
         variant: "rounded"
       }), /*#__PURE__*/_jsx(Typography, {
         flex: 1,
+        fontWeight: "typography.fontWeightMedium",
         sx: {
           fontSize: 16,
-          fontWeight: 500,
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           overflow: 'hidden'
@@ -100,7 +101,7 @@ export default function BlockletStore(props) {
           borderColor: theme.palette.grey[300],
           borderRadius: 8,
           fontSize: 13,
-          fontWeight: 'typography.fontWeightMedium'
+          fontWeight: theme.typography.fontWeightMedium
         },
         onClick: handleButtonClick,
         children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {

package/lib/Center/index.d.ts

@@ -1,9 +1,13 @@
 /**
- *
- * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+ * @param {Object} props 属性
+ * @param {*} props.children 子元素
+ * @param {'screen'|'parent'} [props.relative='screen'] 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
  * @returns react component element
  */
-declare function Center({ children, relative }: string): import("react/jsx-runtime").JSX.Element;
+declare function Center({ children, relative }: {
+    children: any;
+    relative?: "screen" | "parent" | undefined;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace Center {
     namespace propTypes {
         let children: PropTypes.Validator<any>;

package/lib/Center/index.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { styled } from '../Theme';
 
 /**
- *
- * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+ * @param {Object} props 属性
+ * @param {*} props.children 子元素
+ * @param {'screen'|'parent'} [props.relative='screen'] 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
  * @returns react component element
  */
 export default function Center({

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.39",
+  "version": "2.10.41",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -64,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "e9b7ea36bde7edec3bad5db838b9bfc3c03012a4",
+  "gitHead": "d24cb6aab78d9ad2c0e6f4018da00aa3c8cb18fb",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.39",
-    "@arcblock/nft-display": "^2.10.39",
-    "@arcblock/react-hooks": "^2.10.39",
+    "@arcblock/icons": "^2.10.41",
+    "@arcblock/nft-display": "^2.10.41",
+    "@arcblock/react-hooks": "^2.10.41",
     "@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, 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;
@@ -79,20 +78,15 @@ export default function BlockletStore(props: IBlockletStore) {
   return (
     <Card
       variant="outlined"
-      sx={{
-        p: {
-          xs: 2,
-          md: 3,
-        },
-        borderRadius: 2,
-      }}
       onClick={handleMainClick}
-      {...rest}>
+      {...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={40} variant="rounded" />
+        <Avatar src={cover} did={did} size={48} variant="rounded" />
         <Typography
           flex={1}
-          sx={{ fontSize: 16, fontWeight: 500, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
+          fontWeight="typography.fontWeightMedium"
+          sx={{ fontSize: 16, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
           {...titleProps}
         />
         {button ||
@@ -106,7 +100,7 @@ export default function BlockletStore(props: IBlockletStore) {
                 borderColor: theme.palette.grey[300],
                 borderRadius: 8,
                 fontSize: 13,
-                fontWeight: 'typography.fontWeightMedium',
+                fontWeight: theme.typography.fontWeightMedium,
               }}
               onClick={handleButtonClick}>
               {buttonLoading && <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />}

package/src/Center/index.js

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { styled } from '../Theme';
 
 /**
- *
- * @param {string} relative 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
+ * @param {Object} props 属性
+ * @param {*} props.children 子元素
+ * @param {'screen'|'parent'} [props.relative='screen'] 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
  * @returns react component element
  */
 export default function Center({ children, relative }) {

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 };