@rxdrag/website-lib-core 0.0.8 → 0.0.10

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

@@ -92,6 +92,13 @@ export type ContactFormProps = {
   submitAlign?: "left" | "center" | "right";
   actionUrl?: string;
   formSalt: string;
+  labels?: {
+    name?: string;
+    email?: string;
+    company?: string;
+    message?: string;
+    submit?: string;
+  };
 };
 
 export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
@@ -100,6 +107,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       submitAlign = "right",
       actionUrl = "/api/ask-for-quote",
       formSalt,
+      labels = {},
     } = props;
     const [formData, setFormData] = useState<QuoteRequest>({
       name: "",
@@ -256,7 +264,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
         <Input
           className="sm:col-span-1"
           inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label="Your Email *"
+          label={(labels?.email || "Your Email") + " *"}
           labelClassName="block text-sm font-medium leading-6 text-gray-900"
           name="email"
           required={true}
@@ -269,7 +277,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
         <Input
           className="sm:col-span-1"
           inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label="Your Name"
+          label={(labels?.name || "Your Name") + " *"}
           labelClassName="block text-sm font-medium leading-6 text-gray-900"
           name="name"
           value={formData.name}
@@ -279,7 +287,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
         <Input
           className="col-span-full"
           inputClassName="mt-2 block w-full rounded-md outline-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6"
-          label="Company"
+          label={(labels?.company || "Company") + " *"}
           labelClassName="block text-sm font-medium leading-6 text-gray-900"
           name="company"
           value={formData.company}
@@ -287,7 +295,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
         />
         <Textarea
           className="col-span-full"
-          label="Message *"
+          label={(labels?.message || "Message") + " *"}
           labelClassName="block text-sm font-medium leading-6 text-gray-900"
           name="message"
           required={true}
@@ -325,7 +333,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
           )}
           <Submit
             className="flex gap-2 items-center relative shadow-sm btn btn-primary btn-lg nowrap"
-            title="Send Message"
+            title={labels?.submit || "Send Message"}
             spinner={
               <div className="left-8 flex items-center justify-center">
                 <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white" />

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

@@ -1,10 +1,14 @@
-import { Icon as IconifyIcon, IconProps as IconifyIconProps } from "@iconify/react";
+import {
+  Icon as IconifyIcon,
+  IconProps as IconifyIconProps,
+} from "@iconify/react";
+import { forwardRef } from "react";
 
 export type IconProps = Omit<IconifyIconProps, "icon"> & {
   icon?: string;
 };
 
-export function Icon(props: IconProps) {
+export const Icon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
   const { icon, ...rest } = props;
-  return icon ? <IconifyIcon {...rest} icon={icon} /> : null;
-}
+  return icon ? <IconifyIcon ref={ref} {...rest} icon={icon} /> : null;
+});

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

@@ -8,6 +8,7 @@ export type TSlateProduct = TSlateResizable & {
   title?: string;
   description?: string;
   aspect?: string;
+  ctaTitle?: string;
 };
 
 export const PRODUCT_KEY = "Product";
@@ -19,5 +20,5 @@ export type ProductCardProps = {
 
 // Slate用的渲染组件
 export const ProductCard = ({ node }: ProductCardProps) => {
-  return <ProductView product={node?.product} node={node} />;
+  return <ProductView product={node?.product} node={node} ctaTitle={node?.ctaTitle}/>;
 };

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

@@ -1,30 +1,31 @@
 import { Product } from "@rxdrag/rxcms-models";
 import "./style.css";
 import {
-  DATA_POPUP,
+  DATA_OPENABLE,
   DATA_POPUP_CTA,
-  DATA_POPUP_ROLE,
+  DATA_OPENABLE_ROLE,
   popover,
-  PopupRole,
+  OpenAble,
 } from "../../../../controller";
 import { useRef } from "react";
 
 //TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
-export function ProductCta(props: { product?: Product; popupKey?: string }) {
-  const { product, popupKey = "enquiry-modal" } = props;
+export function ProductCta(props: {
+  product?: Product;
+  openableKey?: string;
+  children?: React.ReactNode;
+}) {
+  const { product, openableKey = "enquiry-modal", children } = props;
   const ref = useRef<HTMLButtonElement>(null);
   const roleProps = {
     [DATA_POPUP_CTA]: `From RichText ProductCard-${product?.title}-${product?.id}`,
-    [DATA_POPUP_ROLE]: PopupRole.ModalTrigger,
-    [DATA_POPUP]: popupKey,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
+    [DATA_OPENABLE]: openableKey,
   };
 
   const handleClick = () => {
     if (ref.current) {
-      popover.open(
-        roleProps[DATA_POPUP_CTA] || popupKey,
-        ref.current
-      );
+      popover.open(roleProps[DATA_POPUP_CTA] || openableKey, ref.current);
     }
   };
 
@@ -36,7 +37,7 @@ export function ProductCta(props: { product?: Product; popupKey?: string }) {
         className="product-cta-button relative flex-1 mt-2 flex items-center justify-center rounded-md border border-transparent bg-sky-600 text-md font-smibold text-white hover:bg-sky-700"
         onClick={handleClick}
       >
-        Get a quote
+        {children || "Get a quote"}
       </button>
     </div>
   );

package/src/react/components/ProductCard/ProductView.tsx

@@ -9,9 +9,10 @@ import { ProductCta } from "./ProductCta";
 export function ProductView(
   props: {
     product?: Product;
+    ctaTitle?: string;
   } & ProductCardProps
 ) {
-  const { product, node } = props;
+  const { product, ctaTitle, node } = props;
 
   const title = node?.title || product?.title;
   const description = node?.description || product?.description;
@@ -28,7 +29,7 @@ export function ProductView(
           <ProductTitle>{title}</ProductTitle>
         </a>
         <ProductDescription>{description}</ProductDescription>
-        <ProductCta product={product} />
+        <ProductCta product={product}>{ctaTitle}</ProductCta>
       </Figcaption>
     </Figure>
   );

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

@@ -17,7 +17,7 @@ export const ToTop = forwardRef<HTMLDivElement, ToTopProps>((
     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",
+        "fixed bottom-4 right-4 hidden user-select-none scrolled:flex cursor-pointer transition duration-300 ease-in-out z-50",
         className,
       )
     }

package/src/react/components/ToTop.tsx

@@ -56,7 +56,7 @@ export const ToTop = forwardRef<HTMLDivElement, ToTopProps>((props, ref) => {
     <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",
+        "fixed bottom-4 right-4 hidden user-select-none shadow-lg scrolled:flex cursor-pointer transition duration-300 ease-in-out z-50",
         className
       )}
       {...rest}

package/src/react/hooks/useScroll.ts

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