@infinilabs/doc-detail 0.0.10 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinilabs/doc-detail",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "main": "dist/doc-detail.cjs",
   "module": "dist/doc-detail.js",
@@ -25,6 +25,7 @@
     "@ant-design/x": "^2.1.3",
     "@ant-design/x-markdown": "^2.1.3",
     "@infinilabs/markdown": "^0.0.2",
+    "ahooks": "^3.9.6",
     "antd": "^6.0.0",
     "clsx": "^2.1.1",
     "docx-preview": "^0.3.7",

package/src/App.tsx

@@ -12,11 +12,16 @@ const App = () => {
           },
           category: "report",
           title: "Q3 Business Report",
-          icon: "https://picsum.photos/seed/file-icon/40/40",
+          icon: "https://dev.infini.cloud:27200/assets/icons/connector/s3/file.png",
           size: 1048576,
-          url: "/document/dce0c5efb29bf5647c34eb58ecabca93/raw_content/1%E5%88%86%E9%92%9F%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84_%E6%88%98%E6%8B%96_%E5%BF%83%E7%90%86%E5%AD%A6_(%E7%BE%8E)%E6%9D%B0%E5%A4%AB%C2%B7%E6%88%B4%E7%BB%B4%E6%A3%AE_%E6%96%B0%E4%B8%96%E7%95%8C_2013.5.pdf",
+          // url: "/document/dce0c5efb29bf5647c34eb58ecabca93/raw_content/1%E5%8z8%86%E9%92%9F%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88%EF%BC%9F%E4%B8%8D%E5%8F%AF%E6%80%9D%E8%AE%AE%E7%9A%84_%E6%88%98%E6%8B%96_%E5%BF%83%E7%90%86%E5%AD%A6_(%E7%BE%8E)%E6%9D%B0%E5%A4%AB%C2%B7%E6%88%B4%E7%BB%B4%E6%A3%AE_%E6%96%B0%E4%B8%96%E7%95%8C_2013.5.pdf",
+          url: "/document/3fbcffdbdf044ad2cf9edc3b0e1741d3/raw_content/106347408.jpg",
+          thumbnail:
+            "https://dev.infini.cloud:27200/attachment/d5itnq14d9v3mq6oucag",
           metadata: {
-            content_type: "pdf",
+            content_type: "image",
+            width: 3062,
+            height: 2041,
           },
           owner: {
             title: "Alice Johnson",

package/src/components/DocDetail/components/Preview/components/Image/index.tsx

@@ -0,0 +1,54 @@
+import { useMemo, useRef, useState, type FC } from "react";
+import { Image as AntdImage, Skeleton } from "antd";
+import { useSize } from "ahooks";
+
+import type { DocDetailProps } from "@/components/DocDetail";
+
+const Image: FC<DocDetailProps> = (props) => {
+  const { data } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerSize = useSize(containerRef);
+  const [failed, setFailed] = useState(false);
+
+  const calcHeight = useMemo(() => {
+    const containerWidth = containerSize?.width;
+    const originalWidth = data?.metadata?.width;
+    const originalHeight = data?.metadata?.height;
+
+    if (!containerWidth || !originalWidth || !originalHeight) {
+      return void 0;
+    }
+
+    return containerWidth * (originalHeight / originalWidth);
+  }, [containerSize?.width, data?.metadata?.width, data?.metadata?.height]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full"
+      style={{
+        height: calcHeight,
+      }}
+    >
+      <AntdImage
+        preview={false}
+        rootClassName="size-full"
+        placeholder={
+          <Skeleton.Node
+            active
+            classNames={{
+              root: "size-full!",
+              content: "size-full!",
+            }}
+          />
+        }
+        src={failed ? data?.thumbnail : data?.url}
+        onError={() => {
+          setFailed(true);
+        }}
+      />
+    </div>
+  );
+};
+
+export default Image;

package/src/components/DocDetail/components/Preview/index.tsx

@@ -9,6 +9,7 @@ import Markdown from "@infinilabs/markdown";
 import Pdf from "./components/Pdf";
 import Docx from "./components/Docx";
 import Pptx from "./components/Pptx";
+import Image from "./components/Image";
 
 const Preview: FC<DocDetailProps> = (props) => {
   const { data, i18n } = props;
@@ -40,7 +41,7 @@ const Preview: FC<DocDetailProps> = (props) => {
     if (!type || !url) return;
 
     if (type === "image") {
-      return <img src={url} className="w-full" />;
+      return <Image {...props} />;
     }
 
     if (type === "video") {