@arcblock/ux 2.13.29 → 2.13.31

package/lib/RelativeTime/index.d.ts

@@ -10,6 +10,7 @@ export interface RelativeTimeProps {
     tz?: string;
     relativeRange?: number;
     enableTooltip?: boolean;
-    showUTCPrefix?: boolean;
+    useShortTimezone?: boolean;
+    disableTimezone?: boolean;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, showUTCPrefix, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip } from '@mui/material';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -36,10 +36,16 @@ dayjs.updateLocale('zh-cn', {
 setDateTool(dayjs);
 const translations = {
   en: {
-    utc: 'Your Timezone'
+    utc: 'UTC Timezone',
+    local: 'Local Timezone',
+    shortUTC: 'UTC',
+    shortLocal: 'Local'
   },
   zh: {
-    utc: '你所在时区'
+    utc: 'UTC 时区',
+    local: '本地时区',
+    shortUTC: 'UTC',
+    shortLocal: '本地'
   }
 };
 function useRelativeTime({
@@ -134,9 +140,16 @@ function UTCChip({
   sign,
   hoursOffset,
   setIsUtc,
-  showUTCPrefix = true
+  useShortTimezone = true
 }) {
-  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+  const text = useMemo(() => {
+    const UTC = useShortTimezone ? 'shortUTC' : 'utc';
+    const LOCAL = useShortTimezone ? 'shortLocal' : 'local';
+    if (isUtc) {
+      return `${translations[locale][UTC]}`;
+    }
+    return `${translations[locale][LOCAL]}`;
+  }, [locale, useShortTimezone, isUtc]);
   return /*#__PURE__*/_jsx(Box, {
     component: "span",
     sx: {
@@ -150,7 +163,7 @@ function UTCChip({
       lineHeight: 1
     },
     onClick: () => setIsUtc(r => !r),
-    children: `${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`
+    children: text
   });
 }
 export default function RelativeTime({
@@ -163,7 +176,8 @@ export default function RelativeTime({
   tz,
   relativeRange,
   enableTooltip = true,
-  showUTCPrefix = true,
+  useShortTimezone = false,
+  disableTimezone = false,
   ...rest
 }) {
   const {
@@ -190,10 +204,9 @@ export default function RelativeTime({
       placement: "top-end",
       enterTouchDelay: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
+        display: "inline-flex",
         alignItems: "center",
         gap: 0.5,
-        width: "max-content",
         ...rest,
         children: [/*#__PURE__*/_jsx(Box, {
           component: "span",
@@ -212,19 +225,21 @@ export default function RelativeTime({
             color: 'text.secondary'
           },
           children: relativeString
-        }), /*#__PURE__*/_jsx(Box, {
-          component: "span",
-          sx: {
-            color: 'inherit'
-          },
-          children: "\xB7"
-        }), /*#__PURE__*/_jsx(UTCChip, {
-          locale: locale,
-          isUtc: isUtc,
-          sign: sign,
-          hoursOffset: hoursOffset,
-          setIsUtc: setIsUtc,
-          showUTCPrefix: showUTCPrefix
+        }), !disableTimezone && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Box, {
+            component: "span",
+            sx: {
+              color: 'inherit'
+            },
+            children: "\xB7"
+          }), /*#__PURE__*/_jsx(UTCChip, {
+            locale: locale,
+            isUtc: isUtc,
+            sign: sign,
+            hoursOffset: hoursOffset,
+            setIsUtc: setIsUtc,
+            useShortTimezone: useShortTimezone
+          })]
         })]
       })
     });
@@ -234,21 +249,20 @@ export default function RelativeTime({
     placement: "top-end",
     enterTouchDelay: 0,
     children: /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
+      display: "inline-flex",
       alignItems: "center",
       gap: 1,
-      width: "max-content",
       children: [/*#__PURE__*/_jsx(Box, {
         component: "span",
         ...rest,
         children: innerContent
-      }), type === 'utc' && /*#__PURE__*/_jsx(UTCChip, {
+      }), type === 'utc' && !disableTimezone && /*#__PURE__*/_jsx(UTCChip, {
         locale: locale,
         isUtc: isUtc,
         sign: sign,
         hoursOffset: hoursOffset,
         setIsUtc: setIsUtc,
-        showUTCPrefix: showUTCPrefix
+        useShortTimezone: useShortTimezone
       })]
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.29",
+  "version": "2.13.31",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "98e08de2a4ec51ae6181b57e2c6cf175eabd92ff",
+  "gitHead": "66ef51b4b217d15985838eb2c058ec833c07e1cd",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.29",
-    "@arcblock/nft-display": "^2.13.29",
-    "@arcblock/react-hooks": "^2.13.29",
+    "@arcblock/icons": "^2.13.31",
+    "@arcblock/nft-display": "^2.13.31",
+    "@arcblock/react-hooks": "^2.13.31",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.29",
+    "@blocklet/theme": "^2.13.31",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/RelativeTime/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Tooltip } from '@mui/material';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -36,12 +36,18 @@ dayjs.updateLocale('zh-cn', {
 // FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 
-const translations: Record<Locale, { utc: string }> = {
+const translations: Record<Locale, { utc: string; local: string; shortUTC: string; shortLocal: string }> = {
   en: {
-    utc: 'Your Timezone',
+    utc: 'UTC Timezone',
+    local: 'Local Timezone',
+    shortUTC: 'UTC',
+    shortLocal: 'Local',
   },
   zh: {
-    utc: '你所在时区',
+    utc: 'UTC 时区',
+    local: '本地时区',
+    shortUTC: 'UTC',
+    shortLocal: '本地',
   },
 };
 
@@ -55,7 +61,8 @@ export interface RelativeTimeProps {
   tz?: string;
   relativeRange?: number;
   enableTooltip?: boolean;
-  showUTCPrefix?: boolean;
+  useShortTimezone?: boolean;
+  disableTimezone?: boolean;
 }
 
 function useRelativeTime({
@@ -145,16 +152,25 @@ function UTCChip({
   sign,
   hoursOffset,
   setIsUtc,
-  showUTCPrefix = true,
+  useShortTimezone = true,
 }: {
   locale: Locale;
   isUtc?: boolean;
   sign: string;
   hoursOffset: number;
   setIsUtc: (data: any) => void;
-  showUTCPrefix?: boolean;
+  useShortTimezone?: boolean;
 }) {
-  const prefix = showUTCPrefix ? `${translations[locale].utc}: ` : '';
+  const text = useMemo(() => {
+    const UTC = useShortTimezone ? 'shortUTC' : 'utc';
+    const LOCAL = useShortTimezone ? 'shortLocal' : 'local';
+
+    if (isUtc) {
+      return `${translations[locale][UTC]}`;
+    }
+
+    return `${translations[locale][LOCAL]}`;
+  }, [locale, useShortTimezone, isUtc]);
 
   return (
     <Box
@@ -170,7 +186,7 @@ function UTCChip({
         lineHeight: 1,
       }}
       onClick={() => setIsUtc((r: any) => !r)}>
-      {`${prefix}${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
+      {text}
     </Box>
   );
 }
@@ -185,7 +201,8 @@ export default function RelativeTime({
   tz,
   relativeRange,
   enableTooltip = true,
-  showUTCPrefix = true,
+  useShortTimezone = false,
+  disableTimezone = false,
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
@@ -202,7 +219,7 @@ export default function RelativeTime({
   if (type === 'all') {
     return (
       <Tooltip title={undefined} placement="top-end" enterTouchDelay={0}>
-        <Box display="flex" alignItems="center" gap={0.5} width="max-content" {...rest}>
+        <Box display="inline-flex" alignItems="center" gap={0.5} {...rest}>
           <Box component="span" {...rest} sx={{}}>
             {innerContent}
           </Box>
@@ -215,18 +232,22 @@ export default function RelativeTime({
             {relativeString}
           </Box>
 
-          <Box component="span" sx={{ color: 'inherit' }}>
-            ·
-          </Box>
+          {!disableTimezone && (
+            <>
+              <Box component="span" sx={{ color: 'inherit' }}>
+                ·
+              </Box>
 
-          <UTCChip
-            locale={locale}
-            isUtc={isUtc}
-            sign={sign}
-            hoursOffset={hoursOffset}
-            setIsUtc={setIsUtc}
-            showUTCPrefix={showUTCPrefix}
-          />
+              <UTCChip
+                locale={locale}
+                isUtc={isUtc}
+                sign={sign}
+                hoursOffset={hoursOffset}
+                setIsUtc={setIsUtc}
+                useShortTimezone={useShortTimezone}
+              />
+            </>
+          )}
         </Box>
       </Tooltip>
     );
@@ -234,19 +255,19 @@ export default function RelativeTime({
 
   return (
     <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
-      <Box display="flex" alignItems="center" gap={1} width="max-content">
+      <Box display="inline-flex" alignItems="center" gap={1}>
         <Box component="span" {...rest}>
           {innerContent}
         </Box>
 
-        {type === 'utc' && (
+        {type === 'utc' && !disableTimezone && (
           <UTCChip
             locale={locale}
             isUtc={isUtc}
             sign={sign}
             hoursOffset={hoursOffset}
             setIsUtc={setIsUtc}
-            showUTCPrefix={showUTCPrefix}
+            useShortTimezone={useShortTimezone}
           />
         )}
       </Box>