From d1007950e0a6cd3ba5048f68445bd39168ddf204 Mon Sep 17 00:00:00 2001 From: boojack Date: Sat, 3 Dec 2022 15:28:37 +0800 Subject: [PATCH] chore: remove emoji picker (#667) --- web/package.json | 1 - web/src/components/Editor/EmojiPicker.tsx | 52 ----------------------- web/src/components/MemoEditor.tsx | 30 ------------- web/src/css/tailwind.css | 4 +- web/src/less/auth.less | 2 +- web/src/less/memo-editor.less | 13 ------ web/src/pages/Auth.tsx | 4 +- web/yarn.lock | 5 --- 8 files changed, 5 insertions(+), 106 deletions(-) delete mode 100644 web/src/components/Editor/EmojiPicker.tsx diff --git a/web/package.json b/web/package.json index a0424c4d..f1f4cf38 100644 --- a/web/package.json +++ b/web/package.json @@ -15,7 +15,6 @@ "axios": "^0.27.2", "copy-to-clipboard": "^3.3.2", "dayjs": "^1.11.3", - "emoji-picker-react": "^3.6.2", "highlight.js": "^11.6.0", "i18next": "^21.9.2", "lodash-es": "^4.17.21", diff --git a/web/src/components/Editor/EmojiPicker.tsx b/web/src/components/Editor/EmojiPicker.tsx deleted file mode 100644 index 75f13f54..00000000 --- a/web/src/components/Editor/EmojiPicker.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import Picker, { IEmojiPickerProps } from "emoji-picker-react"; -import { useEffect, useState } from "react"; - -interface Props { - shouldShow: boolean; - onEmojiClick: IEmojiPickerProps["onEmojiClick"]; - onShouldShowEmojiPickerChange: (status: boolean) => void; -} - -interface State { - hasShown: boolean; -} - -export const EmojiPicker: React.FC = (props: Props) => { - const { shouldShow, onEmojiClick, onShouldShowEmojiPickerChange } = props; - const [state, setState] = useState({ - hasShown: false, - }); - - useEffect(() => { - if (shouldShow) { - const handleClickOutside = (event: MouseEvent) => { - event.stopPropagation(); - const emojiWrapper = document.querySelector(".emoji-picker-react"); - const isContains = emojiWrapper?.contains(event.target as Node); - if (!isContains) { - onShouldShowEmojiPickerChange(false); - } - }; - - window.addEventListener("click", handleClickOutside, { - capture: true, - once: true, - }); - setState({ - hasShown: true, - }); - } - }, [shouldShow]); - - return ( - <> - {state.hasShown && ( -
- -
- )} - - ); -}; - -export default EmojiPicker; diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index 8a0409de..b8afe3d4 100644 --- a/web/src/components/MemoEditor.tsx +++ b/web/src/components/MemoEditor.tsx @@ -1,4 +1,3 @@ -import { IEmojiData } from "emoji-picker-react"; import { toLower } from "lodash"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; @@ -11,7 +10,6 @@ import Icon from "./Icon"; import toastHelper from "./Toast"; import Selector from "./common/Selector"; import Editor, { EditorRefActions } from "./Editor/Editor"; -import EmojiPicker from "./Editor/EmojiPicker"; import ResourceIcon from "./ResourceIcon"; import showResourcesSelectorDialog from "./ResourcesSelectorDialog"; import "../less/memo-editor.less"; @@ -242,10 +240,6 @@ const MemoEditor = () => { setEditorContentCache(content); }; - const handleEmojiPickerBtnClick = () => { - handleChangeShouldShowEmojiPicker(!state.shouldShowEmojiPicker); - }; - const handleCheckBoxBtnClick = () => { if (!editorRef.current) { return; @@ -320,22 +314,6 @@ const MemoEditor = () => { } }, []); - const handleChangeShouldShowEmojiPicker = (status: boolean) => { - setState({ - ...state, - shouldShowEmojiPicker: status, - }); - }; - - const handleEmojiClick = (_: any, emojiObject: IEmojiData) => { - if (!editorRef.current) { - return; - } - - editorRef.current.insertText(`${emojiObject.emoji}`); - handleChangeShouldShowEmojiPicker(false); - }; - const handleDeleteResource = async (resourceId: ResourceId) => { editorStateService.setResourceList(editorState.resourceList.filter((resource) => resource.id !== resourceId)); if (editorState.editMemoId) { @@ -401,9 +379,6 @@ const MemoEditor = () => { )} - @@ -427,11 +402,6 @@ const MemoEditor = () => { - {editorState.resourceList && editorState.resourceList.length > 0 && ( diff --git a/web/src/css/tailwind.css b/web/src/css/tailwind.css index 739f834e..c7adb5b6 100644 --- a/web/src/css/tailwind.css +++ b/web/src/css/tailwind.css @@ -20,7 +20,7 @@ } .btn-primary { - @apply btn-normal border-transparent bg-green-600 text-white dark:text-gray-200; + @apply btn-normal border-transparent bg-green-600 text-white dark:border-transparent dark:text-gray-200; } .btn-danger { @@ -32,6 +32,6 @@ } .input-text { - @apply w-full px-3 py-2 leading-6 text-sm rounded border dark:border-zinc-700 dark:bg-zinc-800; + @apply w-full px-3 py-2 leading-6 text-sm dark:text-gray-200 rounded border focus:outline focus:outline-2 dark:border-zinc-700 dark:bg-zinc-800; } } diff --git a/web/src/less/auth.less b/web/src/less/auth.less index c9a99b8b..73afbd73 100644 --- a/web/src/less/auth.less +++ b/web/src/less/auth.less @@ -45,7 +45,7 @@ @apply py-2; > input { - @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80 dark:bg-zinc-800 dark:text-gray-200 dark:border-gray-600; + @apply w-full py-3 px-3 text-base rounded-lg; } } } diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less index 45fe0e7f..0437b5c6 100644 --- a/web/src/less/memo-editor.less +++ b/web/src/less/memo-editor.less @@ -17,11 +17,6 @@ top: unset !important; } - .emoji-picker-react { - @apply !bottom-8; - top: unset !important; - } - .items-wrapper { @apply mb-1 bottom-full top-auto; } @@ -96,14 +91,6 @@ @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2; } } - - .emoji-picker-react { - @apply absolute shadow left-6 top-8; - - li.emoji::before { - @apply hidden; - } - } } } diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx index 693380ca..5eb5cf10 100644 --- a/web/src/pages/Auth.tsx +++ b/web/src/pages/Auth.tsx @@ -126,11 +126,11 @@ const Auth = () => {
{t("common.username")} - +
{t("common.password")} - +
diff --git a/web/yarn.lock b/web/yarn.lock index 08584f08..8a38bb5f 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1736,11 +1736,6 @@ emittery@^0.10.2: resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933" integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw== -emoji-picker-react@^3.6.2: - version "3.6.2" - resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-3.6.2.tgz#e414971bf9421b0825484f3b82623fef995c3c4b" - integrity sha512-PK3dfljGxeyN8fDz2FAsDYKPYGgo6/tkRyzJjLVaw0fksJg7jA3OJPIlHq2IIzTmlC/NKhcI/oaf0uEo5azYGA== - emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"