@arcblock/ux 2.13.47 → 2.13.48

package/lib/RelativeTime/index.d.ts

@@ -1,3 +1,4 @@
+import { TooltipProps } from '@mui/material';
 import 'dayjs/locale/zh-cn';
 import type { Locale } from '../type';
 export interface RelativeTimeProps {
@@ -12,5 +13,6 @@ export interface RelativeTimeProps {
     enableTooltip?: boolean;
     useShortTimezone?: boolean;
     disableTimezone?: boolean;
+    placement?: TooltipProps['placement'];
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, placement, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip } from '@mui/material';
-import { useState, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -8,6 +8,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
@@ -48,6 +49,12 @@ const translations = {
     shortLocal: '当前时区'
   }
 };
+const useUtcStore = create(set => ({
+  isUtc: false,
+  setIsUtc: isUtc => set({
+    isUtc
+  })
+}));
 function useRelativeTime({
   value,
   locale = 'en',
@@ -63,7 +70,12 @@ function useRelativeTime({
   const sign = timeZoneOffset > 0 ? '-' : '+';
   const hoursOffset = Math.abs(timeZoneOffset) / 60;
   const isLocalUtc = timeZoneOffset === 0;
-  const [isUtc, setIsUtc] = useState(isLocalUtc);
+  const isUtc = useUtcStore(state => state.isUtc);
+  const setIsUtc = useUtcStore(state => state.setIsUtc);
+  useEffect(() => {
+    setIsUtc(isLocalUtc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLocalUtc]);
   if (!value) {
     return {
       innerContent: '-',
@@ -137,8 +149,6 @@ function useRelativeTime({
 function UTCChip({
   locale,
   isUtc,
-  sign,
-  hoursOffset,
   setIsUtc,
   useShortTimezone = true
 }) {
@@ -162,7 +172,7 @@ function UTCChip({
       padding: '4px 8px',
       lineHeight: 1
     },
-    onClick: () => setIsUtc(r => !r),
+    onClick: () => setIsUtc(!isUtc),
     children: text
   });
 }
@@ -178,6 +188,7 @@ export default function RelativeTime({
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,
+  placement = 'top-end',
   ...rest
 }) {
   const {
@@ -185,8 +196,6 @@ export default function RelativeTime({
     popContent,
     isUtc,
     setIsUtc,
-    sign,
-    hoursOffset,
     relativeString
   } = useRelativeTime({
     value,
@@ -201,7 +210,7 @@ export default function RelativeTime({
   if (type === 'all') {
     return /*#__PURE__*/_jsx(Tooltip, {
       title: undefined,
-      placement: "top-end",
+      placement: placement,
       enterTouchDelay: 0,
       children: /*#__PURE__*/_jsxs(Box, {
         display: "inline-flex",
@@ -235,8 +244,6 @@ export default function RelativeTime({
           }), /*#__PURE__*/_jsx(UTCChip, {
             locale: locale,
             isUtc: isUtc,
-            sign: sign,
-            hoursOffset: hoursOffset,
             setIsUtc: setIsUtc,
             useShortTimezone: useShortTimezone
           })]
@@ -246,7 +253,7 @@ export default function RelativeTime({
   }
   return /*#__PURE__*/_jsx(Tooltip, {
     title: enableTooltip ? popContent : undefined,
-    placement: "top-end",
+    placement: placement,
     enterTouchDelay: 0,
     children: /*#__PURE__*/_jsxs(Box, {
       display: "inline-flex",
@@ -259,8 +266,6 @@ export default function RelativeTime({
       }), type === 'utc' && !disableTimezone && /*#__PURE__*/_jsx(UTCChip, {
         locale: locale,
         isUtc: isUtc,
-        sign: sign,
-        hoursOffset: hoursOffset,
         setIsUtc: setIsUtc,
         useShortTimezone: useShortTimezone
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.47",
+  "version": "2.13.48",
   "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": "8236383669dc761248ad704198602e3b5af3bed2",
+  "gitHead": "e6639ffcaa28acbebef892a278fe609fc24ee365",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.47",
-    "@arcblock/nft-display": "^2.13.47",
-    "@arcblock/react-hooks": "^2.13.47",
+    "@arcblock/icons": "^2.13.48",
+    "@arcblock/nft-display": "^2.13.48",
+    "@arcblock/react-hooks": "^2.13.48",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.47",
+    "@blocklet/theme": "^2.13.48",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
@@ -129,6 +129,7 @@
     "type-fest": "^4.28.0",
     "validator": "^13.9.0",
     "versor": "^0.0.4",
-    "webfontloader": "^1.6.28"
+    "webfontloader": "^1.6.28",
+    "zustand": "^5.0.5"
   }
 }

package/src/RelativeTime/index.tsx

@@ -1,5 +1,5 @@
-import { Box, Tooltip } from '@mui/material';
-import { useState, useMemo } from 'react';
+import { Box, Tooltip, TooltipProps } from '@mui/material';
+import { useEffect, useMemo } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -7,6 +7,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import { create } from 'zustand';
 import { formatToDatetime, setDateTool } from '../Util';
 import type { Locale } from '../type';
 
@@ -51,6 +52,12 @@ const translations: Record<Locale, { utc: string; local: string; shortUTC: strin
   },
 };
 
+type UtcState = { isUtc: boolean; setIsUtc: (isUtc: boolean) => void };
+const useUtcStore = create<UtcState>((set) => ({
+  isUtc: false,
+  setIsUtc: (isUtc: boolean) => set({ isUtc }),
+}));
+
 export interface RelativeTimeProps {
   value: string | number;
   locale?: Locale;
@@ -63,6 +70,7 @@ export interface RelativeTimeProps {
   enableTooltip?: boolean;
   useShortTimezone?: boolean;
   disableTimezone?: boolean;
+  placement?: TooltipProps['placement'];
 }
 
 function useRelativeTime({
@@ -89,7 +97,14 @@ function useRelativeTime({
   const sign = timeZoneOffset > 0 ? '-' : '+';
   const hoursOffset = Math.abs(timeZoneOffset) / 60;
   const isLocalUtc = timeZoneOffset === 0;
-  const [isUtc, setIsUtc] = useState(isLocalUtc);
+
+  const isUtc = useUtcStore((state) => state.isUtc);
+  const setIsUtc = useUtcStore((state) => state.setIsUtc);
+
+  useEffect(() => {
+    setIsUtc(isLocalUtc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLocalUtc]);
 
   if (!value) {
     return { innerContent: '-', popContent: '-', isUtc, setIsUtc, sign, hoursOffset };
@@ -149,16 +164,12 @@ function useRelativeTime({
 function UTCChip({
   locale,
   isUtc,
-  sign,
-  hoursOffset,
   setIsUtc,
   useShortTimezone = true,
 }: {
   locale: Locale;
   isUtc?: boolean;
-  sign: string;
-  hoursOffset: number;
-  setIsUtc: (data: any) => void;
+  setIsUtc: (data: boolean) => void;
   useShortTimezone?: boolean;
 }) {
   const text = useMemo(() => {
@@ -185,7 +196,7 @@ function UTCChip({
         padding: '4px 8px',
         lineHeight: 1,
       }}
-      onClick={() => setIsUtc((r: any) => !r)}>
+      onClick={() => setIsUtc(!isUtc)}>
       {text}
     </Box>
   );
@@ -203,9 +214,10 @@ export default function RelativeTime({
   enableTooltip = true,
   useShortTimezone = false,
   disableTimezone = false,
+  placement = 'top-end',
   ...rest
 }: RelativeTimeProps) {
-  const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
+  const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
     value,
     locale,
     withoutSuffix,
@@ -218,7 +230,7 @@ export default function RelativeTime({
 
   if (type === 'all') {
     return (
-      <Tooltip title={undefined} placement="top-end" enterTouchDelay={0}>
+      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
         <Box display="inline-flex" alignItems="center" gap={0.5} {...rest}>
           <Box component="span" {...rest} sx={{}}>
             {innerContent}
@@ -238,14 +250,7 @@ export default function RelativeTime({
                 ·
               </Box>
 
-              <UTCChip
-                locale={locale}
-                isUtc={isUtc}
-                sign={sign}
-                hoursOffset={hoursOffset}
-                setIsUtc={setIsUtc}
-                useShortTimezone={useShortTimezone}
-              />
+              <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
             </>
           )}
         </Box>
@@ -254,21 +259,14 @@ export default function RelativeTime({
   }
 
   return (
-    <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
+    <Tooltip title={enableTooltip ? popContent : undefined} placement={placement} enterTouchDelay={0}>
       <Box display="inline-flex" alignItems="center" gap={1}>
         <Box component="span" {...rest}>
           {innerContent}
         </Box>
 
         {type === 'utc' && !disableTimezone && (
-          <UTCChip
-            locale={locale}
-            isUtc={isUtc}
-            sign={sign}
-            hoursOffset={hoursOffset}
-            setIsUtc={setIsUtc}
-            useShortTimezone={useShortTimezone}
-          />
+          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
         )}
       </Box>
     </Tooltip>