feat: remove canvas

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;