refactor: add typescript support to project

2022-06-21 15:08:35 +08:00
parent 88ec2b742a
commit bd799ebea8
259 changed files with 1042 additions and 458 deletions
@@ -0,0 +1,74 @@
+import styled from "styled-components";
+import Avatar from "./Avatar";
+import { useAppSelector } from "../../app/store";
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 8px;
+  user-select: none;
+  &.compact {
+    padding: 0;
+  }
+  &.interactive {
+    &:hover,
+    &.active {
+      background: rgba(116, 127, 141, 0.1);
+    }
+  }
+  .avatar {
+    cursor: pointer;
+    width: ${({ size }: { size: number }) => `${size}px`};
+    height: ${({ size }: { size: number }) => `${size}px`};
+    position: relative;
+    img {
+      border-radius: 50%;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .name {
+    /* user-select: text; */
+    display: flex;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #52525b;
+    .txt {
+      max-width: 140px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
+export default function Channel({ interactive = true, id = "", compact = false, avatarSize = 32 }) {
+  const { channel, totalMemberCount } = useAppSelector((store) => {
+    return {
+      channel: store.channels.byId[id],
+      totalMemberCount: store.contacts.ids.length
+    };
+  });
+  console.log("channel item", id, channel);
+  if (!channel) return null;
+  const { name, members = [], is_public, avatar } = channel;
+  return (
+    <StyledWrapper
+      size={avatarSize}
+      className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
+    >
+      <div className="avatar">
+        <Avatar type="channel" url={avatar} name={"#"} alt="avatar" />
+      </div>
+      {!compact && (
+        <div className="name">
+          <span className="txt">{name}</span> ({is_public ? totalMemberCount : members.length})
+        </div>
+      )}
+    </StyledWrapper>
+  );
+}