From b133780061c682eb5d5f8b5c5e318b24be307bac Mon Sep 17 00:00:00 2001 From: zerosoul Date: Wed, 23 Mar 2022 16:31:54 +0800 Subject: [PATCH] refactor: new send input --- package.json | 39 +- src/common/component/ChannelModal/index.js | 2 +- .../component/MarkdownEditer/index.rmde.js | 29 - src/common/component/Message/Reply.js | 14 +- src/common/component/Message/index.js | 2 +- src/common/component/Message/styled.js | 3 + src/common/component/MrakdownRender.js | 3 +- src/common/component/Send/EmojiPicker.js | 40 +- src/common/component/Send/Replying.js | 1 - src/common/component/Send/Toolbar.js | 116 +-- .../component/Send/UploadModal/index.js | 2 +- src/common/component/Send/index.js | 93 +- src/common/component/Send/styled.js | 48 +- .../Setting/ProfileBasicEditModal.js | 2 +- .../component/Setting/config/Firebase.js | 2 +- .../component/StyledSettingContainer.js | 3 + src/common/component/styled/Button.js | 33 +- src/common/hook/useChatScroll.js | 13 + src/common/hook/useStreaming/index.js | 42 +- src/routes/chat/ChannelChat/AddMemberModal.js | 2 +- src/routes/chat/ChannelChat/index.js | 51 +- src/routes/chat/ChannelChat/styled.js | 76 +- src/routes/chat/DMChat/index.js | 12 +- src/routes/chat/DMChat/styled.js | 18 +- yarn.lock | 940 +++++++++--------- 25 files changed, 727 insertions(+), 859 deletions(-) delete mode 100644 src/common/component/MarkdownEditer/index.rmde.js diff --git a/package.json b/package.json index f71d228c..a28e7332 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "homepage": "http://privoce.rustchat.com", "dependencies": { - "@babel/core": "^7.17.5", + "@babel/core": "^7.17.8", "@metamask/onboarding": "^1.0.1", "@microsoft/fetch-event-source": "^2.0.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4", @@ -18,21 +18,20 @@ "babel-plugin-named-asset-import": "^0.3.8", "babel-preset-react-app": "^10.0.1", "bfj": "^7.0.2", - "browserslist": "^4.20.0", + "browserslist": "^4.20.2", "camelcase": "^6.3.0", "case-sensitive-paths-webpack-plugin": "^2.4.0", "css-loader": "^6.7.1", "css-minimizer-webpack-plugin": "^3.4.1", - "dayjs": "^1.10.8", + "dayjs": "^1.11.0", "dotenv": "^16.0.0", - "dotenv-expand": "^8.0.1", + "dotenv-expand": "^8.0.3", "emoji-mart": "^3.0.1", - "eslint": "^8.10.0", - "event-source-polyfill": "^1.0.25", + "eslint": "^8.11.0", + "event-source-polyfill": "^1.0.26", "file-loader": "^6.2.0", - "firebase": "^9.6.8", + "firebase": "^9.6.9", "fs-extra": "^10.0.1", - "github-markdown-css": "^5.1.0", "html-webpack-plugin": "^5.5.0", "linkify-it": "^3.0.3", "localforage": "^1.10.0", @@ -48,21 +47,21 @@ "react-icons": "^4.3.1", "react-linkify": "^1.0.0-alpha", "react-markdown": "^8.0.1", - "react-mde": "^11.5.0", "react-redux": "^7.2.6", "react-refresh": "^0.11.0", "react-router-dom": "6", "react-textarea-autosize": "^8.3.3", "react-window": "^1.8.6", - "remark-gfm": "^3.0.1", + "remark-slate": "^1.8.5", "resolve": "^1.22.0", "rich-markdown-editor": "^11.21.3", - "rooks": "^5.10.2", + "rooks": "^5.10.3", "semver": "^7.3.5", "showdown": "^2.0.3", - "slate": "^0.73.1", + "slate": "^0.75.0", + "slate-auto-replace": "^0.12.1", "slate-history": "^0.66.0", - "slate-react": "^0.74.2", + "slate-react": "^0.75.0", "source-map-loader": "^3.0.1", "style-loader": "^3.3.1", "styled-components": "^5.3.3", @@ -102,21 +101,21 @@ ] }, "devDependencies": { - "@commitlint/cli": "^16.2.1", + "@commitlint/cli": "^16.2.3", "@commitlint/config-conventional": "^16.2.1", - "autoprefixer": "^10.4.2", + "autoprefixer": "^10.4.4", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.29.3", + "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.3.0", "gh-pages": "^3.2.3", "husky": "^7.0.4", - "lint-staged": "^12.3.5", - "postcss": "^8.4.8", + "lint-staged": "^12.3.7", + "postcss": "^8.4.12", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^6.2.1", - "postcss-preset-env": "^7.4.2", - "prettier": "^2.5.1" + "postcss-preset-env": "^7.4.3", + "prettier": "^2.6.0" } } diff --git a/src/common/component/ChannelModal/index.js b/src/common/component/ChannelModal/index.js index 8f0a5bf7..3f1ec8d0 100644 --- a/src/common/component/ChannelModal/index.js +++ b/src/common/component/ChannelModal/index.js @@ -161,7 +161,7 @@ export default function ChannelModal({ personal = false, closeModal }) { diff --git a/src/common/component/MarkdownEditer/index.rmde.js b/src/common/component/MarkdownEditer/index.rmde.js deleted file mode 100644 index 91abf4d7..00000000 --- a/src/common/component/MarkdownEditer/index.rmde.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from "react"; -import ReactMde from "react-mde"; -import * as Showdown from "showdown"; -import "react-mde/lib/styles/css/react-mde-all.css"; - -const converter = new Showdown.Converter({ - tables: true, - simplifiedAutoLink: true, - strikethrough: true, - tasklists: true, -}); - -export default function MarkdownEditer() { - const [value, setValue] = React.useState("**Hello world!!!**"); - const [selectedTab, setSelectedTab] = React.useState("write"); - return ( -
- - Promise.resolve(converter.makeHtml(markdown)) - } - /> -
- ); -} diff --git a/src/common/component/Message/Reply.js b/src/common/component/Message/Reply.js index 8b4664fe..13a83528 100644 --- a/src/common/component/Message/Reply.js +++ b/src/common/component/Message/Reply.js @@ -65,11 +65,23 @@ export default function Reply({ mid }) { const { data, users } = useSelector((store) => { return { data: store.message[mid], users: store.contacts.byId }; }); + const handleClick = (evt) => { + const { mid } = evt.currentTarget.dataset; + const msgEle = document.querySelector(`[data-msg-mid='${mid}']`); + if (msgEle) { + msgEle.dataset.highlight = true; + msgEle.scrollIntoView({ behavior: "smooth", block: "center" }); + setTimeout(() => { + console.log("scroll view", msgEle); + msgEle.dataset.highlight = false; + }, 3000); + } + }; if (!data) return null; const currUser = users[data.from_uid]; if (!currUser) return null; return ( - +
{currUser.name} diff --git a/src/common/component/Message/index.js b/src/common/component/Message/index.js index e56c9082..87442d13 100644 --- a/src/common/component/Message/index.js +++ b/src/common/component/Message/index.js @@ -70,7 +70,7 @@ function Message({ contextId = 0, mid = "", context = "user" }) { // if (!message) return null; return ( diff --git a/src/common/component/Message/styled.js b/src/common/component/Message/styled.js index 340f7287..f6a818c2 100644 --- a/src/common/component/Message/styled.js +++ b/src/common/component/Message/styled.js @@ -12,6 +12,9 @@ const StyledMsg = styled.div` &.in_view { content-visibility: visible; } + &[data-highlight="true"] { + background: #f5f6f7; + } &:hover, &.preview { background: #f5f6f7; diff --git a/src/common/component/MrakdownRender.js b/src/common/component/MrakdownRender.js index c7a9f3ea..e8cb9294 100644 --- a/src/common/component/MrakdownRender.js +++ b/src/common/component/MrakdownRender.js @@ -1,6 +1,5 @@ // import React from 'react' import ReactMarkdown from "react-markdown"; -import remarkGfm from "remark-gfm"; import styled from "styled-components"; const Styled = styled.div` font-family: "Helvetica Neue", sans; @@ -148,7 +147,7 @@ const Styled = styled.div` export default function MrakdownRender({ content }) { return ( - {content} + {content} ); } diff --git a/src/common/component/Send/EmojiPicker.js b/src/common/component/Send/EmojiPicker.js index 5168cdf3..70104463 100644 --- a/src/common/component/Send/EmojiPicker.js +++ b/src/common/component/Send/EmojiPicker.js @@ -1,25 +1,33 @@ -import { useState } from "react"; +// import { useState } from "react"; +import Tippy from "@tippyjs/react"; +import styled from "styled-components"; +const StyledBtn = styled.button` + background: none; + display: flex; + align-items: center; + svg { + width: 22px; + height: 22px; + } +`; import Picker from "../EmojiPicker"; +import SmileIcon from "../../../assets/icons/emoji.smile.svg"; export default function EmojiPicker({ selectEmoji }) { - const [emojiPickerVisible, setEmojiPickerVisible] = useState(false); - const toggleEmojiPicker = () => { - setEmojiPickerVisible((prev) => !prev); - }; const handleSelect = (emoji) => { selectEmoji(emoji.native); - setEmojiPickerVisible(false); }; return ( - <> - - {emojiPickerVisible && ( -
- -
- )} - + } + > + + + + ); } diff --git a/src/common/component/Send/Replying.js b/src/common/component/Send/Replying.js index 2457ac7a..672c6b46 100644 --- a/src/common/component/Send/Replying.js +++ b/src/common/component/Send/Replying.js @@ -7,7 +7,6 @@ import { removeReplyingMessage } from "../../../app/slices/message"; import styled from "styled-components"; const Styled = styled.div` z-index: 999; - position: relative; display: flex; justify-content: space-between; align-items: center; diff --git a/src/common/component/Send/Toolbar.js b/src/common/component/Send/Toolbar.js index 0016be66..2dd7aa89 100644 --- a/src/common/component/Send/Toolbar.js +++ b/src/common/component/Send/Toolbar.js @@ -1,74 +1,37 @@ // import React from 'react' -import { RiMarkdownLine, RiMarkdownFill } from "react-icons/ri"; import styled from "styled-components"; -import Button from "../styled/Button"; -import EmojiPicker from "./EmojiPicker"; -import addIcon from "../../../assets/icons/add.svg?url"; + +import AddIcon from "../../../assets/icons/add.solid.svg"; +import MarkdownIcon from "../../../assets/icons/markdown.svg"; const Styled = styled.div` - width: 100%; display: flex; align-items: center; - justify-content: space-between; - padding-bottom: 5px; - .left { + justify-content: flex-end; + gap: 10px; + .md { + cursor: pointer; display: flex; - align-items: center; - gap: 8px; - .md { - cursor: pointer; - } - .add { - cursor: pointer; - position: relative; - width: 16px; - height: 16px; - input { - opacity: 0; - cursor: pointer; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - } - } - .emoji { - position: relative; - .toggle { - font-size: 22px; - border: none; - background: none; - } - .picker { - position: absolute; - top: -20px; - right: -15px; - transform: translateY(-100%); - } - } } - .right { - display: flex; - align-items: center; - gap: 8px; - .send { - /* font-size: 16px; - font-weight: bold; - background: none; */ + .add { + cursor: pointer; + position: relative; + width: 24px; + height: 24px; + input { + opacity: 0; + cursor: pointer; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; } } - .divider { - width: 1px; - height: 16px; - background-color: #ccc; - margin: 0 4px; - } `; export default function Toolbar({ contentType = "text", updateContentType, handleUpload, - selectEmoji, handleSend, }) { const toggleMarkdown = () => { @@ -76,35 +39,18 @@ export default function Toolbar({ }; return ( -
-
- - -
-
-
- -
-
- {contentType == "markdown" ? ( - - ) : ( - - )} -
+
+ {contentType == "markdown" ? : }
-
- {contentType == "markdown" && ( - - )} +
+ +
); diff --git a/src/common/component/Send/UploadModal/index.js b/src/common/component/Send/UploadModal/index.js index 857f27cd..fa18d0df 100644 --- a/src/common/component/Send/UploadModal/index.js +++ b/src/common/component/Send/UploadModal/index.js @@ -71,7 +71,7 @@ export default function UploadModal({ Cancel - diff --git a/src/common/component/Setting/config/Firebase.js b/src/common/component/Setting/config/Firebase.js index 1cdb15df..e606891b 100644 --- a/src/common/component/Setting/config/Firebase.js +++ b/src/common/component/Setting/config/Firebase.js @@ -63,7 +63,7 @@ export default function ConfigFirebase() {