@arcblock/ux 3.0.24 → 3.0.26

package/lib/NFTDisplay/preview.d.ts

@@ -0,0 +1,11 @@
+export interface NftInfo {
+    address: string;
+    data: Record<string, any>;
+    display: Record<string, any>;
+    issuer: string;
+}
+export default function NftPreview({ visible, onClose, nft, }: {
+    visible: boolean;
+    onClose: () => void;
+    nft: NftInfo | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/NFTDisplay/preview.js

@@ -0,0 +1,60 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "@mui/material/Modal";
+import r from "@emotion/styled";
+import a, { getNFTData as s } from "./index.js";
+function f({
+  visible: e,
+  onClose: o,
+  nft: i
+}) {
+  return !e || !i ? null : /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(n, { open: e, onClose: o, children: /* @__PURE__ */ t(h, { onClick: o, children: /* @__PURE__ */ t(a, { data: s(i), address: i.address, inset: !0 }) }) }) });
+}
+const d = r.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    .mask {
+      opacity: 1;
+    }
+  }
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+`, h = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+
+  img,
+  object {
+    max-width: 90vw;
+    max-height: 75vh;
+  }
+
+  .nft-display--inset {
+    > .MuiBox-root,
+    .nft-display__loading {
+      width: 75vmin;
+      height: 75vmin;
+    }
+  }
+`;
+export {
+  f as default
+};

package/lib/RelativeTime/index.d.ts

@@ -15,5 +15,6 @@ export interface RelativeTimeProps {
     placement?: TooltipProps['placement'];
     sx?: SxProps;
     format?: string;
+    mode?: 'all' | 'daysLeft';
 }
-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;
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, tz, relativeRange, enableTooltip, useShortTimezone, disableTimezone, placement, format, mode, ...rest }: RelativeTimeProps): import("react/jsx-runtime").JSX.Element;

package/lib/RelativeTime/index.js

@@ -1,7 +1,7 @@
-import { jsx as i, jsxs as M, Fragment as F } from "react/jsx-runtime";
-import { Tooltip as O, Box as f } from "@mui/material";
+import { jsxs as I, jsx as n, Fragment as F } from "react/jsx-runtime";
+import { Box as a, Tooltip as M } from "@mui/material";
 import { useEffect as R, useMemo as $ } from "react";
-import r from "dayjs";
+import c from "dayjs";
 import "dayjs/locale/zh-cn";
 import k from "dayjs/plugin/utc";
 import B from "dayjs/plugin/timezone";
