@@ -73,9 +87,16 @@ export default function ChannelChat({ cid = "", unreads = 0, data = {} }) {
{Object.entries(msgs).map(([mid, msg]) => {
if (!msg) return null;
- const { from_uid, content, created_at, unread } = msg;
+ const {
+ from_uid,
+ content,
+ content_type,
+ created_at,
+ unread,
+ } = msg;
return (
-
+
{unreads != 0 && (
diff --git a/src/routes/chat/ChannelList.js b/src/routes/chat/ChannelList.js
new file mode 100644
index 00000000..90ce9560
--- /dev/null
+++ b/src/routes/chat/ChannelList.js
@@ -0,0 +1,52 @@
+// import React from 'react'
+import { NavLink, useNavigate } from "react-router-dom";
+import { useDrop } from "react-dnd";
+import { NativeTypes } from "react-dnd-html5-backend";
+import ChannelIcon from "../../common/component/ChannelIcon";
+const NavItem = ({ data, setFiles }) => {
+ const navigate = useNavigate();
+ const [{ isActive }, drop] = useDrop(() => ({
+ accept: [NativeTypes.FILE],
+ drop({ dataTransfer }) {
+ if (dataTransfer.files.length) {
+ // console.log(files, rest);
+ setFiles([...dataTransfer.files]);
+ navigate(`/chat/channel/${data.id}`);
+ // 重置
+ setTimeout(() => {
+ setFiles([]);
+ }, 300);
+ }
+ },
+ collect: (monitor) => ({
+ isActive: monitor.canDrop() && monitor.isOver(),
+ }),
+ }));
+ const { id, is_public, name, description, unreads } = data;
+ return (
+
+
+
+ {name}
+
+ {unreads > 0 && {unreads}}
+
+ );
+};
+export default function ChannelList({ channels, setDropFiles }) {
+ return channels.map(({ id, is_public, name, description, unreads }) => {
+ return (
+
+ );
+ });
+}
diff --git a/src/routes/chat/DMChat/index.js b/src/routes/chat/DMChat/index.js
index b153e19a..1a080187 100644
--- a/src/routes/chat/DMChat/index.js
+++ b/src/routes/chat/DMChat/index.js
@@ -8,7 +8,9 @@ import Layout from "../Layout";
import { StyledHeader, StyledDMChat } from "./styled";
-export default function DMChat({ uid = "" }) {
+export default function DMChat({ uid = "", dropFiles = [] }) {
+ console.log("dm files", dropFiles);
+ const [dragFiles, setDragFiles] = useState([]);
const msgs = useSelector((store) => {
return store.userMsg[uid] || {};
});
@@ -20,10 +22,17 @@ export default function DMChat({ uid = "" }) {
setCurrUser(contacts.find((c) => c.uid == uid));
}
}, [uid, contacts]);
+ useEffect(() => {
+ if (dropFiles.length) {
+ setDragFiles(dropFiles);
+ }
+ }, [dropFiles]);
+
if (!currUser) return null;
console.log("user msgs", msgs);
return (
@@ -35,9 +44,10 @@ export default function DMChat({ uid = "" }) {
{Object.entries(msgs).map(([mid, msg]) => {
if (!msg) return null;
console.log("user msg", msg);
- const { from_uid, content, created_at, unread } = msg;
+ const { from_uid, content, content_type, created_at, unread } = msg;
return (
-
+
);
}
diff --git a/src/routes/chat/DMList.js b/src/routes/chat/DMList.js
new file mode 100644
index 00000000..85c79bf3
--- /dev/null
+++ b/src/routes/chat/DMList.js
@@ -0,0 +1,60 @@
+// import React from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+import dayjs from "dayjs";
+import { useDrop } from "react-dnd";
+import { NativeTypes } from "react-dnd-html5-backend";
+import Avatar from "../../common/component/Avatar";
+const NavItem = ({ data, setFiles }) => {
+ const navigate = useNavigate();
+ const [{ isActive }, drop] = useDrop(() => ({
+ accept: [NativeTypes.FILE],
+ drop({ dataTransfer }) {
+ if (dataTransfer.files.length) {
+ // console.log(files, rest);
+ setFiles([...dataTransfer.files]);
+ navigate(`/chat/dm/${data.uid}`);
+ // 重置
+ setTimeout(() => {
+ setFiles([]);
+ }, 300);
+ }
+ },
+ collect: (monitor) => ({
+ isActive: monitor.canDrop() && monitor.isOver(),
+ }),
+ }));
+ const { uid, user, lastMsg, unreads } = data;
+ return (
+
+
+
+
+ {user.name}
+
+
+
+
+
{lastMsg.content}
+ {unreads > 0 &&
{unreads}}
+
+
+ );
+};
+export default function DMList({ sessions, setDropFiles }) {
+ return sessions.map(({ uid, user, lastMsg, unreads } = {}) => {
+ if (!user) return null;
+ return (
+
+ );
+ });
+}
diff --git a/src/routes/chat/Layout.js b/src/routes/chat/Layout.js
index 611df79a..d1766a08 100644
--- a/src/routes/chat/Layout.js
+++ b/src/routes/chat/Layout.js
@@ -1,11 +1,13 @@
-import React from "react";
+// import { useState } from "react";
+import { useDrop } from "react-dnd";
+import { NativeTypes } from "react-dnd-html5-backend";
import styled from "styled-components";
const StyledWrapper = styled.article`
position: relative;
width: 100%;
background: #fff;
height: 100vh;
- .head {
+ > .head {
height: 56px;
padding: 0 20px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
@@ -21,16 +23,92 @@ const StyledWrapper = styled.article`
border-top: 1px solid transparent;
}
}
+ .drag_tip {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ visibility: hidden;
+ /* pointer-events: none; */
+ &.visible {
+ visibility: visible;
+ }
+ .box {
+ padding: 16px;
+ filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
+ border-radius: 8px;
+ background: #52edff;
+ .inner {
+ padding: 16px;
+ padding-top: 64px;
+ border: 2px dashed #a5f3fc;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+ .head {
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 30px;
+ }
+ .intro {
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 20px;
+ }
+ }
+ }
+ }
`;
-export default function Layout({ children, header, contacts = null }) {
+export default function Layout({
+ children,
+ header,
+ contacts = null,
+ setDragFiles,
+}) {
+ const [{ isActive }, drop] = useDrop(() => ({
+ accept: [NativeTypes.FILE],
+ drop({ files }) {
+ if (files.length) {
+ setDragFiles([...files]);
+ }
+ },
+ collect: (monitor) => ({
+ isActive: monitor.canDrop() && monitor.isOver(),
+ }),
+ }));
return (
-
+
{children}
{contacts && {contacts}
}
+
+
+
+
Upload to #Channel
+
+ Photos accept jpg, png, max size limit to 10M.
+
+
+
+
+
+++ + {b.name} + + (click title to change name) ++ {`${Math.floor(b.size / 1000)}KB`} +
+ );
+ })}
+