@arcblock/ux 2.13.68 → 2.13.70

package/lib/RelativeTime/index.d.ts

@@ -14,5 +14,6 @@ export interface RelativeTimeProps {
     useShortTimezone?: boolean;
     disableTimezone?: boolean;
     placement?: TooltipProps['placement'];
+    format?: string;
 }
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, placement, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, placement, format, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -63,7 +63,8 @@ function useRelativeTime({
   to = '',
   type = 'relative',
   tz,
-  relativeRange
+  relativeRange,
+  format
 }) {
   const date = new Date();
   const timeZoneOffset = date.getTimezoneOffset();
@@ -96,7 +97,8 @@ function useRelativeTime({
   }
   const absoluteString = formatToDatetime(value, {
     locale: localeOption,
-    tz
+    tz,
+    format
   });
   let relativeString;
   if (from) {
@@ -123,12 +125,14 @@ function useRelativeTime({
       innerContent = formatToDatetime(value, {
         locale: localeOption,
         tz,
-        isUtc: true
+        isUtc: true,
+        format
       });
       popContent = formatToDatetime(value, {
         locale: localeOption,
         tz,
-        isUtc: true
+        isUtc: true,
+        format
       });
     } else {
       innerContent = absoluteString;
@@ -189,6 +193,7 @@ export default function RelativeTime({
   useShortTimezone = false,
   disableTimezone = false,
   placement = 'top-end',
+  format = 'lll',
   ...rest
 }) {
   const {
@@ -205,7 +210,8 @@ export default function RelativeTime({
     to,
     type: type === 'all' ? 'utc' : type,
     tz,
-    relativeRange
+    relativeRange,
+    format
   });
   if (type === 'all') {
     return /*#__PURE__*/_jsx(Tooltip, {

package/lib/Theme/theme-provider.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/styles';
-import StyledEngineProvider from '@mui/material/StyledEngineProvider';
+import { ThemeProvider as MuiThemeProvider, useTheme, StyledEngineProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY, getDefaultThemePrefer, isValidThemeMode } from '@blocklet/theme';

package/lib/Util/index.d.ts

@@ -48,10 +48,11 @@ 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, isUtc }?: {
+export declare function formatToDatetime(date: string | number | Date, { locale, tz, isUtc, format, }?: {
     locale?: Locale;
     tz?: string;
     isUtc?: boolean;
+    format?: string;
 }): any;
 export declare function detectWalletExtension(): any;
 export declare function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures, appInfo, memberAppInfo, }: {

package/lib/Util/index.js

@@ -234,9 +234,10 @@ export function formatToDate(date, {
 export function formatToDatetime(date, {
   locale = 'en',
   tz,
-  isUtc = false
+  isUtc = false,
+  format = 'lll'
 } = {}) {
-  return createDateFormatter('lll')(date, {
+  return createDateFormatter(format)(date, {
     locale,
     tz,
     isUtc

package/package.json

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

package/src/RelativeTime/index.tsx

@@ -71,6 +71,7 @@ export interface RelativeTimeProps {
   useShortTimezone?: boolean;
   disableTimezone?: boolean;
   placement?: TooltipProps['placement'];
+  format?: string;
 }
 
 function useRelativeTime({
@@ -82,6 +83,7 @@ function useRelativeTime({
   type = 'relative',
   tz,
   relativeRange,
+  format,
 }: {
   value: string | number;
   locale?: Locale;
@@ -91,6 +93,7 @@ function useRelativeTime({
   type?: 'relative' | 'absolute' | 'utc';
   tz?: string;
   relativeRange?: number;
+  format?: string;
 }) {
   const date = new Date();
   const timeZoneOffset = date.getTimezoneOffset();
@@ -121,7 +124,7 @@ function useRelativeTime({
     datetime = datetime.tz(tz);
   }
 
-  const absoluteString = formatToDatetime(value, { locale: localeOption, tz });
+  const absoluteString = formatToDatetime(value, { locale: localeOption, tz, format });
 
   let relativeString;
 
@@ -150,8 +153,8 @@ function useRelativeTime({
 
   if (type === 'utc') {
     if (isUtc) {
-      innerContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
-      popContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true });
+      innerContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true, format });
+      popContent = formatToDatetime(value, { locale: localeOption, tz, isUtc: true, format });
     } else {
       innerContent = absoluteString;
       popContent = relativeString;
@@ -215,6 +218,7 @@ export default function RelativeTime({
   useShortTimezone = false,
   disableTimezone = false,
   placement = 'top-end',
+  format = 'lll',
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
@@ -226,6 +230,7 @@ export default function RelativeTime({
     type: type === 'all' ? 'utc' : type,
     tz,
     relativeRange,
+    format,
   });
 
   if (type === 'all') {

package/src/Theme/theme-provider.tsx

@@ -1,8 +1,13 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles, PaletteMode } from '@mui/material';
-import { ThemeProvider as MuiThemeProvider, Theme, ThemeOptions, useTheme } from '@mui/material/styles';
-import StyledEngineProvider from '@mui/material/StyledEngineProvider';
+import {
+  ThemeProvider as MuiThemeProvider,
+  Theme,
+  ThemeOptions,
+  useTheme,
+  StyledEngineProvider,
+} from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import set from 'lodash/set';
 import { BLOCKLET_THEME_PREFER_KEY, getDefaultThemePrefer, isValidThemeMode } from '@blocklet/theme';

package/src/Util/index.ts

@@ -291,9 +291,14 @@ export function formatToDate(
  */
 export function formatToDatetime(
   date: string | number | Date,
-  { locale = 'en', tz, isUtc = false }: { locale?: Locale; tz?: string; isUtc?: boolean } = {}
+  {
+    locale = 'en',
+    tz,
+    isUtc = false,
+    format = 'lll',
+  }: { locale?: Locale; tz?: string; isUtc?: boolean; format?: string } = {}
 ) {
-  return createDateFormatter('lll')(date, { locale, tz, isUtc });
+  return createDateFormatter(format)(date, { locale, tz, isUtc });
 }
 
 export function detectWalletExtension() {