@rxdrag/website-lib-core 0.0.126 → 0.0.128

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

@@ -1,271 +1,271 @@
-import clsx from "clsx";
-import { forwardRef, useEffect, useState, useCallback } from "react";
-import { TMedia } from "../../../entify";
-import { MainMedia } from "./MainMedia";
-import { Thumbnail } from "./Thumbnail";
-
-export type MediasProps = {
-  value?: TMedia[];
-  className?: string;
-  children?: React.ReactNode;
-  // Aspect ratio, format is `aspect-[width/height]`
-  aspect?: string;
-  thumbnailAspect?: string;
-  enableZoom?: boolean;
-  thumbnailPosition?: "bottom" | "left";
-  visibleCount?: number;
-  classNames?: {
-    mainArea?: string;
-    navigation?: string;
-    thumbnail?: string;
-    thumbnailImage?: string;
-    arrowButton?: string;
-    arrowIcon?: string;
-    playButton?: string;
-    navigationInner?: string;
-  };
-};
-
-export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
-  const {
-    value,
-    className,
-    children,
-    aspect = "aspect-[1/1]",
-    thumbnailAspect = "aspect-[1/1]",
-    enableZoom = true,
-    thumbnailPosition = "bottom",
-    visibleCount = 6,
-    classNames,
-    ...rest
-  } = props;
-  const {
-    mainArea,
-    navigation,
-    thumbnail,
-    thumbnailImage,
-    arrowButton,
-    arrowIcon,
-    playButton,
-    navigationInner,
-  } = classNames || {};
-  const [selectedId, setSelectedId] = useState<string | undefined | null>(
-    value?.[0]?.id || ""
-  );
-
-  useEffect(() => {
-    setSelectedId(value?.[0]?.id || "");
-  }, [value]);
-
-  const selectedIndex =
-    value?.findIndex((media) => media.id === selectedId) || 0;
-
-  const totalItems = value?.length || 0;
-
-  const handlePrevious = useCallback(() => {
-    if (selectedIndex > 0) {
-      const prevIndex = selectedIndex - 1;
-      setSelectedId(value?.[prevIndex]?.id || "");
-    }
-  }, [selectedIndex, value]);
-
-  const handleNext = useCallback(() => {
-    if (selectedIndex < totalItems - 1) {
-      const currentMediaIndex =
-        value?.findIndex((media) => media.id === selectedId) || 0;
-      const nextIndex = currentMediaIndex + 1;
-      setSelectedId(value?.[nextIndex]?.id || "");
-    }
-  }, [selectedIndex, totalItems, value, selectedId]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-        handlePrevious();
-      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-        handleNext();
-      }
-    },
-    [handleNext, handlePrevious]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
-  const canPrevious = selectedIndex > 0;
-  const canNext = selectedIndex < totalItems - 1;
-
-  const isVerticalThumbs = thumbnailPosition === "left";
-
-  const actualVisibleCount = visibleCount;
-  const halfVisible = Math.floor(actualVisibleCount / 2);
-  const startIndex = Math.max(
-    0,
-    Math.min(selectedIndex - halfVisible, totalItems - actualVisibleCount)
-  );
-  const endIndex = Math.min(startIndex + actualVisibleCount, totalItems);
-
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        "flex gap-4",
-        isVerticalThumbs ? "flex-col md:flex-row-reverse" : "flex-col",
-        className
-      )}
-      {...rest}
-    >
-      {children}
-      {/* Main display area */}
-      <MainMedia
-        value={value}
-        selectedId={selectedId}
-        aspect={aspect}
-        enableZoom={enableZoom}
-        className={clsx(
-          isVerticalThumbs ? "w-full md:flex-1" : "w-full",
-          mainArea
-        )}
-        arrowButtonClass={arrowButton}
-        arrowIconClass={arrowIcon}
-        playButtonClass={playButton}
-        onPrevious={handlePrevious}
-        onNext={handleNext}
-        canPrevious={canPrevious}
-        canNext={canNext}
-      />
-
-      {/* Thumbnail navigation */}
-      {totalItems > 1 && (
-        <div
-          className={clsx(
-            "relative group/thumbs",
-            isVerticalThumbs
-              ? "w-full mt-4 md:w-24 md:h-full md:px-1"
-              : "w-full mt-4",
-            navigation
-          )}
-        >
-          {/* Previous Arrow */}
-          {totalItems > actualVisibleCount && (
-            <button
-              onClick={handlePrevious}
-              disabled={!canPrevious}
-              className={clsx(
-                "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
-                "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
-                "text-gray-700 dark:text-gray-200 transition-all duration-200",
-                isVerticalThumbs
-                  ? "left-2 top-1/2 -translate-y-1/2 md:top-2 md:left-1/2 md:-translate-x-1/2"
-                  : "left-2 top-1/2 -translate-y-1/2",
-                !canPrevious
-                  ? "opacity-0 pointer-events-none"
-                  : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
-                arrowButton
-              )}
-              aria-label="Previous"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className={clsx(
-                  "h-4 w-4",
-                  isVerticalThumbs && "md:rotate-90",
-                  arrowIcon
-                )}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M15 19l-7-7 7-7"
-                />
-              </svg>
-            </button>
-          )}
-
-          <div
-            className={clsx(
-              "flex-1",
-              isVerticalThumbs
-                ? "w-full px-0.5 md:h-full md:py-0.5"
-                : "w-full px-0.5"
-            )}
-          >
-            <div
-              className={clsx(
-                "gap-2 md:gap-3",
-                navigationInner,
-                isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
-              )}
-              style={{
-                gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
-              }}
-            >
-              {value?.map((media, index) => {
-                if (index < startIndex || index >= endIndex) return null;
-                const isSelected = selectedId === media.id;
-                return (
-                  <Thumbnail
-                    key={media.id}
-                    media={media}
-                    isSelected={isSelected}
-                    onClick={() => setSelectedId(media.id)}
-                    aspect={thumbnailAspect}
-                    className={thumbnail}
-                    imageClass={thumbnailImage}
-                    playButtonClass={playButton}
-                  />
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Next Arrow */}
-          {totalItems > actualVisibleCount && (
-            <button
-              onClick={handleNext}
-              disabled={!canNext}
-              className={clsx(
-                "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
-                "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
-                "text-gray-700 dark:text-gray-200 transition-all duration-200",
-                isVerticalThumbs
-                  ? "right-2 top-1/2 -translate-y-1/2 md:bottom-2 md:left-1/2 md:-translate-x-1/2"
-                  : "right-2 top-1/2 -translate-y-1/2",
-                !canNext
-                  ? "opacity-0 pointer-events-none"
-                  : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
-                arrowButton
-              )}
-              aria-label="Next"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className={clsx(
-                  "h-4 w-4",
-                  isVerticalThumbs && "md:rotate-90",
-                  arrowIcon
-                )}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-});
+import clsx from "clsx";
+import { forwardRef, useEffect, useState, useCallback } from "react";
+import { TMedia } from "../../../entify";
+import { MainMedia } from "./MainMedia";
+import { Thumbnail } from "./Thumbnail";
+
+export type MediasProps = {
+  value?: TMedia[];
+  className?: string;
+  children?: React.ReactNode;
+  // Aspect ratio, format is `aspect-[width/height]`
+  aspect?: string;
+  thumbnailAspect?: string;
+  enableZoom?: boolean;
+  thumbnailPosition?: "bottom" | "left";
+  visibleCount?: number;
+  classNames?: {
+    mainArea?: string;
+    navigation?: string;
+    thumbnail?: string;
+    thumbnailImage?: string;
+    arrowButton?: string;
+    arrowIcon?: string;
+    playButton?: string;
+    navigationInner?: string;
+  };
+};
+
+export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
+  const {
+    value,
+    className,
+    children,
+    aspect = "aspect-[1/1]",
+    thumbnailAspect = "aspect-[1/1]",
+    enableZoom = true,
+    thumbnailPosition = "bottom",
+    visibleCount = 6,
+    classNames,
+    ...rest
+  } = props;
+  const {
+    mainArea,
+    navigation,
+    thumbnail,
+    thumbnailImage,
+    arrowButton,
+    arrowIcon,
+    playButton,
+    navigationInner,
+  } = classNames || {};
+  const [selectedId, setSelectedId] = useState<string | undefined | null>(
+    value?.[0]?.id || ""
+  );
+
+  useEffect(() => {
+    setSelectedId(value?.[0]?.id || "");
+  }, [value]);
+
+  const selectedIndex =
+    value?.findIndex((media) => media.id === selectedId) || 0;
+
+  const totalItems = value?.length || 0;
+
+  const handlePrevious = useCallback(() => {
+    if (selectedIndex > 0) {
+      const prevIndex = selectedIndex - 1;
+      setSelectedId(value?.[prevIndex]?.id || "");
+    }
+  }, [selectedIndex, value]);
+
+  const handleNext = useCallback(() => {
+    if (selectedIndex < totalItems - 1) {
+      const currentMediaIndex =
+        value?.findIndex((media) => media.id === selectedId) || 0;
+      const nextIndex = currentMediaIndex + 1;
+      setSelectedId(value?.[nextIndex]?.id || "");
+    }
+  }, [selectedIndex, totalItems, value, selectedId]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        handlePrevious();
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        handleNext();
+      }
+    },
+    [handleNext, handlePrevious]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  const canPrevious = selectedIndex > 0;
+  const canNext = selectedIndex < totalItems - 1;
+
+  const isVerticalThumbs = thumbnailPosition === "left";
+
+  const actualVisibleCount = visibleCount;
+  const halfVisible = Math.floor(actualVisibleCount / 2);
+  const startIndex = Math.max(
+    0,
+    Math.min(selectedIndex - halfVisible, totalItems - actualVisibleCount)
+  );
+  const endIndex = Math.min(startIndex + actualVisibleCount, totalItems);
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        "flex gap-4",
+        isVerticalThumbs ? "flex-col md:flex-row-reverse" : "flex-col",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+      {/* Main display area */}
+      <MainMedia
+        value={value}
+        selectedId={selectedId}
+        aspect={aspect}
+        enableZoom={enableZoom}
+        className={clsx(
+          isVerticalThumbs ? "w-full md:flex-1" : "w-full",
+          mainArea
+        )}
+        arrowButtonClass={arrowButton}
+        arrowIconClass={arrowIcon}
+        playButtonClass={playButton}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        canPrevious={canPrevious}
+        canNext={canNext}
+      />
+
+      {/* Thumbnail navigation */}
+      {totalItems > 1 && (
+        <div
+          className={clsx(
+            "relative group/thumbs",
+            isVerticalThumbs
+              ? "w-full mt-4 md:w-24 md:h-full md:px-1"
+              : "w-full mt-4",
+            navigation
+          )}
+        >
+          {/* Previous Arrow */}
+          {totalItems > actualVisibleCount && (
+            <button
+              onClick={handlePrevious}
+              disabled={!canPrevious}
+              className={clsx(
+                "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
+                "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
+                "text-gray-700 dark:text-gray-200 transition-all duration-200",
+                isVerticalThumbs
+                  ? "left-2 top-1/2 -translate-y-1/2 md:top-2 md:left-1/2 md:-translate-x-1/2"
+                  : "left-2 top-1/2 -translate-y-1/2",
+                !canPrevious
+                  ? "opacity-0 pointer-events-none"
+                  : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
+                arrowButton
+              )}
+              aria-label="Previous"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className={clsx(
+                  "h-4 w-4",
+                  isVerticalThumbs && "md:rotate-90",
+                  arrowIcon
+                )}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+          )}
+
+          <div
+            className={clsx(
+              "flex-1",
+              isVerticalThumbs
+                ? "w-full px-0.5 md:h-full md:py-0.5"
+                : "w-full px-0.5"
+            )}
+          >
+            <div
+              className={clsx(
+                "gap-2 md:gap-3",
+                navigationInner,
+                isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
+              )}
+              style={{
+                gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
+              }}
+            >
+              {value?.map((media, index) => {
+                if (index < startIndex || index >= endIndex) return null;
+                const isSelected = selectedId === media.id;
+                return (
+                  <Thumbnail
+                    key={media.id}
+                    media={media}
+                    isSelected={isSelected}
+                    onClick={() => setSelectedId(media.id)}
+                    aspect={thumbnailAspect}
+                    className={thumbnail}
+                    imageClass={thumbnailImage}
+                    playButtonClass={playButton}
+                  />
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Next Arrow */}
+          {totalItems > actualVisibleCount && (
+            <button
+              onClick={handleNext}
+              disabled={!canNext}
+              className={clsx(
+                "absolute z-10 w-8 h-8 flex items-center justify-center rounded-full",
+                "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
+                "text-gray-700 dark:text-gray-200 transition-all duration-200",
+                isVerticalThumbs
+                  ? "right-2 top-1/2 -translate-y-1/2 md:bottom-2 md:left-1/2 md:-translate-x-1/2"
+                  : "right-2 top-1/2 -translate-y-1/2",
+                !canNext
+                  ? "opacity-0 pointer-events-none"
+                  : "opacity-0 group-hover/thumbs:opacity-100 hover:bg-white/90 dark:hover:bg-black/80",
+                arrowButton
+              )}
+              aria-label="Next"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className={clsx(
+                  "h-4 w-4",
+                  isVerticalThumbs && "md:rotate-90",
+                  arrowIcon
+                )}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -1,24 +1,24 @@
-import { CSSProperties } from "react";
-import { TSlateResizable } from "@rxdrag/tiptap-preview";
-import { ProductView } from "./ProductView";
-import { Product } from "@rxdrag/rxcms-models";
-
-export type TSlateProduct = TSlateResizable & {
-  product?: Product;
-  title?: string;
-  description?: string;
-  aspect?: string;
-  ctaTitle?: string;
-};
-
-export const PRODUCT_KEY = "Product";
-
-export type ProductCardProps = {
-  node?: TSlateProduct;
-  style?: CSSProperties;
-};
-
-// Slate用的渲染组件
-export const ProductCard = ({ node }: ProductCardProps) => {
-  return <ProductView product={node?.product} node={node} ctaTitle={node?.ctaTitle}/>;
-};
+import { CSSProperties } from "react";
+import { TSlateResizable } from "@rxdrag/tiptap-preview";
+import { ProductView } from "./ProductView";
+import { Product } from "@rxdrag/rxcms-models";
+
+export type TSlateProduct = TSlateResizable & {
+  product?: Product;
+  title?: string;
+  description?: string;
+  aspect?: string;
+  ctaTitle?: string;
+};
+
+export const PRODUCT_KEY = "Product";
+
+export type ProductCardProps = {
+  node?: TSlateProduct;
+  style?: CSSProperties;
+};
+
+// Slate用的渲染组件
+export const ProductCard = ({ node }: ProductCardProps) => {
+  return <ProductView product={node?.product} node={node} ctaTitle={node?.ctaTitle}/>;
+};

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

@@ -1,28 +1,28 @@
-import { Product } from "@rxdrag/rxcms-models";
-import "./style.css";
-import type { ReactNode } from "react";
-
-//TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
-export function ProductCta(props: {
-  product?: Product;
-  openableKey?: string;
-  children?: ReactNode;
-}) {
-  const { product, openableKey = "enquiry-modal", children } = props;
-  const roleProps = {
-    "data-modal-open": openableKey,
-    "data-call-to-action": `From RichText ProductCard-${product?.title}-${product?.id}`,
-  };
-
-  return (
-    <div className="flex justify-center items-center">
-      <button
-        {...roleProps}
-        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"
-        type="button"
-      >
-        {children || "Get a quote"}
-      </button>
-    </div>
-  );
-}
+import { Product } from "@rxdrag/rxcms-models";
+import "./style.css";
+import type { ReactNode } from "react";
+
+//TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
+export function ProductCta(props: {
+  product?: Product;
+  openableKey?: string;
+  children?: ReactNode;
+}) {
+  const { product, openableKey = "enquiry-modal", children } = props;
+  const roleProps = {
+    "data-modal-open": openableKey,
+    "data-call-to-action": `From RichText ProductCard-${product?.title}-${product?.id}`,
+  };
+
+  return (
+    <div className="flex justify-center items-center">
+      <button
+        {...roleProps}
+        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"
+        type="button"
+      >
+        {children || "Get a quote"}
+      </button>
+    </div>
+  );
+}

package/src/react/components/ProductCard/ProductCta/style.css

@@ -1,4 +1,4 @@
-.product-cta-button {
-  width: 100%;
-  padding: 8px 16px;
+.product-cta-button {
+  width: 100%;
+  padding: 8px 16px;
 }