@arcblock/ux 2.13.26 → 2.13.27

package/lib/RelativeTime/index.d.ts

@@ -6,9 +6,9 @@ export interface RelativeTimeProps {
     withoutSuffix?: false | true;
     from?: string | number;
     to?: string | number;
-    type?: 'relative' | 'absolute';
+    type?: 'relative' | 'absolute' | 'utc' | 'all';
     tz?: string;
     relativeRange?: number;
     enableTooltip?: boolean;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, ...rest }: RelativeTimeProps): "-" | import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip } from '@mui/material';
+import { useState } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { Tooltip } from '@mui/material';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -33,7 +34,15 @@ dayjs.updateLocale('zh-cn', {
 });
 // FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
-export default function RelativeTime({
+const translations = {
+  en: {
+    utc: 'Your Timezone'
+  },
+  zh: {
+    utc: '你所在时区'
+  }
+};
+function useRelativeTime({
   value,
   locale = 'en',
   withoutSuffix = false,
@@ -41,17 +50,31 @@ export default function RelativeTime({
   to = '',
   type = 'relative',
   tz,
-  relativeRange,
-  enableTooltip = true,
-  ...rest
+  relativeRange
 }) {
+  const date = new Date();
+  const timeZoneOffset = date.getTimezoneOffset();
+  const sign = timeZoneOffset > 0 ? '-' : '+';
+  const hoursOffset = Math.abs(timeZoneOffset) / 60;
+  const isLocalUtc = timeZoneOffset === 0;
+  const [isUtc, setIsUtc] = useState(isLocalUtc);
   if (!value) {
-    return '-';
+    return {
+      innerContent: '-',
+      popContent: '-',
+      isUtc,
+      setIsUtc,
+      sign,
+      hoursOffset
+    };
   }
   const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-  const datetime = dayjs(value).locale(localeOption);
+  let datetime = dayjs(value).locale(localeOption);
+  if (type === 'utc') {
+    datetime = dayjs(value).utc().locale(localeOption);
+  }
   if (tz) {
-    datetime.tz(tz);
+    datetime = datetime.tz(tz);
   }
   const absoluteString = formatToDatetime(value, {
     locale: localeOption,
@@ -77,13 +100,150 @@ export default function RelativeTime({
     innerContent = absoluteString;
     popContent = relativeString;
   }
+  if (type === 'utc') {
+    if (isUtc) {
+      innerContent = formatToDatetime(value, {
+        locale: localeOption,
+        tz,
+        isUtc: true
+      });
+      popContent = formatToDatetime(value, {
+        locale: localeOption,
+        tz,
+        isUtc: true
+      });
+    } else {
+      innerContent = absoluteString;
+      popContent = relativeString;
+    }
+  }
+  return {
+    innerContent,
+    popContent,
+    isUtc,
+    setIsUtc,
+    sign,
+    hoursOffset,
+    relativeString,
+    absoluteString
+  };
+}
+function UTCChip({
+  locale,
+  isUtc,
+  sign,
+  hoursOffset,
+  setIsUtc
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    component: "span",
+    sx: {
+      color: 'inherit',
+      cursor: 'pointer',
+      border: '1px solid',
+      fontSize: '0.8rem',
+      borderColor: 'divider',
+      borderRadius: '20px',
+      padding: '0px 8px'
+    },
+    onClick: () => setIsUtc(r => !r),
+    children: `${translations[locale].utc}: ${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`
+  });
+}
+export default function RelativeTime({
+  value,
+  locale = 'en',
+  withoutSuffix = false,
+  from = '',
+  to = '',
+  type = 'relative',
+  tz,
+  relativeRange,
+  enableTooltip = true,
+  ...rest
+}) {
+  const {
+    innerContent,
+    popContent,
+    isUtc,
+    setIsUtc,
+    sign,
+    hoursOffset,
+    relativeString
+  } = useRelativeTime({
+    value,
+    locale,
+    withoutSuffix,
+    from,
+    to,
+    type: type === 'all' ? 'utc' : type,
+    tz,
+    relativeRange
+  });
+  if (type === 'all') {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: undefined,
+      placement: "top-end",
+      enterTouchDelay: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        width: "max-content",
+        ...rest,
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: "span",
+          ...rest,
+          sx: {},
+          children: innerContent
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          sx: {
+            color: 'inherit'
+          },
+          children: "\xB7"
+        }), /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          sx: {
+            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
+        })]
+      })
+    });
+  }
   return /*#__PURE__*/_jsx(Tooltip, {
     title: enableTooltip ? popContent : undefined,
     placement: "top-end",
     enterTouchDelay: 0,
-    children: /*#__PURE__*/_jsx("span", {
-      ...rest,
-      children: innerContent
+    children: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      width: "max-content",
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "span",
+        ...rest,
+        children: innerContent
+      }), type === 'utc' && /*#__PURE__*/_jsx(UTCChip, {
+        locale: locale,
+        isUtc: isUtc,
+        sign: sign,
+        hoursOffset: hoursOffset,
+        setIsUtc: setIsUtc
+      })]
     })
   });
 }

