@arcblock/ux 2.13.69 → 3.0.0

package/lib/QRCode/index.d.ts

@@ -1,4 +1,4 @@
-import QRCodeStyling from '@solana/qr-code-styling';
+import { default as QRCodeStyling } from '@solana/qr-code-styling';
 type QRCodeStylingOptions = NonNullable<ConstructorParameters<typeof QRCodeStyling>[0]>;
 export interface QRCodeProps {
     /** 一般情况下仅使用 data/size/image 即可 */

package/lib/QRCode/index.js

@@ -1,58 +1,40 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo, useState } from 'react';
-import QRCodeStyling from '@solana/qr-code-styling';
-import { Box } from '@mui/material';
-const defaults = {
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as f, useMemo as m, useState as c, useEffect as p } from "react";
+import a from "@solana/qr-code-styling";
+import { Box as l } from "@mui/material";
+const y = {
   margin: 0,
   dotsOptions: {
-    type: 'dots'
+    type: "dots"
   },
   cornersSquareOptions: {
-    type: 'extra-rounded'
+    type: "extra-rounded"
   },
   cornersDotOptions: {
-    type: 'dot'
+    type: "dot"
   }
 };
-// 该组件用于生成与 android wallet 样式风格相似的 qrcode
-// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
-function QRCode({
-  data,
-  size,
-  image,
-  config = {},
-  ...rest
-}) {
-  const ref = useRef(null);
-  const options = useMemo(() => {
-    return {
-      ...defaults,
-      data,
-      width: size,
-      height: size,
-      ...(image && {
-        image,
-        imageOptions: {
-          crossOrigin: 'anonymous',
-          margin: 0
-        }
-      }),
-      ...config
-    };
-  }, [data, size, image, config]);
-  const [qrCode] = useState(new QRCodeStyling(options));
-  useEffect(() => {
-    if (ref.current) {
-      qrCode.append(ref.current);
-    }
-  }, [qrCode, ref]);
-  useEffect(() => {
-    if (!qrCode) return;
-    qrCode.update(options);
-  }, [options, qrCode]);
-  return /*#__PURE__*/_jsx(Box, {
-    ref: ref,
-    ...rest
-  });
+function C({ data: s, size: r, image: e, config: u = {}, ...i }) {
+  const o = f(null), n = m(() => ({
+    ...y,
+    data: s,
+    width: r,
+    height: r,
+    ...e && {
+      image: e,
+      imageOptions: {
+        crossOrigin: "anonymous",
+        margin: 0
+      }
+    },
+    ...u
+  }), [s, r, e, u]), [t] = c(new a(n));
+  return p(() => {
+    o.current && t.append(o.current);
+  }, [t, o]), p(() => {
+    t && t.update(n);
+  }, [n, t]), /* @__PURE__ */ d(l, { ref: o, ...i });
 }
-export default QRCode;
+export {
+  C as default
+};

package/lib/RelativeTime/RelativeTime.stories.d.ts

@@ -0,0 +1,20 @@
+export { default as Basic } from './demo/basic';
+export { default as WithoutSuffix } from './demo/without-suffix';
+export { default as From } from './demo/from';
+export { default as To } from './demo/to';
+export { default as DisplayAbsoluteTime } from './demo/display-absolute-time';
+export { default as CustomTimezoneAmericaLosAngeLes } from './demo/custom-timezone-america-los-ange-les';
+export { default as CustomStyle } from './demo/custom-style';
+export { default as UTCTimeFormat } from './demo/utc';
+export { default as AllTimeFormat } from './demo/all';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;

package/lib/RelativeTime/index.d.ts

@@ -1,6 +1,5 @@
-import { TooltipProps } from '@mui/material';
-import 'dayjs/locale/zh-cn';
-import type { Locale } from '../type';
+import { SxProps, TooltipProps } from '@mui/material';
+import { Locale } from '../type';
 export interface RelativeTimeProps {
     value: string | number;
     locale?: Locale;
@@ -14,5 +13,7 @@ export interface RelativeTimeProps {
     useShortTimezone?: boolean;
     disableTimezone?: boolean;
     placement?: TooltipProps['placement'];
+    sx?: SxProps;
+    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

@@ -1,274 +1,182 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Tooltip } from '@mui/material';
-import { useEffect, useMemo } from 'react';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-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);
-dayjs.extend(timezone);
-dayjs.extend(updateLocale);
-dayjs.extend(relativeTime);
-dayjs.updateLocale('zh-cn', {
+import { jsx as i, jsxs as v, Fragment as F } from "react/jsx-runtime";
+import { Tooltip as O, Box as f } from "@mui/material";
+import { useEffect as R, useMemo as $ } from "react";
+import r from "dayjs";
+import "dayjs/locale/zh-cn";
+import k from "dayjs/plugin/utc";
+import B from "dayjs/plugin/timezone";
+import E from "dayjs/plugin/relativeTime";
+import H from "dayjs/plugin/updateLocale";
+import N from "dayjs/plugin/localizedFormat";
+import { create as Z } from "zustand";
+import { formatToDatetime as D, setDateTool as q } from "../Util/index.js";
+r.extend(N);
+r.extend(k);
+r.extend(B);
+r.extend(H);
+r.extend(E);
+r.updateLocale("zh-cn", {
   // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
   relativeTime: {
-    future: '%s后',
-    past: '%s前',
-    s: '几秒',
-    m: '1 分钟',
-    mm: '%d 分钟',
-    h: '1 小时',
-    hh: '%d 小时',
-    d: '1 天',
-    dd: '%d 天',
-    M: '1 个月',
-    MM: '%d 个月',
-    y: '1 年',
-    yy: '%d 年'
+    future: "%s后",
+    past: "%s前",
+    s: "几秒",
+    m: "1 分钟",
+    mm: "%d 分钟",
+    h: "1 小时",
+    hh: "%d 小时",
+    d: "1 天",
+    dd: "%d 天",
+    M: "1 个月",
+    MM: "%d 个月",
+    y: "1 年",
+    yy: "%d 年"
   }
 });
-// FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
-setDateTool(dayjs);
-const translations = {
+q(r);
+const j = {
   en: {
-    utc: 'UTC Timezone',
-    local: 'Local Timezone',
-    shortUTC: 'UTC',
-    shortLocal: 'Local'
+    utc: "UTC Timezone",
+    local: "Local Timezone",
+    shortUTC: "UTC",
+    shortLocal: "Local"
   },
   zh: {
-    utc: 'UTC 时区',
-    local: '当前时区',
-    shortUTC: 'UTC',
-    shortLocal: '当前时区'
+    utc: "UTC 时区",
+    local: "当前时区",
+    shortUTC: "UTC",
+    shortLocal: "当前时区"
   }
-};
-const useUtcStore = create(set => ({
-  isUtc: false,
-  setIsUtc: isUtc => set({
-    isUtc
-  })
+}, z = Z((t) => ({
+  isUtc: !1,
+  setIsUtc: (e) => t({ isUtc: e })
 }));
-function useRelativeTime({
-  value,
-  locale = 'en',
-  withoutSuffix = false,
-  from = '',
-  to = '',
-  type = 'relative',
-  tz,
-  relativeRange
+function w({
+  value: t,
+  locale: e = "en",
+  withoutSuffix: m = !1,
+  from: a = "",
+  to: h = "",
+  type: o = "relative",
+  tz: s,
+  relativeRange: L,
+  format: C
 }) {
-  const date = new Date();
-  const timeZoneOffset = date.getTimezoneOffset();
-  const sign = timeZoneOffset > 0 ? '-' : '+';
-  const hoursOffset = Math.abs(timeZoneOffset) / 60;
-  const isLocalUtc = timeZoneOffset === 0;
-  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
-    };
-  }
-  const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-  let datetime = dayjs(value).locale(localeOption);
-  if (type === 'utc') {
-    datetime = dayjs(value).utc().locale(localeOption);
-  }
-  if (tz) {
-    datetime = datetime.tz(tz);
+  const u = (/* @__PURE__ */ new Date()).getTimezoneOffset(), U = u > 0 ? "-" : "+", y = Math.abs(u) / 60, c = u === 0, x = z((g) => g.isUtc), T = z((g) => g.setIsUtc);
+  if (R(() => {
+    T(c);
+  }, [c]), !t)
+    return { innerContent: "-", popContent: "-", isUtc: x, setIsUtc: T, sign: U, hoursOffset: y };
+  const d = e === "zh" ? "zh-cn" : "en-us";
+  let n = r(t).locale(d);
+  o === "utc" && (n = r(t).utc().locale(d)), s && (n = n.tz(s));
+  const p = D(t, { locale: d, tz: s, format: C });
+  let l;
+  if (a)
+    l = n.from(a, m);
+  else if (h)
+    l = n.to(h, m);
+  else if (L) {
+    const g = n.diff(r());
+    Math.abs(g) > L && (l = p);
   }
-  const absoluteString = formatToDatetime(value, {
-    locale: localeOption,
-    tz
-  });
-  let relativeString;
-  if (from) {
-    relativeString = datetime.from(from, withoutSuffix);
-  } else if (to) {
-    relativeString = datetime.to(to, withoutSuffix);
-  } else if (relativeRange) {
-    const diffTime = datetime.diff(dayjs());
-    if (Math.abs(diffTime) > relativeRange) {
-      relativeString = absoluteString;
-    }
-  }
-  if (!relativeString) {
-    relativeString = datetime.fromNow(withoutSuffix);
-  }
-  let innerContent = relativeString;
-  let popContent = absoluteString;
-  if (type === 'absolute') {
-    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
-  };
+  l || (l = n.fromNow(m));
+  let b = l, I = p;
+  return o === "absolute" && (b = p, I = l), o === "utc" && (x ? (b = D(t, { locale: d, tz: s, isUtc: !0, format: C }), I = D(t, { locale: d, tz: s, isUtc: !0, format: C })) : (b = p, I = l)), { innerContent: b, popContent: I, isUtc: x, setIsUtc: T, sign: U, hoursOffset: y, relativeString: l, absoluteString: p };
 }
-function UTCChip({
-  locale,
-  isUtc,
-  setIsUtc,
-  useShortTimezone = true
+function A({
+  locale: t,
+  isUtc: e,
+  setIsUtc: m,
+  useShortTimezone: a = !0
 }) {
-  const text = useMemo(() => {
-    const UTC = useShortTimezone ? 'shortUTC' : 'utc';
-    const LOCAL = useShortTimezone ? 'shortLocal' : 'local';
-    if (isUtc) {
-      return `${translations[locale][UTC]}`;
+  const h = $(() => {
+    const o = a ? "shortUTC" : "utc", s = a ? "shortLocal" : "local";
+    return e ? `${j[t][o]}` : `${j[t][s]}`;
+  }, [t, a, e]);
+  return /* @__PURE__ */ i(
+    f,
+    {
+      component: "span",
+      sx: {
+        color: "inherit",
+        cursor: "pointer",
+        border: "1px solid",
+        fontSize: "0.8rem",
+        borderColor: "divider",
+        borderRadius: "20px",
+        padding: "4px 8px",
+        lineHeight: 1
+      },
+      onClick: () => m(!e),
+      children: h
     }
-    return `${translations[locale][LOCAL]}`;
-  }, [locale, useShortTimezone, isUtc]);
-  return /*#__PURE__*/_jsx(Box, {
-    component: "span",
-    sx: {
-      color: 'inherit',
-      cursor: 'pointer',
-      border: '1px solid',
-      fontSize: '0.8rem',
-      borderColor: 'divider',
-      borderRadius: '20px',
-      padding: '4px 8px',
-      lineHeight: 1
-    },
-    onClick: () => setIsUtc(!isUtc),
-    children: text
-  });
+  );
 }
-export default function RelativeTime({
-  value,
-  locale = 'en',
-  withoutSuffix = false,
-  from = '',
-  to = '',
-  type = 'relative',
-  tz,
-  relativeRange,
-  enableTooltip = true,
-  useShortTimezone = false,
-  disableTimezone = false,
-  placement = 'top-end',
-  ...rest
+function et({
+  value: t,
+  locale: e = "en",
+  withoutSuffix: m = !1,
+  from: a = "",
+  to: h = "",
+  type: o = "relative",
+  tz: s,
+  relativeRange: L,
+  enableTooltip: C = !0,
+  useShortTimezone: M = !1,
+  disableTimezone: u = !1,
+  placement: U = "top-end",
+  format: y = "lll",
+  ...c
 }) {
-  const {
-    innerContent,
-    popContent,
-    isUtc,
-    setIsUtc,
-    relativeString
-  } = useRelativeTime({
-    value,
-    locale,
-    withoutSuffix,
-    from,
-    to,
-    type: type === 'all' ? 'utc' : type,
-    tz,
-    relativeRange
+  const { innerContent: x, popContent: T, isUtc: d, setIsUtc: n, relativeString: p } = w({
+    value: t,
+    locale: e,
+    withoutSuffix: m,
+    from: a,
+    to: h,
+    type: o === "all" ? "utc" : o,
+    tz: s,
+    relativeRange: L,
+    format: y
   });
-  if (type === 'all') {
-    return /*#__PURE__*/_jsx(Tooltip, {
-      title: undefined,
-      placement: placement,
-      enterTouchDelay: 0,
-      children: /*#__PURE__*/_jsxs(Box, {
+  return o === "all" ? /* @__PURE__ */ i(O, { title: void 0, placement: U, enterTouchDelay: 0, children: /* @__PURE__ */ v(
+    f,
+    {
+      ...c,
+      sx: [
+        {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.5
+        },
+        ...Array.isArray(c.sx) ? c.sx : [c.sx]
+      ],
+      children: [
+        /* @__PURE__ */ i(f, { component: "span", ...c, sx: {}, children: x }),
+        /* @__PURE__ */ i(f, { component: "span", sx: { color: "inherit" }, children: "·" }),
+        /* @__PURE__ */ i(f, { component: "span", sx: { color: "text.secondary" }, children: p }),
+        !u && /* @__PURE__ */ v(F, { children: [
+          /* @__PURE__ */ i(f, { component: "span", sx: { color: "inherit" }, children: "·" }),
+          /* @__PURE__ */ i(A, { locale: e, isUtc: d, setIsUtc: n, useShortTimezone: M })
+        ] })
+      ]
+    }
+  ) }) : /* @__PURE__ */ i(O, { title: C ? T : void 0, placement: U, enterTouchDelay: 0, children: /* @__PURE__ */ v(
+    f,
+    {
+      sx: {
         display: "inline-flex",
         alignItems: "center",
-        gap: 0.5,
-        ...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
-        }), !disableTimezone && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Box, {
-            component: "span",
-            sx: {
-              color: 'inherit'
-            },
-            children: "\xB7"
-          }), /*#__PURE__*/_jsx(UTCChip, {
-            locale: locale,
-            isUtc: isUtc,
-            setIsUtc: setIsUtc,
-            useShortTimezone: useShortTimezone
-          })]
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(Tooltip, {
-    title: enableTooltip ? popContent : undefined,
-    placement: placement,
-    enterTouchDelay: 0,
-    children: /*#__PURE__*/_jsxs(Box, {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: 1,
-      children: [/*#__PURE__*/_jsx(Box, {
-        component: "span",
-        ...rest,
-        children: innerContent
-      }), type === 'utc' && !disableTimezone && /*#__PURE__*/_jsx(UTCChip, {
-        locale: locale,
-        isUtc: isUtc,
-        setIsUtc: setIsUtc,
-        useShortTimezone: useShortTimezone
-      })]
-    })
-  });
-}
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ i(f, { component: "span", ...c, children: x }),
+        o === "utc" && !u && /* @__PURE__ */ i(A, { locale: e, isUtc: d, setIsUtc: n, useShortTimezone: M })
+      ]
+    }
+  ) });
+}
+export {
+  et as default
+};

package/lib/Result/Result.stories.d.ts

@@ -0,0 +1,21 @@
+export { default as Common404 } from './demo/common404';
+export { default as Common403 } from './demo/common403';
+export { default as Common500 } from './demo/common500';
+export { default as CommonError } from './demo/common-error';
+export { default as CommonMaintenance } from './demo/common-maintenance';
+export { default as CommonComingSoon } from './demo/common-coming-soon';
+export { default as Custom404Page } from './demo/custom404-page';
+export { default as InfoPage } from './demo/info-page';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        let layout: string;
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+    let decorators: ((StoryFn: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;

package/lib/Result/common.d.ts

@@ -1,5 +1,5 @@
-import { type ResultProps } from './result';
-import type { Locale } from '../type';
+import { ResultProps } from './result';
+import { Locale } from '../type';
 export type CommonResultProps = {
     locale: Locale;
 } & Omit<ResultProps, 'icon' | 'title' | 'description'>;