Merge pull request #383 from answerdev/feat/1.1.0/ui

Feat/1.1.0/UI

ui/src/components/TagSelector/index.tsx

@@ -110,6 +110,11 @@ const TagSelector: FC<IProps> = ({
     fetchTags(searchValue);
   }, [visibleMenu]);
 
+  const resetSearch = () => {
+    setCurrentIndex(0);
+    setSearchValue('');
+    setTags([]);
+  };
   const handleClick = (val: Type.Tag) => {
     const findIndex = initialValue.findIndex(
       (item) => item.slug_name.toLowerCase() === val.slug_name.toLowerCase(),
@@ -130,6 +135,7 @@ const TagSelector: FC<IProps> = ({
         setRepeatIndex(-1);
       }, 2000);
     }
+    resetSearch();
   };
 
   const handleRemove = (val: Type.Tag) => {
@@ -178,9 +184,9 @@ const TagSelector: FC<IProps> = ({
       }
       if (currentIndex <= tags.length - 1) {
         handleClick(tags[currentIndex]);
-        if (currentIndex === tags.length - 1 && currentIndex > 0) {
-          setCurrentIndex(currentIndex - 1);
-        }
+        // if (currentIndex === tags.length - 1 && currentIndex > 0) {
+        //   setCurrentIndex(currentIndex - 1);
+        // }
       }
     }
   };

ui/src/pages/Install/index.tsx

@@ -10,7 +10,7 @@ import {
   installBaseInfo,
   checkConfigFileExists,
 } from '@/services';
-import { Storage, handleFormError } from '@/utils';
+import { Storage, handleFormError, scrollToDocTop } from '@/utils';
 import { CURRENT_LANG_STORAGE_KEY } from '@/common/constants';
 
 import {
@@ -109,7 +109,7 @@ const Index: FC = () => {
   };
 
   const handleErr = (data) => {
-    window.scrollTo(0, 0);
+    scrollToDocTop();
     setErrorData(data);
   };
 

ui/src/pages/Questions/Detail/components/InviteToAnswer/PeopleDropdown.scss

@@ -1,6 +1,6 @@
 .people-dropdown {
   .dropdown-menu {
-    min-width: 15rem;
+    width: 15rem;
   }
 
   .dropdown-item.active {

ui/src/pages/Questions/Detail/components/InviteToAnswer/PeopleDropdown.tsx

@@ -59,12 +59,10 @@ const Index: FC<Props> = ({
     searchPeople(s);
   };
 
-  const updateCurrentIndex = (pl: number) => {
-    let curIndex = currentIndex;
-    if (currentIndex >= pl) {
-      curIndex = Math.max(pl - 1, 0);
-    }
-    setCurrentIndex(curIndex);
+  const resetSearch = () => {
+    setCurrentIndex(0);
+    setSearchValue('');
+    setPeopleList([]);
   };
 
   const handleSelect = (idx) => {
@@ -73,9 +71,10 @@ const Index: FC<Props> = ({
     }
     const people = peopleList[idx];
     if (people) {
-      updateCurrentIndex(peopleList.length - 1);
       onSelect(people);
     }
+
+    resetSearch();
   };
 
   const handleKeyDown = (evt) => {
@@ -115,7 +114,6 @@ const Index: FC<Props> = ({
   return visible ? (
     <Dropdown
       className="d-inline-flex people-dropdown"
-      align="end"
       onSelect={handleSelect}
       onKeyDown={handleKeyDown}
       onToggle={setToggleState}>
@@ -147,8 +145,12 @@ const Index: FC<Props> = ({
               className={idx === 0 ? 'mt-2' : ''}>
               <div className="d-flex align-items-center text-nowrap">
                 <Avatar avatar={p.avatar} size="24" className="rounded-1" />
-                <span className="mx-2">{p.display_name}</span>
-                <small className="text-secondary">@{p.username}</small>
+                <div className="d-flex flex-wrap text-truncate">
+                  <span className="ms-2 text-truncate">{p.display_name}</span>
+                  <small className="text-secondary text-truncate ms-2">
+                    @{p.username}
+                  </small>
+                </div>
               </div>
             </Dropdown.Item>
           );

ui/src/pages/Questions/Detail/components/InviteToAnswer/index.tsx

@@ -115,7 +115,11 @@ const Index: FC<Props> = ({ questionId, readOnly = false }) => {
                   className="m-1 d-inline-flex flex-nowrap"
                   size="sm"
                   variant="outline-secondary">
-                  <Avatar avatar={user.avatar} size="20" />
+                  <Avatar
+                    avatar={user.avatar}
+                    size="20"
+                    className="rounded-1"
+                  />
                   <span className="text-nowrap ms-2">{user.display_name}</span>
                   {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
                   <span

ui/src/pages/Questions/Detail/index.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Pagination, CustomSidebar } from '@/components';
 import { loggedUserInfoStore, toastStore } from '@/stores';
-import { scrollToElementTop } from '@/utils';
+import { scrollToElementTop, scrollToDocTop } from '@/utils';
 import { usePageTags, usePageUsers } from '@/hooks';
 import type {
   ListResult,
@@ -158,7 +158,7 @@ const Index = () => {
       return;
     }
     if (type === 'default') {
-      window.scrollTo(0, 0);
+      scrollToDocTop();
       getDetail();
       return;
     }
@@ -183,7 +183,7 @@ const Index = () => {
     if (!qid) {
       return;
     }
-    window.scrollTo(0, 0);
+    scrollToDocTop();
     getDetail();
     requestAnswers();
   }, [qid]);

ui/src/pages/Review/index.tsx

@@ -7,6 +7,7 @@ import { usePageTags } from '@/hooks';
 import { BaseUserCard, FormatTime, Empty, DiffContent } from '@/components';
 import { getReviewList, revisionAudit } from '@/services';
 import { pathFactory } from '@/router/pathFactory';
+import { scrollToDocTop } from '@/utils';
 import type * as Type from '@/common/interface';
 
 const Index: FC = () => {
@@ -39,7 +40,7 @@ const Index: FC = () => {
       setNoTasks(true);
     }
     setTimeout(() => {
-      window.scrollTo({ top: 0 });
+      scrollToDocTop();
     }, 150);
   };
   const queryNextOne = (pageNumber) => {

ui/src/pages/Tags/Detail/index.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/services';
 import QuestionList, { QUESTION_ORDER_KEYS } from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
-import { escapeRemove, guard, Storage } from '@/utils';
+import { escapeRemove, guard, Storage, scrollToDocTop } from '@/utils';
 import { pathFactory } from '@/router/pathFactory';
 import { QUESTIONS_ORDER_STORAGE_KEY } from '@/common/constants';
 
@@ -60,7 +60,7 @@ const Index: FC = () => {
 
   useEffect(() => {
     if (!listLoading) {
-      window.scrollTo(0, 0);
+      scrollToDocTop();
     }
   }, [listLoading]);
 

ui/src/utils/common.ts

@@ -36,6 +36,7 @@ function scrollToElementTop(element) {
 
   window.scrollTo({
     top: offsetPosition,
+    behavior: 'instant' as ScrollBehavior,
   });
 }
 
@@ -43,7 +44,8 @@ const scrollToDocTop = () => {
   setTimeout(() => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth',
+      left: 0,
+      behavior: 'instant' as ScrollBehavior,
     });
   });
 };