feat: remove canvas

2022-12-23 09:32:31 +08:00
parent c21e22e370
commit 8476cec5a0
2 changed files with 84 additions and 31 deletions
@@ -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;
@@ -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;
+});