refactor: project configuration

2023-05-15 16:46:50 +08:00
parent 187ffd24d1
commit 20b907aae4
293 changed files with 991 additions and 964 deletions
@@ -0,0 +1,70 @@
+import { useState, useEffect, FC } from "react";
+import { Ping, LineWobble } from '@uiball/loaders';
+import { getDefaultSize, isMobile } from "@/utils";
+
+type Props = {
+  uploading: boolean;
+  progress: number;
+  thumbnail: string;
+  download: string;
+  content: string;
+  properties: { width: number; height: number };
+};
+
+const ImageMessage: FC<Props> = ({
+  uploading,
+  progress,
+  thumbnail,
+  download,
+  content,
+  properties
+}) => {
+  const url = thumbnail || content;
+  const [status, setStatus] = useState<"loading" | "error" | "loaded">("loading");
+  const { width = 0, height = 0 } = getDefaultSize(properties, { min: 200, max: isMobile() ? 300 : 480 });
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      setStatus("loaded");
+    };
+    img.onerror = () => {
+      setStatus("error");
+    };
+    img.src = url;
+  }, [url]);
+
+  return (
+    <div className={`relative`} style={{
+      width: width ? `${width}px` : "",
+      height: height ? `${height}px` : ""
+    }}
+    >
+      {uploading && (
+        <div className="absolute left-0 top-0 w-full h-full bg-white/50 flex flex-col justify-center items-center gap-1">
+          <Ping
+            size={45}
+            speed={2}
+            color="#555"
+          />
+          <span className="text-xs text-gray-500">{progress}%</span>
+        </div>
+      )}
+      {status == "error" ? <p className="w-full h-full flex-center text-lg text-red-800 bg-red-100">load image error</p> :
+        status == "loading" ? <p className="w-full h-full flex-center bg-primary-50/80 dark:bg-primary-900/70">
+          <LineWobble />
+        </p> : <img
+          className="h-auto w-full cursor-zoom-in object-cover preview"
+          // style={{
+          //   width: width ? `${width}px` : "",
+          //   height: height ? `${height}px` : ""
+          // }}
+          data-meta={JSON.stringify(properties)}
+          data-origin={content}
+          data-download={download}
+          src={url}
+        />}
+    </div>
+  );
+};
+
+export default ImageMessage;