@rxdrag/website-lib-core 0.0.7 → 0.0.8

package/src/react/components/ProductCard/ProductCta/index.tsx

@@ -4,15 +4,14 @@ import {
   DATA_POPUP,
   DATA_POPUP_CTA,
   DATA_POPUP_ROLE,
-  DEFAULT_ENQUIRY_POPUP,
-  openPopup,
+  popover,
   PopupRole,
-} from "../../../../scripts";
+} from "../../../../controller";
 import { useRef } from "react";
 
 //TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
 export function ProductCta(props: { product?: Product; popupKey?: string }) {
-  const { product, popupKey = DEFAULT_ENQUIRY_POPUP } = props;
+  const { product, popupKey = "enquiry-modal" } = props;
   const ref = useRef<HTMLButtonElement>(null);
   const roleProps = {
     [DATA_POPUP_CTA]: `From RichText ProductCard-${product?.title}-${product?.id}`,
@@ -22,7 +21,10 @@ export function ProductCta(props: { product?: Product; popupKey?: string }) {
 
   const handleClick = () => {
     if (ref.current) {
-      openPopup(roleProps[DATA_POPUP_CTA] || popupKey, ref.current);
+      popover.open(
+        roleProps[DATA_POPUP_CTA] || popupKey,
+        ref.current
+      );
     }
   };
 

package/src/react/components/RichTextOutline/index.tsx

@@ -1,76 +1,76 @@
-import { extractOutline, mdxToSlate } from "@rxdrag/slate-preview";
-import { forwardRef, ReactNode, useEffect } from "react";
-import { useAcitviedHeading } from "./useAcitviedHeading";
-import clsx from "clsx";
-
-export type RichTextOutlineProps = {
-  className?: string;
-  itemClassName?: string;
-  value?: string;
-  //滚动偏移量
-  yOffset?: number;
-  style?: React.CSSProperties;
-};
-
-export const RichTextOutline = forwardRef<
-  HTMLUListElement,
-  RichTextOutlineProps
->((props, ref) => {
-  const { className, itemClassName, value, yOffset = 100, ...rest } = props;
-  const activiedId = useAcitviedHeading();
-  const nodes = mdxToSlate(value ?? "");
-  const outline = extractOutline(nodes ?? []);
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const element = document.getElementById(
-        window.location.hash.substring(1)
-      );
-      if (element) {
-        const y =
-          element.getBoundingClientRect().top + window.scrollY - yOffset;
-        window.scrollTo({ top: y, behavior: "smooth" });
-      }
-    };
-
-    window.addEventListener("hashchange", handleHashChange);
-
-    return () => {
-      window.removeEventListener("hashchange", handleHashChange);
-    };
-  }, []);
-
-  return outline?.length ? (
-    <ul ref={ref} className={className} {...rest}>
-      {outline?.map((item, index) => {
-        return (
-          <li
-            key={item?.key + index}
-            className={clsx(
-              activiedId === item?.key ? "actived" : "",
-              itemClassName
-            )}
-          >
-            <a
-              href={`#${item?.key}`}
-              onClick={(e) => {
-                e.preventDefault();
-                const element = document.getElementById(item?.key);
-                if (element) {
-                  const yOffset = -100; // 偏移量
-                  const y =
-                    element.getBoundingClientRect().top +
-                    window.scrollY +
-                    yOffset;
-                  window.scrollTo({ top: y, behavior: "smooth" });
-                }
-              }}
-            >
-              {item?.text}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
-});
+import { extractOutline, mdxToSlate } from "@rxdrag/slate-preview";
+import { forwardRef, ReactNode, useEffect } from "react";
+import { useAcitviedHeading } from "./useAcitviedHeading";
+import clsx from "clsx";
+
+export type RichTextOutlineProps = {
+  className?: string;
+  itemClassName?: string;
+  value?: string;
+  //滚动偏移量
+  yOffset?: number;
+  style?: React.CSSProperties;
+};
+
+export const RichTextOutline = forwardRef<
+  HTMLUListElement,
+  RichTextOutlineProps
+>((props, ref) => {
+  const { className, itemClassName, value, yOffset = 100, ...rest } = props;
+  const activiedId = useAcitviedHeading();
+  const nodes = mdxToSlate(value ?? "");
+  const outline = extractOutline(nodes ?? []);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const element = document.getElementById(
+        window.location.hash.substring(1)
+      );
+      if (element) {
+        const y =
+          element.getBoundingClientRect().top + window.scrollY - yOffset;
+        window.scrollTo({ top: y, behavior: "smooth" });
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, []);
+
+  return outline?.length ? (
+    <ul ref={ref} className={className} {...rest}>
+      {outline?.map((item, index) => {
+        return (
+          <li
+            key={item?.key + index}
+            className={clsx(
+              activiedId === item?.key ? "actived" : "",
+              itemClassName
+            )}
+          >
+            <a
+              href={`#${item?.key}`}
+              onClick={(e) => {
+                e.preventDefault();
+                const element = document.getElementById(item?.key);
+                if (element) {
+                  const yOffset = -100; // 偏移量
+                  const y =
+                    element.getBoundingClientRect().top +
+                    window.scrollY +
+                    yOffset;
+                  window.scrollTo({ top: y, behavior: "smooth" });
+                }
+              }}
+            >
+              {item?.text}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  ) : null;
+});

package/src/react/components/Scroller.tsx

@@ -1,6 +1,10 @@
 import { useScroll } from "../hooks";
 
-export function Scroller(props: { threshold?: number }) {
+export type ScrollerProps = {
+  threshold?: number;
+};
+
+export function Scroller(props: ScrollerProps) {
   const { threshold } = props;
   useScroll(threshold);
   return <></>;

package/src/react/components/SearchInput.tsx

@@ -1,34 +1,36 @@
-import { forwardRef, useState } from "react";
-
-export type SearchProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-export const SearchInput = forwardRef<HTMLInputElement, SearchProps>(
-  (props, ref) => {
-    const [keyword, setKeyword] = useState<string>();
-
-    // const navigate = useNavigate();
-    // const [, setOpen] = useXModalState();
-
-    const handleKeyEnter = (event: React.KeyboardEvent<HTMLElement>) => {
-      if (event.key !== "Enter" || !keyword) {
-        return;
-      }
-      // setOpen?.(false);
-      const encodedKeyword = encodeURIComponent(keyword || "");
-      if (encodedKeyword) {
-        //navigate(`/search?keyword=${encodedKeyword}`);
-      }
-    };
-
-    return (
-      <input
-        ref={ref}
-        name="q"
-        onKeyDown={handleKeyEnter}
-        value={keyword}
-        onChange={(e) => setKeyword(e.target.value)}
-        {...props}
-      />
-    );
-  }
-);
+import { forwardRef, useState } from "react";
+
+export type SearchProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchProps>(
+  (props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, ...rest } = props;
+    const [keyword, setKeyword] = useState<string>();
+
+    // const navigate = useNavigate();
+    // const [, setOpen] = useXModalState();
+
+    const handleKeyEnter = (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key !== "Enter" || !keyword) {
+        return;
+      }
+      // setOpen?.(false);
+      const encodedKeyword = encodeURIComponent(keyword || "");
+      if (encodedKeyword) {
+        //navigate(`/search?keyword=${encodedKeyword}`);
+      }
+    };
+
+    return (
+      <input
+        ref={ref}
+        name="q"
+        onKeyDown={handleKeyEnter}
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        {...rest}
+      />
+    );
+  }
+);

package/src/react/components/ToTop.tsx

@@ -1,33 +1,68 @@
-import clsx from "clsx"
-import { forwardRef } from "react"
+import clsx from "clsx";
+import { forwardRef, useRef, useEffect, useState } from "react";
 
-export type XToTopProps = {
-  className?: string,
-  children?: React.ReactNode
-}
+export type ToTopProps = {
+  className?: string;
+  children?: React.ReactNode;
+};
 
-export const ToTop = forwardRef<HTMLDivElement, XToTopProps>((
-  props, ref) => {
-  const { className, children, ...rest } = props
-  const handleClick = () => {
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
+export const topIcon = () => (
+  <svg
+    className="h-6 w-6"
+    width="1.5rem"
+    height="1.5rem"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M5 15l7-7 7 7"
+    />
+  </svg>
+);
 
-  return <div
-    ref={ref}
-    className={
-      clsx(
-        "fixed bottom-4 right-4 hidden user-select-none scrolling:flex cursor-pointer transition duration-300 ease-in-out z-50",
-        className,
-      )
+export const ToTop = forwardRef<HTMLDivElement, ToTopProps>((props, ref) => {
+  const { className, children, ...rest } = props;
+  const [win, setWin] = useState<Window | null>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  
+  // 合并外部传入的ref和内部ref
+  useEffect(() => {
+    if (!innerRef.current) return;
+    
+    // 获取当前元素所在的window
+    const currentWin = innerRef.current.ownerDocument.defaultView;
+    setWin(currentWin);
+    
+    // 如果外部传入的是ref对象，则设置其current属性
+    if (ref && typeof ref === 'object') {
+      ref.current = innerRef.current;
     }
-    {...rest}
-    onClick={handleClick}
-  >
-    {
-      children || <svg className="h-6 w-6" width="1.5rem" height="1.5rem" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
-      </svg>
+  }, [ref]);
+  
+  const handleClick = () => {
+    if (win) {
+      win.scrollTo({ top: 0, behavior: "smooth" });
+    } else if (typeof window !== 'undefined') {
+      // 降级处理：如果没有获取到特定window，使用全局window
+      window.scrollTo({ top: 0, behavior: "smooth" });
     }
-  </div>
-})
+  };
+
+  return (
+    <div
+      ref={innerRef}
+      className={clsx(
+        "fixed bottom-4 right-4 hidden user-select-none shadow-lg scrolling:flex cursor-pointer transition duration-300 ease-in-out z-50",
+        className
+      )}
+      {...rest}
+      onClick={handleClick}
+    >
+      {children || topIcon()}
+    </div>
+  );
+});

package/src/react/components/index.ts

@@ -1,4 +1,6 @@
-export * from "./EnquiryForm";
+export * from "./AttachmentIcon";
+export * from "./ContactForm";
+export * from "./Icon";
 export * from "./Medias";
 export * from "./ProductCard";
 export * from "./RichTextOutline";

package/src/react/hooks/useScroll.ts

@@ -2,22 +2,28 @@ import { useCallback, useEffect } from "react";
 
 export const defualtThreshold = 10;
 
-export function useScroll(threshold: number = defualtThreshold) {
+export function useScroll(
+  threshold: number = defualtThreshold,
+  win: Window | undefined = typeof window !== 'undefined' ? window : undefined,
+  doc: Document | undefined = typeof document !== 'undefined' ? document : undefined
+) {
 
   const onScroll = useCallback(() => {
-    const scrolling = (window.scrollY > threshold);
+    if (!win || !doc) return;
+    
+    const scrolling = win.scrollY > threshold;
 
     if (scrolling) {
-      document.body.classList.add('scrolling');
+      doc.body.classList.add("scrolling");
     } else {
-      document.body.classList.remove('scrolling');
+      doc.body.classList.remove("scrolling");
     }
-
-  }, [threshold]);
+  }, [threshold, win, doc]);
 
   useEffect(() => {
-    window.addEventListener("scroll", onScroll);
-    return () => window.removeEventListener("scroll", onScroll);
-  }, [onScroll]);
-
+    if (!win) return;
+    
+    win.addEventListener("scroll", onScroll);
+    return () => win.removeEventListener("scroll", onScroll);
+  }, [onScroll, win]);
 }