feat: remove canvas

src/common/component/Avatar.tsx

@@ -1,43 +1,53 @@
-import { useState, useEffect, memo, SyntheticEvent, FC, ImgHTMLAttributes } from "react";
+import { FC, ImgHTMLAttributes } from "react";
-import { getInitials, getInitialsAvatar } from "../utils";
+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 }) => {
+function getFontSize(width: number): number {
-  const [url, setUrl] = useState("");
+  if (width <= 16) return 8;
-  const handleError = (err: SyntheticEvent<HTMLImageElement>) => {
+  if (width <= 24) return 12;
-    console.error("load avatar error", err);
+  if (width <= 32) return 16;
-    const tmp = getInitialsAvatar({
+  if (width <= 40) return 18;
-      initials: getInitials(name),
+  if (width <= 80) return 48;
-      background: type == "channel" ? "#EAECF0" : undefined,
+  return 64;
-      foreground: type == "channel" ? "#475467" : undefined
+}
-    });
-    setUrl(tmp);
-  };
 
-  useEffect(() => {
+const Avatar: FC<Props> = ({
-    if (!src) {
+  src = "",
-      const tmp = getInitialsAvatar({
+  name = "Deleted User",
-        initials: getInitials(name),
+  type = "user",
-        background: type == "channel" ? "#EAECF0" : undefined,
+  width,
-        foreground: type == "channel" ? "#475467" : undefined
+  height,
-      });
+  ...rest
-      setUrl(tmp);
+}) => {
+  if (src && src.length !== 0) {
+    return <img src={src} {...rest} />;
   } else {
-      setUrl(src);
+    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>
+    );
   }
-  }, [src, name]);
-  if (!url) return null;
-
-  return <img src={url} onError={handleError} {...rest} />;
 };
 
-export default memo(Avatar, (prev, next) => {
+export default Avatar;
-  return prev.src == next.src;
-});

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;
+});