@rxdrag/website-lib-core 0.0.77 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/tsconfig": "0.2.0",
     "@rxdrag/slate-preview": "1.2.61",
-    "@rxdrag/eslint-config-custom": "0.2.12"
+    "@rxdrag/eslint-config-custom": "0.2.12",
+    "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
     "@iconify/utils": "^3.0.2",

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

@@ -91,7 +91,7 @@ export const MainMedia = ({
           lastMousePosRef.current.x,
           lastMousePosRef.current.y
         );
-      }, 200);
+      }, 1000);
     },
     [enableZoom, isVideo, updateZoomPosition]
   );
@@ -116,6 +116,25 @@ export const MainMedia = ({
     setPosition({ x: 0, y: 0 });
   }, []);
 
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!enableZoom || isVideo) return;
+
+      if (hoverTimerRef.current) {
+        clearTimeout(hoverTimerRef.current);
+      }
+
+      if (isZoomed) {
+        setIsZoomed(false);
+        setPosition({ x: 0, y: 0 });
+      } else {
+        setIsZoomed(true);
+        updateZoomPosition(e.clientX, e.clientY);
+      }
+    },
+    [enableZoom, isVideo, isZoomed, updateZoomPosition]
+  );
+
   return (
     <div
       ref={mainAreaRef}
@@ -128,6 +147,7 @@ export const MainMedia = ({
       onMouseEnter={handleMouseEnter}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
     >
       {/* Navigation Arrows - Hide when zoomed to avoid misclick */}
       {!isZoomed && (

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

@@ -4,19 +4,23 @@ import { iconList } from "./socials";
 import clsx from "clsx";
 
 export type ShareProps = {
-  socials?: string[],
-  size?: "xs" | "sm" | "md" | "lg" | "xl",
-  className?: string,
-}
+  socials?: string[];
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  classNames?: {
+    item?: string;
+    itemIcon?: string;
+  };
+};
 
 function getPageDetails() {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return null;
   }
   const details = {
     url: window?.location?.href,
     title: document?.title || "null",
-    description: 'null', // 默认为空字符串
+    description: "null", // 默认为空字符串
   };
 
   const descriptionMetaTag = document.querySelector('meta[name="description"]');
@@ -27,43 +31,56 @@ function getPageDetails() {
   return details;
 }
 
-export const Share = forwardRef<HTMLDivElement, ShareProps>((props: ShareProps, ref) => {
-  const { className, ...rest } = props;
-  const [socialList, setSolicalList] = useState<IconListType>();
+export const Share = forwardRef<HTMLDivElement, ShareProps>(
+  (props: ShareProps, ref) => {
+    const { className, classNames, ...rest } = props;
+    const [socialList, setSolicalList] = useState<IconListType>();
 
-  const details = getPageDetails();
+    const details = getPageDetails();
 
-  useEffect(() => {
-    setSolicalList(iconList)
-  }, [props.socials]);
+    useEffect(() => {
+      setSolicalList(iconList);
+    }, [props.socials]);
 
-  // 生成每个社交媒体的分享链接
-  const generateLink = (key: string) => {
-    const social = iconList[key];
-    if (!social) return '#';
-    return social.url(details?.url || "", details?.title, details?.description);
-  };
+    // 生成每个社交媒体的分享链接
+    const generateLink = (key: string) => {
+      const social = iconList[key];
+      if (!social) return "#";
+      return social.url(
+        details?.url || "",
+        details?.title,
+        details?.description
+      );
+    };
 
-
-  return (
-    <div ref={ref} className={clsx("flex items-center", className)}>
-      <div className="flex space-x-3">
-        {Object.keys(socialList || {}).map((key) => (
-          <a
-            key={key}
-            href={generateLink(key)}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={`Share on ${iconList[key].title}`}
-            className="flex h-6 w-6 items-center justify-center text-gray-400 hover:text-gray-500"
-          >
-            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
-              {iconList[key].path}
-            </svg>
-          </a>
-        ))
-        }
+    return (
+      <div ref={ref} className={clsx("flex items-center", className)} {...rest}>
+        <div className="flex space-x-3">
+          {Object.keys(socialList || {}).map((key) => (
+            <a
+              key={key}
+              href={generateLink(key)}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={`Share on ${iconList[key].title}`}
+              className={clsx(
+                "flex h-6 w-6 items-center justify-center text-gray-400 hover:text-gray-500",
+                classNames?.item
+              )}
+            >
+              <svg
+                className={clsx("w-5 h-5", classNames?.itemIcon)}
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                focusable="false"
+                aria-hidden="true"
+              >
+                {iconList[key].path}
+              </svg>
+            </a>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);