package/lib/Util/index.d.ts

@@ -48,9 +48,10 @@ export declare function formatToDate(date: string | number | Date, { locale, tz
  * Ensure that the setDateTool() function is called first to set the time tool library.
  * @returns formatted date string
  */
-export declare function formatToDatetime(date: string | number | Date, { locale, tz }?: {
+export declare function formatToDatetime(date: string | number | Date, { locale, tz, isUtc }?: {
     locale?: Locale;
     tz?: string;
+    isUtc?: boolean;
 }): any;
 export declare function detectWalletExtension(): any;
 export declare function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures, appInfo, memberAppInfo, }: {

package/lib/Util/index.js

@@ -189,7 +189,8 @@ export function getDateTool() {
 }
 const createDateFormatter = format => (date, {
   locale,
-  tz
+  tz,
+  isUtc
 } = {}) => {
   if (dateTool === null) {
     throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
@@ -201,6 +202,9 @@ const createDateFormatter = format => (date, {
   if (tz) {
     instance = instance.tz(tz);
   }
+  if (isUtc) {
+    instance = instance.utc();
+  }
   if (typeof locale !== 'undefined') {
     instance = instance.locale(locale);
   }
@@ -229,11 +233,13 @@ export function formatToDate(date, {
  */
 export function formatToDatetime(date, {
   locale = 'en',
-  tz
+  tz,
+  isUtc = false
 } = {}) {
   return createDateFormatter('lll')(date, {
     locale,
-    tz
+    tz,
+    isUtc
   });
 }
 export function detectWalletExtension() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.26",
+  "version": "2.13.27",
   "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": "bf72ea918c9caeddeac9bcd6cb4352a415e7a29c",
+  "gitHead": "06abd7d8f9068ebca145a411b4a9b5b7f329535a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.26",
-    "@arcblock/nft-display": "^2.13.26",
-    "@arcblock/react-hooks": "^2.13.26",
+    "@arcblock/icons": "^2.13.27",
+    "@arcblock/nft-display": "^2.13.27",
+    "@arcblock/react-hooks": "^2.13.27",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.26",
+    "@blocklet/theme": "^2.13.27",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/RelativeTime/index.tsx

@@ -1,7 +1,8 @@
+import { Box, Tooltip } from '@mui/material';
+import { useState } from 'react';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { Tooltip } from '@mui/material';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -35,19 +36,28 @@ dayjs.updateLocale('zh-cn', {
 // FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 
+const translations: Record<Locale, { utc: string }> = {
+  en: {
+    utc: 'Your Timezone',
+  },
+  zh: {
+    utc: '你所在时区',
+  },
+};
+
 export interface RelativeTimeProps {
   value: string | number;
   locale?: Locale;
   withoutSuffix?: false | true;
   from?: string | number;
   to?: string | number;
-  type?: 'relative' | 'absolute';
+  type?: 'relative' | 'absolute' | 'utc' | 'all';
   tz?: string;
   relativeRange?: number;
   enableTooltip?: boolean;
 }
 
-export default function RelativeTime({
+function useRelativeTime({
   value,
   locale = 'en',
   withoutSuffix = false,
@@ -56,18 +66,36 @@ export default function RelativeTime({
   type = 'relative',
   tz,
   relativeRange,
-  enableTooltip = true,
-  ...rest
-}: RelativeTimeProps) {
+}: {
+  value: string | number;
+  locale?: Locale;
+  withoutSuffix?: boolean;
+  from?: string | number;
+  to?: string | number;
+  type?: 'relative' | 'absolute' | 'utc';
+  tz?: string;
+  relativeRange?: number;
+}) {
+  const date = new Date();
+  const timeZoneOffset = date.getTimezoneOffset();
+  const sign = timeZoneOffset > 0 ? '-' : '+';
+  const hoursOffset = Math.abs(timeZoneOffset) / 60;
+  const isLocalUtc = timeZoneOffset === 0;
+  const [isUtc, setIsUtc] = useState(isLocalUtc);
+
   if (!value) {
-    return '-';
+    return { innerContent: '-', popContent: '-', isUtc, setIsUtc, sign, hoursOffset };
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-  const datetime = dayjs(value).locale(localeOption);
+  let datetime = dayjs(value).locale(localeOption);
+
+  if (type === 'utc') {
+    datetime = dayjs(value).utc().locale(localeOption);
+  }
 
   if (tz) {
-    datetime.tz(tz);
+    datetime = datetime.tz(tz);
   }
 
   const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
@@ -97,9 +125,110 @@ export default function RelativeTime({
     popContent = relativeString;
   }
 
+  if (type === 'utc') {
+    if (isUtc) {
+      innerContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
+      popContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
+    } else {
+      innerContent = absoluteString;
+      popContent = relativeString;
+    }
+  }
+
+  return { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString, absoluteString };
+}
+
+function UTCChip({
+  locale,
+  isUtc,
+  sign,
+  hoursOffset,
+  setIsUtc,
+}: {
+  locale: Locale;
+  isUtc?: boolean;
+  sign: string;
+  hoursOffset: number;
+  setIsUtc: (data: any) => void;
+}) {
+  return (
+    <Box
+      component="span"
+      sx={{
+        color: 'inherit',
+        cursor: 'pointer',
+        border: '1px solid',
+        fontSize: '0.8rem',
+        borderColor: 'divider',
+        borderRadius: '20px',
+        padding: '0px 8px',
+      }}
+      onClick={() => setIsUtc((r: any) => !r)}>
+      {`${translations[locale].utc}: ${isUtc ? 'UTC' : `UTC${sign}${hoursOffset}`}`}
+    </Box>
+  );
+}
+
+export default function RelativeTime({
+  value,
+  locale = 'en',
+  withoutSuffix = false,
+  from = '',
+  to = '',
+  type = 'relative',
+  tz,
+  relativeRange,
+  enableTooltip = true,
+  ...rest
+}: RelativeTimeProps) {
+  const { innerContent, popContent, isUtc, setIsUtc, sign, hoursOffset, relativeString } = useRelativeTime({
+    value,
+    locale,
+    withoutSuffix,
+    from,
+    to,
+    type: type === 'all' ? 'utc' : type,
+    tz,
+    relativeRange,
+  });
+
+  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 component="span" {...rest} sx={{}}>
+            {innerContent}
+          </Box>
+
+          <Box component="span" sx={{ color: 'inherit' }}>
+            ·
+          </Box>
+
+          <Box component="span" sx={{ color: 'text.secondary' }}>
+            {relativeString}
+          </Box>
+
+          <Box component="span" sx={{ color: 'inherit' }}>
+            ·
+          </Box>
+
+          <UTCChip locale={locale} isUtc={isUtc} sign={sign} hoursOffset={hoursOffset} setIsUtc={setIsUtc} />
+        </Box>
+      </Tooltip>
+    );
+  }
+
   return (
     <Tooltip title={enableTooltip ? popContent : undefined} placement="top-end" enterTouchDelay={0}>
-      <span {...rest}>{innerContent}</span>
+      <Box display="flex" alignItems="center" gap={1} width="max-content">
+        <Box component="span" {...rest}>
+          {innerContent}
+        </Box>
+
+        {type === 'utc' && (
+          <UTCChip locale={locale} isUtc={isUtc} sign={sign} hoursOffset={hoursOffset} setIsUtc={setIsUtc} />
+        )}
+      </Box>
     </Tooltip>
   );
 }

package/src/Util/index.ts

@@ -246,7 +246,7 @@ export function getDateTool() {
 
 const createDateFormatter =
   (format: string) =>
-  (date: string | number | Date, { locale, tz }: { locale?: Locale; tz?: string } = {}) => {
+  (date: string | number | Date, { locale, tz, isUtc }: { locale?: Locale; tz?: string; isUtc?: boolean } = {}) => {
     if (dateTool === null) {
       throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
     }
@@ -261,6 +261,10 @@ const createDateFormatter =
       instance = instance.tz(tz);
     }
 
+    if (isUtc) {
+      instance = instance.utc();
+    }
+
     if (typeof locale !== 'undefined') {
       instance = instance.locale(locale);
     }
@@ -287,9 +291,9 @@ export function formatToDate(
  */
 export function formatToDatetime(
   date: string | number | Date,
-  { locale = 'en', tz }: { locale?: Locale; tz?: string } = {}
+  { locale = 'en', tz, isUtc = false }: { locale?: Locale; tz?: string; isUtc?: boolean } = {}
 ) {
-  return createDateFormatter('lll')(date, { locale, tz });
+  return createDateFormatter('lll')(date, { locale, tz, isUtc });
 }
 
 export function detectWalletExtension() {