@@ -9,13 +9,13 @@ 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", {
+import { formatToDatetime as O, setDateTool as q } from "../Util/index.js";
+c.extend(N);
+c.extend(k);
+c.extend(B);
+c.extend(H);
+c.extend(E);
+c.updateLocale("zh-cn", {
   // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
   relativeTime: {
     future: "%s后",
@@ -33,7 +33,7 @@ r.updateLocale("zh-cn", {
     yy: "%d 年"
   }
 });
-q(r);
+q(c);
 const j = {
   en: {
     utc: "UTC Timezone",
@@ -47,123 +47,123 @@ const j = {
     shortUTC: "UTC",
     shortLocal: "当前时区"
   }
-}, z = Z((t) => ({
+}, A = Z((t) => ({
   isUtc: !1,
-  setIsUtc: (e) => t({ isUtc: e })
+  setIsUtc: (o) => t({ isUtc: o })
 }));
 function w({
   value: t,
-  locale: e = "en",
-  withoutSuffix: m = !1,
-  from: a = "",
-  to: h = "",
-  type: o = "relative",
-  tz: s,
-  relativeRange: L,
-  format: C
+  locale: o = "en",
+  withoutSuffix: p = !1,
+  from: d = "",
+  to: u = "",
+  type: i = "relative",
+  tz: l,
+  relativeRange: y,
+  format: U
 }) {
-  const u = (/* @__PURE__ */ new Date()).getTimezoneOffset(), U = u > 0 ? "-" : "+", v = Math.abs(u) / 60, c = u === 0, x = z((g) => g.isUtc), T = z((g) => g.setIsUtc);
+  const x = (/* @__PURE__ */ new Date()).getTimezoneOffset(), C = x > 0 ? "-" : "+", v = Math.abs(x) / 60, g = x === 0, r = A((L) => L.isUtc), T = A((L) => L.setIsUtc);
   if (R(() => {
-    T(c);
-  }, [c]), !t)
-    return { innerContent: "-", popContent: "-", isUtc: x, setIsUtc: T, sign: U, hoursOffset: v };
-  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);
+    T(g);
+  }, [g]), !t)
+    return { innerContent: "-", popContent: "-", isUtc: r, setIsUtc: T, sign: C, hoursOffset: v };
+  const m = o === "zh" ? "zh-cn" : "en-us";
+  let s = c(t).locale(m);
+  i === "utc" && (s = c(t).utc().locale(m)), l && (s = s.tz(l));
+  const f = O(t, { locale: m, tz: l, format: U });
+  let e;
+  if (d)
+    e = s.from(d, p);
+  else if (u)
+    e = s.to(u, p);
+  else if (y) {
+    const L = s.diff(c());
+    Math.abs(L) > y && (e = f);
   }
-  l || (l = n.fromNow(m));
-  let y = l, b = p;
-  return o === "absolute" && (y = p, b = l), o === "utc" && (x ? (y = D(t, { locale: d, tz: s, isUtc: !0, format: C }), b = D(t, { locale: d, tz: s, isUtc: !0, format: C })) : (y = p, b = l)), { innerContent: y, popContent: b, isUtc: x, setIsUtc: T, sign: U, hoursOffset: v, relativeString: l, absoluteString: p };
+  e || (e = s.fromNow(p));
+  let h = e, b = f;
+  return i === "absolute" && (h = f, b = e), i === "utc" && (r ? (h = O(t, { locale: m, tz: l, isUtc: !0, format: U }), b = O(t, { locale: m, tz: l, isUtc: !0, format: U })) : (h = f, b = e)), { innerContent: h, popContent: b, isUtc: r, setIsUtc: T, sign: C, hoursOffset: v, relativeString: e, absoluteString: f };
 }
-function A({
+function z({
   locale: t,
-  isUtc: e = !1,
-  setIsUtc: m,
-  useShortTimezone: a = !0
+  isUtc: o = !1,
+  setIsUtc: p,
+  useShortTimezone: d = !0
 }) {
-  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,
+  const u = $(() => {
+    const i = d ? "shortUTC" : "utc", l = d ? "shortLocal" : "local";
+    return o ? `${j[t][i]}` : `${j[t][l]}`;
+  }, [t, d, o]);
+  return /* @__PURE__ */ n(
+    a,
     {
       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
+      onClick: () => p(!o),
+      children: u
     }
   );
 }
 function et({
   value: t,
-  locale: e = "en",
-  withoutSuffix: m = !1,
-  from: a = "",
-  to: h = "",
-  type: o = "relative",
-  tz: s = void 0,
-  relativeRange: L = void 0,
-  enableTooltip: C = !0,
-  useShortTimezone: I = !1,
-  disableTimezone: u = !1,
-  placement: U = "top-end",
+  locale: o = "en",
+  withoutSuffix: p = !1,
+  from: d = "",
+  to: u = "",
+  type: i = "relative",
+  tz: l = void 0,
+  relativeRange: y = void 0,
+  enableTooltip: U = !0,
+  useShortTimezone: D = !1,
+  disableTimezone: x = !1,
+  placement: C = "top-end",
   format: v = "lll",
-  ...c
+  mode: g = "all",
+  ...r
 }) {
-  const { innerContent: x, popContent: T, isUtc: d, setIsUtc: n, relativeString: p } = w({
+  const { innerContent: T, popContent: m, isUtc: s, setIsUtc: f, relativeString: e } = w({
     value: t,
-    locale: e,
-    withoutSuffix: m,
-    from: a,
-    to: h,
-    type: o === "all" ? "utc" : o,
-    tz: s,
-    relativeRange: L,
+    locale: o,
+    withoutSuffix: p,
+    from: d,
+    to: u,
+    type: i === "all" ? "utc" : i,
+    tz: l,
+    relativeRange: y,
     format: v
-  });
-  return o === "all" ? /* @__PURE__ */ i(O, { title: void 0, placement: U, enterTouchDelay: 0, children: /* @__PURE__ */ M(
-    f,
+  }), h = /* @__PURE__ */ I(
+    a,
     {
-      ...c,
+      ...r,
       sx: [
         {
           display: "inline-flex",
           alignItems: "center",
           gap: 0.5
         },
-        ...Array.isArray(c.sx) ? c.sx : [c.sx]
+        ...Array.isArray(r.sx) ? r.sx : [r.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__ */ M(F, { children: [
-          /* @__PURE__ */ i(f, { component: "span", sx: { color: "inherit" }, children: "·" }),
-          /* @__PURE__ */ i(A, { locale: e, isUtc: d, setIsUtc: n, useShortTimezone: I })
+        /* @__PURE__ */ n(a, { component: "span", ...r, sx: {}, children: T }),
+        /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: "·" }),
+        /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: e }),
+        !x && /* @__PURE__ */ I(F, { children: [
+          /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: "·" }),
+          /* @__PURE__ */ n(z, { locale: o, isUtc: s, setIsUtc: f, useShortTimezone: D })
         ] })
       ]
     }
-  ) }) : /* @__PURE__ */ i(O, { title: C ? T : void 0, placement: U, enterTouchDelay: 0, children: /* @__PURE__ */ M(
-    f,
+  );
+  return g === "daysLeft" ? /* @__PURE__ */ n(M, { title: h, placement: C, enterTouchDelay: 0, children: /* @__PURE__ */ n(a, { component: "span", children: e }) }) : i === "all" && g === "all" ? /* @__PURE__ */ n(M, { title: void 0, placement: C, enterTouchDelay: 0, children: h }) : /* @__PURE__ */ n(M, { title: U ? m : void 0, placement: C, enterTouchDelay: 0, children: /* @__PURE__ */ I(
+    a,
     {
       sx: {
         display: "inline-flex",
@@ -171,8 +171,8 @@ function et({
         gap: 1
       },
       children: [
-        /* @__PURE__ */ i(f, { component: "span", ...c, children: x }),
-        o === "utc" && !u && /* @__PURE__ */ i(A, { locale: e, isUtc: d, setIsUtc: n, useShortTimezone: I })
+        /* @__PURE__ */ n(a, { component: "span", ...r, children: T }),
+        i === "utc" && !x && /* @__PURE__ */ n(z, { locale: o, isUtc: s, setIsUtc: f, useShortTimezone: D })
       ]
     }
   ) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.24",
+  "version": "3.0.26",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "37d2a1f13dfc80b7c41b2d503e295ac899f3c320",
+  "gitHead": "7bfbe63186facc499363ec4bcc776d1506893576",
   "dependencies": {
-    "@arcblock/bridge": "3.0.24",
+    "@arcblock/bridge": "3.0.26",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.24",
-    "@arcblock/nft-display": "3.0.24",
-    "@arcblock/react-hooks": "3.0.24",
+    "@arcblock/icons": "3.0.26",
+    "@arcblock/nft-display": "3.0.26",
+    "@arcblock/react-hooks": "3.0.26",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.24",
+    "@blocklet/theme": "3.0.26",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/NFTDisplay/preview.tsx

@@ -0,0 +1,84 @@
+import Modal from '@mui/material/Modal';
+import styled from '@emotion/styled';
+import NFTDisplay, { getNFTData } from '.';
+
+export interface NftInfo {
+  address: string;
+  data: Record<string, any>;
+  display: Record<string, any>;
+  issuer: string;
+}
+
+export default function NftPreview({
+  visible,
+  onClose,
+  nft,
+}: {
+  visible: boolean;
+  onClose: () => void;
+  nft: NftInfo | null;
+}) {
+  if (!visible || !nft) {
+    return null;
+  }
+
+  return (
+    <NftPreviewRoot>
+      {/* Preview Modal */}
+      <Modal open={visible} onClose={onClose}>
+        <ModalRoot onClick={onClose}>
+          <NFTDisplay data={getNFTData(nft)} address={nft.address} inset />
+        </ModalRoot>
+      </Modal>
+    </NftPreviewRoot>
+  );
+}
+
+const NftPreviewRoot = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  &:hover {
+    .mask {
+      opacity: 1;
+    }
+  }
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+`;
+
+const ModalRoot = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+
+  img,
+  object {
+    max-width: 90vw;
+    max-height: 75vh;
+  }
+
+  .nft-display--inset {
+    > .MuiBox-root,
+    .nft-display__loading {
+      width: 75vmin;
+      height: 75vmin;
+    }
+  }
+`;

package/src/RelativeTime/index.tsx

@@ -73,6 +73,7 @@ export interface RelativeTimeProps {
   placement?: TooltipProps['placement'];
   sx?: SxProps;
   format?: string;
+  mode?: 'all' | 'daysLeft'; // all: 显示所有内容，daysLeft: 只显示剩余天数
 }
 
 function useRelativeTime({
@@ -194,7 +195,6 @@ function UTCChip({
         color: 'inherit',
         cursor: 'pointer',
         border: '1px solid',
-        fontSize: '0.8rem',
         borderColor: 'divider',
         borderRadius: '20px',
         padding: '4px 8px',
@@ -220,6 +220,7 @@ export default function RelativeTime({
   disableTimezone = false,
   placement = 'top-end',
   format = 'lll',
+  mode = 'all',
   ...rest
 }: RelativeTimeProps) {
   const { innerContent, popContent, isUtc, setIsUtc, relativeString } = useRelativeTime({
@@ -234,41 +235,54 @@ export default function RelativeTime({
     format,
   });
 
-  if (type === 'all') {
-    return (
-      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
-        <Box
-          {...rest}
-          sx={[
-            {
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 0.5,
-            },
-            ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
-          ]}>
-          <Box component="span" {...rest} sx={{}}>
-            {innerContent}
-          </Box>
+  const allContent = (
+    <Box
+      {...rest}
+      sx={[
+        {
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 0.5,
+        },
+        ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+      ]}>
+      <Box component="span" {...rest} sx={{}}>
+        {innerContent}
+      </Box>
+
+      <Box component="span" sx={{ color: 'inherit' }}>
+        ·
+      </Box>
+
+      <Box component="span" sx={{ color: 'inherit' }}>
+        {relativeString}
+      </Box>
 
+      {!disableTimezone && (
+        <>
           <Box component="span" sx={{ color: 'inherit' }}>
             ·
           </Box>
 
-          <Box component="span" sx={{ color: 'text.secondary' }}>
-            {relativeString}
-          </Box>
+          <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
+        </>
+      )}
+    </Box>
+  );
 
-          {!disableTimezone && (
-            <>
-              <Box component="span" sx={{ color: 'inherit' }}>
-                ·
-              </Box>
+  // 优先通过 mode 来决定显示什么内容
+  if (mode === 'daysLeft') {
+    return (
+      <Tooltip title={allContent} placement={placement} enterTouchDelay={0}>
+        <Box component="span">{relativeString}</Box>
+      </Tooltip>
+    );
+  }
 
-              <UTCChip locale={locale} isUtc={isUtc} setIsUtc={setIsUtc} useShortTimezone={useShortTimezone} />
-            </>
-          )}
-        </Box>
+  if (type === 'all' && mode === 'all') {
+    return (
+      <Tooltip title={undefined} placement={placement} enterTouchDelay={0}>
+        {allContent}
       </Tooltip>
     );
   }