From 8476cec5a0e110e8e395bfb1d14f4a4f6d364372 Mon Sep 17 00:00:00 2001
From: hdsuperman <zhd.superman@gmail.com>
Date: Fri, 23 Dec 2022 09:32:31 +0800
Subject: [PATCH] feat: remove canvas

---
 src/common/component/Avatar.tsx    | 72 +++++++++++++++++-------------
 src/common/component/AvatarOld.tsx | 43 ++++++++++++++++++
 2 files changed, 84 insertions(+), 31 deletions(-)
 create mode 100644 src/common/component/AvatarOld.tsx

diff --git a/src/common/component/Avatar.tsx b/src/common/component/Avatar.tsx
index 67c14b9c..b8f21759 100644
--- a/src/common/component/Avatar.tsx
+++ b/src/common/component/Avatar.tsx
@@ -1,43 +1,53 @@
-import { useState, useEffect, memo, SyntheticEvent, FC, ImgHTMLAttributes } from "react";
-import { getInitials, getInitialsAvatar } from "../utils";
+import { FC, ImgHTMLAttributes } from "react";
+import { getInitials } from "../utils";
 
 interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   // className?: string;
   // alt?: string;
   // src?: string;
+  width: number;
+  height: number;
   name?: string;
   type?: "user" | "channel";
 }
 
-const Avatar: FC<Props> = ({ src = "", name = "Deleted User", type = "user", ...rest }) => {
-  const [url, setUrl] = useState("");
-  const handleError = (err: SyntheticEvent<HTMLImageElement>) => {
-    console.error("load avatar error", err);
-    const tmp = getInitialsAvatar({
-      initials: getInitials(name),
-      background: type == "channel" ? "#EAECF0" : undefined,
-      foreground: type == "channel" ? "#475467" : undefined
-    });
-    setUrl(tmp);
-  };
+function getFontSize(width: number): number {
+  if (width <= 16) return 8;
+  if (width <= 24) return 12;
+  if (width <= 32) return 16;
+  if (width <= 40) return 18;
+  if (width <= 80) return 48;
+  return 64;
+}
 
-  useEffect(() => {
-    if (!src) {
-      const tmp = getInitialsAvatar({
-        initials: getInitials(name),
-        background: type == "channel" ? "#EAECF0" : undefined,
-        foreground: type == "channel" ? "#475467" : undefined
-      });
-      setUrl(tmp);
-    } else {
-      setUrl(src);
-    }
-  }, [src, name]);
-  if (!url) return null;
-
-  return <img src={url} onError={handleError} {...rest} />;
+const Avatar: FC<Props> = ({
+  src = "",
+  name = "Deleted User",
+  type = "user",
+  width,
+  height,
+  ...rest
+}) => {
+  if (src && src.length !== 0) {
+    return <img src={src} {...rest} />;
+  } else {
+    return (
+      <div
+        className="rounded-full flex items-center justify-center"
+        style={{
+          width,
+          height,
+          fontSize: getFontSize(width),
+          fontWeight: 400,
+          fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+          background: type === "channel" ? "#EAECF0" : "#4c99e9",
+          color: type === "channel" ? "#475467" : "#FFFFFF"
+        }}
+      >
+        {getInitials(name)}
+      </div>
+    );
+  }
 };
 
-export default memo(Avatar, (prev, next) => {
-  return prev.src == next.src;
-});
+export default Avatar;
diff --git a/src/common/component/AvatarOld.tsx b/src/common/component/AvatarOld.tsx
new file mode 100644
index 00000000..67c14b9c
--- /dev/null
+++ b/src/common/component/AvatarOld.tsx
@@ -0,0 +1,43 @@
+import { useState, useEffect, memo, SyntheticEvent, FC, ImgHTMLAttributes } from "react";
+import { getInitials, getInitialsAvatar } from "../utils";
+
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
+  // className?: string;
+  // alt?: string;
+  // src?: string;
+  name?: string;
+  type?: "user" | "channel";
+}
+
+const Avatar: FC<Props> = ({ src = "", name = "Deleted User", type = "user", ...rest }) => {
+  const [url, setUrl] = useState("");
+  const handleError = (err: SyntheticEvent<HTMLImageElement>) => {
+    console.error("load avatar error", err);
+    const tmp = getInitialsAvatar({
+      initials: getInitials(name),
+      background: type == "channel" ? "#EAECF0" : undefined,
+      foreground: type == "channel" ? "#475467" : undefined
+    });
+    setUrl(tmp);
+  };
+
+  useEffect(() => {
+    if (!src) {
+      const tmp = getInitialsAvatar({
+        initials: getInitials(name),
+        background: type == "channel" ? "#EAECF0" : undefined,
+        foreground: type == "channel" ? "#475467" : undefined
+      });
+      setUrl(tmp);
+    } else {
+      setUrl(src);
+    }
+  }, [src, name]);
+  if (!url) return null;
+
+  return <img src={url} onError={handleError} {...rest} />;
+};
+
+export default memo(Avatar, (prev, next) => {
+  return prev.src == next.src;
+});