@kodiak-finance/orderly-ui-notification 2.8.20 → 2.8.21-beta.3

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { useMemo, useState, useEffect, useCallback } from 'react';
+import React2, { useMemo, useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import { useTranslation } from '@kodiak-finance/orderly-i18n';
-import { Flex, Text, cn, ChevronDownIcon, ScrollArea, Divider, Icon, ExtensionSlot, ExtensionPositionEnum, ChevronLeftIcon, ChevronRightIcon } from '@kodiak-finance/orderly-ui';
+import { Flex, Text, cn, ChevronDownIcon, ScrollArea, Divider, useEmblaCarousel, Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, Icon, ExtensionSlot, ExtensionPositionEnum, ChevronLeftIcon, ChevronRightIcon, useScreen, CloseIcon } from '@kodiak-finance/orderly-ui';
 import { AnnouncementType, EMPTY_LIST } from '@kodiak-finance/orderly-types';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { UTCDate, UTCDateMini } from '@date-fns/utc';
 import { differenceInHours, differenceInMinutes, format } from 'date-fns';
 import { produce } from 'immer';
@@ -791,8 +791,9 @@ var useAnnouncement = (options) => {
   };
   useEffect(() => {
     const len = memoizedTips.length;
+    const shouldShow = announcementStore.show ?? true;
     setShowAnnouncement(
-      Boolean(len) && announcementStore.show && !options?.hideTips
+      Boolean(len) && shouldShow && !options?.hideTips
     );
   }, [
     memoizedTips,
@@ -866,7 +867,464 @@ var AnnouncementCenterPage = (props) => {
     }
   );
 };
+var useMarqueeOnce = (opts) => {
+  const {
+    isActive,
+    pxPerSec = 60,
+    startDelayMs = 500,
+    endDelayMs = 500,
+    fallbackStayMs = 2500,
+    onFinish
+  } = opts;
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const rafRef = useRef(null);
+  const stopAll = () => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = null;
+  };
+  const timers = useRef([]);
+  const clearTimers = () => {
+    timers.current?.forEach((id) => {
+      if (id) {
+        clearTimeout(id);
+      }
+    });
+    timers.current = [];
+  };
+  const [overflow, setOverflow] = useState(false);
+  const [delta, setDelta] = useState(0);
+  useLayoutEffect(() => {
+    const c = containerRef.current;
+    const t = contentRef.current;
+    if (!c || !t) {
+      return;
+    }
+    const update = () => {
+      const cw = c.clientWidth;
+      const tw = t.scrollWidth;
+      const need = Math.max(0, tw - cw);
+      setOverflow(need > 0);
+      setDelta(need);
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(c);
+    ro.observe(t);
+    return () => {
+      ro.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    if (!isActive) {
+      stopAll();
+      clearTimers();
+      if (contentRef.current) {
+        contentRef.current.style.transform = "translate3d(0, 0, 0)";
+      }
+      return;
+    }
+    const run = async () => {
+      stopAll();
+      clearTimers();
+      if (!overflow || delta <= 0) {
+        const id = setTimeout(() => {
+          onFinish?.();
+        }, fallbackStayMs);
+        timers.current.push(id);
+        return;
+      }
+      const startId = setTimeout(() => {
+        const distance = delta;
+        const durationMs = distance / pxPerSec * 1e3;
+        const el = contentRef.current;
+        if (!el) {
+          return;
+        }
+        let startTs = 0;
+        const startX = 0;
+        const endX = -distance;
+        const step = (ts) => {
+          if (!startTs) {
+            startTs = ts;
+          }
+          const progress = Math.min(1, (ts - startTs) / durationMs);
+          const x = startX + (endX - startX) * progress;
+          el.style.transform = `translate3d(${x}px, 0, 0)`;
+          if (progress < 1) {
+            rafRef.current = requestAnimationFrame(step);
+          } else {
+            const endId = setTimeout(() => {
+              onFinish?.();
+            }, endDelayMs);
+            timers.current.push(endId);
+          }
+        };
+        rafRef.current = requestAnimationFrame(step);
+      }, startDelayMs);
+      timers.current.push(startId);
+    };
+    run();
+    return () => {
+      stopAll();
+      clearTimers();
+    };
+  }, [
+    isActive,
+    overflow,
+    delta,
+    pxPerSec,
+    startDelayMs,
+    endDelayMs,
+    fallbackStayMs,
+    onFinish
+  ]);
+  return { containerRef, contentRef, overflow, delta };
+};
+var usePrevNextButtons = (emblaApi, onButtonClick) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) {
+      return;
+    }
+    emblaApi.scrollPrev();
+  }, [emblaApi, onButtonClick]);
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) {
+      return;
+    }
+    emblaApi.scrollNext();
+  }, [emblaApi, onButtonClick]);
+  const onSelect = useCallback((api) => {
+    setPrevBtnDisabled(!api.canScrollPrev());
+    setNextBtnDisabled(!api.canScrollNext());
+  }, []);
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    onSelect(emblaApi);
+    emblaApi.on("reInit", onSelect).on("select", onSelect);
+    return () => {
+      emblaApi.off("reInit", onSelect).off("select", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick
+  };
+};
+var useSelectedSnapDisplay = (emblaApi) => {
+  const [selectedSnap, setSelectedSnap] = useState(0);
+  const [snapCount, setSnapCount] = useState(0);
+  const updateScrollSnapState = useCallback((api) => {
+    if (api) {
+      setSnapCount(api.scrollSnapList().length);
+      setSelectedSnap(api.selectedScrollSnap());
+    }
+  }, []);
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    updateScrollSnapState(emblaApi);
+    emblaApi.on("select", updateScrollSnapState);
+    emblaApi.on("reInit", updateScrollSnapState);
+    return () => {
+      emblaApi.off("select", updateScrollSnapState);
+      emblaApi.off("reInit", updateScrollSnapState);
+    };
+  }, [emblaApi, updateScrollSnapState]);
+  return {
+    selectedSnap,
+    snapCount
+  };
+};
+var TipsType = ({ type }) => {
+  const { t } = useTranslation();
+  const { label, className } = useMemo(() => {
+    const map = {
+      [AnnouncementType.Listing]: {
+        label: t("announcement.type.listing"),
+        className: "oui-bg-primary/15 oui-text-primary"
+      },
+      [AnnouncementType.Maintenance]: {
+        label: t("announcement.type.maintenance"),
+        className: "oui-bg-[rgba(232,136,0,0.15)] oui-text-warning-darken"
+      },
+      [AnnouncementType.Delisting]: {
+        label: t("announcement.type.delisting"),
+        className: "oui-bg-[rgba(232,136,0,0.15)] oui-text-warning-darken"
+      }
+    };
+    return map[type] || {
+      label: type,
+      className: map[AnnouncementType.Listing].className
+    };
+  }, [type, t]);
+  if (!label) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      justify: "center",
+      px: 2,
+      r: "base",
+      className: cn(
+        "oui-text-2xs oui-font-medium oui-leading-[18px]",
+        "oui-whitespace-nowrap oui-break-normal",
+        className
+      ),
+      children: label
+    }
+  );
+};
+var AnnouncementItem2 = (props) => {
+  const { type, text, url, isActive, onItemFinish, onItemClick } = props;
+  const { containerRef, contentRef, overflow } = useMarqueeOnce({
+    isActive,
+    pxPerSec: 90,
+    startDelayMs: 1e3,
+    endDelayMs: 1e3,
+    fallbackStayMs: 4e3,
+    onFinish: onItemFinish
+  });
+  const onClick = () => {
+    if (url) {
+      onItemClick?.(url);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      height: "100%",
+      itemAlign: "center",
+      className: "oui-flex-none oui-basis-full oui-transform-gpu",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "oui-relative oui-flex oui-h-[34px] oui-w-full oui-transform-gpu oui-items-center oui-overflow-hidden",
+            overflow ? "oui-justify-start" : "oui-justify-center"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: contentRef,
+              className: cn(
+                "oui-inline-flex oui-items-center oui-gap-2",
+                "oui-h-[34px] oui-whitespace-nowrap oui-leading-[34px]",
+                "oui-w-fit oui-transform-gpu oui-will-change-transform"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(TipsType, { type }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "xs",
+                    intensity: 80,
+                    className: cn(
+                      "oui-transform-gpu",
+                      url ? "oui-cursor-pointer" : void 0
+                    ),
+                    onClick: url ? onClick : void 0,
+                    children: text
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var SoundIcon = React2.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 18,
+      height: 18,
+      viewBox: "0 0 18 18",
+      fill: "currentColor",
+      ref,
+      focusable: false,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.5312 2.25534C11.2703 2.14734 10.9472 2.18333 10.7109 2.41958C10.1862 2.94383 9.52305 3.37884 8.7642 3.70434C7.99343 4.03434 6.411 4.46108 5.25547 4.45358C3.00765 4.43858 1.49993 5.71283 1.5 8.18033C1.5 10.3426 2.72745 11.6003 4.49423 11.8831L4.5 13.4476C4.5 14.6888 5.50733 15.6953 6.75 15.6953C7.89188 15.6953 8.83245 14.8118 8.97765 13.7071C8.98462 13.6538 9 13.4476 9 12.6976C9.67373 13.0118 10.232 13.5091 10.7109 13.9876C11.1834 14.4593 12 14.1166 12 13.4491C12 12.7711 11.9964 11.5433 11.9964 10.3186C12.8805 9.99159 13.5 9.15383 13.5 8.20358C13.5 7.25333 12.9149 6.39385 12.004 6.0751C12.004 4.85035 12 3.63609 12 2.95809C12 2.62434 11.7923 2.36409 11.5312 2.25534ZM13.3359 3.59033C13.1501 3.63833 12.9956 3.7636 12.8906 3.94135C12.6809 4.29835 12.7913 4.76259 13.1484 4.97184C14.2882 5.64084 15 6.85883 15 8.20358C15 9.54908 14.289 10.7663 13.1484 11.4353C12.7912 11.6446 12.6576 12.1081 12.8672 12.4651C13.0768 12.8221 13.5411 12.9323 13.8984 12.7231C15.4934 11.7878 16.4999 10.0861 16.5 8.20358C16.5 6.32183 15.4922 4.61933 13.8984 3.68408C13.7198 3.57908 13.5217 3.54233 13.3359 3.59033ZM10.5035 4.47384C10.5035 5.16759 10.5 5.89059 10.5 6.70509C10.5 8.20359 10.5 8.2036 10.5 9.7021C10.5 10.5166 10.5024 11.2103 10.5024 11.9041C8.98343 11.0078 7.41735 10.6103 6.00157 10.4828C6.00157 9.33909 5.99775 7.07709 5.99775 5.89884C6.14475 5.89209 6.31575 5.87335 6.5625 5.83885C7.52017 5.7016 8.4717 5.45259 9.375 5.06559C9.80505 4.88184 10.1247 4.71534 10.5035 4.47384ZM4.49887 6.02484C4.49887 7.17684 4.49775 9.21234 4.49775 10.3643C3.52177 10.0943 3 9.40508 3 8.18033C3 6.96983 3.47025 6.25209 4.49887 6.02484ZM6 11.9971C6.23745 12.0053 7.0977 12.1583 7.49243 12.2581L7.5 13.4476C7.5 13.8616 7.16423 14.1968 6.75 14.1968C6.33577 14.1968 6 13.8616 6 13.4476V11.9971Z",
+          fill: "#fff",
+          fillOpacity: 0.98
+        }
+      )
+    }
+  );
+});
+if (process.env.NODE_ENV !== "production") {
+  SoundIcon.displayName = "SoundIcon";
+}
+var SwitchTips = (props) => {
+  const { selectedSnap, snapCount, prevDisabled, nextDisabled, prevTips, nextTips } = props;
+  const { isMobile } = useScreen();
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: "oui-text-sm oui-tabular-nums oui-text-base-contrast-54", children: [
+      selectedSnap + 1,
+      "/",
+      snapCount
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-justify-center oui-gap-0 oui-text-base-contrast-54", children: [
+    /* @__PURE__ */ jsx(
+      ChevronLeftIcon,
+      {
+        size: 16,
+        opacity: 1,
+        className: cn(
+          "oui-size-4 oui-shrink-0 oui-text-base-contrast-54 hover:oui-text-base-contrast-80 lg:oui-size-5",
+          prevDisabled ? "oui-cursor-not-allowed" : "oui-cursor-pointer"
+        ),
+        onClick: prevDisabled ? void 0 : prevTips
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: "oui-text-sm oui-tabular-nums oui-text-base-contrast-54", children: [
+      selectedSnap + 1,
+      "/",
+      snapCount
+    ] }),
+    /* @__PURE__ */ jsx(
+      ChevronRightIcon,
+      {
+        size: 16,
+        opacity: 1,
+        className: cn(
+          "oui-size-4 oui-shrink-0 oui-text-base-contrast-54 hover:oui-text-base-contrast-80 lg:oui-size-5",
+          nextDisabled ? "oui-cursor-not-allowed" : "oui-cursor-pointer"
+        ),
+        onClick: nextDisabled ? void 0 : nextTips
+      }
+    )
+  ] });
+};
+var Controls = (props) => {
+  const { selectedSnap, snapCount, prevDisabled, nextDisabled, prevTips, nextTips, closeTips } = props;
+  const { isMobile } = useScreen();
+  return /* @__PURE__ */ jsxs(Flex, { gap: isMobile ? 1 : 2, justify: "center", itemAlign: "center", children: [
+    /* @__PURE__ */ jsx(
+      SwitchTips,
+      {
+        prevDisabled,
+        nextDisabled,
+        selectedSnap,
+        snapCount,
+        prevTips,
+        nextTips
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CloseIcon,
+      {
+        size: 18,
+        onClick: closeTips,
+        className: "oui-cursor-pointer oui-text-base-contrast-80 hover:oui-text-base-contrast"
+      }
+    )
+  ] });
+};
+var AnnouncementBannerUI = (props) => {
+  const { maintenanceDialogInfo, showAnnouncement, dataSource, onClose, style, className } = props;
+  const { t, i18n } = useTranslation();
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: true,
+    axis: "y",
+    align: "center",
+    duration: 30
+  });
+  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);
+  const { selectedSnap, snapCount } = useSelectedSnapDisplay(emblaApi);
+  const goNext = useCallback(() => {
+    if (!emblaApi) {
+      return;
+    }
+    emblaApi.scrollNext();
+  }, [emblaApi]);
+  if (maintenanceDialogInfo) {
+    return /* @__PURE__ */ jsx(Dialog, { open: true, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        closable: false,
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        className: "oui-w-[320px] lg:oui-w-auto",
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t("maintenance.dialog.title") }) }),
+          /* @__PURE__ */ jsx(DialogBody, { className: "oui-text-2xs lg:oui-text-xs", children: maintenanceDialogInfo })
+        ]
+      }
+    ) });
+  }
+  if (!showAnnouncement || !dataSource?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style,
+      className: cn(
+        "oui-relative oui-z-[1] oui-flex oui-transform-gpu oui-flex-row oui-flex-nowrap oui-items-center oui-justify-between oui-gap-x-1.5 oui-overflow-hidden oui-rounded-xl oui-bg-base-9 oui-px-4 oui-font-semibold",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "oui-size-[18px]", children: /* @__PURE__ */ jsx(SoundIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: emblaRef,
+            className: "oui-relative oui-h-[34px] oui-w-full oui-max-w-full oui-transform-gpu oui-overflow-hidden",
+            children: /* @__PURE__ */ jsx("div", { className: "oui-flex oui-h-full oui-transform-gpu oui-flex-col", children: dataSource.map((item, index) => /* @__PURE__ */ jsx(
+              AnnouncementItem2,
+              {
+                type: item?.type,
+                text: item?.i18n?.[i18n.language] || item?.message?.trim() || "",
+                url: item?.url || void 0,
+                isActive: index === selectedSnap,
+                onItemFinish: goNext,
+                onItemClick: (url) => {
+                  if (props.onItemClick) {
+                    props.onItemClick(url);
+                  } else {
+                    window.open(url, "_blank");
+                  }
+                }
+              },
+              `item-${item.announcement_id}-${index}`
+            )) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controls,
+          {
+            selectedSnap,
+            snapCount,
+            closeTips: onClose,
+            prevTips: onPrevButtonClick,
+            nextTips: onNextButtonClick,
+            prevDisabled: prevBtnDisabled,
+            nextDisabled: nextBtnDisabled
+          }
+        )
+      ]
+    }
+  );
+};
 
-export { AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };
+export { AnnouncementBannerUI, AnnouncementCenterPage, AnnouncementCenterUI, AnnouncementItem, NotificationUI, useAnnouncement };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map